FE 'tkGooie' Utilities'SYSTEMtools' group
A Meters for
|
This GUI interface uses 2 MEDIUM-sized background images --- according to radiobuttons across the top of GUI. --- The meter on the left shows memory usage and the meter on the right shows swap usage. |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'SYSTEMtools' Page >
This
'Meters_forMemoryAndSwap_ HiDefBkgdImg'
tkGooie code Page
set aRimgBkgd(1) "meter_background_A07_blue-blackDisk_blue-hilitedEdge_blackBkgd"
set aRticsYorN(1) "N"
set aRcenterX(1) 0.5
set aRcenterY(1) 0.5
set aRradiusArc(1) 0.35
set aRinORout(1) "in"
set aRhexcolorText(1) "#ffffff"
set aRhexcolorTics(1) "#ffffff"
set aRimgPointer(1) "bullet_earth_whiteOnBlue_transp_25x25"
set aRimgCornerFeature(1) "screwheadPhillips_shinyMetal_transp_32x32"
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 S-M-L radiobuttons on the GUI, the suffix '_SMALL' or '_MEDIUM' or '_LARGE' is added to this name. 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 of 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 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 the background 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
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 oval,arc,line,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 On the basis of these design goals, I ended up with a GUI with Tk 'label', 'button', 'radiobutton', 'checkbutton', and 'scale' widgets --- and a multitude of theme possibilities (say, ten or more) --- as seen in the following images. Below is an image of the GUI as it appears on startup --- with the S/M/L radiobuttons defaulted to Small, and the theme number defaulted to one, and the several theme-features checkbuttons turned on. |
|
Here is the GUI after clicking on the 'M' (Medium) radiobutton. |
|
Here is the GUI after switching OFF the 'DrawTicLabels' checkbutton. |
|
Here is the GUI after switching OFF the 'DrawTicsArc' checkbutton. |
|
Here is the GUI after switching OFF the 'CornerFeatures' checkbutton. |
|
Below is the 'Small' image that was used for the background --- along with links to the 'Medium' and 'Large' sized versions. |
|
Not only can one use high-quality meter backgrounds like the one above, but one can try other Small/Medium/Large images like the nine 'Small' ones shown below --- with links to Medium and Large images. |
|
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 following. I also decided to use one size of 'pointer' for a given theme, rather than use S/M/L sizes. |
|
Similarly, for this 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. Here are some sample corner features. |
|
Of course, the Tk script could be rather easily changed to accomodate S/M/L 'pointers' and 'corner_features'. --- Sample count As mentioned on the 'tachometer-style-meter' pages, 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 'pointer' and the 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. --- 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 --- with the 'Small' sized image. The memory and swap data shown initially is based on an initial execution of the shell script that extracts data from the 'free' command. (Of course, the shell script could easily be changed to get the data via another command such as 'cat /proc/meminfo'.) You can easily change various defaults for the initial appearance of the GUI by changing some 'set' statements in the 'Additonal GUI Initialization' section at the bottom of the Tk script. --- 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 created 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 a Tk script donated to the Tcler's Wiki on a page originally titled
'Rotate TkPhoto Image 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 well that would work out --- performance-wise. Besides that will take more development time that I would prefer to devote to other projects at this time. I also decided to avoid the alternative of making about 180 to 360 needle files, at various angles --- for each style of needle image for the themes. ---
Another approach to making 'pointers': 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.
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 GUI IMAGE: When you see a GUI 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 captured GUI window image. (The image could also be down-sized with the image 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 memory-and-swap usage' graphical 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 As in all my scripts that use the 'pack' geometry manager (which is all of my 100-plus Tk scripts, so far), I provide the four main 'pack' parameters:
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, button, radiobutton, and checkbutton 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 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. The main procs are as follows. |
'make_meters' - to draw meter(s) within Tk canvas(es).
The size of the 2 canvases 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_memory_and swap.sh' script
to get data to position the 2 pointers.
'update_one_pointer' - to place one 'pointer' on a specified meter/canvas.
Called by 'update_pointers' to update each of the
pointers on the 2 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, for example, on
changing the sample rate with the sample-rate scale widget.
'popup_msgVarWithScroll' - to show the HELPtext var. Called by the 'Help' button.
|
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 people bouncing around on a stage muttering 'words of shizdom' into a microphone that must be very dizzy. Take a break from those videos and try installing-running-enhancing the following code --- for shizzle. The Tcl-Tk script CODE Here is a link to CODE for the script 'meters_memory-swap_hidef-image.tk'. The shell script (the 'wrapee') : Here is a link to CODE for the SHELL script called by this Tk script. This is the same script that I supplied on the page
'A Tachometer-style Meter --- This is a wrapper script for the 'free' command. 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 vs. 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. I use 'GIFs' and 'PNGs' sub-directories of the 'meter_backgrounds', 'pointers', and 'corner_features' subdirectories. Anyone using Tcl-Tk 8.6 can use the 'PNGs' image directories by setting the 'imgSUFFIX' variable to 'png' --- and by changing 3 'DIR' variables of the Tk script to use the 'PNGs' subdirectory rather than the 'GIFs' subdirectory. 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/tkMemSwapUsage. Make 3 subdirectories of that directory ---
--- 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. A rather large set of suitable PNG and GIF image files will be available in future releases of the FE 'tkGooies' system. In the future, I plan to put this hi-def memory-and-swap-usage utility (along with about about 100-plus other mini-utilities --- 'apps') into the 'tkGooies' menu system --- using Tk 'toolchests' to provide the menus. When I post that 'tkGooies' system release on the www.freedomenv.com software site, that system will contain the GIF and PNG files that were used for the 'themes' shown above --- as well as image files for many more 'themes'.
UPDATE: In the 'tkGooies' system, along with GIF files, I may 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 (typical) 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* 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, from 'mtpaint', 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 many 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 HI-DEF METER UTILITIES: I have returned to the tachometer-style meters that I made for
and made 'high-definition' versions of those system monitoring apps. That code will be published in these 'tkGooies' code-pages. 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 above on 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. If I ever feel I have the time to experiment with needle-rotating, I may try the rotate-image-code 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. --- 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 sets the meter background image. That code adds '_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 bullet-style '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' ('one-size-fits-all') pointer and corner-feature images, for LARGE background images, some of the pointers and corner-features MAY look rather tiny on the large background. 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. This would involve some logic deciding whether to remove or add some bullets, by (essentially) comparing the current two %-usage values (for memory and swap) to the previous two --- 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 'Memory and Swap history'. This kind of display has the advantage of preserving the recent history of the percent-usage of memory and swap --- 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 simply single pixels (to create a 'thin-line-type' plot). Alternatively, one could use 'create image' and move images horizontally across the canvas one pixel at a time --- adding a vertical line of pixels on one side of the canvas each of those times. This 'history display' technique may be especially suitable for an alternative version of 3 of the 4 apps that I have implemented:
apps. Those are the 3 types of activity shown in the 'Resources' panel of the 'gnome-system-monitor' utility. (The traveling-curve type of usage display is typically not used for 'file-system-usage', because that usage ordinarily does not change much --- unless you are storing huge files all of a sudden.) 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 'theme-scale' widget so that when the user releases MB1 (mouse button 1) after moving 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' widget. Within a fraction of a second after releasing MB1 (after making a change to the theme integer in the scale widget), the entire meter is redrawn --- including
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
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.
< Go to Top of Page, above. >Page history:
This FE web page was created 2015 Nov 09.
NOTE: If I ever do so, as a backup and alternative to this page, I plan to add a link to that Wiki page here. |