Download your favorite Linux distribution at LQ ISO.
Go Back > Articles > Technical
User Name


By stomfi at 2006-03-08 07:49
Part 5 - Runtime Revolution Scripting

When Runtime Revolution starts it presents the user with some windows that look like these:

Picture of Runtime Revolution 2.2.1:

Anyone who uses the GIMP for image manipulation will be familiar with this type of application layout.

To start a new project, click on File New Stack. Enlarge the stack window to fit the Story Board layout. Right click in the window and select Stack Property Inspector to change the name of the stack to "SB" and it's title to Story Board.

Picture of Stack Property Inspector:

Close the inspector by clicking the top right X and right click again and select the card properties. Change the name of the card to "mygraphics". All these names are suggestions that I will use. You can use any that you like as long as you use your names in the RunRev scripts when referring to them.

Add an image field. The image field can be selected from the bottom of the tool box, or from the "Object" drop down menu in the application main bar.

Picture of the Tool Box:

Resize the image by dragging a corner. Right click on the field and select the Property Profile item from the pop up menu. The property menu will appear with Basic Properties selected.

Picture of Image Properties Menu:

I have change the name of this image field to "Im1". This name "Im" with an image number will be used in the script to calculate which image field aligns to a particular image source file. Click the "Show Border" and "Three D" options to turn them on.

By clicking the button on the "Basic Properties" item, a list of other property types will drop down. Select the one which says "Size and Position".

Picture of Image Size and Position Property:

Set the width, height, and location fields. Leave the lock size and position option for now.
We are going to copy this field another 48 times using a script in a temporary button. This is an easy way of performing this otherwise tedious action. Using the tool box, select a standard button and move the mouse to the right of your window, click and drag so it is big enough to see without trouble. Right click on this new button and select "Edit Script" from the pop up.

The script editor window will appear waiting for you to type your first script.

Picture of a Blank Edit Window:

This picture show a blank window for "Im1" but the one you open will say something like "Button 1".

We want the button to activate when the mouse button is released, the normal action for buttons.

Type in the RunRev command

on mouseUp
and hit the Enter key

The editor very nicely put in a blank line followed by

end mouseUp
and leaves the cursor in the blank line ready for more commands.

These will consist of a copy command, initialisations, a loop containing a paste command and some calculations to rename and move the copied field.

This script shows the differences and similarities between RunRev Transcript and Linux shell scripting. I have put in plenty of comments so you can see what is happening.

on mouseUp
  #Copy image field to clipboard
  copy image "Im1"
  #Make a number for the first pasted image field
  put 2 into NUMB
  #initialise the location of the first field
  put 55 into LLOC
  put 55 into TLOC
  #Initialise the new location increment
  put 110 into INCR
  #initialise numbers for the column and row counts
  put 2 into CPOSN
  put 1 into RPOSN
  #Loop around until board filled
  repeat while NUMB < 48
    #Create next image field name
    put ("Im" & NUMB) into NEXTIM
    #past the copied field object
    #The pasted object's ID  is put into the "it" holder
    #set the name to NEXTIM
    set the name of it to NEXTIM
    #Calculate the new position
     if RPOSN <= 7
       if CPOSN <= 7
         #Create a new location construct
         #set a new Left location
         #Only need to increment if column is not the first one
         if CPOSN > 1
           add INCR to LLOC
         end if
         put (LLOC & comma & TLOC) into NLOC
         #Increment CPOSN
         add 1 to CPOSN
         #Got to the end of a row so reset the column and increment the row position
         put 1 into CPOSN
         add 1 to RPOSN 
         #Increment the Top location
         add INCR to TLOC
         #Reset the Left location to the first column
         put 55 into LLOC
       end  if
     end if
     #set the new image location
     set the location of image NEXTIM to NLOC
     #Increment the image field number
     add 1 to NUMB
  end repeat
end mouseUp
RunRev has helpful documentation and by clicking the Documentation icon on the main RunRev bar and selecting the Dictionary, you can type in the names of commands like mouseUp, put, add and repeat to see an explanation and examples of use.

Picture of a help item window:

RunRev also puts in the indentation for you. Once you have completed typing, click the "Apply" button. To activate this script select the "Browse Tool" either from the Tools drop down menu or by clicking the "hand" icon at the top left of the Tool Box. Clicking on Button 1 should fill your story board window with 48 more image fields.

