Documentation: Overview| Installation| Reference

Scriptio Reference

Table of Contents

Script Format
Command Format
    Value Types
    Variables
    If-Then
    Loops
    Operators
    Expressions
    Arrays
Objects
    arrow
    circle
    display
    ellipse
    frame
    line
    movie
    picture
    rectangle
    square_root
Entry Objects
    ask
    button
    checkbox
    radio
Changing Attributes
    recenter
    recolor
    rename
    repict
    resize
    restyle
Miscellaneous Commands
    clear
    focus
    goto
    group
    initialize
    launch
    layer
    move
    pause
    slide
Transitions
    fade
    grow
    wipe
Colors
Functions
    Absolute
    Answer
    Bottom
    Cos
    Height
    Left
    Length
    Random
    Right
    Round
    Sin
    Sqrt
    StringWidth
    Top
    Width
Settings
Author Mode
Java Audio Applet
Audio Controller Skins
Web Browsers
Eclipse Plug-in

 

top

Script Format

The first character of a line in a script file indicates the type of information that follows in the line.

:     Specifies that the remainder of the line contains a command. Example:
:display "Hello" at {20,20}
+ Indicates a timing mark. At the time indicated, the following activity commands will be executed during an exposition. Example:
+10.5
- This is a comment and is ignored by the script parser. Example:
-this next section explains the widget
~ Insert a pause in milliseconds for text-to-speech module (future enhancement). Example:
~1000
else All other characters are assumed to be part of the narration. Formatting commands such as <B> and <I> can be part of this text.

 

top

Command Format - Grammar

A command line contains a command word and a list of attributes and values. Here is an example:

  :display "hello" color blue size 20

In this command line, the text "hello" is displayed in blue and with a font height of 20 pixels.

Value Types
Here are some value types supported in the scripting language:
typeexamples
boolean       false   true
integer0   5   25   -7
float0.5   -3.1415927
string"Test"
colorblack blue orange red white ... (see colors)
exampleVariables
Variables can be set anywhere in a script. The type of a variable depends on the type of the value that it contains.

There are several preset global variables:
    button_selected  -- the label of the last selected button
    title  -- the document title
    audio_duration  -- length in seconds of the audio soundtrack
Here is the format for assignments:
  set variable to expression
exampleIf-Then
The if-then statements have the following format; the elseif and else clauses are optional:
  if expression then
    if_statement(s)
  [elseif
    elseif_statement(s)]
  [else
    else_statement(s)]
  end if
exampleLoops
There are several different looping structures available:
  repeat
    statement(s)
  end repeat

  repeat until expression
    statement(s)
  end repeat

  repeat while expression
    statement(s)
  end repeat

  repeat with variable from startValue to stopValue [by stepValue]
    statement(s)
  end repeat

  repeat with variable in valueList
    statement(s)
  end repeat
Operators
Numeric operators:   +   -   *   /
Logical operators:   &&   ||   ^     !
String operators:   +
Compare operators:   =   !=   <   <=   >   >=
Tertiary operators:   ? :
 
exampleExpressions
Expressions are actually evaluated in JavaScript, so expressions have the same precedence and evaluation ordering of JavaScript.

You must use an outer set of parentheses for an expression in the command line. As with any language, the rule of thumb is to always use parentheses whenever when in doubt.
 
exampleArrays / Lists
The format for a list is:
{ expression [ , expression... ] }
An item of a list can be referenced in an expression using the left and right bracket characters.
top

Objects

examplearrow: display an arrow
arrow
    [after  label]  -- position the object after the referenced object
    [angle  float]  -- angle of arrow
    [at  point/label]  -- where to display the picture
    [by  point]  -- position the picture by this relative amount
    [center  boolean]  -- center the object horizontally - use after 'at'
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [enabled  boolean]  -- enable picture for mouse clicks
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [head  integer]  -- length in pixels of angle head
    [label  string]  -- identifier label (string)
    [overlay  boolean]  -- overlay status
    [size  point]  -- the size of the picture as a list of {width,height}
    [to  point/label]  -- the absolute destination
    [transparency  integer]  -- transparency value in range is [0,100]
    [under  point/label]  -- where to display object (under object) - absolute
    [wipe  seconds]  -- wipe time
examplecircle: draw a filled-in circle
circle
    [after  label]  -- position the circle after the referenced object
    [at  point/label]  -- where to display the circle
    [by  point]  -- position the object by this relative value
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the color
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [label  string]  -- identifier label
    [overlay  boolean]  -- overlay status
    [size  size]  -- the frame size
    [to  point]  -- the absolute other corner
    [transparency  integer]  -- transparency value in range [0,100]
    [under  label]  -- display object under this referenced object
    [wipe  seconds]  -- wipe time
