Storyboard Suite + JSON deliver rich data to embedded UIs

Communicating between a Storyboard application and external sources is straightforward and flexible. Storyboard provides a number of connectivity options ranging from its native SBIO API for system engineers, to JSON (JavaScript Object Notation) for more web-centric programmers.

JSON with Storyboard

JSON is a great option to use with Storyboard because of how closely it resembles Lua. They are both lightweight for use in embedded applications, simple for humans to read and write, and easy for machines to parse and generate.

Using the Lua JSON module makes it easy to encode/decode incoming/outgoing JSON strings to Lua tables, which can then be parsed and used within the Storyboard application.

Example of JSON String Decoded

The following Lua example demonstrates how an incoming JSON string is decoded, and how the “message” data is used as the alarm text and the “timeout” data is used to dismiss the alarm dialog box after a certain amount of time has passed.

local json = require "dkjson"

function cb_alarm_show(mapargs)
	local ev = mapargs.context_event_data
	local json_data = ev["json"]
	local data = {}
	local json_table = json.decode(json_data)
	if (json_table == nil) then
		return nil
	local alarm = json_table

	-- text message
	data["alarm_l.alarm_c.txt"] = alarm["message"] 
	-- make sure the layer is visible
	data = {}
	data["hidden"] = 0
	gre.set_layer_attrs_global("alarm_l", data) 
	-- if timout isn't 0 set up a timeout callback
	if alarm["timeout"] ~= 0 then
		gre.timer_set_timeout(cb_alarm_hide, alarm["timeout"])

Not only can JSON be a solution for local system communication, but also for transmitting data remotely over the Internet. Simply adding the Lua Socket and Lua JSON modules enables Storyboard applications to communicate over the Internet, enabling engineers to easily create IoT (Internet of Things) applications.

Below is a an example of a Storyboard application requesting weather data from the Internet.

http = require("socket.http")

function cb_get_weather(mapargs) 
local v, b, c, h
local City = "Ottawa,CA"
local url_current

  	local data = {}
   	b, c, h = http.request(url_current)
   	v = json.decode(b)
   	data["Layer.temp.text"] = math.floor(v.main.temp)

These examples quickly highlight JSON communication. Another option is SBIO, which we will cover in another blog post. Stay tuned!

Mississippi State University chooses Storyboard Suite to deliver award-winning in-car HMI design

MSUEcocar2TeamWhen we learned that Mississippi State University (MSU) was evaluating Storyboard Suite to design and develop a fully integrated center stack in the EcoCAR 2 competition, we were thrilled to support them in such an exciting and innovative project. The EcoCAR series is a Advanced Vehicle Technology Competition that provides university students hands-on experience with completely overhauling a vehicle to reduce its environmental impact, while retaining or enhancing its functionality and performance. As part of the challenge, the rising stars behind tomorrow’s technologically savvy vehicles were also tasked with developing a new media-rich center stack unit. In-car Human Machine Interfaces (HMIs) are becoming increasing common and evolving rapidly, both from a technology and design standpoint. The best HMIs enhance, not disrupt, driver experience and are intuitive and attractive from a design standpoint. It was exciting for Crank to see MSU tackle this challenge with enthusiasm and a keen design eye, and to be part of the future of in-car HMI design.


We love seeing the innovative and cool projects that our customers deliver using Storyboard Suite. Watching teams use Storyboard to tackle unique design challenges for their embedded UIs gives us valuable insight for future enhancements and capabilities. These customer success stories continue to prove why Storyboard is such an important tool in the UI developer’s toolbox.

If you haven’t tried Storyboard Suite yet for your embedded UI projects, download a free 30-day trial and take it for a test drive.


What is Storyboard?

What_Is_storyboardHere at Crank we spend countless hours developing new features for GUI designers, making new demos and tutorials to educate users, and working with customers to deliver custom services and support. Because we live and breathe our own tools on a daily basis, it gives us pause when someone asks us, “What IS Storyboard anyway?” We’ve created mounds of content showcasing Storyboard features and demos of them in action, but perhaps we need to pull out of the weeds a bit to give a high level view of what Storyboard is, who it benefits, and why you should get it for everyone on your gift list this year.

So, what IS Storyboard (anyway)?

You know that “Internet of Things” that all your friends are talking about at parties? I would wager that it’s impossible you haven’t heard of IoT. Our world is becoming increasingly connected, and at the intersection of the Internet of Things and the people it serves are the end nodes and devices that deliver a deluge of data for human consumption. The visual representation of all of this information is realized by graphical user interfaces (GUIs), designed and optimized for displays of all types.

So what tool do you use to design those GUIs?

Oh yeah. We do that.
Simply put, Storyboard Suite is a toolbox for designers of graphical displays. With Storyboard you can design your UI–fast, and you can use the same tool suite to deploy the UI to whatever device you are working with. But you don’t want to read marketing copy, so watch this 101 second video instead.

And now you know.

Don’t forget to download a free 30-day trial of Crank Storyboard Suite to take it for a test drive, and be sure to check out our ever-expanding video library to learn even more about what Storyboard is and how to use it.

Fujitsu IdeaBoxx featuring Crank Software: Fast-tracking GUI design

SONY DSCImagine you’re a designer of graphical interfaces (GUIs) for embedded devices. If you are reading this blog, you likely resemble this. Now, picture receiving a box that contains everything you need to realize the dream of getting a functioning prototype of your designs up and running in minutes–on a real device, not your desktop. Pretty awesome picture, right?

This week Fujitsu Semiconductor announced IdeaBoxx, a complete graphics development environment aimed at designers of embedded applications. That’s you! With Crank Software and Fujitsu joining forces, IdeaBoxx contains all of the hardware and software goodness you need to build UI prototypes quickly and deploy optimized graphics to the hardware within minutes.

Diving into the experience for Graphic Designers and the benefits to customers, this video from Fujitsu showcases how quickly users can take industry-standard design files, like Photoshop PSD files, import them into Storyboard Suite, create animations, and then see their GUIs on hardware.


Storyboard Suite for IoT: A tool everyone in your organization can use

Storyboard_Suite_DesignerIn most companies, a developer’s time and skill is in high demand, and when we are prototyping UIs for embedded devices we don’t always want to engage a developer’s deep technical expertise. Unfortunately though, many UI development tools require a high level of technical prowess, leaving designers and marketers reliant on a developer’s schedule and skill set.

This isn’t the case with Crank Software’s Storyboard Suite. While Storyboard can be used to design and develop very complex UIs for embedded devices, it can also be used to demo and prototype UIs before pulling in development resources for production applications.

When Green Hills Software wanted to showcase the capability of their software architecture for securing IoT devices based on their INTEGRITY RTOS, their Marketing team created the UI for a secure payment credit card demo. They were able to design and build the UI thanks to the ease-of-use of Storyboard Suite’s tools, and their development team were able to add their programming expertise later in the design cycle. This allowed the Marketing team to move forward with the design and prototyping stage without having to wait for development resources.

You can see this payment security demo on Freescale’s Internet of Tomorrow Tour. Visit to find out where when this tour will be coming to a city near you!