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

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

Storyboard Suite Automotive HMI demos at Car HMI USA 2016

Crank Software at Car HMI April 25-26

Over the next few months we will be attending several shows to showcase the latest features and functionality in Storyboard Suite 4.2, as well as a number of innovative, multi-market demos we’ve built that highlight the range of application GUIs that can be designed and developed with Storyboard.

First up is automotive with Car HMI USA 2016 next week in Detroit, April 25-26. If you plan to be at the show visit us to check out some automotive HMI demos we’ve built with Storyboard Suite. You’ll be able to touch and interact with the demos and chat with one of our UI designers about his experience using Storyboard Suite to bring his designs to life.

For examples of HMI applications designed with Storyboard Suite, check out the QNX Bentley Concept Car, the Mississippi State University EcoCAR, and demos we brought to CES 2016 earlier this year, including a digital instrument cluster that was part of the QNX Software Systems interactive command center, which showcased vehicle-to-vehicle (V2V) and vehicle-to-infrastructure (V2I) technology.

If you aren’t going to the show, you can always download the 30-day trial and try your hand at making awesome automotive HMIs.

Storyboard Suite Free Trial

 

Storyboard Suite HMI Round-up from CES 2016

CES_2016

CES 2016 was earlier this month and we’re still reeling from trying to take in the sheer volume of innovative technology that was showcased. It’s mind-blowing just how much you can fit in a paltry 2.2 million net square feet of exhibit space. If you were at the show, we forgive you if you didn’t catch the Storyboard Suite HMI demos, especially given hoverboards were banned, leaving you to walk a million miles to see everything.

Don’t despair. We have photos and video to share from the show.

Photos & Video from Storyboard Suite Automotive and IoT HMI Demos 

From innovative digital instrument clusters to in-vehicle infotainment (IVI) systems, Storyboard Suite automotive HMI demos were showcased in many booths at CES, including VisteonTexas Instruments, QNX Software Systems, and others.

This quick Vine video from Visteon shows a dual OLED display with an innovative HMI designed in Storyboard Suite, with a second display remaining hidden until additional content is required:

This Periscope video from Texas Instruments shows a digital instrument cluster designed with Storyboard Suite:

 

Digital Instrument Clusters Photos

QNX

This Digital Instrument Cluster was one of two clusters designed with Crank Storyboard Suite as part of the QNX Software Systems interactive command center at CES, which showcased vehicle-to-vehicle (V2V) and vehicle-to-infrastructure (V2I) technology.

TICrankCESCluster

Texas Instruments EvoCar Digital Instrument Cluster designed with Crank Storyboard Suite

Home Automation Photos

CES 2016 highlighted the best in smart home technologies, and we are thrilled that Storyboard Suite was behind exciting home automation demos at the event. NXP’s Internet of Tomorrow Tour, a giant trailer housing over 100 demos, showcased a home automation demo designed for FTF2015 by Crank Software and Freescale. In addition, our friends at Atmel demoed a home automation application designed with Storyboard Suite.

NXPIoTTruckCrank

NXP Internet of Tomorrow Tour – Storyboard Suite home automation demo

AtmelCrankCES

Storyboard Suite home automation demo on the Atmel SAMA5D4, featuring video playback

The Crank Software demos at CES 2016 were created with the (very) soon-to-be-released Storyboard Suite 4.2 version, which will deliver new exciting functionality for GUI designers working with 3D graphics, including FBX support to enable integration of animated 3D models in Storyboard Designer, and support for advanced 3D multi-mesh models. We’ve further streamlined the design experience with group templates, multi-step animation recording, and a new Animation Preview that gives designers the capability to quickly view changes to animations directly in Storyboard Designer.

To find out more about what to expect in the Storyboard Suite 4.2 release, check out our recent webinar, now available on-demand.

StoryboardTrialBtn

Storyboard Suite GUIs at CES 2016

Crank Storyboard Suite at CES 2016

With 2015 winding down, we are busy preparing for an exciting start to 2016 with our much-anticipated Storyboard Suite 4.2 release and a number of technology shows. First up is CES, the Consumer Electronics Show, in Las Vegas, January 6-9. If you are planning to be at the show and want to connect with us, send us an email. We’d be happy to show you demos of GUIs built with Storyboard Suite and give you a sneak peek at features we’ve been working on for our upcoming release.

Storyboard Suite GUI demos at CES

CES is an opportunity for companies to show off the latest in tech, so you’ll see a lot of cool products and cutting-edge concepts at the show. We are excited that Storyboard is the graphic design tool suite behind a number of rich embedded GUIs and HMI experiences to be showcased at CES.

From Automotive HMI Experiences to the Connected Home

Modern automotive HMI experiences require intuitive, high-performance GUIs to ensure convenience and safety. From innovative digital instrument cluster design to in-vehicle infotainment (IVI) systems, you’ll see examples of Storyboard Suite automotive HMI demos from many companies at CES, including VisteonTexas InstrumentsGreen Hills Software, and more.

Our homes are rapidly becoming smarter and more connected, leading to increased comfort, convenience, and security. CES provides a great opportunity to showcase smart home technologies, and Storyboard Suite is behind exciting home automation demos at the event. NXP’s Internet of Tomorrow Tour will be rolling into Las Vegas, and will be hard to miss, given it’s a massive trailer housing over 100 demos. On board is the home automation demo designed for FTF2015 by Crank Software and Freescale. Atmel will also be demoing a home automation application designed with Storyboard Suite.

This isn’t an exhaustive list of Storyboard demos at CES. You’ll find other applications and exciting projects at the show with stunning GUIs designed and developed with Storyboard Suite.

We hope to see you at the show.