exampledisplay: create a text object
display  [string]  -- the text to display
    [after  label]  -- position the text after the referenced object
    [at  point/label]  -- where to display object
    [bar  boolean]  -- display a bar over the text
    [bullet  boolean]  -- prefix string with a bullet and a space character
    [by  point]  -- position the text by this relative value
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the text color
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [face  fixed/sans/serif or string]  -- the text font face
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow text over the specified time
    [label  string]  -- identifier label for object
    [overlay  boolean]  -- overlay status
    [size  integer]  -- the text size
    [style  plain/bold/italic/underline]  -- the text style
    [subscript  size]  -- display characters in sub-script
    [superscript  size]  -- super-script the characters
    [transparency  integer]  -- transparency value in range is [0,100]
    [under  label]  -- position the text under the referenced object
    [wipe  seconds]  -- wipe time
exampleellipse: draw the outline of the ellipse
ellipse
    [after  label]  -- position the circle after the referenced object
    [at  point/label]  -- where to display the circle
    [by  point]  -- position the object by this relative value
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the line color
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [label  string]  -- identifier label
    [overlay  boolean]  -- overlay status
    [size  size]  -- the frame size
    [to  point]  -- the absolute other corner
    [transparency  integer]  -- transparency value in range [0,100]
    [under  label]  -- display object under this referenced object
    [width  integer]  -- width of line
    [wipe  seconds]  -- wipe time
exampleframe: draw the outline of a rectangle
frame
    [after  label]  -- position the picture after the referenced object
    [at  point/label]  -- where to display object - absolute
    [by  point]  -- where to show object - relative
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the line color
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [label  string]  -- identifier label
    [overlay  boolean]  -- overlay status
    [size  size]  -- the frame size
    [to  point]  -- the absolute other corner
    [transparency  integer]  -- transparency value in range [0,100]
    [under  label]  -- display object under this referenced object
    [width  integer]  -- width of frame border
    [wipe  seconds]  -- wipe time
exampleline: display a line
line
    [after  label]  -- position the object after the referenced object
    [at  point/label]  -- where to display the picture
    [by  point]  -- position the picture by this relative amount
    [center  boolean]  -- center the object horizontally - use after 'at'
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [enabled  boolean]  -- enable picture for mouse clicks
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [label  string]  -- identifier label (string)
    [overlay  boolean]  -- overlay status
    [size  point]  -- the size of the picture as a list of {width,height}
    [to  point/label]  -- the absolute destination
    [transparency  integer]  -- transparency value in range is [0,100]
    [under  point/label]  -- where to display object (under object) - absolute
    [wipe  seconds]  -- wipe time
examplemovie: embed a QuickTime movie  (beta)
movie  [string] -- embed QuickTime movie [string] in script
    [after  label]  -- position the picture after the referenced object
    [at  point/label]  -- where to display the picture
    [by  point]  -- position the picture by this relative amount
    [center  boolean]  -- center the object horizontally - use after 'at'
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [enabled  boolean]  -- enable picture for mouse clicks
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [height  integer]  -- height of picture
    [label  string]  -- identifier label (string)
    [overlay  boolean]  -- overlay status
    [size  point]  -- the size of the picture as a list of {width,height}
    [transparency  integer]  -- transparency value in range is [0,100]
    [under  point/label]  -- where to display object (under object) - absolute
    [width  integer]  -- width of picture
    [wipe  seconds]  -- wipe time
examplepicture: show an image
picture  [string] -- the image to show in the exposition window
    [after  label]  -- position the picture after the referenced object
    [at  point/label]  -- where to display the picture
    [by  point]  -- position the picture by this relative amount
    [center  boolean]  -- center the object horizontally - use after 'at'
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [enabled  boolean]  -- enable picture for mouse clicks
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [height  integer]  -- height of picture
    [hilited  integer]  -- image to use for image when enabled in 'hover' mode
    [label  string]  -- identifier label (string)
    [overlay  boolean]  -- overlay status
    [selected  string]  -- selected image used when enabled pictures are selected
    [size  point]  -- the size of the picture as a list of {width,height}
    [transparency  integer]  -- transparency value in range is [0,100]
    [under  point/label]  -- where to display object (under object) - absolute
    [width  integer]  -- width of picture
    [wipe  seconds]  -- wipe time
