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

Designing a Rich UI for Industrial Electronic Controls with Storyboard

Crank Storyboard GUI Parker Customer Story

Whether a team is creating an application for automotive, medical, industrial, or a white goods product, there’s a core set of capabilities that the UI development framework they choose to work with has to be able to deliver, regardless of the target market. When we talk with customers during their development process and when we meet designers and developers at trade shows and events we tend to hear common themes of challenges and requirements, such as:

  • Time and resources are often tight, so the UI software has to be easy to use.
  • There are a lot of stakeholders and decision makers which means the design will likely change. The tools have to easily support design change.
  • The UI has to be able to communicate with the underlying system.
  • Applications have to be able to run on various platforms. Scalable design solutions are a must.
  • Team members have to be able to work collaboratively and in parallel to save time and take advantage of the collective skillset.
  • Performance is always a priority. Always. But so are aesthetics and solid design.

These challenges and requirements are true for most UI projects, including industrial applications. We recently interviewed a team of designers and engineers from Parker Hannifin’s Electronic Controls Division to learn more about a major product they delivered to market using Storyboard Suite. Learn more about their project, their requirements, and how they utilized Storyboard to create the user interface for their successful electronic controls product in the Parker Customer Story.

Parker Storyboard for industrial UI Development

To try Storyboard for your own UI development and to see how it addresses your own challenges and requirements, download a free 30-day trial.

StoryboardTrialBtn

Adding 3D content to embedded UIs: Importing FBX models into Storyboard

3D elements add movement, dimension, and life to embedded applications. Aesthetics aside, they also enhance user experience and improve findability of information with a visual perspective that 2D graphics lack. As processors and GPUs evolve, embedded applications are becoming richer and 3D content more prevalent.

3d

We developed features for Storyboard Suite and a workflow that supports 3D artists, with the following in mind:

  1. Most designers already have 3D design tools that they are comfortable with and use regularly
  2. Designers want to be able to update their models in their 3D design software and easily re-add them to their project
  3. Designers may want to do minor tweaks to their 3D content in Storyboard after they’ve incorporated it into their application

Import FBX 3D models in Storyboard

With FBX 3D model import functionality, Storyboard allows designers to work in popular 3D design software that they already have familiarity with and can work efficiently in. A widely adopted industry standard, FBX models are imported into Storyboard with animations, textures, lighting, and other properties that make up the 3D model. The model isn’t static after the import. Designers can tweak the animations and make adjustments to fit their application.

Iterate until perfect

Iteration is a major part of UI design, and 3D content is no exception. Using the built-in simulator in Storyboard, designers can test their application with the imported 3D content and determine what changes need to be made to the underlying model. Updated models can be iteratively imported back into the Storyboard project until the team is happy with the final 3D content.

Change lighting and camera angles

When the designer is happy with the 3D model, they might want to make some tweaks and adjustments to things like animations, camera angles, and lighting to adjust how it behaves in the Storyboard application. These properties can be refined directly in Storyboard Designer, making it easy to create a well-integrated 3D/2D user experience.

Meet Ahren, a Crank Software 3D Designer

Ahren is a 3D designer here at Crank, working on Storyboard Suite applications that span automotive, medical, home automation, and other cool markets. Ahren chooses to work in Autodesk 3DS Max because it’s a tool he’s invested a lot of hours in, which means he can work in it efficiently and confidently. Having FBX 3D model support in Storyboard optimizes Ahren’s workflow. “It’s quick and easy to import. I can test the 3D content in Storyboard and update the model as needed. Textures, materials, and animations are all baked into the model which means the behavior is the same in the Storyboard application. I can also tweak lighting and camera angles directly in Storyboard until I am happy with it.”

Learn more about working with FBX 3D models in Storyboard from Fancy Dan in this awesome demo video.

If you aren’t using Storyboard yet, download a free 30-day trial and test-drive the functionality you learned about in this post.

StoryboardTrialBtn