Supporting UI scalability – from MCU to MPU

We are often asked the question, “what platforms do you support?” or variations on the same that include operating systems, GPUs, rendering technologies, and more. Development teams want to know if Storyboard Suite supports the environments they have, or want to build out.

We always give the same answer: All of them.

Of course, the details are important, so this blog explains exactly what Storyboard Suite supports.

Support across the boards

Storyboard supports a wide range of ARM architectures, from the low-power Cortex-M series used on MCUs to the powerful Cortex-A series used on MPUs. We’ve also supported PowerPC, x86, and SH4 architectures, among others. Storyboard runs on everything from task-based RTOS such as Micrium µC/OS-II and FreeRTOS to full-featured, general purpose RTOS such as Linux, QNX Neutrino, and Green Hills INTEGRITY.

This means you can build user interfaces (UI) for everything from tiny industrial controls to complex automotive instrument panels without having to worry about the particulars of the platform or the effort required to port to different environments when your product line grows.

Here are examples of our demo images running on the STM32F4 (Cortex-M4) and the NXP i.MX 6QuadPlus (Cortex-A9):

STM32F4 (Cortex-M4)

NXP i.MX 6QuadPlus (Cortex-A9)

We support this wide range through extensive development and testing on each platform, ensuring the Storyboard Engine takes advantage of specific board features, such as proprietary graphics libraries, 2D or 3D hardware acceleration, and memory management functions.

The ease at which we provide support for multiple platforms is a result of the way Storyboard is architected: it’s purpose-built for maximum performance and customizability. This flexibility is also exposed to the user, allowing fine control over application configuration and performance:

Application size – The Storyboard Engine is based on a modular plugin system, such that only the required components are included in the system configuration and deployed. Not only does this reduce the application’s footprint, it allows the user to scale functionality down for systems with minimal memory and CPU resources, including:

  • Screen transitions
  • Animations
  • 3D models
  • Input methods
  • Rendering types (polygons, circles, raw canvas, etc.)
  • Lua scripting

Scalability across platforms – Storyboard uses a fixed data model to represent the UI, not generated code, which means the same model can be used across multiple platform-specific runtimes that are tuned for the features and hardware optimizations of the platform. The model itself is event-driven and uses a well-defined API between the UI and the event/messaging system native to the deployment platform, meaning it isn’t tied to a specific environment.

Graphics rendering – Storyboard lets you choose how you want to render graphics, from writing directly into the frame buffer to taking advantage of any 2D or 3D hardware rendering available on the board.

Flexible filesystem – The standard Storyboard deployment uses a filesystem to store the UI data model and associated resources but, if you don’t have a filesystem, you can compile and bind resources directly to Storyboard Engine and flash to the target system.

Font usage – A Storyboard application can either use a font engine to load fonts directly from TrueType or OpenType files, or use pre-rendered glyphs that are stored in ROM.

To try out Storyboard on different platforms for yourself, download and run our ready-to-go demo images.

 

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_calculator

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.

StoryboardTrialBtn

Embedded World 2017: Storyboard UI Demos

Crankonauts Crank Software Employees

Crank Software Inc – Team at Embedded World 2017

“A picture is worth a thousand words.” That’s good because I am currently drowning in photos and videos from Embedded World 2017. With over 30,000 attendees at the show, we had the opportunity to talk to people with a wide variety of skill sets and job titles. We brought a lot of hardware to Germany again this year which is always a great conversation starter. People were thrilled to see the breadth of platform support and to have the opportunity to interact with Storyboard UI demos on actual targets.

Check out these photos of demos from our booth (Hall 4/4-270) and demos that we spied in some partner booths.

NXPiMX6UL

Multi-Market Storyboard Demo on NXP i.MX 6UltraLite

NXPiMX7ULP

MNXP i.MX 7UltraLowPower

NXPiMX8

Storyboard Distributed eCockpit running on NXP i.MX8

NXPiMX6QP

Movie Kiosk, IoT Home, and 3D Automotive Cluster on the NXP i.MX6QuadPlus