If it didn't, you have got an error (bug) in your script. RunRev supplies a nice script debugging facility and a Variable watcher so you can step through the script and see what values get put into the variable names.

Picture of Script Debugging:

In the debug picture, the Script Debug Mode option has been selected from the script editor "Debug" drop down and the Variable Watcher selected from the main bar "Development" drop down.

Although these two windows are shown inside the story board window, it is better to align them so that their respective title bars are just out side the story board window, otherwise they will be completely hidden when the Button 1 is clicked and won't be able to be clicked to show what is happening.

Notice the small red square adjacent to "copy image "Im1"". This is a break point which you set by clicking the mouse at this point inside the grey column.

Select browse mode, click Button 1, click the title bars of the two smaller windows, and click the "Step Over" button in the editor window. Each time you click this button it will step to the next instruction it has to perform.

You can see the values of each variable set so far in the Watcher.

The next picture shows the values after one pass through the script.

Picture of Variable Watcher:

Notice CPOSN is now 3, which was the last to be set at the bottom of the script, LLOC is 165, which is the horizontal location from the left of the previous image "Im2", and NLOC is 165,55.

This debugging tool is very useful especially when running an external Linux shell script, as any errors in the shell script can be viewed in the area underneath by clicking on the particular variable line.

Can you see that many of the actions associated with a RunRev Transcript are similar to those you learnt in Linux shell scripts, although the wording is a bit different. In our Australian multicultural society, it's a bit like the way one would converse with two different people with little English from two different ethic groups. We know each has different words for the same meaning.

Now would be a good time to save the RunRev project file as $HOME/SB/bin/develop/SB.rev. Once you have selected a folder and name, every time you save it will overwrite the old one without asking. You will find that you have to click the story board window and then move to the main bar without the mouse cursor going over any other windows to be able to select save from the "File" drop down.

Once you have saved the project, you can go ahead and populate the right side of the story board, selecting the required buttons, text and image fields from the Tool Box. Move Button 1 to blank space as you will use it again with a different script to copy the Transcript which you will put into "Im1" to all the other image fields.

Picture of every object:

The "CLICK ME" button is a "pull down menu". Right click and select the properties option. You need to set the name. Label, and menu items in the basic features.

Picture of Click Me basic properties:

This is the full list of items. Notice that the number displayed is one more than the number in the list of Menu Items including the blank line. It is one more as we may enter another item and forget to change this. The wise script hacker prepares for change and minimises mistakes.


Refresh Project List

Select Colours and Patterns from the Properties button. In the Fill option click on the pattern column. The picture shows a selection of default patterns. I used one from the Metacard Compatible selection. Use the "Text" drop down from the main menu to select "bold" and a large enough size. If you need to change the text colour you can do this where you changed the fill pattern.

Picture of Fill and Colour options:

I used this property menu on Card Properties to change the background of the whole story board window.

The ANIMATION CONTROL object is another drop down menu with just two items.


Save your project once more and right click on one object checking that it is in the correct location and click the "Lock Size and Position" option in Size and Position features. Left click on another object and the properties menu will reflect the new object. Lock its size and position and do the same for every one except Button 1.

Save one final time and quit the RunRev application until next time. If you want to practice and find out more, start a new stack called "TEST" and see what you can achieve.

This has been quite a learning curve in using the basic features of the Runtime Revolution IDE for creating and populating a window card with various objects, writing and debugging a Transcript, getting used to a new scripting language, and changing properties of objects on the card.

In Part 6 you will create and copy the image script, and write more Transcripts and shell scripts for the activities the story board performs.

Most of these activities require external Linux applications, so make sure you have recent copies of the GIMP and Tuxpaint installed as well as the netpbm tools. Animation uses the gifsicle application. You should be able to find all these for your platform by googling on the web.

When we add sounds in a later article, you will need ecasound, aumix, alsamixer, aplay and Audacity. If you need to compile an application I shall be showing you how to do this for gifsicle. Take my word, it's a lot simpler than what you have been doing so far, but just as satisfying. Each new thing that you learn how to do in these articles is just a small step in achieving PC Power User status. By the time you have finished this project you will have learned to use all the tools that turn you into one, and if you can show others, guru status shall be conferred.

by Bruce Hill on Sat, 2006-04-01 17:35
Mate, some of those screenshots are badly distorted.

And maybe you should start your article with what Runtime Revolution is?


All times are GMT -5. The time now is 06:58 PM.

Main Menu
Write for LQ is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration