Version 30 of A non-obfuscated color selector GUI

Updated 2012-09-08 20:44:59 by uniquename

uniquename - 2012aug06

Way back around 1998 when I was first learning the Tcl-Tk language, I would do web searches on keyword strings such as 'usr bin wish button' or 'usr bin wish scale rgb' to find examples of complete Tcl-Tk scripts --- because the code 'snippets' in Tcl-Tk books and tutorials were not very helpful in creating 'production' scripts (relatively quickly).

In doing those kinds of web searches, I ran across a Tcl-Tk script that offered a nice, simple color selector GUI consisting of 3 'scale' widgets for setting RGB values (from 0 to 255) --- along with a 'frame' widget color-swatch for dynamically showing the color as the user moved any of the three scale-sliders with the left mouse button.

I used the word 'non-obfuscated' in the title of this page because many of the color selectors that I have seen are quite confusing. They hit my eyes with so many features --- color shaded disks, RGB sliders, HS-whatever sliders, etc. etc. --- that I get a headache (and waste too much time) trying to figure out how to use them.

This color selector is so simple that it is obvious 'from the git-go' how to use it. And yet it has done all that I need it to do in all the 'use cases' that I have encountered so far.

The original script was posted in a web page for a computer science class, by a professor at an Australian university (USQ = the University of Southern Queensland). When I tried going back to the web page around 2004, I found it was gone. So I am glad that I 'harvested' that script code before it disappeared into that great bit bucket in the sky.

(The URL for that dearly-departed Australian web page is in the comments of the code below.)

I have changed the original script quite a bit. Some of the changes that I can remember are:

1) The 'place' geometry manager was originally used in the script. I switched to the 'pack' command.

2) The original script showed the current RGB value in '#rrggbb' hex format, in a label widget. Like the color swatch, the hex values changed dynamically as the sliders were moved with the mouse.

I changed the label widget to a text widget, so that one could copy-and-paste the hex-string with a 'left mouse button swipe' for the 'copy' and a middle-mouse-button click for the 'drop' ('paste') --- handy for pasting into a text editor window containing some Tk code or some HTML code.

I also added a text widget to show the RGB values (between 0 and 255) as percents (between 0 and 100).

3) Using a 'pack forget' command technique, I made a 'Toggle Side' button on the GUI so that I could quickly switch the color swatch from one side of the GUI to the other.

4) I made a 'put_vars' proc that uses 'puts' to output the current RGB values (decimal and hex), when a 'UseIt' button is clicked --- so that I can use the color selector GUI within shell scripts and within other Tcl-Tk scripts --- to pass a selected RGB value back to the calling script.

5) There are a lot of changes that I made to the script to share parameter setting code that is used in other Tk scripts of mine.

6) The font setting code was updated to use the newer constructs in Tk that came in 8.x releases of Tk.

7) I added some argc,argv code to, optionally, accept initial RGB values from the command line.

8) I added some 'catch' statements to, optionally, accept initial RGB values from environment variables --- R255, G255, B255.

9) I added some 'catch' statements to, optionally, accept window and window-icon titles from environment variables --- and to, optionally, accept window geometry (location or location-and-size) from an environment variable.

Here is an image of the resultant color selector GUI.

colorSelectorGUI_screenshot_572x194.png

After I retired and started assembling the software in my 'Freedom Environment' software system (see [L1 ]), I used the color selector Tk script as a palette-color setting utility in the 'xpg', 'feAppMenus, and 'feHandyTools' subsystems of my Freedom Environment software.

I provide all that FE code as free and open source code. A lot of the FE Tcl-Tk scripts (such as the code for the 'xpg' utility) are really too long for a page on this Tcl-Tk wiki. But the code for the color-selector utility is probably no longer than some of the longer scripts that have been presented here.

So, to help make sure that the code from that Australian professor (along with my enhancements) does not disappear into the Internet Graveyard of Dead Links, here is a resurrection of the code.

I have 'left in' many of my comments that explain the usage of the GUI and the structure and intent of the code.

