FE 'tkGooie' Utilities'TEXTtools' group'tkMovingText'
(an animation
|
GUI to put a background image and text on a Tk 'canvas' widget with a choice of fonts for the text --- then animate the text. |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'TEXTtools' Page >
This
'tkMovingText'
tkGooie animation 'app' Page
|
INTRODUCTION to Tcl-Tk script After about 70 years of seeing scrolling text move across the big screen in movie theaters and about 60 years of seeing scrolling text move across television screens --- moving text giving credit to actors, directors, producers, editors, costume designers, musicians, accountants, etc. etc. --- I decided I would like to make a Tcl-Tk utility that scrolls text across a Tk 'canvas' widget. I wanted to be able to scroll the text in at least 4 ways :
And I wanted to allow the user to be able to choose the font for the lines of text. And I wanted to allow the user to choose the color of the text --- and the color of the background. And, as an alternative to using a background color, I wanted to allow the user to choose a background image, for the text to move over. MY SPECIFIC GOALS FOR THE GUI: The GUI should allow the user to enter one or more lines of text --- via a scrollable Tk 'text' widget on the GUI. The GUI should allow the user to choose direction-of-movement for the text --- via a scrollable Tk 'listbox' widget on the GUI (to allow for many different options in the future, more than 4). The GUI should supply a scrollable Tk 'canvas' widget on the GUI --- for display of the moving text. The GUI should provide a 'Font' button on the GUI, by which a separate Tk GUI 'font selector' can be used to select a font for the moving text. The GUI should provide two 'Color' buttons on the GUI, by which a separate Tk GUI 'RGB color selector' can be used to select text and background (canvas) colors for the GUI. To handle the case of using a background-image instead of a background-color, the GUI should provide a Tk 'entry' widget in which to enter the filename of a GIF or PNG file. And a 'Browse...' button should be provided, next to the 'entry' widget, by which to bring up a file-selector GUI to navigate to and select an image filename. When the various options are ready, the GUI is to provide 'Start' and 'Stop' Tk 'radibutton' widgets by which the user can start and stop the text movement in the canvas area. There should also be a widget on the GUI, say a Tk 'scale' widget, by which the user can control the speed of the text movement --- say, by specifying the wait-time (in milliseconds) between each movement of the text, say one pixel at a time across the 'canvas'. And, since these Tk widgets make for a lot of distraction after the animation starts --- and many of the widgets are not needed after the animation starts, there should be a Tk 'checkbutton' widget on the GUI by which the user can choose to show or hide many of the 'option widgets'. The GUI is to include a 'Help' button by which the user can get information on how the GUI can be used. THE GUI LAYOUT : One way the user can specify all these parameters is indicated by the following 'sketch' of a layout for the GUI: In the following sketch of the GUI: |
SQUARE BRACKETS indicate a comment (not to be placed on the GUI).
BRACES indicate a Tk 'button' widget.
UNDERSCORES indicate a Tk 'entry' widget.
A COLON indicates that the text before the colon is on a 'label' widget.
CAPITAL-O indicates a Tk 'radiobutton' widget.
CAPITAL-X indicates a Tk 'checkbutton' widget (if any).
Vertical bars (and horizontal hyphens) outline a 'canvas' widget.
If there are scrollbars:
Less-than and greater-than signs indicate the left and right ends of a horizontal 'scrollbar'.
Capital-V and Capital-A letters indicate the bottom and top ends of a vertical 'scrollbar'.
Here is a 'sketch' of the proposed GUI:
FRAMEnames
VVVVVVVVVV
---------------------------------------------------------------------------------
tkMovingText
[window title]
---------------------------------------------------------------------------------
.fRbuttons {Exit} {Help} {Font} {Clear} {Backgd {Text X ShowOptions Animate: O Start O Stop
Color} Color}
.fRmsg [.... Messages to user are display in a label here .............................]
.fRopts [The .fRopts frame contains subframes and may be initially hidden (not packed).
The following subframes of .fRopts appear when the Options checkbutton is 'on'.]
.fRopts.fRfile Background Image filename: __________________________________________ {Browse...}
|-----------------------------------------------------------------A
.fRopts.fRtextarea | [TEXT widget (scrollable) in which |
ENTER TEXT | to enter text for the animation |
LINE(S) HERE: | on the canvas.] |
|<--------------------------------------------------------------->V
Speed control 2 500 Direction [a scrollable LISTBOX of options is put here
.fRopts.fRcontrols1 (millisecs wait): <-----O---> of movement: --- 'bottom-to-top', 'right-to-left', etc. ---
there could be ten or more direction options here.]
|-------------------------------------------------------------------------------A
.fRcanvas | [CANVAS (scollable) on which to animate the text.] |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|<------------------------------------------------------------------------------>V
|
GUI components: From the GUI 'sketch' above, it is seen that this GUI layout consists of about
--- essentially all of the typically used Tk widgets. The GUI (a screenshot) To implement this Tk GUI script, I fetched a couple of 'tkGooies' scripts that had most of these GUI elements. I converted one of the scripts to a 'tkMovingText' script. I ended up with the GUI seen in the following image. |
|
This is the GUI as it first appears. I decided to have all the 'options widgets' showing when the GUI first comes up --- rather than requiring the user to click on the 'Show Options' checkbutton, to show all the options. As the message near the top of the GUI indicates, the user can click on the 'Start' radiobutton to start an animation --- after setting the lines-of-text, the text-font, the text-color, the background color (or image), the direction-of-movement, and after setting the 'wait-time' that controls the speed of the text movement. --- To give you an idea of what the animation image area looks like, below is a 'screenshot'. |
|
This animation was done by using the 2 'Color' buttons to change the text and background colors. I took the defaults for the text-lines and text-font and other options, and clicked on the 'Start' animation button. Note that most of the 'options widgets' are gone. In testing the GUI, I decided that it is convenient to the user to automatically hide most of the option widgets when the user clicks on the 'Start' radiobutton --- so that the option widgets are not a distraction from the text animation. The user can click on the 'Show Options' checkbutton at any time during the animation, to show the options while the animation proceeds. In fact, there are other options that can be changed while the animation proceeds. For example, the 'scale' widget that controls the speed of the text movement can be changed to speed up or slow down the animation while the text is moving. (The user would need to use the 'Show Options' checkbutton to get access to the 'scale' widget while the animation is going. Then the user can click the 'Show Options' checkbutton again, to re-hide the options.) Also the 'Font' and the 2 'Color' buttons can be clicked during the animation. The animation pauses while the font-selector or the color-selector is used to select a new font or color. When the selector GUI closes, the animation proceeds, with the new font or the new color being used. --- The following screen shot shows that multiple lines of text can be entered in the scrollable text widget. The text-lines are scrolled across the 'canvas' in a group. |
|
In this case, I chose to scroll the text from left to right. You can see that the text had almost completely emerged from the left of the canvas --- but a little bit of the left of the text lines had not emerged at the time of this screenshot. In this case, the text-lines were of various lengths. To get them centered, I used the space key to add some leading spaces to some of the lines.
Bottom line: --- The following screenshot shows that some quite unique fonts can be used for the text lines. |
|
In this case, I used the 'Font' button and the 'tkGooie' font selector to select a child-like font called 'Zachary', which I had installed on my Linux computer quite a few years ago -- as a '.ttf' (TrueTypeFont) file in the $HOME/.fonts directory. --- The following screenshot shows that a background image can be used --- instead of a background color. |
|
In this case, I used the 'Browse...' button, beside the image-filename 'entry' widget, to navigate to a GIF file in one of my home subdirectories. Once the filename is in the 'entry' widget, the user can apply the image to the canvas --- via keyboard or mouse. The user can put the 'focus' in the 'entry' widget and use the Enter/Return key. I simply used MB3 (mouse-button-3, a 'right-click'), on the 'entry' widget, to apply the image. In the code for this script, I provided a 'bind' statement for a 'ButtonRelease-3' event on the 'entry' widget. I like using the mouse, rather than the keyboard, whenever feasible. Also, I used the 'tkGooie' RGB-color-selector to set the text color to yellow, and I used the 'tkGooie' font-selector to set the text-font to a font called 'Windsor'. --- HELP TEXT The 'Help' button on the GUI shows extensive text describing this utility, in a popup window with scrollbars for the text area. DESCRIPTION OF THE CODE Below I provide a link to the Tk script code for this 'tkMovingText' utility. For this Tk script, I follow my usual 'canonical' structure for Tk code: |
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 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. 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:
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 nice choice of the 'pack' parameters. In particular ... The labels and buttons and entry widgets stay fixed in size and relative-location as the window is re-sized --- while the area containing the 'canvas' expands/contracts as the window is re-sized. 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. --- Note that the two 'Color' buttons call on a color-selector-GUI script to set the colors. You can make that color-selector script by copying-and-pasting the code from the page offering 'a non-obfuscated color selector GUI' on this site. Some comments and code at the bottom of this 'tkMovingText' Tk script explain how you can implement the RGB-color selector Tk script. You can put the color-selector Tk script in the same directory as the 'tkMovingText' Tk script. --- Note that the 'Font' button calls on a font-selector-GUI script to set the colors. You can make that font-selector script by copying-and-pasting the code from the page offering 'YAFS (Yet Another Font Selector) font selector GUI' on this site. Some comments and code at the bottom of this 'tkMovingText' Tk script explain how you can implement the font selector Tk script. You can put the font-selector Tk script in the same directory as the 'tkMovingText' Tk script. 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 the procs are called and what they do. --- Below is a brief overview of the procs of the script. |
- 'show_hide_options' - To 'pack' (or 'pack forget') the '.fRopts' frame.
Called by a button1-release binding on the
'ShowOptions' checkbutton.
- 'get_img_filename' - To get the image filename.
Called by the Browse button.
- 'add_image' - To place an image on the canvas.
Called by a button3-release or Enter-key binding
on the image filename entry field.
- 'set_font' - To set a font to use for the text lines on the canvas.
Called by the 'Font' button.
- 'get_text_lines_width_height' - To set the width and height of the text message
in characters and pixels.
Called by the 'animate' proc.
- 'clear' - To remove all objects from the canvas (text & image).
Called by the 'Clear' button.
- 'direction_select' - To get the type of text-movement on the canvas.
Called by a button1-release binding on the
listbox widget.
- 'animate' - To move the text across the canvas.
Called by a button1-release binding on the
'Start' radiobutton.
- 'set_text_color' - To set the color for creating the text-lines.
Called by the 'TextColor' button.
- 'set_background_color' - To set the background (canvas) color.
Called by the 'BkgdColor' button.
- 'update_color_button' - To set the background and foreground colors
of a color button.
Called by the 'set_*_color' procs.
- 'advise_user' - To put messages in the '.fRmsg' frame.
Called in the 'animate' proc and maybe elsewhere.
- 'popup_msg_var_scroll' - To show the text of the HELPtext variable in a
popup window.
Called by the 'Help' button.
|
The most complicated code is in the 'animate' proc. See the comments in these procs for details on their implementation. A fervent hope 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 find 'animated GIFs' of an image of Donald Trump morphing back and forth to/from an image of Debbie Wasserman Schultz. If you cannot find such an animated-GIF, then you can create one using the 'wheeeMorph' utility of the FE 'tkGooies' system. See the 'wheeeMorph' code for another Tk coding example. But, before doing that, try using-implementing-enhancing the following code. The Tcl-Tk 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. SOME POTENTIAL ENHANCEMENTS: Some features that I may add to this Tk script --- or implement in a separate Tk script:
--- There will probably be more enhancements that I may think of in the future, although some enhancements might be more suitable for putting in a separate Tk script --- perhaps using somewhat different text-rendering methods or a different GUI design than were used in this script. --- For those who might want to go ahead and add enhancements: To help out in making scripts like this, here is a page that provides sources of Tcl-Tk code snippets by providing links to various 'tkGooies' scripts that can make it relatively quick work to compose
And when you get to the testing-and-debugging phase in development of a Tk script, here is
a page that describes the wonderfulness which can make the testing-and-debugging go relatively quickly and painlessly. IN CONCLUSION I hope to provide more free Tk GUI scripts that can be used to make animations --- especially animations that could make teaching some subjects much more entertaining and clarifying and motivating. 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). As I have said on other 'tkGooie' pages of this FE web site ... 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 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 2016 Aug 04.
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. |