ToradexiMX6DL

Movie Kiosk, Robotic Arm, and Home IoT Demo on the Toradex Colibri i.MX 6DualLite

STF746NG

Home Automation Demo on the ST32F746 running FreeRTOS

STF429

Storyboard Multi-market Demo on the ST32F429 running FreeRTOS

AtmelSAMA5D2

Storyboard Multi-market Demo on the Atmel SAMA5D2

AtmelSAMA5D4

Storyboard Multi-market Demo on the Atmel SAMA5D4

RenesasRZA1

Storyboard Multi-market Demo on the Renesas RZ/A1

EAiMX6SoloX

Storyboard Robotic Arm Demo on the Embedded Artists i.MX 6SoloX

TexasInstrumentsQNX

Storyboard Automotive Cluster on the TI Jacinto 6 running QNX

Our demos were also featured in other booths throughout the conference, including the NXP booth. Check out this distributed eCockpit on the i.MX 8, designed in Storyboard Suite.

In case you hadn’t heard, we recently released Storyboard Suite 5.0, so download a 30-day free evaluation and take it for a test drive. To try some of the demos showcased in the booth at Embedded World, download our easy-to-use demo images.

StoryboardTrialBtn

Build a Better Embedded UI. Introducing Storyboard Suite 5.0

press_release_72_2

Today we announced the release of Storyboard Suite 5.0. We are pretty excited about it, and if you are a current Storyboard customer or are part of a team that is building embedded application UIs, we think that you will be excited too.

Storyboard Suite 5.0: Enhancements for the Entire UI Development Team

With Storyboard 5.0 we’ve continued to deliver functionality that we feel is most important to UI designers, software developers, and their stakeholders. Storyboard provides the entire team with the tools and workflow they need to work efficiently and confidently to create better user experiences, on time and within budget.

Check out Fancy Dan’s video to learn more about some of the new functionality in Storyboard 5.0.

Created for designers and developers

Nobody sweats the small design details and subtleties like designers, so we strive to keep them fully in control of the look and feel of the application throughout the development lifecycle to ensure the visual appeal and usability of the UI is second-to-none. With tools that make it easy to import artwork, add interaction and movement, update artwork on demand, and refine and tweak until perfect, Storyboard gives designers full ownership over the UI, without impacting code. This frees the software developers to focus on writing beautiful code and connecting the UI the underlying system to deliver high-performance embedded products. Storyboard 5.0 adds the following enhancements for designers and developers:

  • Finer animation execution control and custom easing rates allow designers to easily refine animations and movement
  • New design canvas render extension to programmatically facilitate drawing and graphing
  • Easier event injection
  • A streamlined navigation and workflow increases productivity
  • New project samples and improved documentation reduces ramp-up time

Built to support design change

Throughout the development cycle, the UI design will change. Stakeholder feedback (The Boss hates it), platform changes, conflicting management opinions, customer beta testing – all of these contribute to design churn and should be addressed in a timely manner. Storyboard embraces and supports change as a key part of UI development by making iteration and team collaboration part of the development workflow. Storyboard 5.0 functionality that eases the pain of design change includes:

  • New application executable options, such as direct-to-target (SCP) and standalone executable (EXE) for Windows make it easier to share Storyboard applications for quick testing to improve the feedback loop for design iteration
  • Reusable components speed UI design for quick interaction prototyping
  • Search/refactoring improvements ease design change
  • Photoshop Import and Reimport refinements streamline importing and updating Photoshop artwork
  • Team collaboration workflow improvements make it easier for designers and developments to work in parallel

Optimized for the embedded market

The prevalence of mobile devices has increased consumer expectations for embedded applications. But embedded isn’t mobile. Developing UIs for embedded systems means paying attention to system resources and technical specifications while trying to satisfy the design requirements. Storyboard is built exclusively for embedded and optimized for a range of platforms. To further our commitment to performance and scalability, Storyboard 5.0 enhancements include:

  • New operating system and hardware platform support brings Storyboard to more targets
  • Pre-compiled Lua scripts improves performance
  • Video playback using ffmpeg software decoder or gstreamer
  • Fill refactoring for improved runtime performance
  • Expanded design report for resource usage and visibility