In my FE subsystems, I use some Tk 'include' scripts in my Tk scripts to provide some parameter setting that is shared with other utility scripts. I have replaced the corresponding 'source' statements with the essential Tk statements from those 'include' scripts.

(Some of the 'include' statements involving parameters for 'listbox' and 'entry' and 'message' widgets, widgets not used in this GUI, may be left in this code --- but commented, for the most part. Those statments can be useful if other GUIs are made using this code as a starting point.)

As I do with all my Tk scripts, I have put the four main pack parameters --- '-side', '-anchor', '-fill', '-expand' --- on the 'pack' command for the various 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.

For this particular GUI, I have used the statement

wm resizeable . 0 0

to make the window (and its widgets) a fixed size --- since I have found no advantage in having the color swatch change size --- and no advantage to having the scale widgets change size.

However, if anyone sees an advantage to allowing the GUI to change size, they can comment the 'wm resizeable' statement --- and then experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets --- to get the widget behavior that they want.

(Since I did some experimenting with the GUI before making it non-resizable, the pack parameters in this code are probably at reasonable settings. So if you comment out the 'wm resizeable' statement, the GUI elements may resize --- or not resize --- nicely as you change window size.)

#!/usr/bin/wish -f
##
##+#######################################################################
## Tk SCRIPT NAME:   sho_colorvals_via_sliders3rgb.tk
##
##+#######################################################################
## PURPOSE:  This TkGUI script provides a GUI for selecting Red-Green-Blue
##           values, from 0 thru 255, via slider bars.  
##
##           For any slider bar change, this GUI
##           immediately shows the color as the background color of a
##           frame widget (a 'color swatch') in a corner of the GUI
##           window (covering about 20% of the window).
##
##           Also this GUI immediately shows the color's hex (and %) RGB
##           values in two small text widgets about 12 characters long.
##
## -----------------------------------------------------------------------
##
##           The GUI is useful in determining color specification in decimal
##           or hex values to match a given color. (The user can bring this
##           GUI to a portion of the screen, and use the slider bars to
##           find color matches to that portion of the screen. Similarly,
##           the user bring the GUI next to a portion of an image/photo viewer
##           window.)
##
##           The GUI is also useful in determining suitable background colors
##           for black/white text --- espcially when this script is called
##           within another Tk GUI script for setting the color palette
##           of that GUI.
##
## -----------------------------------------------------------------------
##
##           This GUI acts as a color selector by passing the current color to
##           stdout (in decimal and hex), when the OK/UseIt button is clicked.
##           Example output string:  0 156 255 009CFF
##
##+#######################################################################
##  CREDIT:  Based on an example from Australia (circa 1999) at
##           http://www.sci.usq.edu.au/~devoil/66309/tut2.html
##
##  The 'place' commands in that example have been replaced by
##  'pack' commands.
##
##+#####################################################################
## CALLED BY:  'make_chest.tk'  in  'feAppMenus' and 'feHandyTools'
##             and 'shofil.tk' (the core of the FE 'xpg' utility)
##             and probably by more FE scripts in the future.
##+#####################################################################
## INPUTS:  User slides the slider bars.  Initial RGB vals can be set as
##          described in the next section, 'CALL FORMAT'.
##
## OUTPUT:  Color-swatch and hex & %-RGB values displayed on the Tk window.
##
##          Also, on clicking an OK/UseIt button, the current RGB slider
##          settings are passed to stdout as a string giving decimal and
##          hex values of the color --- and the GUI is exited/closed.
##
##          Sample output string:  0 156 255 009CFF
##
##+#####################################################################
## CALL FORMAT:
##
##  $FEDIR_TKGUIS/sho_colorvals_via_sliders3rgb.tk  [r255 g255 b255]
##
##      where r255 g255 b255 represent integers between 0 and 255,
##      and the values are ignored if there are not exactly three.
##      If no values are entered, the defaults are 0 156 255 or
##      some such triplet.
##
##   OR
##
##      use env vars R255, G255, B255 to initialize the sliders.
## -----------------------------------------------------------------------
##   EXAMPLE CALLS in a shell script:
##                              (Could also be called in a tcl-tk script.
##                               See the tcl-tk scripts mentioned in the
##                               'CALLED BY' section above.)
##
##    1)    R255=0
##          G255=156
##          B255=255
##          export R255 G255 B2555
##
##          TEMP=`$FEDIR_TKGUIS/sho_colorvals_via_sliders3rgb.tk`
##  OR
##    2)
##          TEMP=`$FEDIR_TKGUIS/sho_colorvals_via_sliders3rgb.tk 80 156 255`
##       or
##          TEMP=`$FEDIR_TKGUIS/sho_colorvals_via_sliders3rgb.tk`
##
##
## (Note: The values in TEMP could be extracted with a command like
##  'cut' or 'awk'.)
##+########################################################################
## 'CANONICAL' STRUCTURE OF THIS CODE:
##
##  0) Set general window parms (name,position,size,color-scheme,fonts,etc.).
##  1) Define ALL frames (and sub-frames).  Then pack them.
##  2) Define & pack all widgets in the frames.
##  3) Define key/mouse action BINDINGS, if needed.
##  4) Define PROCS, if needed.
##  5) Additional GUI INITIALIZATION (with procs), if needed.
##
##
## Some detail on the structure of the code for this particular script:
##
##  1a) Define ALL frames: 
##             Top-level : 'fRsliders', 'fRpreview' , 'fRbottom'
##             Sub-frames: 'fRsliders.red', 'fRsliders.green' , 'fRsliders.blue'
##
##  1b) Pack ALL frames.
##
##  2) Define & pack all widgets in the frames -- basically going through
##     frames & their interiors in top-to-bottom, left-to-right order:
##
##      - 'fRsliders'     (to contain 3 sliderbars)
##
##      - 'fRpreview'     (to contain only its background; to display
##                       the color specified by the sliderbar settings)
##
##      - 'fRbottom'      (to contain a 'Quit' button and label & text widgets
##                       to display the current % [0 to 100] and hex [ 00
##                       to FF ] RGB values of the color.)
##
##  3) Define bindings:  none currently
##
##  4) Define procs:
##        -  'color_update'
##        -  'toggle_side'
##        -  'put_vars'
##
##  5) Additional GUI initialization:  none currently
##
##+#######################################################################
## DEVELOPED WITH: (Tcl 7.4)-(Tk 4.0)  and  Tcl-Tk 8.4.
##   wish> puts "$tcl_version $tk_version"
##   7.4 4.0
##+########################################################################
## MAINTENANCE HISTORY:
##                This Tk script is based on a sample Tk script found at
##                http://www.sci.usq.edu.au/~devoil/66309/tut2.html in 1999.
##------------------------------------------------------------------------
## Created by: Blaise Montandon 2008mar31 Started version for the FE
##                                        system, on Linux, Mandriva 2007.
## ...
## ...
## ...
## Updated by: Blaise Montandon 2011oct05 Trimmed up indentations.
##                                        Added some attribute parms to buttons.
##                                        Chgd(fixed) some '-pady' to '-padx'.
##+############################################################################

