Designer Environment Overview

Storyboard Designer is intended for use by both graphics designers and embedded applications developers and is based on the extensible Eclipse framework.

Graphics designers have a rich set of development tools to create and manipulate images.  Storyboard Designer is not meant as a replacement for these tools, but is intended to provide a binding environment where static images can be animated into multi-screen applications by allowing graphics designers to easily import their work into an application design.

Embedded developers typically work in a C or C++ development environment.  Storyboard Designer integrates into the most common Eclipse based embedded development environments so application development can easily be done side by side with other embedded development.

Storyboard Eclipse Workbench

When Storyboard Designer starts the user is presented with the initial empty working environment for application development as shown in Figure 1.  Storyboard Designer presents the user with a central editing area that display a WYSIWYG representation of the application screens as it is being developed.  The Storyboard editor is the primary interface for development and design of the application.  The editor is activated, like any other standard editor in the Eclipse environment, by double clicking on any Storyboard Designer file or right clicking and selecting File > Open.  All Storyboard Designer files use the .gde file extension to identify themselves.

The editing area is surrounded by dockable views that present editing information to the user as the application is being developed.    Many of these views, such as the layer and application view, will provide information relative to the item or items selected in the current editor.  Additional views can be added into the current display by selecting Window > Show View and then selecting the additional views.

The arrangement and selection of views is called a perspective, and many perspectives may be available in a particular Eclipse installation.  Storyboard Designer includes a Storyboard perspective that displays several views by default including a visual outline of the application, the properties of the current selection, the images available for use in the current design and the layers for the current screen.

The default perspective can be adjusted to an arrangement and content that is suitable for any users’ particular needs, including views outside of the normal Storyboard Designer tool.  In order to reset the perspective to its default settings select Window > Reset Perspective … from the main menu.

Figure 1 Initial Development Environment

Eclipse is an extensible framework that readily allows plug and play contributions from multiple vendors.  As a result of this flexibility the specific presentation of the editors and views may be slightly different if Storyboard Designer is integrated into an existing Eclipse based product as a plugin installation.  

Storyboard Workspaces

Storyboard Designer uses the concept of a workspace to limit the scope of filesystem resources that are displayed.  A workspace is a directory in the filesystem that contains projects at its top level and files and directories contained within the projects.

When a new Storyboard project is created, using File > New > Storyboard Application…, it will create an initial project structure in the workspace that contains several default directories in addition to the main Storyboard application design file.

Figure 2 Initial Storyboard Project Layout

The images, fonts, scripts and events directories are automatically scanned for content and that content is integrated into the application designer tools.  In order to import content from the filesystem into these directories, you can use the File > Import > General > Filesystem option or standard copy/paste or drag and drop from other applications.

Each directory scans for a different type of content:

events:

  • This directory and its sub-directories are scanned for event definition files which are text files that have an extension of .evt.  The events contained in the event definition files are then automatically included in the action trigger event list.

fonts:

  • This directory and its sub-directories are scanned for TrueType™ font files.  In general these font files have the extension of .ttf.  The fonts discovered are automatically added to the list of available fonts in the font selection dialog.

 images:

  • This directory and its sub-directories are scanned for image file content.  Supported image files include standard gif, jpeg, bmp and png files.  Photoshop™ psd files can be imported directly as an application or as only the component images using the File > Import > Storyboard Development > Photoshop PSD File menu option

scripts:

  • This directory and its sub-directories are scanned for Lua scripts which have the extension of .lua.  The functions that are found in these scripts are then automatically added to the list of available functions in the Lua action.

The workspace should refresh automatically with content as it is changed in the filesystem, but a refresh can be forced to occur at any time by selecting a project, file or folder and selecting Refresh from the right click menu.

Storyboard Simulator

Included with Storyboard Designer is a simulator environment that is a host compiled version of the Storyboard Embedded Engine.   The engine is included with the development environment to provide direct feedback about the non-static portions of the application development, such as screen transitions and animations.   As much as possible the simulator will represent the execution environment of the target, but often the host system will use a much more advanced graphics system and run with higher performance than most embedded target environments.