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.


5 capabilities that entrench embedded UI designers in the development process

The following is a post from Fancy Dan, one of our creative and talented in-house designers. Dan uses Storyboard Suite on a daily basis to create awesome user experiences for embedded applications. I asked him to share the top 5 features that make his job easier and his designs awesome.

Storyboard Suite top features

Dan’s top 5 list

  1. Integrate content from Adobe Photoshop » Storyboard brings a .psd file to life
  2. Add and refine motion easily » Easy to use, but do a lot
  3. Layout and position content precisely » Subtle features that go a long way
  4. Enhance user experience with actions » The combination of trigger events, actions, and parameters
  5. Make it real. Touch the design. » From simulator to target

Integrate content from Adobe Photoshop

As a designer, I find working in Storyboard to be a great experience, and a major contributing factor for this is the Photoshop integration. Photoshop has been around for decades, and it plays nicely with Adobe Illustrator, two tools that I use to design and plan a UI. Many of the design-based decisions I make in Photoshop, such as organization, naming, and planning, are brought forward to Storyboard when I import my .psd. When I start working in Storyboard, I’m working on a project that I already have a good handle on because the Application Model in Storyboard is based on the content from my layers view in Photoshop.

With Smart Objects, I’m able to go back into Photoshop and make edits to my Illustrator content or layer effects and bring them back into Storyboard. Because I can import multiple Photoshop files into Storyboard, when I complete one section of the UI design I can bring it into Storyboard and start adding functionality. At the same time, I can continue to work on the UI design for the next section and bring the UI together in Storyboard as each part is ready for import.

What’s extra great?

The Photoshop re-import process. If I change the look and layout of an existing design in Photoshop, I can re-import the artwork into my Storyboard project. The project compares itself to the new Photoshop file and allows me to replace existing content with the new designs and updates the look, size, and positioning from my redesign and retain existing functionality.

Add and refine motion easily

animation_timelineMotion makes a UI come to life, so it’s important to have a workflow that includes working with animations. In Storyboard, working with animations isn’t convoluted. If I want to create, edit, or preview an animation, it’s pretty straightforward. When recording an animation, changes made to the UI are recorded as animation steps and saved. The animation timeline view shows the saved steps. Here I can see the steps in relation to one another and make further edits to the timing, easing rates, and values. Using the animation preview, the animation can be played back, paused, and scrubbed through so that I can see how all of the movements work together.

What’s extra great?

I can quickly create a reversed version of an existing animation, finely tune the ease rate of motion, and apply a single animation to multiple model objects. These capabilities allow me to easily control how things move without having to touch any code.

Layout and position content precisely

When the design is complete, most of the UI layout has been established. Further refinement like adding logic, motion, and additional content is easy with the layout and positioning options in Storyboard.


Reference point location – The reference point location might appear to be a small detail, but it does a lot for controlling the position and transformation of an object. The reference point location icon is available in the Properties view for dimensions. The top-left reference point shows the x,y location of an object, but selecting another reference point shows and applies transformations based on that relative point. If I want to increase the width of a control by 50 pixels, and have the center point remain the same, I shouldn’t have to move the control 25 pixels to the left and then add 50 pixels to the width. I simply want to add 50 pixels to the width that expands from the middle and let the software figure out the rest.

Property value calculator – An easy way to control the values of a property is to calculate that number in the property field. If I want to move a control 20 pixels left to a third of the way across a screen designed at 720p, I could go to the properties view X: positioning and enter 1280/3-20 (which is the screen width divided by 3, then subtract 20) or enter 1280*.333-20 (which is the screen width multiplied by one-third and then subtract 20) and the X value will automatically calculate 406. If I want a circular progress bar to fill up 43%, I can enter 360*.43 in the Rotation field and the angle will calculate to 154.8º.

Applying some quick math makes it easy to land content in a specific spot. I can apply it to an alpha value, apply it to an offset, or apply it to the timing in an animation. It saves me from going to a separate calculator app, writing it out, or doing it on my phone.

What’s extra great?

Q: Does it use BEDMAS? A: Yes, it does.
Q: What the heck is BEDMAS?

Enhance user experience with actions

It becomes increasingly engaging to work on a UI as it takes on more functionality. Adding actions to the UI improves functionality. There are a lot of combinations and triggers that make actions happen so I’m not limited by what I can do.

Storyboard provides an extensive list of trigger events that goes beyond the basic taps and gestures that are available in most prototyping tools. Many things can trigger an action, such as the completion of an animation, arriving at a particular screen, completed timers, scrolling starts or stops, etc. With a trigger in place, I can select an action. Actions can call an animation, stop an animation, go to a new screen, change some data, start a timer, or, for those who are are scripting savvy, call a Lua event. Depending upon the type, an action’s parameters can vary. An action parameter might cause something to loop, indicate a direction, set a duration, or select an external file. Events can happen any number of ways, to any of the model objects that trigger an event.

