Thanks TU Detroit!

TU Detroit 2017 banner

At any given moment last week, the more than 3000 attendees at TU Detroit were talking about autonomous vehicles, safety, and cybersecurity, while in our booth, we spoke to many automotive design and development leaders who wanted to bring it all together within rich, engaging HMIs.

Here are some of the things that Brian and Nik talked about with them in our booth – the current and future state of automotive HMI development.

  • Good (great!) HMI design is critical for user adoption and brand loyalty, especially now that more connected systems are being fed through a small number of panels in the vehicle
  • Combining safety with stunning visuals is a big challenge. Brian spent a lot of time with connected car and design leaders in front of our 3D cockpit demo running on the BlackBerry QNX Platform for Instrument Clusters and NXP i.MX 6. Bringing together an ISO 26262 pre-certified platform and a fast, engaging UI built by Storyboard Suite led to some great conversations.
Demo: Storyboard + BlackBerry QNX Platform for Instrument Clusters

Demo: Storyboard + BlackBerry QNX Platform for Instrument Clusters

“Engineers go into the dark for two months, then come back with a UI that’s ruined my design vision!”

  • This was a common story from designers and led Nik to demonstrate how Storyboard enables designers to work in Photoshop, developers to work in code, and maintains the vision of both. This short video explains how:

  • Development leads want to deliver more and do it in less time. This isn’t a new concept for software but it is a challenge for automotive teams trying to keep up with new technologies and consumer demands. For HMI development, a major time consumer is design iterations, as versions are built, validated, and adjusted based on user feedback and differences between designer expectations and developer realities. Storyboard helps teams fly through iterations with tools such as Photoshop re-import, graphical comparison tools, and rapid deployment on a variety of targets.
  • Great HMIs aren’t limited to automotive, as vendors asked questions about supporting platforms outside the car, such as smart home devices and wearables. Storyboard supports them all, across a wide range of hardware and operating systems.

We also heard good things about our demo in the Texas Instruments booth, running on Green Hills Software INTEGRITY.

To learn more about Storyboard Suite, check out our latest on-demand webinars.

Click to watch

See us at NXP FTF Connects in San Jose

NXP FTF Connects 2017

Less than two weeks away, NXP FTF Connects in San Jose brings together developers, thought leaders, vendors, and OEMs for two days of education and inspiration around the Internet of Things (IoT) and autonomous vehicle revolution.

We’ll be there to showcase the latest in automotive HMI and IoT user interface (UI) development, including the only platform that lets designers and developers work side-by-side to create amazing user experiences on a wide range of NXP productsStoryboard Suite.

HMI cluster & infotainment demos – see the future of automotive interfaces and just how much you can pack onto today’s NXP platforms.

Multi-market demos – whether you’re in the medical, smart home, industrial or consumer/white goods industry, we have the UI expertise and demos for you. You can download them for different NXP platforms here to get a preview of what we’ll be showing.

Storyboard Suite demos – think you can build a user interface is less than 12 minutes? We’ll walk you through the entire UI creation process, from Adobe Photoshop to deploying and debugging on a real target.

We’re also giving a talk on the best strategies to create beautiful user experiences for the IoT.

The GUI of Things: 5 strategies to create beautiful user experiences for the IoT

When: Wednesday,  June 21, 10:15 A.M.
Presenter: Thomas Fletcher, V.P. Research & Development, Crank Software, Inc.
Room: Carmel
What: Creating the best user experience for the IoT offers unique challenges, as the “system” consists of multiple pieces of hardware with varying capabilities and users demand the same rich, personalized interfaces that they get on their mobile phones. This session explains why user interface (UI) development for the IoT is different and identifies five ways to evolve development processes to meet current needs for beautiful, engaging experiences that also meet shorter release timelines.

This presentation will cover how the UI designer and developer can work better together, streamlining the addition of animations and behavior, reducing iteration churn, validating designs quickly, and the benefits of encapsulated architecture. It will also include a live demo of Crank Software’s Storyboard Suite on the high-performance NXP i.MX series applications processor that pulls all these strategies together.

We’re expecting FTF Connects to be very busy, so drop an email to Nick, our intrepid sales manager, to set up a time to chat and see Storyboard Suite in action.

Meet Nick


Visit us at TU-Automotive Detroit next week

TU Automotive Detroit_2017

TU-Automotive Detroit is only a week away (June 7-8, in Novi, MI), and we’re busy finalizing, flashing, and packing some really cool demos for you to see. To witness the latest in automotive HMI development, including the only platform that lets designers and developers work side-by-side, drop by booth C240 for a chat.

Here’s what you’ll see:

HMI cluster & infotainment demos – see the future of automotive interfaces and just how much you can pack onto today’s processors. We’ll be showing our latest designer’s creations running on the NXP i.MX 8 platform.

BlackBerry QNX Platform for Instrument Clusters – we’ve taken the BlackBerry QNX Digital Instrument Cluster Platform, built an instrument cluster in Storyboard Suite, and flashed it to an NXP i.MX 6 System on a Chip (SoC) to deliver a fast UI on a robust cluster platform. Come check it out!