## For window title:
set VERSIONcolorsel "ver2011oct05"

set THISscript "sho_colorvals_via_sliders3rgb.tk"



##+#######################################################################
## SET COLOR SCHEME (palette) FOR THE WINDOW.
##+#######################################################################

##  Gray palette 
set r255 210
set g255 210
set b255 210

set COLOR_pal [format "#%02X%02X%02X" $r255 $g255 $b255]
tk_setPalette $COLOR_pal


##+#######################################################################
## SET FONT VARS FOR THE VARIOUS WIDGET DEFINITIONS.
##+#######################################################################

set FONTsize 14
set FONT_SMALLsize 12

## BUTTON and LABEL : (generally variable width is best)

set feFONT_label " -family {comic sans ms} -size -$FONTsize -weight bold -slant roman "
set feFONT_button "$feFONT_label"

# set feFONT_SMALL_label " -family {comic sans ms} -size -$FONT_SMALLsize -weight normal -slant roman "
# set feFONT_SMALL_button "$feFONT_SMALL_label"


## ENTRY and LISTBOX : (generally fixed width is best)

# set feFONT_entry " -family {dejavu sans mono} -size -$FONTsize -weight bold -slant roman "
# set feFONT_listbox "$feFONT_entry"

# set feFONT_SMALL_entry " -family {dejavu sans mono} -size -$FONT_SMALLsize -weight normal -slant roman "
# set feFONT_SMALL_listbox "$feFONT_SMALL_entry"


