At the moment !scribble comes in two different forms: an online and an offline version. In the near future an additional standalone presentation application will be developed. Its purpose is to provide an easy and foolproof way of presenting the user’s experiments to others.
The Shockwave version is played back in your preferred browser and does not need any manual downloads or installation. Due to Shockwave’s security architecture it does not allow any import or export of files from or to your harddisk.
The offline version is much more convenient but has to be downloaded first. The advantages are that the user does not have to be connected to the Internet all the time and the possibility of importing and exporting his/her own assets and settings.
!scribble’s interface consists of three basic elements: panels, objects and lines. Objects are graphics provided by !scribble, imported or drawn by the user. They are manipulated via panels, boxes showing all their properties and handlers (read inputs and outputs). Scripts used to manipulate the properties dynamically are called modules. Each of those is controlled again via an accompanying panel.
The main idea and power of !scribble is the combination of modules. A module is represented as a panel consisting of inputs and outputs and lines illustrate the connections between modules. Every output can be connected to multiple inputs but not more than one output can be connected to a single input. If one property (one input) should be affected by several outputs they have to be combined first to one value – for instance by adding them to one sum.
First, the user has to instantiate objects and modules. The properties can be either static or dynamic.
Static values are defined by the user by filling in the wanted value or by setting them interactively during edit-mode. Properties’ values get dynamic by connecting another module’s output to it. Connection is accomplished by clicking on an output, keeping the mouse pressed and releasing it over the intended property. To facilitate this procedure several hints are presented to the user, for instance changing cursors and highlighted areas. After successfully connecting two panels, the connection is illustrated as red line.
The main window is structured into three areas – a toolbar at the top, which displays all available modules and is used for creating new instances, a toolbar at the bottom to control the application and the objects, and the stage where all the panels and objects are placed.
###THE MODULE-TOOLBAR
The toolbar at the top offers access to all available modules. The modules are organized into six categories: operators, constants, functions, behaviors, inputs and conditionals. A dropdown menu shows all modules within a category.
By selecting a module, !scribble generates a new instance of the module. A panel appearing on the stage represents the new instance visually.
In the standard distribution of !scribble many modules are included.
To extend !scribble’s power even further the user can import his/her own scripts. A repository of modules on a public webserver should facilitate and promote sharing of modules. After selecting ‘import f. network’, the user is directed to this collection, but by altering the URL manually, the import from other locations is possible as well.
The offline version is granted access to the local file system and therefore offers the possibility of importing modules from the user’s local storage or other mounted volumes.
The modules are simple text files containing several handlers written in Lingo. The files’ file-extension is ‘ls’.
It is important to make sure that the imported modules are correct regarding syntax and semantics.
Scripts imported dynamically during runtime cannot be examined for errors and therefore could crash the whole application. It is highly recommended to test the scripts in depth before they are made available publicly.
###OPERATORS
The category ‘operators’ contains basic mathematical operations. The current list consists of: abs, addition, division, get angle, get distance, max, min, modulo, multiplication and subtraction.
These are useful for some basic behaviors and for tweaking or combining other modules.
###CONSTANTS The modules in the ‘constants’ category allow an easy way to access constants. At the moment π, e and a user-definable variable are part of this category.
###FUNCTIONS The ‘functions’ drop-down menu shows: cycloid, ellipse, lemniscate, natural logarithm, power, random, sine, spiral, step, step up and down and tangent. These functions create sequences of numbers (step, random) or modify a single number.
###BEHAVIORS ‘Behaviors’ are mainly algorithms, which were developed for interactive applications. The algorithms are based on formulas from various fields or just a combination of simple operators. Currently just ease-out and serial-chain are part of this group.
###INPUTS This group’s modules allow incorporation of the user’s input. The distribution contains the modules keyboard (cursors), keyboard (digits) and mouse.
###CONDITIONALS Conditionals allow internal logic within complex systems and are important to build systems which react on events and interaction. The category includes Boolean expressions like AND and OR and comparative operators like equal, not equal and bigger than.
###THE MODE AND TOOLS TOOLBAR The toolbar at the bottom enables the user to control the application and the objects. The toolbar’s features are: changing !scribble’s mode and appearance, creating, importing and exporting documents and objects, and providing feedback to the author.
###OBJECTS
The ‘objects’ popup menu lists all available objects and offers four ways of getting additional ones. The user can import files from the Internet, his/her local harddisk or just simply paste them from the clipboard.
The option ‘create own object’ opens up a simple vector-shape editor, which allows the user to draw his own rectangles, triangles, circles or free forms. After clicking ‘export’, the newly created object is available in the ‘objects’ list.
###SWITCH TO PLAY/EDIT-MODE
!scribble runs either in ‘play’ or in ‘edit mode’.
When running in ‘play mode’ all property values are recomputed every frame.
In ‘edit mode’, no formulas are evaluated and the user can change several objects’ properties interactively, for instance the position. The newly defined properties are set as static values. Therefore, existing connections of modules controlling the object’s properties are deleted. The shortcut for switching the mode is ‘m’.
###SHOW/HIDE UI
To create effects that are more complex the user has to combine many modules. Soon the panels and lines will fill up the screen.
There are two ways of freeing up screen space – by collapsing the panels or simply by toggling the visibility of the panels and lines.
Hitting the ‘u’-key has the same result as clicking the ‘Show/Hide UI’ button.
###SAVE ON NETWORK/HARDDISK
!scribble is able to save your settings and all used visual objects. The settings are stored in an XML-file, and the application copies the assets to the same folder.
!scribble’s online version stores the files using the backend on http://www.rinner.st/diploma-stuff/!scribble/builds/CURRENT/settings/.
Users are encouraged to make their experiments available for the public by loading them up to the server.
###LOAD FROM NETWORK/HARDDISK To open the user’s or others’ experiments again the user has to import them by clicking the ‘Load from network’/’Load from harddisk’ button. The offline version allows the import from the harddisk and the Internet, the online version is only able to get files from the web.
###CLEAR SCREEN/NEW DOCUMENT If the trails of an object are set to 1, the screen buffer does not get completely redrawn. The option ‘Clear screen’ forces a complete redraw and cleans up the screen. ‘New document’ removes all objects and modules and resets everything else.
###BUGS, COMMENTS? The button to the farthest right in the bottom toolbar offers access to !scribble’s website and contact to the author. The menu provides direct contact to the author by email, a link to the upcoming online version of the user guide and a pointer to a site containing download links to the most up-to-date version of !scribble.
###THE PANELS
The panels and lines are not just part of the user-interface and allow the user to manipulate properties. The interface is as well an illustration of the user’s interaction.
A panel consists of three elements: a title, inputs and outputs.
###TITLE
The panel’s title states the name of the module or the object.
Three buttons on the right allow the manipulation of the panel itself and assist the user.
The first button toggles the panel’s size – either to the height of the title line or full size. This is mainly helpful to clean up screen space and to organize complex documents.
Clicking on the middle button changes the panel’s transparency.
The third button’s purpose is to assist the user. After rolling over or clicking the question mark, a tooltip appears and explains briefly the panel’s use and features. If the module’s author has provided a tutorial file and a link to it in the tooltip the file can be opened after clicking on the link.
To move a panel the user has to click the title line and keep the mouse pressed while moving it.
After rolling the mouse over the title of an object panel a red outline around the object under control illustrates the relation between panel and object.
There is also a button on the left – its purpose is to close the panel.
###INPUT The panel’s inputs are values used for the outputs’ computation. These values can be either static or dynamic. Changing a static value is accomplished by clicking it and typing in a new value. If the value has been dynamic up to now and the user clicks it, the input becomes static.
###OUTPUT
Outputs return the result of a computation. This value can be used to manipulate an object’s properties or as a basis for further calculations.
By clicking an output, keeping the mouse pressed and by releasing it over another panel’s input, this property is based on the first panel’s output.
To assist the user in connecting panels, several hints, for instance changing cursors and highlighted areas, are provided.