#!/usr/bin/wish -f ## ## SCRIPT: make_chest_proto_imageOnOneCanvas_textLineTagBindings.tk ## ## in $FEDIR/tkGUIs/tkGUIs_DEMOS/feTkDEMOs/NEW_2012jul-aug ## ## where FEDIR = $HOME/apps/fehandytools_2011oct23 ##+############################################################################## ## DESCRIPTION: This Tk script ## ## MAKES TOOLCHEST DRAWERS WITH: text lines, each with a tag for a binding ## PROVIDES DRAWER ACTIONS WITH: button1-release bindings on the text tags ## PROVIDES TOOLCHEST/DRAWER DECORATION WITH: 'image create' for a background ## image on the one big canvas widget. ## A rectangular GIF image file is used to make an image var ## with 'image create photo'. That image var is used in the ## 'image create' statement to put the background on the one canvas. ## ## This script defines a single canvas widget, to contain one big background image ## and the lines of text. ## ## This script puts the text strings for the toolchest drawers in an array variable. ## Then, in a loop over the array argument (drawer count), the text lines are ## placed on the one big canvas, with a unique tag for each text line. ## ## In the loop over the text-array argument, the action-bindings to each text line ## are defined. ## ##+############################################################################# ## REFERENCES: ## See similar toolchest-making test scripts in this series: ## ## 1) 'make_chest_proto_buttonsInFrames.tk' --- ## ## MAKES TOOLCHEST DRAWERS WITH: 'button' widgets ## PROVIDES DRAWER ACTIONS WITH: the '-command' parm of 'button' ## PROVIDES TOOLCHEST/DRAWER DECORATION WITH: 'tk_setPalette' command for a ## color theme for the buttons ... and ## an (optional) 'bullet' image on the left of each button/drawer. ## ## 2) 'make_chest_proto_gradientLinesInCanvases.tk' --- ## ## MAKES TOOLCHEST DRAWERS WITH: 'canvas' widgets ## PROVIDES DRAWER ACTIONS WITH: button-release bindings on the canvas widgets ## PROVIDES TOOLCHEST/DRAWER DECORATION WITH: 'create line' commands on ## the canvas widgets --- to provide COLOR GRADIENT BACKGROUNDS for ## the 'drawers' ; uses a 'DrawGradient' proc based on ## a Tcl-Tk script by Damon Courtney and published at ## http://wiki.tcl.tk/6100 - Drawing color gradients. ## ##+########################################################################## ## Created: 2012aug09 Made this script based on the script ## 'make_chest_proto_imageCreateInCanvases_txt-can-arrays.tk' ## which differs from this script mainly because in that ## script there is a canvas widget for each text line --- ## with the same 'button' image put in each canvas. ## ## Changed: 2012aug ##+######################################################################### ##+######################################################################## ## Set the window parms - titles, location, size(ability), etc. ##+######################################################################## # wm title . "Toolchest-of-drawers-with-one-large-background-image - Test" # wm iconname . "ToolchestTest" wm title . "Apps Toolchest" wm iconname . "Apps" wm geometry . +150+30 wm resizable . 0 0 ##+########################################################### ## Create a font to use for text on the drawers. ## ## A variable width font, like that typically used on 'button' ## widgets, provide an appropriate/nice appearance. ##+########################################################### set feFONT_button "-family {comic sans ms} -size -14 -weight bold -slant roman" eval font create fontTEMP_drawer $feFONT_button ##+######################################################################### ## Establish an image to use as one big background on the one canvas. ## ## This image should be very wide and be trimmed to a little more than ## the width (in pixels) of the longest text string of all the text strings ## to be placed on the drawers. ## ## We will place the image on the one canvas widget and use the '-width' ## parameter on the canvas command to 'clip' the background image on ## the canvas. ## ## To avoid having a 'too plain' image after the clipping, which typically ## results in a 'toolchest' about 200 pixels wide and about 200 to 800 pixels ## high, it is good to choose images that have some interesting changes ## about every 200 pixels. ##+######################################################################## # image create photo IMG4canvasBkgnd -file "${DIR_gif_files}/$gif_img_file" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_antelope_canyon_sandstone_760x757.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_RainDrops_onWaterSurface_1280x565.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_blueWaterAndBeach_1280x744.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_darkSky_clouds_moon_1024x718.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_frosty_ford_by_fahrmboy_719x723.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_ipad4_waterdrops_wallpaper_1023x865.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_valley_fog_rainbowColors_400x300.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_water_surface_grayish_739x1024.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_waterdrops-blue_1500x691.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_water_drops_green_1280x1024.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_waterdrops_blueBackground_832x768.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_steveJobs_181x301.gif" image create photo IMG4canvasBkgnd -file "./bigBkgnd_sunlight_thru_blue_1143x300.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_lightRays_green_1600x627.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_lightRays_green_766x300.gif" # image create photo IMG4canvasBkgnd -file "./bigBkgnd_reliefMap_eastTexas_568x664.gif" ##+######################################################################## ## Set a borderwith for the one big canvas. ##+######################################################################## # set BDwidth_canvas 4 set BDwidth_canvas 0 ##+######################################################################## ## Put the text strings to be put on the drawers (canvas widgets) ## in variables. ## ## Instead of using variables ## textSTRING1, textSTRING2, ... ## we use array variables ## textSTRING(1), textSTRING(2), ... ## ## In a 'production' script, these vars could be set by reading lines ## of a 'chest definition' file, for each toolchest. ##+######################################################################## set textSTRING(1) "Seamonkey - web browser" set textSTRING(2) "Thunderbird - email client" set textSTRING(3) "Filezilla - FTP client" set textSTRING(4) "mtpaint - image editor" set textSTRING(5) "SciTE - text editor" set textSTRING(6) "gnome-screenshot - image capture" set textSTRING(7) "gnome-terminal - command-interpreter window" set textSTRING(8) "gcalctool - calculator" set Ndrawers 8 ##+######################################################################## ## Set the width of all the drawers (in pixels) --- according to the ## longest text string to be placed on the toolchest 'drawers'. ## ## We use 'font measure' to determine the text widths. ## Note that the font used for the text is a factor in determining the width. ## ## We get the max-string-width and add about 10 pixels to set a drawer-width ## a little wider than the longest text string on the drawers. ##+######################################################################## set drawerCNT 1 set strMaxWidthPx 15 while { $drawerCNT <= $Ndrawers } { set strWidthPx [font measure fontTEMP_drawer "$textSTRING($drawerCNT)"] ## FOR TESTING: # puts "strWidthPx = $strWidthPx drawerCNT = $drawerCNT" # puts "$textSTRING($drawerCNT)" # puts "" if { $strWidthPx > $strMaxWidthPx } { set strMaxWidthPx $strWidthPx } set drawerCNT [expr $drawerCNT + 1] } set drawerWidthPx [expr $strMaxWidthPx + 10] ##+######################################################################## ## Set the height (in pixels) of the text strings, using 'font metrics' with ## the '-linespace' parm. This is to be used to set 'drawer' height. ## ## Note that the text height depends on the font used for the strings. ##+######################################################################## set maxTextHeightPx [font metrics fontTEMP_drawer -linespace] ## FOR TESTING: # puts "maxTextHeightPx = $maxTextHeightPx" ##+######################################################################## ## Set the height of the toolchest drawers (in pixels) from either ## the 'linespace' height of the text strings OR perhaps some other measure. ##+######################################################################### set drawerHeightPx $maxTextHeightPx ## OR? # set drawerHeightPx ??? ##+######################################################################## ## Set the x-offset in the one big canvas widget (relative to the left side ## of the canvas widget) at which the left side of each text string will be ## located. ## ## We adjust the x text offset according the the width of the ## border of the canvas --- so that the text does not lie on the border. ##+######################################################################## set xLocTextPx [expr $BDwidth_canvas + 6] ##+######################################################################## ## Initialize the y-offset in the one big canvas widget (relative to the ## top of the canvas widget) at which the mid-left side of each text string ## will be located. ##+######################################################################## set yLocTextPx [expr $BDwidth_canvas + ($drawerHeightPx / 2)] ##+######################################################################## ## - Define the one big canvas widget. ## - Put the background image on it with 'image create'. ## - Pack the canvas widget. ##+######################################################################## set canvasHeightPx [expr $Ndrawers * $drawerHeightPx] canvas .can \ -relief raised \ -borderwidth $BDwidth_canvas \ -height $canvasHeightPx \ -width $drawerWidthPx ## Put the image on the canvas. .can create image 0 0 \ -image IMG4canvasBkgnd \ -anchor nw pack .can \ -side top \ -anchor nw \ -fill none \ -expand 0 ##+######################################################################## ## Loop to make the toolchest 'drawers' --- the lines of text on the canvas. ## ## Each text line (drawer) is make with 'create text' on the one big canvas. ## ## A unique tag is put on each text-line, for defining action bindings. ## ## A bind command is issued for each drawer, for button1-release action. ## ## 'create line' is used to make a separator line between each drawer. ## ## We use a tk_dialog popup to verify that the bindings work as desired. ##+######################################################################## set drawerCNT 1 while { $drawerCNT <= $Ndrawers } { ## Draw a separator line above each text line except the first one. if { $drawerCNT > 1 } { set yLineLocPx [ expr ( $drawerCNT - 1 ) * $drawerHeightPx ] .can create line \ 0 $yLineLocPx \ $drawerWidthPx $yLineLocPx \ -fill "#a0a0a0" # "#c0c0c0" - bright gray line (too faint?) # "#969696" - darker gray line (too dark?) } ## Put the text line on the canvas, with a tag. .can create text \ $xLocTextPx $yLocTextPx \ -anchor w \ -font fontTEMP_drawer \ -text "$textSTRING($drawerCNT)" \ -tag textlineTag($drawerCNT) ## Bind an action to the text line. .can bind textlineTag($drawerCNT) " tk_dialog .dialog1 \ \"Dear user:\" \"Button $drawerCNT was clicked\" info 0 OK " ## Get ready for the next text line. set drawerCNT [expr $drawerCNT + 1] set yLocTextPx [ expr $yLocTextPx + $drawerHeightPx] } ## END OF 'while' LOOP to define text-line 'drawers', with their bindings ##+######################################################################### ## BINDINGS: ## See the single '.can bind textlineTag($drawerCNT) ...' ## statement in the 'drawer' making loop above. ## Thus there is one bind command for each drawer. ##+######################################################################### ##+######################################################################### ## PROCS: none ##+######################################################################### ##+################################## ## Additonal GUI INITIALIZATION: none ##+##################################