## TEXT and MESSAGE : (generally fixed width is best)

set feFONT_text " -family {dejavu sans mono} -size -$FONTsize -weight bold -slant roman "
# set feFONT_msg "$feFONT_text"

set feFONT_SMALL_text " -family {dejavu sans mono} -size -$FONT_SMALLsize -weight normal -slant roman "
# set feFONT_SMALL_msg "$feFONT_SMALL_text"



##+#####################################################################
## DEFINE (temporary) FONT VARS to be used in '-font' widget specs below.
##+#####################################################################

eval font create fontTEMP_button  $feFONT_button
eval font create fontTEMP_label   $feFONT_label
# eval font create fontTEMP_entry   $feFONT_entry
# eval font create fontTEMP_listbox $feFONT_listbox
# eval font create fontTEMP_msg     $feFONT_msg
eval font create fontTEMP_text    $feFONT_text

# eval font create fontTEMP_SMALL_button  $feFONT_SMALL_button
# eval font create fontTEMP_SMALL_label   $feFONT_SMALL_label
# eval font create fontTEMP_SMALL_entry   $feFONT_SMALL_entry
# eval font create fontTEMP_SMALL_listbox $feFONT_SMALL_listbox
# eval font create fontTEMP_SMALL_msg     $feFONT_SMALL_msg
# eval font create fontTEMP_SMALL_text    $feFONT_SMALL_text


##+#######################################################################
## SET GEOM VARS FOR THE VARIOUS WIDGET DEFINITIONS.
## (e.g. pady for Buttons -- which we may use on some buttons, and not others)
##+#######################################################################

##+###################################################
## Set internal PADDING (X and Y) for BUTTON widgets.
##+###################################################
   
set fePADY_button 0
set fePADX_button 0


##+###################################################
## Set BORDER-WIDTH for LABEL, BUTTON, ENTRY, LISTBOX,
## TEXT, and MESSAGE widgets.
##+###################################################

set feBDwidth_label 2
set feBDwidth_button 2

# set feBDwidth_entry 2
# set feBDwidth_listbox 2

set feBDwidth_text 2
# set feBDwidth_msg 2


##+########################################################################
##+########################################################################
##
##        GET INPUT PARM VALUES -- 
##      i.e. set R255init G255init B255init from
##
##         1)  arguments passed to this script
##      OR 
##         2)  environment vars R255, G255, B255.
##
##+########################################################################
##+########################################################################
##  Example argc/argv processing:
##
## if {$argc == 0} {
##    set VARtext "$env(CONFIRM_TEXT)"   
## } else {
##    set VARtext [lindex $argv 0]
## }
##+########################################################################

if {$argc == 3} {

   set R255init [lindex $argv 0]
   set G255init [lindex $argv 1]
   set B255init [lindex $argv 2]

} else {

   # set R255init 40
   set R255init 0
   catch { set R255init "$env(R255)" }

   # set G255init 80
   set G255init 156
   catch { set G255init "$env(G255)" }

   # set B255init 120
   set B255init 255
   catch { set B255init "$env(B255)" }

}

##+#######################################################################
## SET THE TOP WINDOW NAME.
##+#######################################################################

wm title  . "Colors in Decimal and PerCent and Hex  -  $VERSIONcolorsel"
wm iconname . "Color:Dec-Hex-%"

catch { wm title    . "$env(COLORSEL_WIN_TITLE)" }
catch { wm iconname . "$env(COLORSEL_WIN_ICON_TITLE)" }


##+#######################################################################
##  SET THE TOP WINDOW POSITION & 'FIX' THE WINDOW SIZE.
##+#######################################################################

wm geometry . +50+50

catch {eval wm geometry . "$env(COLORSEL_WIN_GEOM)" }