examplerectangle: draw a filled-in rectangle
rectangle
    [after  label]  -- position the picture after the referenced object
    [at  point/label]  -- where to display object - absolute
    [by  point]  -- where to show object - relative
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the line color
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [label  string]  -- identifier label
    [overlay  boolean]  -- overlay status
    [size  size]  -- the rectangle size
    [to  point]  -- the absolute other corner
    [transparency  integer]  -- transparency value in range [0,100]
    [under  label]  -- display object under this referenced object
    [wipe  seconds]  -- wipe time
examplesquare_root: draw a square-root
square_root
    [after  label]  -- position the picture after the referenced object
    [at  point/label]  -- where to display object - absolute
    [by  point]  -- where to show object - relative
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the line color
    [direction  left/right/...]  -- wipe direction
    [duration  seconds]  -- duration to draw overlay
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [label  string]  -- identifier label
    [overlay  boolean]  -- overlay status
    [size  size]  -- the rectangle size
    [to  point]  -- the absolute other corner
    [transparency  integer]  -- transparency value in range [0,100]
    [under  label]  -- display object under this referenced object
    [wipe  seconds]  -- wipe time
top

Entry Objects

exampleask: ask for user entry
ask  [string]  -- the default answer
    [after  label]  -- position object after this referenced object
    [at  point/label]  -- where to display object - absolute
    [by  point]  -- where to show object - relative
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the text color
    [label  string]  -- identifier label
    [length  integer]  -- maximum length of answer
    [numeric  boolean]  -- entry must be numeric
    [size  integer]  -- the text size
    [under  point/label]  -- where to display object (under object)
examplebutton: create button
button  [string]  -- the button text
    [after  label]  -- position button after referenced object
    [at  point/label]  -- where to display button
    [by  point]  -- relative position of where to display button
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the button text color
    [default  boolean]  -- default button
    [enabled  boolean]  -- button is or is not enabled
    [label  string]  -- identifier label
    [size  integer]  -- the button size
    [under  label]  -- position button under referenced object(s)
    [visibility  boolean]  -- visibility of button
    [width  integer]  -- the button width
examplecheckbox: create checkbox
checkbox  [string]  -- the checkbox text
    [after  label]  -- where to display object (after object) - absolute
    [at  point/label]  -- where to display object - absolute
    [by  point]  -- where to show object - relative
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the checkbox text color (default is black)
    [checked  boolean]  -- whether or not checkbox is initially checked
    [label  string]  -- identifier label
    [size  integer]  -- the checkbox size
    [under  label]  -- position button under referenced object(s)
    [visibility  boolean]  -- visibility of checkbox
    [width  integer]  -- the checkbox width
exampleradio: create radio button
radio  [string]  -- the radio button text
    [after  label]  -- postition checkbox after referenced object(s)
    [at  point/label]  -- where to display object - absolute
    [by  point]  -- where to show object - relative
    [center  boolean]  -- center the object horizontally - use after 'at'
    [color  color]  -- the text color (default is black)
    [selected  boolean]  -- whether or not radio button is initially selected
    [label  string]  -- identifier label
    [size  integer]  -- the radio button size
    [under  point/label]  -- where to display object (under object) - absolute
    [visibility  boolean]  -- visibility of radio button
    [width  integer]  -- the radio button width
top

Changing Attributes

examplerecenter: recenter item(s)
recenter  label(s)  -- label(s) of item(s) to center
    [horizontal  boolean]  -- center items horizontally - default
    [vertical  boolean]  -- center items vertically
examplerecolor: recolor item(s)
recolor  label(s)  -- label(s) of item(s) to color
    to  color  -- color
examplerename: rename item
rename  label  -- label of item to rename (cannot be a group)
    to  label  -- new item label
examplerepict: change the target image of a picture
repict  label  -- label of picture item to rename
    to  string  -- new picture name
exampleresize: resize item
resize  label(s)  -- label of item(s) to resize [display objects only]
    to  integer  -- text size
examplerestyle: restyle text item(s)
restyle  string  -- label(s) of item(s) to color
    to  plain/bold/italic/underline  -- text style
top

Miscellaneous Commands

exampleclear: clear all or a set of objects
clear [label(s)]  -- specify the label(s) of the objects to clear
    [direction  left/right/...]  -- wipe direction
    [except  label(s)]  -- label(s) of item to NOT clear ([list of] string)
    [fade  seconds]  -- fade time in seconds
    [grow  seconds]  -- grow time
    [wipe  seconds]  -- wipe time
examplefocus: focus an entry object
focus  [label]  -- label of entry object
examplegoto: goto script block
goto  string  -- script block label to goto
examplegroup: group objects
group  label list  -- labels of objects to group
    as  string  -- label of grouped objects
