How to Easily Connect the User Interface with Data

When creating automotive user interfaces, it’s important to do testing using realistic data and application logic – either from a simulator or from actual car electronics. You can design without data to an extent, but it’s when you get access to realistic data that you start realizing what works and what doesn’t. You start noticing things in your design – your text fields are too short, the album art and contact pictures don't fit, your needles have noticeable aliasing artefacts when moving slowly…

In essence, you need to connect your user interface and the data and events from the car electronics, including CAN BUS, media playback, contacts and more. Traditionally automotive companies have accomplished this by writing large amounts of explicit code – ”take this data and write it into this property”. This works, but tends to take a lot of effort and is a headache to maintain. Every change in either the user interface design or the application code ends up requiring a new build, and may end up breaking the entire HMI.

With Kanzi we use a different approach, where the user interface and the application code are decoupled. Designers use Kanzi Studio to visually create user interface designs, while developers feed in data and events through the Kanzi API. Both designers and developers can work iteratively in parallel, without the risk of breaking each others’ code.


Easy Connectivity: Introducing Data Sources

With the Data Sources feature in Kanzi 3.3, we’re making it even easier to connect data with the user interface.

Video Thumbnail


Instead of explicitly accessing UI properties via the API, developers can now create plug-ins for their data sources, e.g. CAN BUS, Simulink, QNX PPS files, media players and more. Each plugin provides a data object tree – a structured representation of data and events.


Image: Car simulation Data Source in Kanzi Studio

Designers then import the Data Sources plugins to Kanzi Studio, which automatically creates a visual representation of the data object tree and events provided by the Data Source. Designers can can immediately start binding the data and events into their UI elements for the digital dashboard with a simple drag-and-drop– needles, text fields, item lists, buttons etc. and seeing how the UI works with realistic data.


Image: Properties provided by a car simulation Data Source

Change Data Sources on the fly

In the HMI development process, you often start with data from a simulator and switch to real CAN BUS later when you test in the car. With Data Sources, you can dynamically switch Data Sources on the fly, with no impact on the design. As long as the developer maintains the same data object structure in the Data Sources plug-in, the connection will work.

Data Sources is available in Kanzi 3.3. Check out our archived webinar to see the feature in action:


 Discover best practices for agile HMI prototyping and development to  accelerate UX innovation