#  wm minsize  . 550 200
#  catch {eval wm minsize . "$env(COLORSEL_MINSIZE)" }

## Alternative to minsize (make win not resizable):
wm resizable . 0 0



##+####################################################################
##+####################################################################
## DEFINE *ALL* THE FRAMES:
##   TOP-LEVEL FRAMES:
##     - 'fRsliders'   (to contain 3 sliderbars)
##     - 'fRpreview'   (to contain only its background; to display
##                      the color specified by the sliderbar settings)
##     - 'fRbottom'    (to contain 'Quit' & 'ToggleSide' buttons, as 
##                      well as 2 label & 2 text widgets to
##                      display the current per-cent and 
##                      hex RGB-values of the color.)
##
##  'fRsliders' & 'fRpreview' are packed on left & right.
##
##   SUB-FRAMES:
##     - 'fRsliders.fRred'     (to contain 1 label, 1 sliderbar)
##     - 'fRsliders.fRgreen'   (to contain 1 label, 1 sliderbar)
##     - 'fRsliders.fRblue'    (to contain 1 label, 1 sliderbar)
##+####################################################################
##+####################################################################

## FOR TESTING of expansion of frames (esp. during window expansion):

# set feRELIEF_frame raised
# set feBDwidth_frame 2

set feRELIEF_frame flat
set feBDwidth_frame 0


frame .fRsliders  -relief $feRELIEF_frame    -borderwidth $feBDwidth_frame

frame .fRpreview  -relief raised             -borderwidth 4 \
                                             -height 140 \
                                             -width 140

frame .fRbottom   -relief $feRELIEF_frame    -borderwidth $feBDwidth_frame


frame .fRsliders.fRred     -relief $feRELIEF_frame \
                           -borderwidth $feBDwidth_frame

frame .fRsliders.fRgreen   -relief $feRELIEF_frame \
                           -borderwidth $feBDwidth_frame

frame .fRsliders.fRblue    -relief $feRELIEF_frame  \
                           -borderwidth $feBDwidth_frame


##+########################################################
## PACK *ALL* the FRAMES.
##+########################################################

pack  .fRbottom \
      -side bottom \
      -anchor w \
      -fill x \
      -expand 1

##+##########################################
## NOTE:  Need to pack the 'bottom' frame
##        before the 'sliders' & 'preview'
##        frames -- otherwise the 'bottom'
##        frame comes out in the lower-right
##        of the window, instead of below
##        'sliders' & 'preview'.
##+##########################################

set LR_side "left"

##+##########################################
## NOTE:  The variable 'LR_side' will
##        be used to toggle the position
##        of 'preview' to left or right.
##+##########################################

pack  .fRsliders \
      .fRpreview \
      -side $LR_side \
      -anchor w \
      -fill both \
      -expand 1

pack  .fRsliders.fRred \
      .fRsliders.fRgreen \
      .fRsliders.fRblue \
      -side top \
      -anchor w \
      -fill x \
      -expand 1


##+################################################################
##+################################################################
## START DEFINING & PACKING WIDGETS WITHIN THEIR FRAMES. 
##+################################################################
##+################################################################

##+########################################################
## IN THE 'sliders' frame -- DEFINE 3 LABELS and
## 3 SLIDERBAR WIDGETS.  THEN PACK THEM.
##+########################################################

## RED

label .fRsliders.fRred.label -text Red \
      -width 8 \
      -font fontTEMP_label


scale .fRsliders.fRred.scale \
      -orient h \
      -digits 0 \
      -from 0 -to 255 \
      -length 350 \
      -command color_update

.fRsliders.fRred.scale set $R255init

## GREEN

label .fRsliders.fRgreen.label -text Green \
      -width 8 \
      -font fontTEMP_label

scale .fRsliders.fRgreen.scale \
      -orient h \
      -digits 0 \
      -from 0 -to 255 \
      -length 350 \
      -command color_update

.fRsliders.fRgreen.scale set $G255init

## BLUE

label .fRsliders.fRblue.label -text Blue \
      -width 8 \
      -font fontTEMP_label