For light reading, you can check out our guest post about digital instrument cluster design on the QNX Auto Blog.

Storyboard Suite demos – think you can build a user interface is less than 12 minutes? Nik Schultz, our talented field applications guru, will walk you through UI creation, from Adobe Photoshop to deploying on a real target. In his own words:

“We can do the work of a designer and developer, including adding animations and backend event logic, before you’ll run out of questions.”

We’re expecting TU-Automotive to be very busy, so drop an email to our president, Brian Edmond, to set up a time to chat and see Storyboard Suite in action.

Meet Brian or Nik


Webinar: A better way to build UIs with Embedded Artists

Crank Software & Embedded Artists webinar


Whether you’re an embedded user interface (UI) designer, developer, or team lead, you’ve probably come across these issues before:

  • Designer: The final product doesn’t look like the design I created
  • Developer: Finding or building a board that fits our functional, performance, and environmental requirements is nearly impossible
  • Team lead: Do I delay the release to get the UI design just right? Can I accept the tradeoffs between design and development? Does my budget allow for the board my developer wants to build?

The embedded UI development process shouldn’t be this hard and, in fact, it’s pretty easy to overcome all these issues and more.

Accelerate UI development now

On June 1st, join Crank Software and Embedded Artists to learn how to bring designers and developers together on low-risk, low-cost hardware using Storyboard Suite on NXP i.MX 7-based computer-on-modules (COM). Crank Software will demonstrate features that support ease-of-use for designers and simplify the challenge of inevitable design churn and iteration. This includes: design import and re-import from Adobe Photoshop, creating vibrant animations via the built-in timeline, and seeing how to quickly deploy and debug your app on real embedded hardware.

Be fast like this cat

Deliver UIs as fast as this cat

Embedded Artists will explain how their COM boards and display adapter solutions accelerate development across display types and resolutions, making it easy to focus on your core business and deliver applications faster. This build or buy calculator illustrates the costs of building your own boards.

3 reasons to sign up

  1. Learn how to reduce (or eliminate!) the churn between design and development
  2. Find out how purpose-built COM boards and adapter solutions accelerate time to release
  3. If you don’t believe the words, see how quickly it can all be done via live demonstrations

You can also ask questions at any time to help understand how all this fits into your team.

Accelerating UI development with Crank Software & Embedded Artists
Thursday, June 1, 2017
8:00 A.M EDT or 1:00 P.M EDT


If you can’t attend the live webinar, don’t panic. Our webinar recordings are always available here for on-demand viewing.

Storyboard Suite vs. Qt, part 2: Which is better for embedded?

Storyboard & Qt comparison 2

(read part 1 here)

Last time we compared Qt and Storyboard Suite across three criteria: designer workflow, resource usage and performance, and platform scalability. In this second and final post, we’ll cover:

  1. Application architecture
  2. Testing your user interface (UI)
  3. Time to experience and overall cost

It’s important to remember that Qt is an excellent framework that performs well across a wide variety of applications – there’s a reason why it’s so popular. However, we’re just focusing on embedded devices here and not making any claims that Storyboard is better across all types of apps.

Application architecture

By default, a Storyboard application enforces a clean separation between the user interface layer and the backend, with a well-defined data model and events API in between. The data model is generated from the UI design and is used by the Storyboard engine at runtime. This architecture leads to a robust, portable, and highly optimized application that also lets the designer and developer work in parallel to build the app. They can literally work on the same application at the same time because they’re working on two self-contained components.

This separation results in faster testing and iteration of both sides of the application and allows the designer to change the UI – say, after design reviews or user testing – with little to no impact on the code underneath. Photoshop Re-import Design IterationWe’ll discuss the benefits of this down below.

By design, Qt allows you to create your own application architecture in essentially one of two ways. Using standard Qt distributions (i.e., not Qt Lite), you get one monolithic application that has the UI and underlying libraries tightly coupled together. You can enforce your own clean separation between the UI layer and backend but, in our experience, we find that most teams can not or will not invest the time to do it. They’d rather get their UI up and running quickly than focus on defining and implementing best practices for architecture and maintenance.

“You may want to think about separating the presentation from the business logic to make it easier (or at least possible) to move the code, say, from the desktop to a touchscreen interface (which might mean moving from widgets to QML).”
– Top 10 Scary Qt Mistakes, ICS Insight blog

The second option that Qt has recently announced is Qt Lite, a trimmed-down version of Qt that changes the include philosophy from “everything included” to starting with the minimum deployable configuration and letting you add additional modules. Qt Lite comes with a new configuration system that lets you declare the content you want from each module and includes a new, software-based Qt Quick 2D Renderer as an alternative to relying on hardware that supports OpenGL. While this customizability is powerful, it still takes knowledge and time to act on it, and the framework currently supports only ARM Cortex-A SoCs, with Cortex-M7 MCUs being considered for the future.

Testing your UI

There are a few methods for testing Qt applications from a UI perspective:

  • Qt Test – Qt’s built-in testing framework, including basic GUI testing for mouse and keyboard simulation. Qt Creator includes an autotest feature that builds on Qt Test.
  • Qt Quick Test – Qt’s built-in testing framework for QML applications.
  • Build your own tests or use any number of C++-based test tools, such as Google Test or Squish by Froglogic.

