FE 'tkGooie' Utilities

'SELECTORtools' group

tkAtom And Property Selector viaList

(where 'property' can be
atomic weight,
melting point, boiling point, abundance, etc.)

(FE = Freedom Environment)

GUI by which to select an
atom (in the red list)
and a property (in the
yellow list) from a
set of properties such as
atomic weight, density,
melting point, boiling point,
and more.
Large, hi-def image
is below.

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'SELECTORtools' Menu >

'tkAtomAndPropertySelector _viaList'
tkGooie code Page

INTRODUCTION to Tcl-Tk script

I am planning (in 2016-2017) to make some Tcl-Tk GUI's for atom and molecule 'apps' --- such as an app to read some standardized molecular geometry-information files and display the molecular structure as a 3D molecular model on a Tk 'canvas' widget.

    The app would have the ability to rotate and zoom in/out on the atomic/molecular model --- similar to the

    3D model file viewer

    that I developed around the winter of 2012-2013.

In the course of developing atom/molecule apps like this, by having an 'atom-property-display' utility at hand (on my development computer), I can quickly look up the atomic data that I might need --- without needing a connection to the Internet.

In fact, in some cases, in a Tcl-Tk atom/molecule utility, I may want to 'build in' an 'atom-property-selector', so that the user can choose atomic info to use in the utility.

Since I have plenty of 'selector' code to use as a starting point, I decided to code an 'atom selector' utility.

The toughest (most tedious) part of making this utility proved to be finding and entering all the atomic property data --- for about one hundred atoms --- such as the 94 'elements' found 'in nature' and about 6 more.

To start with, I chose the following atomic properties

  • atomic weight
    (relative to Carbon-12)

  • density
    (gm/cm3 in 'normal conditions')

  • melting point
    (in degrees Kelvin, in 'normal conditions')

  • boiling point
    (in degrees Kelvin, in 'normal conditions')

  • abundance on Earth
    (in mg/kg)

I used the data that I found at the Wikipedia page List_of_elements.

You can see that web page for details on these properties --- such as how the (average) 'atomic weight' was determined and how the 'abundance' (a rather rough measure) was determined.

In the future, I may add other property data, such as

  • one of several measures of atomic radius

  • an indicator of numbers of electrons in the s,p,d,f shells
    (in particular, number of outer 'valence' electrons)


Following a coding pattern I started using around 2015, I laid out a 'text-sketch' of a proposed layout for the GUI.

In the below sketch of the GUI:

  SQUARE BRACKETS indicate a comment (not to be placed on the GUI).
  BRACES          indicate a Tk 'button' widget.
  A COLON         indicates that the text before the colon is on a 'label' widget.

  <----O---->     would indicate a horizontal Tk 'scale' widget (if any).
  UNDERSCORES     would indicate a Tk 'entry' widget (if any).
  CAPITAL-O       would indicates a Tk 'radiobutton' widget (if any).
  CAPITAL-X       would indicates a Tk 'checkbutton' widget (if any).

  The options available to the user are indicated by
  the following 'sketch' of the GUI:


                   tk Atom (and property) Selector
                   [window title]

.fRbuttons         {UseIt} {Cancel} {Help}  Selected Atom: ......  Selected Property Type: ........

.fRmsg             [.... Messages to user are display in a label here ...............................]

.fRleft [contains a text area]                              .fRright [2 listboxes are in this frame]
                   PROPERTY VALUES:                          ATOM IDs:
                   |---------------------------------------A |-----------------------------------A
.fRleft.text       | [TEXT widget to hold lines of         | | [LISTBOX to hold IDs of ATOMS,    |
                   |  property names and values, such as]  | |  SUCH AS:]                        |
                   | Atomic IDs: ...                       | | 1 ; H ; Hydrogen                  |
                   | Atomic weight: ...                    | | 2 ; He ; Helium                   |
                   | Density: ...                          | | ...                               |
                   | Melting Point: ...                    | | ...                               |
                   | Boiling Point: ...                    | |<--------------------------------->V
                   | ...                                   | PROPERTY TYPES:
                   | ...                                   | |-----------------------------------A
                   |                                       | | [LISTBOX to hold names of atomic  |
                   |                                       | |  PROPERTIES, such as:]            |
                   |                                       | | atomic weight                     |
                   |                                       | | density                           |
                   |                                       | | melting point                     |
                   |                                       | | boiling point                     |
                   |                                       | | ...                               |
                   |<------------------------------------->V |<--------------------------------->V

GUI components:

From the GUI 'sketch' above, it is seen that the GUI consists of about

  • 3 button widgets
  • 8 label widgets
    (a couple may be made one-line text widgets
    suitable for copy-and-paste operations)
  • 1 text widget (with x,y scrollbars)
  • 2 listbox widgets (with x,y scrollbars)
  • 0 entry widgets
  • 0 radiobutton widgets
  • 0 checkbutton widgets
  • 0 scale widgets
  • 0 canvas widgets


