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

type		examples
boolean		false true
integer		0 5 25 -7
float		0.5 -3.1415927
string		"Test"
color		black 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 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.

Scriptio Reference

Table of Contents

Script Format