Storyboard Suite offers two ways to support your application testing: tools built into the product and APIs that expose methods and data to include in your own test framework. For example:

  • Testing the UI: Storyboard allows you to capture and serialize the complete event stream between the UI and runtime, letting you dump data to the terminal or use the included sample application to play back the stream. You can also inject events into the application via the iogen tool. These features allow you to run functional, performance, and memory tests across a variety of inputs and outputs.
  • Identify UI changes: Storyboard provides a screen capture plugin, letting you perform pixel-based comparisons between different versions of the UI.
  • Deep performance testing: The Storyboard logger plugin lets you capture various application performance metrics, such as redraw times, action execution times, and event processing times.

These tools (and more) are useful for developers but what about designers?

To review, validate, or simply show off, designers can use the built-in simulator within Storyboard (which actually runs a version of the Storyboard runtime built for the host computer) or quickly run on real hardware in just a few clicks. Storyboard_Suite_DesignerWith Storyboard 5.0, there are additional options to execute applications direct-to-target via SCP or as a standalone Microsoft Windows executable. And since there’s no cross-compilation with Storyboard, you can run it on multiple target types, such as Android or iOS mobile devices, if you want to pass your designs around the team for feedback.

Speaking of which…

Time to experience and overall cost

We coined the phrase “time to experience” to mean the time it takes to get an application from design to runtime, letting the designer show off and validate their creation with stakeholders. With Qt, the designer must work with a developer to realize their design in code and deploy it to the target hardware. This usually involves back and forth between the two as the design has to be tweaked to fit into development constraints and it definitely includes all the hiccups of debugging and running a real application.

Qt has recently released a beta version of a Photoshop customization and synchronization feature but it looks like it’s limited to Qt Quick Controls and not the entire UI.

With Storyboard, time to experience is much faster because a developer isn’t actually needed – the designer simply imports their design from Photoshop, adds any desired animations and behavior, and runs on either the built-in simulator or real hardware. This video shows how you can take an existing design and deploy it on an NXP i.MX board in less than 12 minutes…real time!

Storyboard also allows you to tweak some or all of the UI design and re-import the changes for immediate validation, as in this example of two different versions of the same UI (click to enlarge):

Photoshop reimport

What about time to release?

Comparing debugging, deployment, and testing times between Storyboard and Qt is a challenge, as it depends on the application being built, the experience of the people building it, etc. It also depends on what is being built, as Qt includes APIs for Wi-Fi, Bluetooth, database integration, and more, while Storyboard is purpose-built for UI development. When we focus strictly on UIs, two things we can compare are the iterations and handoffs that occur between design and development.

Typically, and one can argue this happens 100 percent of the time, designs are handed off to developers and UI/UX practitioners don’t see it again until later on, sometimes waiting until alpha or beta product testing. This siloed approach, in which there is a complete loss of design control, creates development delays as the designer tries to adapt UI features for a product that’s getting closer and closer to release. It would be fair to say that the developer wields a lot of power here, as release timelines get closer and “good design” is sacrificed for “code complete.”

Traditional vs. Storyboard workflows

Comparison between workflows (click to enlarge)

With Qt, there are two implications. First, UI elements will look like any other Qt application, unless additional time is spent to customize the look and behavior. Second, delays are introduced into the timeline as designers and developers go back and forth to achieve a compromise between design intent and what the code can actually do. Try imagining how long it would take to transform a complete Photoshop layout into a C++ Qt app.

With Storyboard, the designer and developer work in parallel within the same environment right from the start and, most importantly, the final UI reflects exactly what the designer intended, in look and behavior. You don’t have to imagine transforming a Photoshop layout into a runtime application, Storyboard does it for you. There are no back and forth delays and, with the other tools that Storyboard provides, such as Photoshop re-import, design compare and merge, the animation timeline, and simulator testing to name a few, every step of the design to development process is streamlined.

“We had three months to deliver on our technology concept car for the Consumer Electronics Show, and choosing Crank’s Storyboard Suite to develop many of our UI components proved to be an excellent decision”
– Andy Gryc, automotive product marketing manager, QNX Software Systems Limited, a subsidiary of BlackBerry

As far as cost is concerned, it’s important to consider that while Qt for Application Development has both free and commercially-licensed versions, the embedded device version, Qt for Device Creation, is available only under commercial license. You can see a license comparison and pricing of Qt options here.

For both Qt and Storyboard, the actual cost to you depends on the type of license and number of development seats. The overall project cost, however, is dependent on how many cycles of design, development, and testing you go through to release your product.

The choice is yours

Between this post and the last, we hope you have enough information to decide which UI development framework is right for you. If you’ve taken the time to read them, great, otherwise, the tl;dr is:

  1. To rapidly create lean, high-performance embedded UI applications that match designer intent for aesthetics and user experience, across a wider variety of platforms, choose Storyboard Suite.
  2. To create embedded UI applications with a pre-configured software stack that reduces work for features beyond the UI, choose Qt for Device Creation.
  3. To get the best of both worlds, check out how to integrate Storyboard Suite and Qt.