exampleinitialize: reset to default settings
initialize
examplelaunch: launch web page
launch  string  -- launches URL in browser
examplelayer: change object layering
layer  string  -- item(s) label to layer
    [after  label]  -- place objects after specified object
    [before  label]  -- place objects before specified object
    [behind  boolean]  -- place objects at tail end of all objects
examplemove: move item(s) to a new location
move  label(s)  -- item(s) label to move
    [after  label]  -- move item(s) to after referenced object or objects
    [at  point/label]  -- where to move object(s) to
    [by  point]  -- relative position to move object(s)
    [center  boolean]  -- center the object horizontally - use after 'at'
    [to  point/label]  -- item destination
    [under  label]  -- move object(s) to under reference object
examplepause: pause exposition
pause  [string]  -- button title
    [button  boolean]  -- display button
exampleslide: slide item(s) to a new location
slide  label(s)  -- item(s) label to slide
    [after  label]  -- move item(s) to after referenced object or objects
    [at  point/label]  -- where to move object(s) to
    [by  point]  -- relative position to move object(s)
    [center  boolean]  -- center the object horizontally - use after 'at'
    [duration  seconds]  -- amount of time for slide operation
    [to  point/label]  -- item destination
    [under  label]  -- move object(s) to under reference object
top

Transitions

Transitions refer to how objects appear and disappear. There are three types of transitions: fading, growing, and wiping. See the slide command for transitions that involve sliding an object from one physical screen location to another.

examplefade
A fade is when an object goes from transparent to solid, or from solid to transparent when it is erased. Basically all non-entry objects can be faded, and the argument of this transition is the number of seconds for the fade to occur. Examples:
    :display "Hello" fade 2 label "hey"
    :clear fade .5
examplegrow
To have an object start small and grow in size, use the grow attribute. This can also be set during a :clear operation, and of course this means that the object gets smaller. The argument is the number of seconds that growing an object will take, for example:
    :display "Hello" grow 1
    :clear grow .3
examplewipe
To wipe an object is to reveal the object in a specified direction over a specified time interval. For example, wiping an object from left-to-right will show the left-most side of the object first, and the right-most last.

Valid directions for wiping are:
    left     -- Reveal from right to left
    right    -- Reveal from left to right
    down     -- Reveal from top to bottom
    iris     -- Reveal from the inside to the outside
    squeeze  -- Reveal from the center to the left and right
    stretch  -- Reveal from the center to the top and bottom
    up       -- Reveal from the bttom to the top
Example:
    :display "Hello" wipe 1 direction right
top

Built-in Functions

Here are the available built-in functions:

exampleAbsolute(arg)
Returns the absolute value of the argument.
exampleAnswer(arg)
Returns a user-entered answer from an entry control, such as a text field, checkbox, etc. If no argument is given, then the label of the last selected button is returned.
exampleBottom(arg(s))
The bottom-most position of the argument(s).
exampleCos(arg)
Calculates the cosine value.
exampleHeight(arg(s))
The largest height of the argument(s).
exampleLeft(arg(s))
The left-most position of the argument(s).
exampleLength(arg)
Calculates the number of characters of the string argument.
exampleRandom(arg)
Returns a random number from 0 to the argument.
exampleRight(arg(s))
The right-most position of the argument(s).
exampleRound(arg(s))
The rounded value of the argument.
exampleSin(arg)
Returns the sine of the argument.
exampleSqrt(arg)
Returns the square root of the argument.
exampleStringWidth(arg)
Returns the width of a string argument in pixels.
exampleTop(arg(s))
The top-most position of the argument(s).
exampleWidth(arg(s))
The maximum width of the argument(s).
top

Colors

A set of pre-defined colors are available, or the exact value can be set using "#RRGGBB" within the scripts.

white cream yellow pink hotpink red
dkred orange dkorange green dkgreen ltblue
blue dkblue violet dkviolet olive brown
dkbrown ltgray gray dkgray black

One can also set a variable to contain customized colors. Example:

    :set highlight_color to "#FFD0C3"
    :display "Hello" color highlight_color
top

Settings

Scriptio is launched in JavaScript, and the script settings are sent in a property array. Here is an example:

   var scriptio = new Scriptio({script:'demo.txt', soundtrack:'demo.mov', width:400, height:290});

Here is a list of all possible settings:

setting description type example
arrow_angle Angle in degrees of arrow head lines. integer 30
arrow_head Length in pixels of arrow head. integer 12
author_height Height of author area. integer 120
author_margin Space above author area. integer 20
author_mode Activation of author mode. boolean false
auto_start Start the script automatically. boolean true
background_color The background color. string color or "transparent"
background_image Background image. URL/file back.jpg
border_color Border color. integer black
border_width Width of border in pixels. integer 1
continue_margin Margin around "Continue" button used with :pause command. integer 10
controller Show or hide the audio controller. boolean true
font_color Default font color. color #000000
font_default Default font. string Arial, Helvetica, sans-serif
font_fixed Font for fixed-width display attribute. string Courier, Monaco, monospace
font_sans Font used for sansserif display attribute. string Arial, Helvetica, sans-serif
font_serif Font used for serif display attribute. string Times, Times New Roman, New York, serif
font_size Default font size. integer 14
height The height of the Script object. integer 300
loop Endlessly repeat script. boolean true
name The identifier of the object used by Scriptio. string scriptio
nocache Add a cache-busting value when loading a script. Useful for debugging scripts. boolean false
overlay_value Preset transparency value of objects with overlay attribute. integer 50
path Relative path to the Scriptio folder. string ../scriptio/
player Specifies an audio player. Choices: java,mp3,html5,flash,quicktime. string html5
preload Directs Scriptio to pre-scan script and preload images. boolean true
rewind_interval Interval in milliseconds of repeated rewind/rorward changes when icon is pressed and held. integer 200
rewind_seconds Number of seconds to move forward or backward if rewind or forward icon is pressed. integer 5
script The URL or file name of the source script. string demo.txt
silence_extra Extra seconds added to end of last autio timing mark (e.g. +20). integer 3
silence_interval Interval in milliseconds of "silence;" audio. integer 100
skin Use a different set of images for the audio controls. string azure or ghost or ruby or vanilla
soundtrack The URL or file name of the soundtrack file. The audio controller (QuickTime, Flash, or Java applet) depends on the suffix. string demo.ogg
style Extra CSS style information added to a created Scriptio object. string margin-left:20px
text_height Height in pixels of popup text script window. integer 300
text_width Width in pixels of popup text script window. integer 400
timer_interval Interval in milliseconds of executing script transitions. integer 50
width The width of the Script object. integer 400
top

Author Mode

If author mode is enabled (see "author_mode" under Settings), then an area appears underneath the window where authoring information appears.

In this area, one can see scripting error messages in the console, the audio timing offset (in seconds), the cursor position in pixels, and the location/size/label of an object if it is selected.

Author Mode

Author mode also shows more options in the popup menu that is activated by clicking on the down triangle at the right-hand side of the audio controller. These options include viewing the source script, showing global variables, clearing the author console area, and restarting a script.

top

Java Audio Applet

To play Ogg Vorbis, AU, or WAV audio files, a Java applet has been written and included in the Scriptio package. This Java applet requires Java version 1.2 or later since it is based on the multimedia package.

The source code for the applet is included in the Scriptio package. Also included is customized source code for JOrbis, an Ogg Vorbis decoder by JCraft.

top

Audio Controller Skins

As of version 0.1, one can programmatically choose from different "skins" for the audio controller icons. See the Audio Skins presentation for an example.

To create a new skin, first start by copying all images in the scriptio/images/ folder and appending a hyphen and your skin name to each file name. For example, use play-myskin.gif for the original file play.gif if your new skin is named myskin. Next edit these files in an image editor while preserving the image width and length. Finally add the property skin:'myskin' to the Scriptio launch arguments in your web pages.

These four skins are included in the latest release:

  • Azure
  • Ghost
  • Ruby
  • Vanilla
top

Web Browsers

Scriptio has been tested on the following web browsers:

  • Windows: Internet Explorer versions 6,7,8
  • Windows: Mozilla FireFox version 3.6
  • Windows: Opera version 8
  • Mac OSX: Safari version 5
  • Linux: Mozilla FireFox version 3.5
top

Eclipse Plug-in

Eclipse is an open source integrated development environment (IDE) available at www.eclipse.org. A plug-in to this package that aids in developing Scriptio presentations has been developed. This plug-in displays lines in the source script file colored according to whether a line contains an audio timing mark, script command, narrated text, or is a comment.

To use this plug-in, copy the scriptio-editor folder from the release package to the Eclipse plugins directory, then restart Eclipse. Edit the source files if you wish to change the default colors.

To open a source script, right-mouse-click the file within Eclipse and choose the Scriptio editor. Currently this editor is connected to files with the ".txt" suffix, but this can be changed by editing the plugin.xml file.