Crank Storyboard Suite


Table of Contents

1. 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
2. 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
Animation Definitions
3. 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
4. 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
Images View
Layers View
Navigator View
Outline View
Problems View
Properties View
Component View
Variables View
Notes View
Storyboard Designer Utilities
Design Notes
GoTo Dialog
Storyboard Search Dialog
Resize Storyboard Application
Resource Clean Up Wizard
Consolidate Images Wizard
Trim Images Wizard
Split Images Wizard
Merge Control Images
5. 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
6. Adding Content to your Application
Object Naming and Reserved Namespaces
7. 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
8. Connecting Events to Actions
Event and Action Matching Rules
9. Using Variables to Create a Dynamic UI
Table Variables
Triggering Events on Variable Changes
10. Creating and Applying Animations
Animation Action
Timer Keyframe Animations
Screen Transition Animations
11. Simulating your Application
12. Scripting with Lua
Lua Action Callback Function
Passing Extra Parameters to Functions
Lua Execution Environment
Asynchronous Lua Support
Lua Debugger
Lua Executables
13. Working with Images
Image Rotation
Rotate At Center
Rotate At Custom Point
Alpha and Transparency in Images
Creating Scalable 9-Patch Bitmap Images
14. Working with Text
Translation and Internationalization
Creating and Editing Translation Content CSV Files
15. Working with Rich Text
16. Working with Touch, Gestures and User Input
Configuring Touchscreen Input
Windowed Applications
Gesture Support
Multi-Touch Gestures
Enabling Gesture In Your Application
17. Creating Lists and Tables
18. Working with Scrolling Content
Scroll Synchronization
19. 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
20. Working with Audio and Video
Media Backend Services
GStreamer Application
GStreamer Pipeline
FFmpeg Plugin
21. Multi-File Application Development
Simulating and Exporting Multiple Model Files
Resolving Conflicts and Synchronizing Changes
22. Reusable Graphical Components
Creation Guidelines and Conventions
Editing Components and Propagating Changes
23. Collaboration and Team Development
Revision Control System Integration
Comparing and Merging Model Files
Comparing and Merging Projects
Exporting Storyboard Projects for Sharing
24. 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
Microsoft WinCE, Compact7 win32, armle
Yocto Jethro Linux kernel (3.14) OpenGL, FBDEV, armle
25. 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
26. 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
27. 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
28. Extending Storyboard Functionality
User Defined Action Templates
User Defined Render Extension Templates
29. 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
30. Re-Importing Photoshop and Updating Content
Re-Importing Photoshop Content
A. 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
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
B. 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
C. Storyboard Engine and Plugin Options
Storyboard Engine Manager Options
Plugins and Plugin Options
D. Standard Event Definitions
Standard Event Definitions
System Events
Pointer Events
Keyboard Events
Screen Manager Events
Focus Events
Table Events
Table Scroll Events
Layer Scroll Events
Mobile Events (Android and iOS)
Android Events
Windows Embedded Compact 2013 (WEC2013) Events
Plugin Specific Event Definitions
Timer Events
Animation Events
Gesture Events
Screen Display Capture (ScreenDump) Events
Screen Event Capture/Playback Events
Media Events
Logger Events
E. 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
F. Standard Render Extension Definitions
Common Render Extension Options
Canvas
Circle and Arc
External Buffer
Fill
Image
Polygon
Rectangle
Text
3D Model
I. Storyboard Tutorials
31. Importing Sample Projects from Crank's Public SVN
32. Working with Multiple Application Design Files
Creating a Project
Resolving Conflicts
33. Creating a 3D Model Application
New Project
3D Model Control
Resize Model
II. Storyboard Suite Demo Images
34. 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
35. 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
36. 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
37. Renesas
RZ/A1
Demo Details
Flashing the Image
38. 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
III. Release Notes
39. Release Notes 5.0
Introduction
Storyboard Designer
Changes
Known Issues
Storyboard Engine
Changes
Known Issues
40. Release Notes 5.1
Introduction
Storyboard Designer
Changes
Known Issues
Storyboard Engine
Changes
Known Issues
41. Release Notes 5.2
Introduction
Storyboard Designer
Changes
Known Issues
Storyboard Engine
Changes
Known Issues
42. Release Notes 5.3
Introduction
Storyboard Designer
Changes
Known Issues
Storyboard Engine
Changes
Known Issues
IV. Licensing
43. Storyboard Suite Licensing

List of Tables

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