FE 'tkGooie' Utilities

'SYSTEMtools' group

A Meter for
CPU(s) Usage
Utility

(using HiDef
Background Images)

(FE = Freedom Environment)

GUI interface that is
using a MEDIUM-sized
background image ---
according to radiobuttons
across the top of GUI.

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'SYSTEMtools' Menu >

This
'Meter_forCPUsUsage _HiDefBkgdImg'
tkGooie code Page

INTRODUCTION to Tcl-Tk script
'Meter_forCPUsUsage_HiDefBkgdImg'

On 2013dec05, I posted code at a wiki.tcl.tk page titled 'A Tachometer-style Meter --- for CPU Usage' to make (and use) a 'tachometer style' meter.

The meter appearance was based on a meter style for which Marco Maggi provided a demo script at wiki.tcl.tk/9107 back in 2003.

Those meters (Marco's and mine) were built using 'create arc', 'create line', and 'create text' commands on a Tk canvas.

At the bottom of my page, 'A Tachometer-style Meter --- for CPU Usage', I mentioned that I may try using a 'create image' technique to make HD (high-definition) meters.

That is the subject of this page (code and screenshots below).

Like the CPU-meter implementation posted on the wiki page 'A Tachometer-style Meter --- for CPU Usage', this implementation provides a Tk script that is a 'wrapper' for a shell script that provides 3 different kinds of output from the 'cat /proc/stat' command.

See that wiki.tcl.tk page --- or a copy of that page on this site --- for an example and discussion of the output from 'cat /proc/stat' (or see comments in the shell script code below).

As was noted on that wiki page, this utility is probably usable on BSD and Mac (and Unix) systems --- perhaps with some changes to the shell script, if necessary.

For almost any Linux system with an 8.x Tcl-Tk 'wish' interpreter installed, this utility should be usable with essentially no changes.


A DESIGN for the Tk GUI

One Meter:

I explained on the wiki page 'A Tachometer-style Meter --- for CPU Usage' why I decided to go with a single meter on the GUI --- rather than 2 meters, like the 2 meters in the 'memory-and-swap' and the 'network-activity' Tk GUI's that I had devised before --- as seen on the wiki pages

and

I patterned the CPU usage GUI on the single-meter GUI that I used for the 'file-system-usage' Tk GUI that I devised before --- as seen on the wiki.tcl.tk page 'A Tachometer-style Meter --- for File System Usage'.

---

A 'Show CPUs' button:

Besides showing a 'percent-usage' meter (on a Tk canvas on the GUI), I wanted to provide a means for the user to query the CPU ID's available on the computer --- and a means for the user to choose one of the CPU-ID's to monitor.

So, like I did for the 'tachometer-style' meter for CPU usage, I decided to put a 'Show CPUs' button on the GUI --- with an entry field next to it, for a CPU-ID.

---

A Sample-Rate 'scale' widget:

Like I did for the 'tachometer-style' meter for CPU usage, I decided to allow a wait-time between data samples to be set --- by a 'scale' widget on the GUI.

I then implemented a periodic-sampling ability by use of the Tcl 'after' command, in the form

after $WAITmillisecs update_pointers

as explained on the 'A Tachometer-style Meter --- for CPU Usage' page.

---

'Refresh' button:

I also wanted to supply a 'Refresh' button on the GUI, so that the user can request AT ANY TIME, a new query of the usage data for the CPU-ID being monitored.

This is especially helpful if you have the sampling rate set at some value and you decide that the sampling interval is shorter or longer than needed. You can intervene immediately to change the sampling interval.

---

'Report' button:

In case there is more than one CPU that is quite active, I wanted to supply a 'Report' button on the GUI, so that the user can see, at any time, the usage of ALL the CPU's on the computer --- even a monster computer with 24 or more CPU's.

---

Meter Background:

In putting together the code for this GUI, instead of using the 'shadow-circle' technique of Marco Maggi to make nice looking meters, I collected some nice background images and used 'create image' to make a background for the meters.

---

Tics-Arc and Tic-Marks:

I decided to use 'create line' to make optional tic-marks (useful if tic marks are not included on the background image).

And I decided to use 'create arc', to (optionally) provide a drawing of the arc along which the tic marks are located.

Furthermore, I decided to use 'create text' to (optionally) provide numeric labels for the tic marks --- and to place a couple of text strings on the face of the meter, above and below the center point of the arc.

---

Themes

Since I am using 'create image' to create the meter backgrounds, that opens up the possibility of giving the user a choice of background images --- and 'pointer' images (corresponding to the 'needle' on the Maggi-style meter) --- and 'corner-feature' images (corresponding to the 'rivets' on the Maggi-style meter).

In fact, I decided to allow an essentially unlimited set of themes --- by using Tcl arrays to hold a set of parameters for each theme.

Here is an example of the 'set' statements and array names that are used to define a theme indexed by the integer 1:



  set aRimgBkgd(1) "meter_background_A01_3DsphericalPuzzle-whiteBkgd"
  set aRticsYorN(1) "N"
  set aRcenterX(1) 0.50
  set aRcenterY(1) 0.50
  set aRradiusArc(1) 0.35
  set aRinORout(1) "in"
  set aRhexcolorText(1) "#000000"
  set aRhexcolorTics(1) "#000000"
  set aRimgPointer(1) "bullet_earth_whiteOnBlue_transp_25x25"
  set aRimgCornerFeature(1) "screwheadHorizSlot_1_transp_24x24"
  set aRstartAngle(1) -70
  set aRextentAngle(1) 320


The array 'aRimgBkgd' holds the 'prefix name' of the background image file for the theme.

According to the setting of the S-M-L radiobuttons on the GUI, the suffix '_SMALL' or '_MEDIUM' or '_LARGE' is added to this name.

And a file suffix of '.gif' or '.png' is added to get the complete name of the file to be used for the meter background.

The use of '.gif' or '.png' is determined by an 'imgSUFFIX' variable, mentioned further below, in relation to naming the 'pointer' and 'corner feature' image files.

The array 'aRticsYorN' is used to indicate whether the background image already has tic marks on it.

If it is set to 'Y', then no tick marks (nor a circular arc) need to be drawn by the 'make_one_meter' proc.

The factors 'aRcenterX' and 'aRcenterY' (between 0 and 1) are used to help locate the center of the arc-circle, especially in those cases when the background image is not symmetric --- in other words, when a natural center point for the image is 'off-center'.

The array 'aRradiusArc' is used to adjust the radius at which the tick marks and tick labels are drawn.

The array 'aRinORout' is used to determine whether this theme should draw the tick marks and tick labels to the outside of the arc-circle or the inside of the arc-circle.

The array 'aRhexcolorText' is used to set the color of the tick mark labels and other text labels on the meter.

The array 'aRhexcolorTics' is used to set the color of the tick marks.

The array 'aRimgPointer' holds the name of the 'pointer' image file, minus its suffix --- '.gif' or '.png'.

The array 'aRimgCornerFeature' holds the name of the 'corner feature' image file, minus its suffix.

Generally, the person setting up theme files will want to use transparent GIF's or transparent PNG's for these image files.

There is an 'imgSUFFIX' variable, in the 'Additional GUI Initialization' section at the bottom of the Tk script, that can be set to 'gif' or 'png', to determine which type of image file the user is using for the 'aRimgBkgd' and 'aRimgPointer' and 'aRimgCornerFeature' files.

The arrays 'aRstartAngle' and 'aRextentAngle' are used to specify a start-angle and extent-angle for drawing the tic-marks arc.

The start angle is specified relative to a horizontal, right-pointing x-axis.

---

Resizing the meter

In my implementation of the Marco-Maggi-like meter, I spent quite a bit of effort in converting Maggi's procs

  • FROM using hard-coded numbers for making the meters and their needles

  • TO using variables that are set based on a query on the current size of a frame or canvas widget.

So the user is able to resize the window and click on the 'Refresh' button to get a bigger version of the meter and the needle position.

One advantage of building the entire meter with 'create line,arc,text' is that the meter can be resized within a 'continuum' of sizes by using some simple arithmetic.

For reasons outlined at the bottom of the 'A Tachometer-style Meter --- for CPU Usage' page, I provide small/medium/large radiobuttons on the GUI --- by which the user can choose 3 different image sizes, from among the images for a user-selected theme.


SOME GUI IMAGES of implementation of the design

On the basis of these goals, I ended up with a GUI with Tk 'label', 'button', 'entry', 'radiobutton', 'checkbutton', and 'scale' widgets --- and a multitude of theme possibilities --- as seen in the following images.

Not only can one use high-quality meter backgrounds like the one above, but one can use abstract images like the one below.

The 8-ball is the 'pointer' on this meter.

And one can take a more organic approach, like in the following image.

Almost any image with a circular solid colored background in the middle is a good candidate for the meter background in this utility --- as the following two images demonstrate.


Images for Meter Backgrounds

Below are some Small-Medium-Large images for meter backgrounds.


Medium   Large

Not only can one use high-quality meter backgrounds like the glossy one above, but one can choose from other Small-Medium-Large images like the samples below.


Medium   Large


Medium   Large


Medium   Large


Medium   Large


Medium   Large


Medium   Large


Medium   Large


Medium   Large


Medium   Large


'Pointer' for the meters

For this implementation, rather than try to use 'needle' pointers and incur extra processing dealing with orienting the needle at any of about 300 degrees or more around the meter arc, I decided to use blunt 'bullet' pointers like the images following.

    I also decided to use one size of 'pointer' for a given theme, rather than use S/M/L sizes.

You can 'right click' on an image and choose to download it to your computing device.


'Corner features' for the meters

For this CPU-meter implementation, rather than try to use 'corner features' (rivets, screw-heads, and the like) of Small/Medium/Large sizes, I decided to use one size for any theme chosen.

Below are some sample corner features.

Many of these images are rather crude. Better quality images may be placed here in the future.


Of course, the Tk script could be rather easily changed to accomodate S/M/L 'pointers' and 'corner_features'.


'user' and 'system' percents

As I mentioned on the 'tachometer-style-meter' page for CPU usage, typically, there are not many 'ticks' accumulating in 'nice mode'.

So most of the 'activity' of a CPU is accumulating in the 'user' and 'system' modes.

I show the '%user' and '%system' numbers stacked above each other in a couple of 'label' widget lines on the GUI.

Their sum will typically be the same as the %CPU value pointed to by the 'needle'.

---

Sample count

Also as mentioned on the 'tachometer-style-meter' page, the integer shown just to the right of the 'scale' widget is a sample-count.

I found that it is helpful to have this count displayed in cases when the needle and numbers on the GUI are not changing perceptibly --- so that the user is assured that the sampling is taking place, and at the rate that is currently requested.

---

CPU ID's

The 'ShowCPUs' button on the GUI can be used to show the available CPU-ID's.

A small window pops up showing a list of CPU-ID's.

An image on the 'tachometer-style-meter' page demonstrates that.

Also, there is an image on the 'tachometer-style-meter' page that shows that one can change the 'MonitorCPU' entry field so that a different CPU-ID is monitored.

In that image the CPU-ID 'cpu1' was entered --- the second of four CPU's on my desktop computer.

On my computer, there were 5 CPU-ID's --- cpu, cpu0, cpu1, cpu2, cpu3.

The 'cpu' ID represents an average/mixture of the 4 CPU's.

---

The initial display

In making the Small, Medium, and Large images for each 'theme', I made the 'Small' image about 200x200 pixels, the 'Medium' about 350x350, and the 'Large' about 500x500 pixels.

When the GUI first comes up, the meter is defaulted to showing theme number 1, the 'Small' sized image.

The CPU data shown initially is based on an initial couple of executions of the 'cat /proc/stat' command --- from which data for the 'cpu' CPU-ID is extracted.

---

The "Pointer"

In the Maggi-style meter, a 'needle' was drawn using 'create line'.

I had hoped to come up with a technique to avoid the 'aliasing' effect on the needle --- but I did not devise a successful technique for any of the 4 Maggi-tachometer-style-meter scripts that I have done so far.

I considered trying to collect or create high-definition needle images and try to place them on the canvas by rotating the image at suitable angles.

However, I decided to avoid the processing in doing that.

I could try building on the rotate-image code that I used in the Tk script presented on a page originally titled

'Rotate TkPhoto Image - via GUI with File and Bkgd-Color Select - 2 scrollable canvases'

--- and add the code necessary to deal with transparency data (which Tk supports) in a GIF (or PNG) image.

But I have some doubts about how successful I may be in doing that super-efficiently.

Besides that will take a lot more development time.

I also decided to avoid the alternative of making about 320 needles, at various angles --- for each style of needle image for the themes.

---

Another approach to making 'pointers':
(other than 'needles')

In searching for ideas for meter background images, I stumbled upon some images of 'knobs' where the position of the rotary knob was indicated by lighted 'spots' around the knob.

After seeing these images, I decided that I could use images like 'bullet' icons to indicate a position around the arc of the meter.

The Tk canvas supports transparency, so using small transparent GIF's (or PNG's) is feasible.