scale .fRsliders.fRblue.scale \
      -orient h \
      -digits 0 \
      -from 0 -to 255 \
      -length 350 \
      -command color_update

.fRsliders.fRblue.scale set $B255init


##+#################################################
## PACK 3 LABELS & 3 SCALES IN the 'sliders' FRAME.
##+#################################################

pack .fRsliders.fRred.label \
     .fRsliders.fRred.scale \
      -side left \
      -anchor w \
      -fill x \
      -expand 1

pack .fRsliders.fRgreen.label \
     .fRsliders.fRgreen.scale \
      -side left \
      -anchor w \
      -fill x \
      -expand 1

pack .fRsliders.fRblue.label \
     .fRsliders.fRblue.scale \
      -side left \
      -anchor w \
      -fill x \
      -expand 1


##+########################################################
## IN THE 'bottom' frame -- DEFINE 1 'OK/UseIt' BUTTON,
## 1 'Cancel' BUTTON, 1 'Toggle-Side' BUTTON, and
## 2 TEXT WIDGETs (rather than label or message widgets,
## so that it is possible to paste the hex and percent values
## to another window), along with a label widget for each
## text widget.  THEN PACK THEM.
##+########################################################

button .fRbottom.butReturn \
      -text "UseIt" \
      -font fontTEMP_button \
      -padx $fePADX_button \
      -pady $fePADY_button \
      -relief raised \
      -bd $feBDwidth_button \
      -command {put_vars}

# -text "OK" 

button .fRbottom.butCancel \
      -text "Cancel" \
      -font fontTEMP_button \
      -padx $fePADX_button \
      -pady $fePADY_button \
      -relief raised \
      -bd $feBDwidth_button \
      -command {exit}

button .fRbottom.butTogside \
      -text "ToggleSide" \
      -font fontTEMP_button \
      -padx $fePADX_button \
      -pady $fePADY_button \
      -relief raised \
      -bd $feBDwidth_button \
      -command {toggle_side}



label  .fRbottom.labhex \
      -text "RGB-in-Hex:" \
      -width 11 \
      -font fontTEMP_label

text   .fRbottom.txthex \
      -relief raised \
      -borderwidth $feBDwidth_text \
      -height 1 \
      -width  8 \
      -wrap none \
      -font fontTEMP_text

label  .fRbottom.labpcnt \
      -text "RGB-%s:" \
      -width 8 \
      -font fontTEMP_label

text  .fRbottom.txtpcnt \
      -relief raised \
      -borderwidth $feBDwidth_text \
      -height 1 \
      -width 11 \
      -wrap none \
      -font fontTEMP_text


## PACK the .fRbottom widgets.

pack .fRbottom.butReturn \
     .fRbottom.butCancel \
     .fRbottom.butTogside \
      -side left \
      -anchor center \
      -fill none \
      -expand 0

pack .fRbottom.txthex \
     .fRbottom.labhex \
     .fRbottom.txtpcnt \
     .fRbottom.labpcnt \
      -side right \
      -anchor center \
      -fill none \
      -expand 0
   

##+#####################################################################
## END OF  MAIN SECTION TO SETUP THE GUI.
##+#####################################################################


##+#####################################################################
##+#####################################################################
## DEFINE PROCEDURES:
##        -  'color_update'
##        -  'toggle_side'
##        -  'put_vars'
##+#####################################################################
##+#####################################################################


##+#####################################################################
## 'color_update' PROCEDURE
##+#####################################################################
## 
## PURPOSE: To set 
##             1) the background color of the preview window 
##             2) display the hex value of the r-g-b values 
##          as any slider is changed.
## 
## CALLED BY:  3 scale widgets:
##                              - .fRsliders.fRred.scale
##                              - .fRsliders.fRgreen.scale
##                              - .fRsliders.fRblue.scale
## 
##+#####################################################################

