Crank Storyboard Suite


Table of Contents

What Is Storyboard Suite
A New Way to Build Embedded User Interfaces
Storyboard Designer and Storyboard Engine
A Non-Compiled Solution
Storyboard Software Updates
Compatibility with Previous Versions
Storyboard Architecture
Application Model Hierarchy
Event Driven Interaction Model
Events to External Applications
Data Binding for Dynamic Behavior
Context and Variables
Storyboard Model Internal Variables
Layer variables
Group variables
Control variables
Table variables
Animation Definitions
Typical Development Workflow
Start a New Project: From Photoshop or from Scratch
Create and Organize Screen Content
Bind Events to Invoke Actions
Simulate and Export Model for Engine
Storyboard Designer Environment
Storyboard Designer Workbench
Anatomy of a Storyboard Designer Project
Storyboard Designer Editor
Editing Content
Editor Toolbar
Direct Editing
Storyboard Designer Views
Actions View
Application Model View
Animation Timeline View
Working with Animations
Images View
Layers View
Navigator View
Outline View
Problems View
Properties View
Component View
Variables View
Variable Creation
Generating Events on Variable Change
Notes View
Storyboard Designer Utilities
Design Notes
GoTo Dialog
Storyboard Search Dialog
Resize Storyboard Application
Proportionally Scale Application and Contents
Scale Application and Reposition Contents
Custom resizing options
Resource Clean Up Wizard
Consolidate Images Wizard
Trim Images Wizard
Split Images Wizard
Merge Control Images
Creating A Storyboard Project
New Empty Storyboard Project
New Project from a Photoshop PSD File
New Project from a Storyboard Sample
New Project from Storyboard Embedded Engine File
Existing Project Import
Working with Multiple Application Design Files
Adding Content to your Application
Object Naming and Reserved Namespaces
Working with Events
Event Editor
Opening the Event Editor
Adding an Event Definition
Data Element Types
Changing Element Array Length
Reordering Event Data Elements
Editing Min and Max Attributes
Using the Storyboard IO Connector
Live Mode
Saved Mode
Data Element Editors
Connecting Events to Actions
Event and Action Matching Rules
Using Variables to Create a Dynamic UI
Table Variables
Triggering Events on Variable Changes
Creating and Applying Animations
Animation Action
Timer Keyframe Animations
Screen Transition Animations
Simulating your Application
Scripting with Lua
Lua Action Callback Function
Passing Extra Parameters to Functions
Lua Execution Environment
Asynchronous Lua Support
Lua Debugger
Lua Executables
Working with Images
Image Rotation
Rotate At Center
Rotate At Custom Point
Alpha and Transparency in Images
Creating Scalable 9-Patch Bitmap Images
Working with Text
Translation and Internationalization
Creating and Editing Translation Content CSV Files
Working with Rich Text
Working with Touch, Gestures and User Input
Configuring Touchscreen Input
Windowed Applications
Gesture Support
Multi-Touch Gestures
Enabling Gesture In Your Application
Creating Lists and Tables
Working with Scrolling Content
Scroll Synchronization
OpenGL and 3D Rendering
Storyboard 3D Rendering Model
3D Rendering Fundamentals
The Scene Graph and Transformations
Material Support
Animation and Variable Support
Mapping FBX Animation data into meaningful structures
Support for Animation Takes
Troubleshooting 3D Problems
Working with OpenGL Shaders, Transforms and Compressed Textures
3D Transforms and Custom Shaders
Custom Shader Support
Compressed Textures
Working with Audio and Video
Media Backend Services
GStreamer Application
GStreamer Pipeline
FFmpeg Plugin
Multi-File Application Development
Simulating and Exporting Multiple Model Files
Resolving Conflicts and Synchronizing Changes
Reusable Graphical Components
Creation Guidelines and Conventions
Editing Components and Propagating Changes
Collaboration and Team Development
Revision Control System Integration
Comparing and Merging Model Files
Comparing and Merging Projects
Exporting Storyboard Projects for Sharing
Exporting and Running on your Embedded Target
Export Workflow
Selecting Files For Export
Deployment Bundle Packages
Storyboard Embedded Engine (GAPP)
Storyboard Compressed Package (SBP)
Native Android Application (APK)
Native iOS Application
Windows Standalone Launcher (EXE)
Storyboard Embedded Resource Header (C/C++)
Export Transfer Methods
Filesystem
SCP Transfer
Exporting from the Command Line
Exporting from the Command Line using Export Configuration
Setting up Storyboard Engine
Font Environment Variable
Running Storyboard Engine
Target Specific Configurations
Linux x86, armle
FBDEV
TSLIB
MTDEV
SBIO
Microsoft WinCE, Compact7 win32, armle
Requirements:
Libraries:
Yocto Jethro Linux kernel (3.14) OpenGL, FBDEV, armle
Requirements:
Working with Mobile Platforms: Android and iOS
Exporting to iOS Devices
Xcode
iOS Developer Account
Code Signing Certificate
Device IDs
Application IDs
Provisioning Profile
Adding Extra Libraries for iOS
Exporting to Android Devices
Adding Extra Libraries for Android
Storyboard Lua Android Integration
Android Lua Java API
Storyboard Lua Android Example
Sending and Receiving Data with Storyboard IO
Storyboard IO Transport protocols
Connecting to a Storyboard Application
Sending Events to a Storyboard Application
Event Naming Conventions
Serialized Data and the Event Format String
Setting Application Data
Receiving Events from a Storyboard Application
Debugging Storyboard IO
Debugging egress (Storyboard Engine sending to backend)
Debugging ingress (Storyboard Engine receiving from backend)
Storyboard IO Utilities
iogen
iorcv
Optimizing Your Storyboard Application
Performance Considerations
Measuring Performance
Choosing the Right Image Format(s) Bit Depth
Framerate (Frames Per Second)
Scaling Images
Reducing Output Verbosity
Adjusting Engine Rendering Options
Managing Resource Memory
Extending Storyboard Functionality
User Defined Action Templates
User Defined Render Extension Templates
Structuring Your Photoshop Import Content
PSD file Structure for Import into Storyboard
PSD File Requirements
Application Model Hierarchy
Artboards
Layer Effects and Blending Modes
Naming Requirements
Naming Conventions
name_layer
name_group
name_control
name_up and name_down
Common Photoshop Elements
Transparency
Naming Convention Deviation
Sub Group Folders
Re-Importing Photoshop and Updating Content
Re-Importing Photoshop Content
Storyboard Lua API
Storyboard Lua API
gre.APP_ROOT
gre.SCRIPT_ROOT
gre.PLUGIN_ROOT
gre.set_data
gre.get_data
gre.set_value
gre.get_value
gre.resolve_data_key
gre.get_control_attrs
gre.set_control_attrs
gre.get_table_attrs
gre.set_table_attrs
gre.get_table_cell_attrs
gre.get_group_attrs
gre.set_group_attrs
gre.get_layer_attrs
gre.set_layer_attrs
Render Effects:
gre.set_layer_attrs_global
gre.move_control
gre.move_layer
gre.set_focus
gre.get_focus
gre.send_event
gre.send_event_target
gre.send_event_data
gre.greio_disconnect
gre.clone_object
gre.delete_object
gre.clone_control
gre.delete_control
gre.poly_string
gre.get_string_size
gre.load_resource
gre.dump_resource
gre.walk_pool
gre.load_image
gre.timer_set_timeout
gre.timer_set_interval
gre.timer_clear_timeout
gre.timer_clear_interval
gre.animation_create
gre.animation_add_step
gre.animation_destroy
gre.animation_trigger
gre.animation_stop
gre.animation_pause
gre.animation_resume
gre.animation_create_tween
gre.touch
gre.key_up
gre.key_down
gre.key_repeat
gre.redraw
gre.quit
gre.thread_create
gre.receive_event
gre.env
gre.log
gre.mstime
gre.rgb
gre.torgb
gre.rtext_text_extent
Storyboard Lua Canvas API
gre.get_canvas
CANVAS:get_dimensions
CANVAS:fill
CANVAS:fill_rect
CANVAS:fill_poly
CANVAS:stroke_line
CANVAS:stroke_rect
CANVAS:stroke_poly
CANVAS:clear_rect
CANVAS:set_pixel
CANVAS:set_alpha
CANVAS:set_line_width
CANVAS:draw_image
CANVAS:draw_text
Storyboard Lua DOM Module
gredom.get_application
gredom.get_object
DOMOBJECT:get_name
DOMOBJECT:get_type
DOMOBJECT:get_parents
DOMOBJECT:get_children
DOMOBJECT:get_variables
Lua DOM Samples
Storyboard IO API
Storyboard IO API
gre_io_add_mdata
gre_io_close
gre_io_free_buffer
gre_io_grow_buffer
gre_io_open
gre_io_receive
gre_io_send
gre_io_send_mdata
gre_io_serialize
gre_io_size_buffer
gre_io_unserialize
gre_io_zero_buffer
gre_io_get_error_codes
gre_io_get_error_message
Storyboard Engine and Plugin Options
Storyboard Engine Manager Options
Plugins and Plugin Options
Standard Event Definitions
Standard Event Definitions
System Events
gre.init
gre.quit
gre.redraw
gre.rendermgr.error
Pointer Events
gre.press
gre.motion
gre.release
gre.touch
gre.mtevent
gre.mtpress
gre.mtmotion
gre.mtrelease
gre.inbound
gre.outbound
Keyboard Events
gre.keydown
gre.keyup
Screen Manager Events
gre.screenshow.pre
gre.screenshow.post
gre.screenhide.pre
gre.screenhide.post
Focus Events
gre.gotfocus
gre.lostfocus
Table Events
gre.table.viewport
gre.cell.gotfocus
gre.cell.lostfocus
Table Scroll Events
gre.table.drag_start
gre.table.drag_stop
gre.table.scroll_start
gre.table.scroll_stop
gre.table.scroll_cancel
Layer Scroll Events
gre.drag.start
gre.drag.stop
gre.scroll.start
gre.scroll.stop
gre.scroll.cancel
Mobile Events (Android and iOS)
gre.mobile.on_pause
gre.mobile.on_resume
gre.mobile.on_background
Android Events
android.onBack
Windows Embedded Compact 2013 (WEC2013) Events
win.gesture.pinch
win.gesture.[up|down|left|right|unknown]
Plugin Specific Event Definitions
Timer Events
timer.[name] Timer Events
Animation Events
gre.animate.complete.[name]
gre.animate.stop.[name]
Gesture Events
gre.gesture.up
gre.gesture.down
gre.gesture.left
gre.gesture.right
Screen Display Capture (ScreenDump) Events
gre.screendump.complete
gre.screendump.failed
Screen Event Capture/Playback Events
gre.capture.started
gre.capture.stopped
gre.playback.started
gre.playback.complete
gre.playback.stopped
Media Events
gre.media.exit
gre.media.timeupdate
gre.media.durationupdate
gre.media.statechange
gre.media.complete
gre.media.error
Logger Events
gre.%perf_prefix%.start
gre.%perf_prefix%.stop
gre.%perf_prefix%.set.options
Standard Action Definitions
Built-in Action Definitions
gra.screen
gra.screen.fade
gra.screen.hold
gra.screen.release
gra.sendevent
gra.datachange
gra.screen.focus.set
gra.screen.focus.next
gra.screen.focus.prev
gra.screen.focus.direction
gra.table.scroll
gra.table.resize
gra.table.navigate
gra.log
gra.resource.dump_def
gra.playback
gra.capture
Plugin Action Definitions
gra.lua
gra.animate
gra.animate.stop
gra.audio
gra.greio
gra.perf_state
gra.redirect
gra.screen.path
gra.screen.scale
gra.screen.glswitch
gra.screen.glrotate
gra.screen.glflip
gra.screen.gldoors
gra.screen.gltip
gra.screen.glcube
gra.screen.rotate
gra.screendump
gra.timer
gra.timer.stop
Media Actions
gra.media.new.audio
gra.media.new.video
gra.media.volume
gra.media.seek
gra.media.stop
gra.media.resume
gra.media.pause
Standard Render Extension Definitions
Common Render Extension Options
Canvas
Circle and Arc
External Buffer
Fill
Image
Polygon
Rectangle
Text
3D Model
Storyboard Tutorials
Importing Sample Projects from Crank's Public SVN
Working with Multiple Application Design Files
Creating a Project
Resolving Conflicts
Creating a 3D Model Application
New Project
3D Model Control
Resize Model
Storyboard Suite Demo Images
NXP
i.MX 6QuadPlus
Demo Details
i.MX 6UltraLite
Demo Details
i.MX 6ULL
Demo Details
i.MX 6DualLite
Demo Details
i.MX 6SoloX
Demo Details
Toradex i.MX 7Dual SoM
Demo Details
Flashing the Image
U-Boot
Copying Image to an SD Card - Linux
Copying Image to an SD Card - Windows
Running the Image
Turn On or Off the Console
STMicroelectronics
STM32F429
Demo Details
STM32F439
Demo Details
STM32 F7
Demo Details
Required Hardware and Software
Package Contents
STM32 ST-LINK Utility
Running the Demo
Importing the Demo into Storyboard Designer
Creating Your Own Demo
Atmel
SAMA5D2
Demo Details
SAMA5D2 with 7 inch Display
Demo Details
Copying Image to an SD Card - Linux
Creating an Image - Windows
Running the Image
Renesas
RZ/A1
Demo Details
Flashing the Image
Linux
TI AM355 Starter Kit
Step 1: Importing A Storyboard Sample
Step 2: Exporting A Storyboard Application
Step 3: Selecting The Storyboard Embedded Engine
Step 4: Configuring The Target Platform
Step 5: Running The Storyboard Application
Raspberry Pi
Release Notes
Release Notes 5.0
Introduction
Storyboard Designer
Changes
Eclipse
Lua Editor
x64
Standalone EXE export
Single Model File
Components
SCP For Target Application Deployment
Locking of Storyboard Designer Elements
Storyboard Canvas Plugin
Custom Animation Tweens
Newlines in Text Properties Panel
Known Issues
Linux x64 Installer
Require Mac OS X 10.8 or greater
Resource Cleanup tool
Storyboard Engine
Changes
FFMPEG
Multisampling
Known Issues
OpenGL on Windows
Texture Memory
3D Layer Rotation
9-Patch
Linux Wayland Runtimes
Flickering Graphics
Release Notes 5.1
Introduction
Storyboard Designer
Changes
Eclipse
x64
Cloning
Keyboard Shortcuts to Group and Ungroup
SCP
Lua Debugger
Known Issues
Linux x64 Installer
Require Mac OS X 10.8 or greater
Resource Cleanup tool
Storyboard Engine
Changes
QNX 7
ST Accordo5
Runtimes No Longer Shipped
Latest Intel Graphics Drivers
Canvas
VxWorks
Renesas RZA1
iOS
Focus Events
Input Rotation
Known Issues
ST Accordo5
Multi-Sampling
Texture Memory
3D Layer Rotation
9-Patch
Linux Wayland Runtimes
Flickering Graphics
Release Notes 5.2
Introduction
Storyboard Designer
Changes
Rich Text Render Extension
Storyboard Connector
Adobe Artboards
PSD Reimport Comparison
Command Line Export Support
Exporting Large Projects
Unused Variables
Internal Variables
History View
Custom Event Editor
Storyboard Search
Known Issues
Ubuntu
3D Model Axis
Designer Notes
3D Control/Layer Rotation
Storyboard Engine
Changes
Native Win32 Runtime Deprecation
Windows Compact 7 (WinCompact7) Deprecation
Compressed Storyboard Package (*.sbp) Support
VxWorks
STM32
Resource Manager
Media Backend
Scrolling Tables and Layers
Scroll Configuration Parameters
ffmpeg Plugin
Frames Per Second Display
Subclipse
Known Issues
Flickering Between Screen Transitions
9-Patch Image Rotation
Tables Not Cloneable
iOS Render Manager
ffmpeg Plugin
Release Notes 5.3
Introduction
Storyboard Designer
Changes
Major Performance Analysis Work
Screen Transitions
Multi-gde
Text Adjustments
Lua
Designer UI Refinements
Quality and Efficiency
Known Issues
Installer
Designer Notes
Ubuntu
3D Control/Layer Rotation
Storyboard Engine
Changes
Raspberry Pi
QNX Scaling
FPS
Gstreamer
Native Win32 Runtime Deprecation
Windows Compact 7 (WinCompact7) Deprecation
ffmpeg Plugin
Frames Per Second Display
Subclipse
Known Issues
Flickering Between Screen Transitions
9-Patch Image Rotation
iOS Render Manager
ffmpeg Plugin
Licensing
Storyboard Suite Licensing