What’s extra great?

I can copy an action from one control to other controls. For example, I can copy a screen change action from one button and paste it to other buttons to give them the same functionality.

Make it real. Touch the design.

Working in design, sometimes your work is used only as a representation of the UI. This isn’t limited to UI design. Mock-ups, presenting artboards, and showing prototypes for apps or websites are great, but at the end of the day, seeing the design in the real world and its surrounding context is awesome.

Storyboard keeps the design in the designer’s hands, which enables me to deliver my design vision to the final product. In traditional workflows, this often isn’t the case, and instead, the UI on the embedded device isn’t a reflection of the designer’s work. It’s common for designers to create prototypes that demonstrate how the UI should look and behave, and then provide the development team with the UI assets to create the UI in code. It’s an inefficient workflow to have the development team recreate what the designer has already solved.

Storyboard provides tools that make it easy to quickly export applications directly to hardware for testing. Seeing how an animation runs or how a transition looks on an embedded device gives me insight and confidence that the UI performs as intended. Good design principles value function over form. Using Storyboard, I have everything I need to test how my design will function on an actual target device.

What’s extra great?

I can test my application on an embedded board, make changes to the UI, and then export the app back to the board in under a minute.
*Drops Microphone*

To try Storyboard Suite for yourself (and to feel like a design rockstar), start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.


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

Storyboard & Qt comparison

(read part 2 here)

Given that we’re in the embedded UI/UX development space, a question that often comes up is: How does Storyboard Suite compare to Qt? The quick answer is that there’s no comparison – Qt is a large C++ library of functionality that includes many things and designed to let you do many things, while Storyboard is a purpose-built platform for fast UI development and highly optimized performance. Not to mention that Storyboard also integrates with Qt, so it’s not like the two are mutually exclusive.

Yet, the popularity of Qt is hard to ignore so it’s worthwhile to go beyond the quick answer and explain exactly what makes Storyboard different.

We’ll take a look at a number of factors, including embedded UI design, programming, and performance, plus provide some real, clarifying examples. As always, feel free to comment or ask questions below – we want to make sure you’re getting as much information as possible to make the right choices.

We’ll cover the following topics, starting with 1 to 3 in this post and leaving the rest for part 2 here:

  1. Designer workflow
  2. Resource usage and performance
  3. Platform scalability
  4. Application architecture
  5. Testing your UI
  6. Time to experience and overall costs

Designer workflow

If you’re a designer, it’s safe to say that you would rather focus on creating the best user experience than figuring out Qt object properties, sizes of data types, and build specs. Storyboard makes sure both designers and developers are supported with tools and workflows that are familiar and require little effort to learn.

To make the UI design process as powerful and as painless as possible, Storyboard gives the designer these tools:


By allowing designers to work within Adobe Photoshop, import the results, and run on the actual hardware, Storyboard eliminates the compromises traditionally made when converting from design to code. If you have a button colored, shaded, and cornered just as you like it, it’ll look exactly the same in Storyboard.

Qt, in contrast, forces designers to think and act like a developer, requiring them to not only understand markup language and text editors but also use widgets that have the same look and feel as every other application written in Qt. Qt widgets are customizable, of course, but that incurs time and cost and it would be nearly impossible to find a designer willing to do it.

Plus, custom widgets aren’t as easily maintained as using the Photoshop re-import and graphical compare tools in Storyboard. These let you iterate designs, compare differences between versions, and select the objects you want, all within a visual, WYSIWYG interface. This reduces the time and frustration of going back and forth between designer intent and developer reality.

Qt Creator

Qt does have a visual layout and form designer called Qt Creator, which some say eases the UI design process. The key thing to think of here is that Qt Creator is an integrated development environment (IDE) first and foremost, offering pre-packaged UI elements and requiring that you operate like a developer – quickly moving from the visual interface into text editors, properties, and C++ code. Qt Creator does ease UI layout for a developer but it doesn’t provide nearly all the design, layout, and animation capabilities that a designer needs to create amazing UIs.

Adding animations

The look of a UI is half the story, the other half is adding animations and behavior. Those familiar with Qt will know that animations are specified in code, such as object states and transitions defined through the methods and properties of the QML language. The typical workflow involves coding up logic in an editor, testing the changes, and iterating until you get the experience you want.

In Storyboard, animations are added using an animation timeline similar to what you would find in any video editing tool. This makes it easy to manipulate what the animations are doing and see the timing relationships between elements. Storyboard also provides an animation recording capability, letting you drag, drop, and change the state of objects in the visual editor for playback at runtime. It’s the next best thing to a digital camera!