So besides a background image for the meter, I have allowed for a 'pointer' image and a 'corner feature' image (like a rivet or screw head) to be supplied in each 'theme'.

And if a 'pointer' image is not supplied for a theme, I fall back to using code like that used in the 'tachometer-style-meter' Tk script --- to draw a red needle with 'create line'.


CAPTURING THE GENERATED IMAGE:

When you get an image that you want to save, a screen/window capture utility (like 'gnome-screenshot' on Linux) can be used to capture the GUI image in a PNG or GIF file, say.

If necessary, an image editor (like 'mtpaint' on Linux) can be used to crop the window capture image.

    (The image could also be down-sized with the editor --- say, to make a smaller image suitable for presentation in an email or on a web page.)

This is the technique that I used to prepare the images that I posted above, to show some GUI features of this utility.

However, I replaced the relatively large PNG files that came from the 'mtpaint' editing step with smaller 'crushed' files that were created by the 'pngcrush' command.


DESCRIPTION OF THE CODE

Below, I provide the Tk script code for this 'high-definition CPU-usage' display utility.

I follow my usual 'canonical' structure for Tk code for this Tk script:



  0) Set general window & widget parms (win-name, win-position,
     win-color-scheme, fonts, widget-geometry-parms, win-size-control,
     text-array-for-labels-etc).

  1a) Define ALL frames (and sub-frames, if any).
  1b) Pack   ALL frames and sub-frames.

  2) Define & pack all widgets in the frames, frame by frame.
              Within each frame, define ALL the widgets.
              Then pack the widgets.

  3) Define keyboard and mouse/touchpad/touch-sensitive-screen action
     BINDINGS, if needed.

  4) Define PROCS, if needed.

  5) Additional GUI initialization (typically with one or more of
     the procs), if needed.


