Storyboard driving TI’s ADAS Cluster on Jacinto 6

TI Jacinto 6 Crank Storyboard Suite ADASIf you were at TI Village at CES this year you might have seen the digital automotive cockpit demo featuring Storyboard Suite. If not, be sure to check out this quick video from Texas Instruments. This innovative demo showcases an automotive cluster and HUD featuring UIs built with Storyboard and driven by TI’s Jacinto 6 processor.


Using Storyboard Suite to develop high-performance, graphically-rich instrument clusters & HUDs

The cluster demo showcases:

  • Digital Instrument Cluster
  • Turn-by-turn navigation
  • Information & warnings from the Advanced Driver Assistance System (ADAS)

The HUD demo showcases:

  • Turn-by-turn navigation
  • Pedestrian Detection and Lane Departure warnings
  • Context-sensitive content from the infotainment and vehicle systems

Coming soon to Storyboard Suite: Support for 9-patch images

Application design usually means working with an abundance of graphics, and when designing applications for multiple screen sizes, designers have to keep in mind how those images will scale when deployed across different resolutions and aspect ratios. A button that looks great on one screen might have awkward corners or warped text when scaled to fit a screen of a different size. To avoid this, designers often create multiple versions of their graphics in various sizes. While this allows for tight control over the visual presentation of the graphics, it also means extra time, effort, and resources.

So how do we create graphics with scalability in mind without having to duplicate effort, bloat file resources, or sacrifice quality? Enter 9-patch.

What is a 9-patch image?

Essentially, a 9-patch image is a custom graphic that scales the way that you intend it to, which you define when creating the graphic. Where supported, this stretchable image is automatically resized to accommodate the content as defined. The “as defined” part is what allows designers to retain control over how a graphic looks even when it is resized.

Check out this example. Both buttons look the same before, but the 9-patch button retains it’s original appearance when resized to be slightly wider and much higher. The other image scales poorly, especially at the border and corners.


How to define the stretchable areas of an image

9PatchA 9-patch image is a standard PNG image that includes an extra 1-pixel-wide border and must be saved with the extension .9.png. When creating 9-patch images, designers can indicate which areas can and cannot be stretched. We will post our own tutorial when we release the next version of Storyboard Suite, but for now see this tutorial to learn how to create 9-patch images. For more information on the background of 9-patch, check out the Android Developer documentation.

We are stoked about the new features and enhancements that are coming out in the next release of Storyboard Suite, which is just around the corner. 9-patch support is just one of the many features we’ve added to streamline the design process, so stay tuned for release information!

Demo: Storyboard Suite application demo on an STM32F429 MCU

Lately we’ve been busy crankin’ out demo videos to show off Storyboard Suite on a variety of MCUs/MPUs and Operating Systems. The tool to design and develop the UIs behind these embedded application demos–Storyboard Suite–stay the same, but the variety of hardware used for deployment speaks to the reach of our supported targets.

The following Storyboard demo showcases two applications that you’ve probably seen running on other high-performance MPUs. This demo features the STM32F429 MCU with an ARM Cortex-M4 core running FreeRTOS. We’ve taken advantage of Chrom-ART Accelerator to boost the UI graphics without robbing the core of processing power that can be best utilized for the rest of the application.

***Updated with new demos***

We’ve been updating our video library with new demos and videos. Check out our most recent hardware accelerated STMicroelectronics demo featuring a number of Storyboard demos.

Other Storyboard demos and videos are available on our YouTube channel.

To try Crank Storyboard Suite yourself, try our 30-day trial.

Spot the Storyboard Suite UIs at CES 2015


As we wrap up an exciting 2014 here at Crank, we are also looking ahead to the new year and preparing for a little show called CES, in Las Vegas, January 6-9. If you are heading to the show and want to meet up with us, drop us an email. We’d be happy to show you some application demos and give you a sneak peak at features we’ve been working on for our up-and-coming Storyboard Suite release. See them first at CES!

Where can I see Storyboard Suite demos at CES?

Because CES is an event that pulls together the latest and greatest of technology innovation, there’s opportunity to catch a lot of great application demos, and it turns out that Storyboard is the tool suite between several of them. Visit our partners at CES to check out examples of application UIs crafted with Storyboard Suite, such as the following:

Texas Instruments – You’re going to want to go to TI Village (N115-N119) to check out the automotive cluster and HUD demo featuring UIs built with Storyboard Suite. Someone from Crank will be on hand to talk to you about Storyboard’s involvement in this project, answer general questions, and provide Storyboard demos.

Freescale – Have you seen Freescale’s Internet of Tomorrow Tour? It’s a very large truck housing about 120 demos, so it’s pretty hard to miss, and it’s heading to CES. Be sure to check out the IoT Secure Transactions demo, a secure payment credit card application featuring a UI built with Storyboard Suite running on the Green Hills INTEGRITY RTOS.

Atmel – Lifestyle and fitness applications have exploding over the past couple of years. Visit our friends from Atmel and see a treadmill application built with Storyboard Suite. The application features video playback and a touchscreen with multiple controls that can be used to interact with the treadmill’s functionality and feedback data.

You’ll find other applications throughout CES with stunning UIs built with Storyboard Suite. If you find one, tweet us a photo @cranksoftware. We don’t always know where Storyboard UIs might turn up! It’s like a fun CES party game of “Where’s Crank?”.

We hope to see you at the show. It will be awesome!

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!