Storyboard uses Lua scripts for more sophisticated object behavior and such things as event handling between the front and back ends of the application. Lua is very popular among game developers and has simple semantics that are easy to learn (read Learn Lua in 15 minutes by the makers of the Corona game SDK).

So, would you rather work with the true image assets, animations, and behavior or an abstract source code representation of your UI?

Resource usage and performance

We’ll cut to the chase here: the Storyboard runtime footprint is a fraction of Qt’s, has faster render times, and supports a larger number of platforms. The reason is simple: a Storyboard app is simply a data model and engine, both optimized with a reduced semantic set and tuned by us to squeeze the best possible performance out of the specific operating system and hardware it’s running on, including specialized architecture and graphics acceleration. There’s also no resource-hungry Javascript engine to deal with.

In other words, we’ve spent the time to ensure that the Storyboard engine runs fast and that your application consumes the least amount of resources – the golden ticket when it comes to embedded computing. Storyboard also has a plugin-based architecture, meaning you can configure the app even further to reduce memory consumption.

Qt has a large memory footprint and, typically, pulls in many framework libraries to bloat application size further. While it does offer hardware-based graphics acceleration, support is limited to a few platforms and sometimes relies on software fallbacks to get things done, which is less performant and offers little insight into performance characteristics.

Tuning Qt

Now you might be thinking that Qt is also tunable, letting you customize build configurations, how libraries are linked, memory allocation, and so on (you can read how to do it on Qt’s site here and here). While this is technically possible, you do need two things to succeed:

  1. Knowledge and experience with QML, C/C++, compilers, and target-specific performance measurement and testing
  2. Time

To give you an idea of the time needed, read the two pages from the Qt site and estimate how long performance tuning will take for your app.

Or, download the free version of Storyboard Suite now and get a highly optimized runtime specific to your environment without any effort.

Platform scalability

Beyond performance, there are two more things to consider when talking about how well a UI framework suits your chosen operating system and hardware platform. Will the app actually run? How difficult will it be to move the app onto different platforms?

Out of the box, a Storyboard app runs on a variety of platform types, from high-performance, multi-chip microprocessor (MPU) boards to single-chip, resource constrained, microcontrollers (MCU). This is possible due to the optimized, platform-specific architectures and Storyboard engine discussed earlier. You can try running Storyboard at both scales yourself, with this MPU demo image and this MCU demo image (you can run these directly on the target, without downloading Storyboard).

Running Qt on an MCU board is possible but it would take some time and knowledge to tune it effectively for the processing power and memory available. Lower-end MPUs also struggle due to resource limitations, leaving mid- to high-end systems as the range where Qt can run with less tuning effort.

Platform portability and support are important, as today’s product may be running Linux on an MPU but tomorrow it could be ThreadX on an MCU, as production scale and costs increase. Qt is a rather large library with many dependencies, so you should consider its suitability for not only your current hardware but future plans as well.

This covers the designer’s workflow, performance, and scalability. Read the second part of this post, discussing architecture, testing, and overall time to delivering your best UI experience, here.

Storyboard evaluation

See scalable Storyboard demos on the Microchip SAMA5D2

Curious to see Storyboard Suite in action on your hardware? Our pre-built and packaged demos make it easy for you to test drive different types of applications designed for specific hardware platforms, letting you experience the powerful controls and smooth animations that create beautiful UIs and rich user experiences.

Scalable UIs across display sizes: SAMA5D2 demos for medical, white goods, and home automation

Storyboard applications are scalable across a variety of screen sizes and resolutions. Experience this on 480 x 272 and 800 x 480 displays with Storyboard demo images for the Microchip SAMA5D2 platform. These images include everything you need to get up and running in minutes, offering the following demos in both resolutions:

  • Smart washing machine – drill down into operational settings and track progress through cycles
  • Medical – browse through typical patient diagnostics, electronic health records (EHR), and security verification
  • Home automation – play with temperature controls, check out local weather, and customize lighting throughout the floorplan

Also included are instructions for flashing the image to an SD card and running it on your own board.


To try Storyboard Suite for yourself, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.


Try it now: NXP i.MX 6ULL demo image

i.MX 6ULL demo image

Curious to see Storyboard Suite in action on your hardware? Our pre-built and packaged demos make it easy for you to test drive different types of applications designed for specific hardware platforms, letting you experience the powerful controls and smooth animations that create beautiful UIs.

i.MX 6ULL demo for medical, white goods, and home automation

This image includes everything you need to get up and running on an i.MX 6ULL platform in minutes, offering the following demos:

  • Smart washing machine – drill down into operational settings and track progress through cycles
  • Medical – browse through typical patient diagnostics, electronic health records (EHR), and security verification
  • Home automation – play with temperature controls, check out local weather, and customize lighting throughout the floorplan

Also included are instructions for flashing the image to an SD card and running it on your own board.


To try Storyboard Suite for yourself, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.