This Tk coding structure is discussed in more detail on the page A Canonical Structure for Tk Code --- and variations.

This structure makes it easy for me to find code sections --- while generating and testing a Tk script, and when looking for code snippets to include in other scripts (code re-use).

I call your attention to step-zero.

One thing that I have started doing in 2013 is using a text-array variable --- named 'aRtext' --- for text in labels, buttons, and other widgets in the GUI.

This can make it easier for people to internationalize my scripts.

I will be using a text-array like this in most of my scripts in the future.

---

I put the arrays that define the themes just under the code that sets the widget-text strings.

So the themes can be changed or augmented by going to the same section of the code where one can go to alter most of the text strings appearing on the GUI.


Experimenting with the GUI code

As in all my scripts that use the 'pack' geometry manager (which is all of my 100-plus scripts, so far), I provide the four main 'pack' parameters:

  • '-side'
  • '-anchor'
  • '-fill'
  • '-expand'

on all of the 'pack' commands for the frames and widgets.

That helps me when I am initially testing the behavior of a GUI (the various widgets within it) as I resize the main window.

I think that I have used a pretty nice choice of the 'pack' parameters.

In particular ...

The label and button widgets stay fixed in size and relative-location if the window is re-sized --- while the canvas area (without scroll bars) expands/contracts whenever a Small, Medium, or Large image is chosen via the radiobuttons.