So I set to work converting the code of another selector GUI into this proposed GUI, and I ended up with the GUI seen in the following image.

The image above shows the GUI as it appears on startup.

The 'selected atom' is defaulted to Hydrogen and the 'selected property' is defaulted to 'atomic-weight'.

After scrolling down in either the 'atom-IDs listbox' or the 'property-types listbox' and selecting a line, the contents of the selected line appear, in one of the two 'selected' one-line text widgets at the top of the GUI.

If this selector utility is embedded in another 'app', such as an atom or molecule app, the 'selected' info confirms to the user the character string data that will be returned to the calling-app when the 'UseIt' button is clicked.

The 'Help' button on the GUI provides pretty complete and detailed help for using the GUI --- and even some sources for more atom-properties data that could be added to this selector utility.


Below, I provide the Tk script code for this 'tkAtomAndPropertySelector_viaList' 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,

  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 from other scripts (code re-use).

I call your attention to step-zero.

One new thing that I started doing around 2014 is using a text-array variable --- named 'aRtext' --- for text in labels, buttons, and other widgets in the 'tkGooies'.

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

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

All the 'set' statements for the text array are in one contiguous section toward the top of the code.

Experimenting with the GUI

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.

In this particular GUI, I have chosen to allow the window to be re-sized --- so that the 2 scrollable listboxes and the scrollable 'Properties:' text-area can be re-sized automatically when the 'top-level' window is resized.

However, one could un-comment the statement

wm resizable . 0 0

to make the window fixed at its initial size.

With the window resizable, 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.


The background colors of the 2 scrollable listboxes and the scrollable text area are set near the bottom of the script.

If you want to use different colors, it is a very easy change.

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.

Here is a quick view of how each of the procs are 'triggered'.

  'listbox_select_atomID'   - called by a button1-release binding on
                              the AtomIDs listbox widget --- and
                              called in the 'Additional GUI Initialization'
                              section at the bottom of this script.

  'listbox_select_atomPROP' - called by a button1-release binding on
                              the AtomPROPS listbox widget --- and
                              called in the 'Additional GUI Initialization'
                              section at the bottom of this script.

  'atom_props_list_update'  - called by button1-release bindings on
                              the atomIDs and atomPROPS listboxes --- and
                              called in the 'Additional GUI Initialization'
                              section at the bottom of this script.

  'put_vars'                - called by the 'UseIt' button

  'popup_msg_var_scroll'    - called by the 'Help' button

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 other equivalents) --- to surf the web looking for the latest news in the mathematics and physics worlds.

The Tcl-Tk script CODE

Here is a link to CODE for the script


With your web browser, you can 'right-click' on this link --- and in the menu that pops up, select an option like

' Save Link Target As ... '

--- to save this file to your local computer.

Then you can rename the file to remove the '.txt' suffix.

Make sure that you have execute permission set on the file --- in order to execute the script.


A few possible enhancements come to mind:

  • More property types:

    As I mentioned above, I may find it helpful to add more property types --- such as 'atomic radius' or 'electron numbers'.

    There is some data on 'atomic radii' (in picometers) at this Wikipedia atomic radii page.

    The 'empirical' radius data seems to be available for most of the first 100 atomic elements.

    That data could be augmented by radius data from some of the other radius-type columns.

    There is some data on 'electron numbers' at the Wikipedia electron shell page.

    For example, we could use the string '1' for Hydrogen, the string '2, 8, 14, 2' for Iron, and the string '2, 8, 18, 32, 18, 1' for Gold.

  • Sort option:

    It might be handy, for some applications, to be able to sort the atoms according to some property --- for example, on 'abundance' (or 'cost') --- to find the atomic material that may be easiest (or least costly) to acquire.

  • Select on a canvas instead of listboxes:

    I used the suffix '_viaList' on the name of this utility

    'tkAtomAndPropertySelector_ viaList'

    because one could use other methods of selecting an atom and a property, instead of listboxes --- such as clicking on a 'periodic table' displayed on a Tk 'canvas' widget.

    In fact, someone has implemented a pretty nice-looking periodic table at the Tcler's wiki, at page 18111.

    This periodic table Tk GUI uses an XML data file and uses an external 'tdom' package to parse the XML data --- so it is not 'stand-alone'.

    There are disadvantages to this 'periodic table' approach --- such as making the sort option more problematic to implement --- and, perhaps, adding more processing to the startup of the GUI.

If I ever find that I am using this utility --- either 'manually' or called within a script --- and I find that one (or more) of these features is highly advisable to add, then I may return to this script to provide that feature.


As I have said on other code-donation pages on this 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 code for
--- a utility in the FE 'tkGooies' system,
in the 'SELECTORtools' 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:

This FE web page was created 2016 Apr 12.

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

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

This code and description has NOT been posted on a Tcler's Wiki page --- at wiki.tcl-lang.org --- formerly wiki.tcl.tk.

If I ever do so, as a backup and alternative to this page, I plan to add a link to that Wiki page here.