Creating a medical HMI with Storyboard

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.

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 Human Machine Interface, created in collaboration with the fine folks at Microchip, showcases how Storyboard 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:

• Pulse Oximeter demonstration board
• Thermometer demonstration board
• Blood Pressure meter demonstration board
• Connected Wearable ECG Demo Board

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 device user interface design.

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.