Creating a medical HMI with Storyboard Suite

The following is a post from Nik, our awesomely bearded and multi-talented Field Application Engineer. Nik recently attended the Microchip MASTERs event in Phoenix, Arizona, and describes the making of the medical demo that we brought to the show.

Storyboard Suite medical demo for the Microchip sama5d2

If you were at Microchip MASTERs 2017, you might have seen the Patient Monitor demo at the “Ask the Experts” table. Perhaps you saw the demo at the Crank Software booth and spoke to Jason Clarke or me about it. If you didn’t get the opportunity to see it live, read on to learn more. This medical HMI, created in collaboration with the fine folks at Microchip, showcases how Storyboard Suite can help you quickly prototype your UI, foster collaboration between designers and engineers, and deliver a polished product to market faster.

The goal of this medical demo was to take real data from medical devices and display it in an aesthetically pleasing, feather-rich, and user-friendly UI. The system powering this demo is the Microchip SAMA5D2 Xplained board running Linux. The following Microchip medical breakout boards are connected to the SAMA5D2:

With multiple pieces of hardware communicating to the UI, we needed a couple of design iterations to create the UI we envisioned for this setup. Storyboard allowed us to iterate designs quickly and easily by importing and reimporting content from Photoshop. We did not have to start from scratch each time the design changed. The application logic and event bindings that were previously declared stayed in place and Storyboard took care of managing the new assets. When we had a design that we were happy with, we moved on to integration.

In the integration phase, UI and engineering teams come together and connect the UI to real data. Storyboard IO enables this merger by allowing an IO interface to and from the UI. Defining a structured event and data protocol over Storyboard IO has a number of benefits. It forces a clean separation between low-level business logic and UI logic and it allows the UI to be developed in parallel to any back-end systems. The event protocol was defined early on in the design, which made the integration cycle fairly seamless. I was able to work on the C application which handled all the interfacing to hardware devices while one of our designers built the UI in parallel. When implementing features like live trend data in the UI, we were able to easily inject simulation data via Storyboard IO without needing to connect to actual hardware. With the hardware interface completed, it was simply a matter of dropping it in place. Many bugs had already been ironed out due to the ability to use simulated data, so the final stage of this project was focused on fine-tuning and tweaking the experience.

When I hooked up the UI to real data we were finally able to polish and stress test the system. The final phase was to ensure that the UI was smooth and responsive under heavy load before demo completion. Initially, there was some event flooding when all four breakout boards started sending event data at the same time. Having four active data streams also highlighted some areas for optimization in the UI which led to faster redraw times. While the designer worked on tweaking the UI, I was able to modify how frequently the back end sent data. After a few quick iteration cycles, we were able to finalize the Medical demo that shipped to Microchip MASTERs.

This easy iteration and Storyboard’s collaboration support meant we were able to work in parallel without compromising the design or underlying code in the process. The end product is a user-friendly, aesthetically pleasing, and high-performance medical UI.

To try a Storyboard application on a Microchip platform, download one of our pre-packaged and easy-to-install demo images.

If you aren’t using Storyboard, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.

StoryboardTrialBtn

Thanks NXPconnects!

The big news for NXPconnects attendees last week wasn’t the scorching heat wave running through San Jose, rather it was the announcements, demos, and talks surrounding autonomous vehicles. Visitors to our booth were treated to our stunning 3D automotive cluster demo running on the NXP i.MX6QuadPlus, along with other examples of how we accelerate and improve user interface (UI) development.

Most visitors to our booth were hardware and software practitioners curious about how Storyboard Suite improves UI development and what markets we target. While Nick answered the business reasons, Thomas demonstrated the real-world implications on a live system:

  • You can go from design to deployment in minutes, with Storyboard’s Adobe Photoshop import tool and variety of deployment methods, including running on a desktop simulator or using SCP transfer to real targets
  • By allowing designers and developers to work together in the same environment, neither is dependent on or gets delayed by the other, resulting in a much faster time to release
  • Talking about Photoshop again, the final UI is much more rich and engaging because the designer’s intent is put into production – no more forcing the UI to fit pre-packaged widgets or limiting it to software constraints

People were immediately hooked by taking a design to target quickly and it led to questions about what platforms we support (everything from MCUs to MPUs, with little compromise in UI features) and production readiness (every deployment is production ready). Our partnership with NXP has never been better and together we can help you realize UIs that are beautiful, engaging, and highly performant.

Our partnership with NXP has never been better and together we can help you realize UIs that are beautiful, engaging, and highly performant.

Stay tuned for news on how we support the NXP i.MX 8 series of processors to get maximum UI performance on powerful, highly efficient boards.

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

Click to watch

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

 

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