List of Tables

1. Supported Rich Text Tags
2. Supported Style Attributes
3. Options
4. No events are being received
5. A particular event is not being received
6. Event data not correct
7. The trouble shooting steps for egress Storyboard apply in this scenario, so see the above steps.
8. Action Manager Options
9. Data Manager Options
10. IO Manager Options
11. Model Manager Options
12. Render Manager Options: Windows, win32, swrender, OpenGL ES 2.0, x86
13. Render Manager Options: Linux, sdl, x86
14. Render Manager Options: Linux, fbdev, x86, armle
15. Render Manager Options: Linux, directfb, x86, armle
16. Render Manager Options: Linux, Windows CE, Windows Compact 7, Mac OSX, Neutrino 6.5, OpenGL ES 2.0, armle (Beagleboard)
17. Render Manager Options: QNX Neutrino 6.5, Linux, Fujitsu Jade, armle
18. Render Manager Options: WinCE 6.0, Windows Compact 7, win32, armle
19. Resource Manager Options
20. Screen Manager Options
21. 3D model rendering: libgre-plugin-model3d.so
22. Capture/Playback: libgre-plugin-capture-playback.so
23. Gesture: libgre-plugin-gesture.so
24. Linux Input Support: libgre-plugin-dev-input.so
25. Lua Scripting: libgre-plugin-lua.so
26. Linux Multi-Touch Protocol: libgre-plugin-mtdev.so
27. Linux Touchscreen Support: libgre-plugin-tslib.so
28. Logger: libgre-plugin-logger.so
29. QNX input support: libgre-plugin-gfi-input.so
30. Storyboard IO: libgre-plugin-greio.so