You can experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various frames and widgets --- to get the widget behavior that you want.

---

Additional experimentation with the GUI
--- its appearance:

You might want to change the fonts used for the various GUI widgets.

For example, you could change '-weight' from 'bold' to 'normal' --- or '-slant' from 'roman' to 'italic'.

Or change font families.

    In fact, you may NEED to change the font families, because the families I used may not be available on your computer --- and the default font that the 'wish' interpreter chooses may not be very pleasing.

I use variables to set geometry parameters of widgets --- parameters such as border-widths and padding.

And I have included the '-relief' parameter on the definitions of frames and widgets.

Feel free to experiment with those 'appearance' parameters as well.

If you find the gray 'palette' of the GUI is not to your liking, you can change the value of the RGB parameter supplied to the 'tk_setPalette' command near the top of the code.


Some features in the code

There are plenty of comments in the code to describe what most of the code-sections are doing.

You can look at the top of the PROCS section of the code to see a list of the procs used in this script, along with brief descriptions of how they are called and what they do.

The procs are structured to accomodate putting more than one meter on the GUI --- in case someone wants to try that in the future.

The main procs are as follows.



    'make_meters' - to draw meter(s) within Tk canvas(es).

                    The size of the canvas will be determined
                    by the size of the background image, which in
                    turn is determined by the theme-index and
                    the setting of the Small-Medium-Large radiobuttons.

    'make_one_meter'      - to draw one meter. Called by 'make_meters'
                            to make the meter(s).

    'update_pointers'     - to update the 'pointer(s)' on the meter(s).
                            Called initially at the bottom of this script.
                            And called in the 'Refresh' proc.

                            Calls on the 'get_cpu_usage_info.sh' script
                            with the CPU-ID for its single argument.

   'update_one_pointer'  - to place one 'pointer' on a specified meter/canvas.
                           Called by 'update_pointers' to update each of the
                           pointers on the one or more meters.

   'Refresh'             - called by the 'Refresh' button. Runs the procs
                           'make_meters' and 'update_pointers'.

                           In particular, this proc can be used to
                           force the meters to be resized if the user
                           click-releases on one of the S-M-L radiobuttons.
                           And this proc is used whenever the user wants
                           a new start of the sampling, typically on
                           changing the sample rate.

   'Report'              - called by the 'Report' button. This Report proc
                           calls on the 'get_cpu_usage_info.sh' script
                           with the 'all' parameter.

   'show_cpus'           - called by the 'ShowCPUs' button. This proc
                           calls on the 'get_cpu_usage_info.sh' script
                           with the 'cpuslist' parameter.

 'popup_msgVarWithScroll' - to show the HELPtext var. Called by the 'Help' button.
                            Also used by the 'Report' and 'ShowCPUs' procs.