proc color_update {x} {

   global r255 g255 b255

   set r255   [.fRsliders.fRred.scale   get]
   set g255   [.fRsliders.fRgreen.scale get]
   set b255   [.fRsliders.fRblue.scale  get]
   set color [format "#%02X%02X%02X" $r255 $g255 $b255]
   .fRpreview config -bg $color

   .fRbottom.txthex delete 1.0 end
   .fRbottom.txthex insert end $color

   ## Show the RGB values in percents.

   set red_pcnt   [expr $r255  * 100 / 255]
   set green_pcnt [expr $g255  * 100 / 255]
   set blue_pcnt  [expr $b255  * 100 / 255]

   .fRbottom.txtpcnt delete 1.0 end
   .fRbottom.txtpcnt insert end "$red_pcnt $green_pcnt $blue_pcnt"

}
## END of proc 'color_update'


##+#####################################################################
## 'toggle_side' PROCEDURE
##+#####################################################################
## 
## PURPOSE: To switch the sides of the 'sliders' & 'preview' frames 
## 
## CALLED BY:  .fRbottom.togside button
## 
##+#####################################################################

proc toggle_side { } {

   global LR_side

   if { "$LR_side" == "left" } {
      set LR_side "right"
   } else {
      set LR_side "left"
   }

   pack forget .fRsliders .fRpreview

   pack  .fRsliders \
         .fRpreview \
         -side $LR_side \
         -anchor w \
         -fill both \
         -expand 1

}
## END of proc 'toggle_side'


##+#####################################################################
## PROCEDURE -- put_vars    (Put R255, G255, B255 environment var
##                           setting string to standard output.)
##
## Called by:  button .fRbottom.butReturn
##+#####################################################################

proc put_vars { } {

   global r255 g255 b255

   set COLORhex [format "%02X%02X%02X" $r255 $g255 $b255]

   #OLD    puts "R255=\"$r255\" ; G255=\"$g255\" ; B255=\"$b255\""

   puts "$r255 $g255 $b255 $COLORhex"

   exit

}
## END of proc  'puts_vars'

I hope that some Tcl-Tk 'newbies' can learn from this useful script, just as I learned a lot from its predecessor script --- thanks to some (unknown to me) computer science professor at an Australian University half-way around the world from me --- me sitting at an SGI/IRIX (Unix) workstation in the eastern United States back in the late 1990's.


RLE (2012-08-06): Were you aware of the tk_chooseColor script which ships with Tcl/Tk?


uniquename 2012aug14:

RLE, I am formulating a reply. I plan to post it here within the next few days. (There are a lot of factors involved, leading to making my own color selector, rather than using tk_chooseColor. Briefly, I had forgotten about it --- I saw an image of the GUI about 7 years ago on a web page. In any case, the situation is similar to the search for the ideal font selector utility, which I discuss on my new YAFSG - Yet Another Font Selector GUI page. In the course of looking for info on tk_chooseColor, I found some info that suggests a reasonable, but not definite, answer to the question "Which came first --- tk_chooseColor or the script I found at USQ?" And I have a reasonable, but not definite, answer to the question "What may have motivated creation of the USQ script?" I believe the answer hinges on some 'obfuscation' in tk_chooseColor.)


uniquename 2012aug17:

I found the following image of the tk_chooseColor GUI at the tkdocs.com site --- showing the GUI for 3 different 'platforms' --- Mac OS X and MS Windows and Linux.

tk_chooseColor_MacOSX_MSwin_Linux_784x319.png

I was surprised to see how different the GUI looks on the three platforms. I had always assumed that when a Tk chooser utility (like a file chooser utility) is ported to the different platforms, that the GUI would have the same features on each platform.

In any case, this image shows what I mean by 'obfuscation' in color selector GUI's. With most GUI's like these, when I bring them up, I cannot use them immediately.

It takes me several minutes (or more) to figure out which features are going to be most useful to me --- and how to use them.

There is a lot of 'obfuscation' in the Mac and MS color chooser GUI's --- lots of distracting/time-consuming features.

At first glance, the Linux color chooser looks 'unobfuscated'. But I tried it out on one of my Linux computers by opening a terminal window, typing 'wish', and then typing 'tk_chooseColor'.

