FE 'tkGooie' Utilities
---
'TEXTtools' group
---

'tkMovingText'

(an animation
of lines of text)

(FE = Freedom Environment)

FE Home Page > FE Downloads Page > FE 'tkGooies' Description Page >

FE 'tkGooies' 'TEXTtools' Page > This 'tkMovingText' Page

INTRODUCTION to 'tkMovingText'

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 :

  • bottom-to-top
  • top-to-bottom
  • right-to-left
  • left-to-right

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.

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'.


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

  -  7 button widgets
  -  5 label  widgets
  -  2 radiobutton widgets in 1 group
  -  1 checkbutton widget
  -  1 entry widget
  -  1 scale widget (horizontal)
  -  1 listbox widget with scrollbars
  -  1 text widgets with scrollbars
  -  1 canvas widget with scrollbars


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, here 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 user has quite precise control of the location of the text characters.

---

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 my home directories. 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 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 --- '-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.

I think that I have used a nice choice of the 'pack' parameters. 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: 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.

---

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.


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 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 CODE :

Here is a link to CODE for the script 'tkMovingText.tk'.

With your web browser, you can 'right-click' on this link --- and in the menu that pops up, select an item 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:

  • PROVIDE AN OPTION to save an animation as an ANIMATED GIF File :
    (or as a movie file, such as a '.mp4' file).

    A 'WriteAniGIF' (or 'WriteMovie') button could be added to the GUI, and a technique like that used in the 'Merge 2 Images' script or the 'Grid Warp an Image' script or the 'wheeeMorph' script of the FE 'tkGooies' system could be used to make an animated GIF file.

    This enhancement would add a lot of code to this already-long Tk script --- but it will probably be worth it --- to make capturing an animation as easy as 'falling off a log'.

  • PROVIDE MORE TEXT-MOVEMENT OPTIONS :

    Some more text-movement options could be added by adding more options to the 'listbox' widget --- such as diagonal movement options.

    To 'generalize' the diagonal movement, one could add a widget by which the user could specify the angle of movement --- and maybe even replace the listbox by an angle specification widget, where the sign of the angle helps specify the direction of the movement. Examples: +90 is 'bottom-to-top' movement, -90 (or 270) is 'top-to-bottom' movement, 0 (zero) is 'left-to-right' movement, and 180 is 'right-to-left' movement. And with similar intepretations of angles like +45, -45, and so on.

    And some 'wacky' text-movement options could be added, such as a 'falling rain of text characters' option --- like the raining text seen in some screensavers and in the 'Matrix' movies.

    And some kind of 'swirling text' options could be considered.

  • PROVIDE A 'PERSPECTIVE' TEXT-MOVEMENT OPTION :

    I would like to be able to make the text look like it is disappearing into the distance --- like the text in the introduction of some of the 'Star Wars' movies.

    I do not have a clue how to do this (smoothly) while using the 'create text' command on a Tk 'canvas' widget. This might take some 'create image' technique, which would probably take a lot more CPU cycles per movement of the text lines.

    In short, this might take using a different technique for drawing the text characters and lines of characters --- which would lead me to do this 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 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 (and wiki.tcl.tk scripts) that can make it relatively quick work to compose

  • widget definitions,
  • bind statements, and
  • procedure code.

And when you get to the testing-and-debugging phase of development of a script, here is a page that describes the wonderfulness of the 'wish' 'stack trace' facility, which can make the testing-and-debugging go relatively quickly and painlessly.


IN CONCLUSION

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).

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.

As I have said on at least one other 'tkGooie' page 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 the page for tkMovingText
--- a utility in the FE 'tkGooies' system, in the 'TEXTtools' 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. >

This FE web page was created 2016 Aug 04.

This code-and-description has not been posted on a wiki.tcl.tk page.
If I ever do so, I plan to add a link to that page here ---
as a backup and alternative to this page.