Thanks

Thanks to Marco Maggi whose tachometer-style-meter influenced the making of this meter utility --- with features such as using an arc of tic-marks, and allowing for corner-decorations (rivets in the case of the original Maggi demo code).


Comments in the Code

It is my hope that the copious comments in the code will help Tcl-Tk coding 'newbies' get started in making GUI's like this.

Without the comments, potential young Tcler's might be tempted to return to their iPhones and iPads and iPods --- to watch videos of zombies and vampires and Sasquatch-hunts and ghost-hunts --- and other such brain-eating, life-sapping fare.


The Tcl-Tk script CODE :

Here is a link to CODE for the script

'meter_cpus_usage_hidef-image.tk'.


The shell script (the 'wrapee') :

Here is a link to CODE for the SHELL script called by this Tk script.

'get_cpu_usage_info.sh'

This is a wrapper script for the 'cat /proc /stat' command.

This is the same shell script that I supplied on the page 'A Tachometer-style Meter --- for CPU Usage' --- except that I added a 'percent-idle' column to the 'Report' ('all') option.

This script takes a single string-parameter which can be either 'all' or 'cpuslist' or a CPU-ID ('cpu', 'cpu0', 'cpu1', ...).

You can put this script in the same directory with the Tk script.

The Tk script includes some code (involving the 'argv0' variable) to determine the location of the shell script by extracting the name of the directory in which the Tk script lies.

---