To test drive Storyboard Suite 5.0, download the 30-day full-featured evaluation version today.

StoryboardTrialBtn

Driving Excellence in Automotive HMI Design: Storyboard on the NXP i.MX 8 at CES

Whether it’s commuting to and from work, chauffeuring the kids to hockey*, or running errands, we spend countless hours driving on a daily basis. Fortunately for those of us who feel like we live part-time in our cars, technology is evolving at a rapid rate to enhance the driving experience and to allow us to connect with our vehicles more seamlessly and safely.

Storyboard Suite Automotive HMI NXP imx8 CES 2017

If you were at CES last week, you might have noticed a few automotive HMI demos at the show. Every year we see stunning innovation in automotive technology and new features that inspire consumers to hand over their money. (No flying car yet, however.) This year was no exception. CES 2017 showcased the coolest automotive HMI technology from the biggest automakers to small, low-cost suppliers, and everyone in between.

Keeping up with such a fast-growing and ever-changing technology and meeting consumer expectations isn’t an easy feat for automotive HMI design and development teams. Consumer expectations are high. Take a look at your smartphone. Impressive graphics, right? You have a powerful mobile computer that fits in your pocket. It’s a navigation system, audio/video player, and communication device that’s available to you when you need it. We’ve come to expect these same capabilities to be available to us on demand when needed, even in our cars. And we expect them to look great.

So how do teams deliver graphically stunning, connected, responsive, feature-rich automotive HMI experiences? Development teams need a high-performance and reliable processor that can support rich graphics, display to multiple screens, and handle a variety of inputs, such as the NXP i.MX 8. Making high-performance hardware look great and delivering an intuitive user experience is the job of the UI development framework. What consumers see on their car screens is the graphical representation of all of the information and data available to them, from their digital instrument cluster to their in-vehicle infotainment and entertainment displays.

Making Automotive HMIs that meet consumer expectations

It can be challenging for teams to deliver beautiful, user-friendly, and safety-conscious graphical content to a range of automotive displays. They need tools that support the following:

  • Design-centric – Design and user experience are critical to automotive HMIs. To achieve a high-quality design aesthetic and intuitive interaction, it’s critical to keep the designer in control throughout the development process.
  • Collaborative Workflow – Automotive HMIs are often built by teams, not by individuals. The software processes and workflow should support that.
  • Design ChangeIterative design is a reality. From minor tweaks to major updates in artwork, changes can, and should, happen. If it’s painful to iterate the design, it’s more likely that design compromise will occur.
  • Embedded Focus – Hardware for embedded displays has unique capabilities and constraints. The UI development software should have a focus on embedded.

We built Storyboard Suite with these requirements and others in mind. With our vast experience in the embedded marketplace and our focus on making Storyboard Suite feature-rich, yet user-friendly, many companies choose Storyboard for their exciting HMI projects.

Speaking of exciting HMI projects…

NXP showcased a distributed eCockpit and Infotainment at CES 2017 that was built using Storyboard Suite for the i.MX 8.This impressive multi-screen demo was a collaborative effort by NXP and Crank Software and included the following displays:
  • Digital Instrument Cluster
  • Head-up Display
  • In-Vehicle Infotainment
  • Backseat Entertainment

Thanks to the powerful i.MX 8, this demo was able to run four high-resolution screens at frame rates up to 60fps off one processor.

Integrating a mix of 2D and 3D content, the team was able to work collaboratively on the applications using Storyboard’s multi-file support, and seamlessly merge the project files and iterate the design throughout the lifecycle. The 3D models were created with high-fidelity detail to take advantage of the rich GPU capabilities of the i.MX 8.

 

To try Storyboard for your own automotive HMI projects, download a free 30-day trial.

StoryboardTrialBtn

*So Canadian of me