I found it works a lot like the color chooser that I presented above (although I have a lot more capability to change fonts and colors to match other GUI's in my software --- using font and color variables and font and color changing utilities of my software systems.)

But then I noticed a distraction --- the color gradients. To me, it would be 'natural' if the color gradients above the red, green, and blue 'scale' widgets were red, green, and blue --- in particular, if they went from

- black (0,0,0) to red (255,0,0)
- black (0,0,0) to green (0,255,0)
- black (0,0,0) to blue (0,0,255)

It took me at least 30 seconds (maybe more than a minute) to figure out why the color gradients are as they are --- and why they seem to be made up of tiny rectangular patches.

I finally realized that the colors on each color-bar are an indication of what color would show up in the color swatch if the slider for that particular bar were moved to line up with that particular color shade.

And, I guess that the gradients are approximated with small rectangles of solid color because it is faster to draw about 16 colored rectangles than to draw in about 256 colored lines graduating through the colors that would appear on the color swatch.

I think these color choosers would be a good way to measure the IQ of a person. You can tell that my IQ is probably less than 130, because it took me about a minute to figure out what the color gradients on the 3 graduated-color bars mean.

A Mensa member or a person with an IQ above 150 probably would have figured it out in less than 15 seconds.

In summary, I think the 3 color choosers above are good for testing people's IQ --- but I don't think they are good as color choosers.


RLE (2012-08-17): The answer to your first implied question (why do the chooser GUI's look different across platforms) is because Tk uses the native system color chooser if there is a native system chooser. So the Mac and Windows choosers are the native ones provided by MacOS and Windows respectively.

X11 on Unix provides no such native widget, so Unix Tk includes a Tk script which generates a color chooser from Tk widgets. The Tk Unix chooser is the one that is most similar to your code above in this page.

I also understand what you mean by "unobfuscated color chooser" now. At first I thought you were referring to the code that implemented the chooser, but you are referring to the complexity of the UI presented by the chooser, not to the code implementing it.


uniquename - 2012sep06

RLE, thanks for explaining why the Mac and MS Windows 'tk_chooseColor' GUI's are so different from the implementation on Linux.

And thanks for bringing up 'tk_chooseColor' in the first place. It has caused me to think of what I could add to my color chooser to help the user choose colors.

I have pointed out that I find the color gradients above the red, green, and blue 'scale' widgets on the Linux version of 'tk_chooseColor' to be more confusing than helpful.

But there is another reason (besides wasting time) that I find it unhelpful --- I am partially red-green blind. Colors like light-green and light-pink look almost gray or white to me. And some shades of green look more like tan or brown --- or I would be hard-pressed to say what color they are.

And because of my condition, I am led to think of how a totally color-blind person might react to the color gradients on the GUI. Such persons would probably find the gradients almost totally useless. They would just look like shades of gray --- on all 3 gradient bars.

But a color-blind person might find some textual info helpful --- kind of like the info seen by running the 'showrgb' command on Linux. That output gives the user color names and the RGB values (0-255) that go with the names. Thus a color-blind person could know where to locate the 3 sliderbars of the 'scale' widgets to get the color 'brown', say.

In fact, one of the first uses of my color chooser was in my 'feAppMenus' and 'feHandyTools' systems --- to choose a color for the toolchests that would go pretty well with the brownish-orangish screen background of Ubuntu 9.10 (2009 October release, 'Karmic Koala').

I had no idea what proportions of RGB to use to get brown. By running 'showrgb', I was able to determine I could get a pretty good color by using a high value for Red, a medium value for Green, and a low value for Blue.

The point I am getting to is that I should add a 'TogHelp' button to my color chooser --- next to the 'TogSide' button. That button will show/hide a scrolling-text-widget that shows some helpful verbiage --- based on 'showrgb' output --- that can help users --- especially vision-challenged users --- help them compose some of the 'hard to concoct' colors.

Most people know that you get yellow from mixing red and green, with essentially no blue (except to brighten the yellow). Similarly, most people know how to get magenta (red-blue) and cyan (green-blue).

But for colors like brown, chartreuse, puce, etc., they could probably use some verbal help.

So I will probably update the code posted above with an implementation of a 'ToglHelp' button --- sometime within the next year.