GIF or PNG

The Tk script is written so that it expects the images for the themes to be put in 'meter_backgrounds', 'pointers', and 'corner_features' subdirectories of the directory where the Tk script and the shell script are placed.

Futhermore, the Tk script is written with an 'imgSUFFIX' variable that is set to 'gif'.

In my testing, I used GIF files for the meter backgrounds, and transparent GIF's for the 'pointer' and 'corner feature' images --- because I was using Tcl-Tk 8.5 which supports GIF's but not PNG's.

Anyone using Tcl-Tk 8.6 can put '.png' files in those 3 image directories, and change the 'imgSUFFIX' variable to be 'png'.


A FEW MORE "THEME" EXAMPLES

A black disk and gray-rim theme follows.

The 'pointer' in this case is an 8-ball transparent GIF.

Below is an example with the arc-drawing turned off (and corner features turned off).

The 'pointer' in this case is a blue-and-white earth transparent GIF.

Below is an example suggesting that one could use colorful background images to suggest 'cool' and 'hot' sides of the arc.

Below is an example demonstrating a seasonal theme.

Furthermore, the pumpkin is not centered in this background image.

I used 'centerX' and 'centerY' theme factors to locate the center of the arc --- for all 3 versions of this image (small, medium, and large).

The 'pointer' is a light-bulb transparent GIF, and the drawing of the arc is turned off.

INSTALLING THE FILES:

The Tk script and the shell script can be put in a subdirectory of the user's home directory --- for example:

$HOME/apps/tkCPUusage.

Make 3 subdirectories of that directory --- 'corner_features', 'meter_backgrounds', and 'pointers' --- in which to put the GIF or PNG files for those 3 types of images.

You can right-click in your web browser to download some of the (GIF) images above.

In the future, I plan to put this hi-def CPU-usage utility (along with about 50 to 100 other mini-utilities --- 'apps') in a 'tkGooies' menu system --- using Tk 'toolchests' to provide the menus.

When I post that 'tkGooies' system at the www.freedomenv.com software site, that system may contain the GIF and PNG files that were used for the 'themes' shown above --- as well as image files for many more 'themes'.

    UPDATE:
    The FE 'tkGooies' system was first released in 2015 --- about a year after this CPU-activity script was first released.

At the release of 'tkGooies', along with GIF files, I will probably provide PNG and transparent-PNG files, which are generally of higher quality than the corresponding GIF files --- AND from which it is best to make GIF and transparent-GIF files, scaled to appropriate sizes.

I used the ImageMagick 'convert' command (with an alpha threshold parameter) to make many of the transparent GIF files above from transparent PNG files.


SOME TIPS ON MAKING NICE S-M-L BACKGROUND IMAGES:

In taking a good quality image and scaling it up or down to make the three Small-Medium-Large images, I found that starting with a GIF file was not a good idea.

If the file is already using its limit of about 256 colors, when you scale it up or down, it does not have anymore colors it can turn to in order to make more color shades during the process of averaging the colors of adjacent pixels.

So if you find a nice GIF file that you want to use, convert it to a PNG file first.

I did something like this with the 'mtpaint' image editor.

'mtpaint' has an 'Image > Convert to RGB' toolbar menu option that can be used to convert a loaded GIF file to allow for up to 16 million colors, instead of just 256.

Then I used the 'Image > Scale Canvas...' option to scale the image up or down.

    (I was quite surprised to see that even when scaling the RGB image *UP* by a factor of 2 or more that the quality of the image was usually preserved.)

After scaling the image down (or up), I could then save the file as a GIF.

OR ... I could save as PNG, and then use the ImageMagick 'convert' command to convert the PNG to a GIF.

The conversion-to-GIF usually kept most of the quality that was in the image after the scaling operation.

    (You will get unavoidable 'color banding' when making a GIF from a PNG image with color gradients involving hundreds of color shades.)

With this technique, you can end up with both PNG and GIF files --- and use GIF's with a Tcl-Tk 8.5 'wish' interpreter, and PNG's with a Tcl-Tk 8.6 'wish' interpreter.


MORE METER UTILITIES:

I could return to the 'tachometer-style' meters that I made for

  • memory-and-swap monitoring

  • network activity monitoring

  • file-system space-used monitoring

and make 'high-definition' versions of those system monitoring apps.

    (In 2015 November, I made 'hi-def-image' versions of those utilities. The code and screenshots are posted in other pages of this site.)


ENHANCEMENTS TO CONSIDER

A 'hi-def needle making' technique:

I may try, someday, an image technique to make a high-quality needle that does not suffer from 'the jaggies'.

I do not have a good idea on how to approach that at this time (other than the 2 approaches mentioned near the top of this page --- rotate-image-on-the-fly OR save about 180 to 360 rotated-images of each needle type).

If I stumble across a promising looking technique, I may try to implement it.

Or, if I ever feel I have the time to experiment with this, I may try the rotate-code-enhancement that I mentioned above --- to see if it works fast enough to be used when changing the needle direction on the order of every second or every tenth of a second.

---

Flexible placement of tick marks:

Originally, I hard-coded the angular start and end points of the arc (of tick marks and tick labels).

The arc-drawing started at -70 degrees and went counter-clockwise 320 degrees, ending at +250 degrees.

In other words, I essentially used the same hard-coded values that Marco Maggi used.

In 2015 November, I added a couple of more parameters (arrays) to the themes --- to allow for setting the start and 'extent' angles for each theme.

That comes in handy for one of the examples above --- the one with the rainbow-colored arc on the meter background image.

I can now match the tic-marks-arc to the gradiated-color-arc on the background image of that meter background.

---

Hiding theme parameter widgets:

We could 'hide' the theme parameter widgets --- that is, the S-M-L radiobuttons, the theme-number scale widget, and several check buttons --- by putting a 'SetTheme' button (or checkbutton) on the GUI.

Clicking on that button could cause a Tk frame to appear, containing those widgets.

Clicking on the button again could cause the frame to disappear.

---

S-M-L pointers and S-M-L corner-features:

For this Tk script, I avoided a proliferation of 'pointer' images and 'corner-feature' images by using the same sized 'pointer' and 'corner-feature' images no matter whether a Small, Medium, or Large background image was being shown.

However, on setting the pointer and corner-feature filenames, we could mimic the code that set the meter background image by adding '_SMALL' or '_MEDIUM' or '_LARGE' to the array-filename-prefix of the selected background image file.

That is, we could make '_SMALL', '_MEDIUM', and '_LARGE' files in the 'pointers' and 'corner_features' subdirectories --- and change the code that sets those pointer and corner-feature filenames to add '_SMALL' or '_MEDIUM' or '_LARGE' to their array-filename-prefixes --- depending on the current setting of the S-M-L radiobuttons.

If I were making S-M-L versions of the 'corner-features', I would make them about 10% of the size of the S-M-L versions of the meter-background images --- about 20x20 and 35x35 and 50x50 pixels, respectively.

And, if I were making S-M-L versions of the 'pointers', I would make them no smaller than 7% of the size of the S-M-L versions of the meter-background images --- no smaller than about 14x14 and 24x24 and 35x35 pixels, respectively.

I did not make S-M-L pointers and corner-features, because I was trying to avoid making 3 times more pointer and corner-feature files.

But, by using one-size-only pointer and corner-feature images, for LARGE background images, some of the pointers and corner-features MAY look rather tiny on the large background --- or a pointer or corner-feature may look too large for a SMALL background image.

Note that the 'corner feature' images, like the 'meter background' images, are used in the 'make_one_meter' proc --- while the 'pointer' images are used in the 'update_one_pointer' proc.

Those are the 2 procs that would need to have logic changed to handle the new S-M-L images.

---

An arc of bullet-pointers:

Instead of using a single 'bullet' image as the 'pointer', one could implement an 'arc of bullets', like in the knob images above.

It would be nice to avoid redrawing all the bullets at each meter update.

This would involve some logic deciding whether to remove or add some bullets, by (essentially) comparing the current %-usage value to the previous one --- in the 'update_one_pointer' proc.

---

A 'moving skyscraper silhouette' technique:

As I mentioned at the bottom of the 'A Tachometer-style Meter --- for CPU Usage' page, another type of display that I may try on the Tk canvas is a 'moving mountain-range silhouette' --- which one sees in some 'system monitor' apps, such as 'gnome-system-monitor' (on Linux) -- under the 'Resources' tab, titled 'CPU history'.

This kind of display has the advantage of preserving the recent history of the CPU percentage of one or more CPU's --- for example, about 12 minutes of history across a 360-pixel-wide canvas, if we are sampling about once every 2 seconds.

This type of animated plot could be created with Tk by using a 'create line' technique on the Tk canvas, to plot vertical lines (to create a 'silhouette-type' plot) --- or plot one or a few pixels (to create a 'thin-line-type' plot).

This 'history display' technique may be especially suitable for an alternative version of 3 of the 4 'meter' apps that I have implemented:

  • the 'memory-and-swap',
  • the 'network activity', and
  • the 'CPU activity' apps.

Those are the 3 types of activity shown in the 'Resources' panel of the 'gnome-system-monitor' utility --- in 'CPU history', 'Memory and Swap history', and 'Network history' dynamic plots.


Responsiveness of the GUI to theme changes

I should point out that I was pleased by how fast the Tk GUI responded when I changed themes via the 'theme-scale' widget.

I put a 'bind' command on the 'scale' widget so that when the user releases MB1 (mouse button 1) after sliding the slider button to a new integer value --- the 'Refresh' proc is run to re-build the meter background and start updating the 'pointer' again, according to the current setting of the 'sample-interval-scale'.

Within a fraction of a second after releasing MB1 (after making a change to the theme integer), the entire meter is redrawn --- including

  • meter background image
  • tic marks
  • tic mark arc
  • tic labels
  • the 4 corner features,
  • various text labels, and
  • the 'pointer'.

Similarly, a 'bind' command was put on the SML radiobuttons --- and within a fraction of a second after releasing MB1 on one of the radiobuttons, the meter is redrawn using the new size of background image.

(Thank you, wonderful 'wish' interpreter --- and Gnu/Linux scripting.)

---

Oh, the possibilities we have with Tk.

The possibilities are endless ... I say to the 'Tcl is dead' nay-sayers ... those 'nattering nabobs of negativism'.

    For the youngsters reading this, the phrase 'nattering nabobs of negativism' was used by Spiro Agnew in 1970, during the Richard Nixon era.


IN CONCLUSION

As I have said on other code-donation pages on this FE web site ...

There's a lot to like about a utility that is 'free freedom' --- that is, no-cost and open-source so that you can modify/enhance/fix it without having to wait for someone else to do it for you (which may be never).

A BIG THANK YOU to Ousterhout for starting Tcl-Tk, and a BIG THANK YOU to the Tcl-Tk developers and maintainers who have kept the simply MAH-velous 'wish' interpreter going.

Bottom of this web page for
presenting Tcl-Tk and script code for
a Meter for CPU(s) Usage
(using a HiDef Background Image)

--- a utility in the FE 'tkGooies' system,
in the 'SYSTEMtools' group.

To return to a previously visited web page location, click on the Back button of your web browser a sufficient number of times.

OR, use the History-list option of your web browser.

OR ...

< Go to Top of Page, above. >

Page history:

The code was created in 2013 --- and posted 2013 Dec 21 at http://wiki.tcl.tk/39110.

This FE web page was created 2014 May 09.
(as a backup and alternative to the wiki.tcl.tk page)

This page was changed 2015 Oct 05.
(Small changes.)

Page was changed 2015 Nov 11.
(Added 'aRstartAngle' and 'aRextentAngle' arrays to the Tk script. Also added links on this page to Medium and Large meter background images.)

Page was changed 2019 Mar 07.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jul 05.
(Specified image widths in percents to size the images according to width of the browser window. Also added some web links.)

Page was changed 2024 Oct 19.
(Changed links to other web pages so they load in a separate window or tab so that this page remains available in its window or tab.)


NOTE:
The code here MAY BECOME more 'up-to-date' than the code posted on the Tcler's Wiki ---
wiki.tcl-lang.org --- formerly wiki.tcl.tk.