CASE STUDY

Building a Digital Cockpit Concept with Qt

Welcome to Outrun – an automotive UI demo showcasing the possibilities of building a multi-screen digital cockpit with Qt!

Let us walk you through what it takes to design, develop and deploy a digital cockpit with Qt. With this demo we explore the upcoming trends of car HMI design and next-gen user experience.

 

Book a demo Explore Qt in Automotive

Project Outrun

We wanted to step in our customers' shoes and experience firsthand what it takes to imagine the future of the driving experience -  and then bring that vision from idea to reality.

Follow us on a journey from early design exploration to UI implementation, visual effect creation, building connectivity, and running all of it on the target environment.

Let's start the walkthrough with a video presenting the Outrun digital cockpit.

outrun-web-bg-end

New Features - 2023

The Outrun HMI concept is constantly evolving to reflect new automotive trends, include new technological advances, and showcase Qt framework's capabilities. During the past few months we have included a number of new features that bring it closer to a production-grade Automotive HMI. Together with maps and navigation, we now have the possibility to access third-party apps paving the way to dedicated functionality for the passengers' screens. Some effort has been put into fully integrating Android Automotive with Outrun, to showcase the capabilities of Qt for Android Automotive

  • Welcome animation
  • Qt for Android Automotive
  • Map
  • Apps
  • Extended media

Welcome animation

The cluster application has been upgraded with a visually impressive welcome animation using Qt new line-particle system.

Line particles are included in QtQuick3D (6.4 onward) and are also available in Qt Design Studio for the creation of stunning animations and splash screens in a few clicks.

Particle effects provide a high-quality and immersive experience that engages users from the start.

Design phase

First and foremost, we need to understand what we want to build and why. After defining the goals and requirements, we enter the design concept phase and start seeing the first glimpses of the vision coming to life.

  • Research
  • Design vision
  • Shaping the idea
  • User flows and use cases
  • UI and interaction

Research

Keeping up with the trends in technology, visual design, and data visualization serves as the starting point for many projects. Our significant source of inspiration for this project has been how the evolving technology landscape changes how we expect to interface with our vehicles. 

After some research on the topic, we decided to bring in cinematic real-time visualizations of the outside environment, create distinct driving moods with the help of real-time 3D graphics, and draw inspiration from the immersive experiences of video games. Even the demo name and visual style pay homage to the legendary OutRun by Sega and the retro synthwave aesthetics stemming from it.

From design to prototype

The handover from designer to developer is a critical step that has historically been a painful ordeal. We chose a simpler route by going beyond mere prototyping, including the use of Design Bridges, and component reusability.

  • Importing designs
  • Building interaction
  • Creating components
  • Adding data bindings

Using the Design Bridges

We want to make the teamwork of UI Designers, Technical Artists, and Developers as smooth as possible by eliminating the "design handover" step altogether. To achieve this, we have developed the Design Bridges. The Bridges allow you to export your UI designs and prototypes from tools like Figma, Sketch, Adobe XD, and Photoshop directly to Qt Design Studio.

The Bridge imports all assets, layouts, components, and even UI interaction, as the UI designer intended. As the design evolves, the UI Developer or Technical Artist can update any changes throughout the development cycle.

3D Graphics

3D graphics can be a great tool when visualizing complex ideas and creating immersive environments. After all, we experience the world in 3D. When including 3D elements in the UI, we've got you covered.

  • Optimising for real-time
  • Importing 3D assets
  • Applying materials
  • Adding a bit of flair

Optimising 3D assets for real-time rendering

The basis for a well-performing embedded project is created with well-made assets. Here are some principles we follow when optimizing assets for a project like this:

  • Make sure the model geometry is clean.
  • Remove any hidden meshes and unused data; they can add up quickly.
  • Use PBR materials for high-impact parts and single-color materials where it makes sense.
  • Reduce the number of textures and make sure they are appropriately sized based on visual impact.

Most of the rendering optimizations can be done in Qt Design Studio. The geometry is defined in the 3D asset creation pipeline.

Motion design

Great motion design can elevate your UI from "nice" to "WOW!" in a blink of an eye. Never underestimate to power of animation. Cinematic camera movements and compelling transitions get you there.

  • Cinematic camera movements
  • Compelling transitions
  • Situational awareness
  • Effective animations

Cinematic camera movements

Traditional 2D UI transitions are a bit like turning a page of a book or switching a slide in PowerPoint. It gets the job done but is nothing remarkable. Don't get us wrong, most of the time, simple is great and preferred in UX, but there are times when we should venture out of our comfort zones.

3D gives us a unique opportunity to take transitions to the next level by fully utilizing the dimensions available. Moving the camera across the 3D space can create compelling, cinematic transitions that help the overall immersion. It directs the user's eyes where we want them to look and gives us a chance to show the scene from the angle that makes the most sense.

Visual effects

Visual effects take the UI to the next level: we love a bit of shader magic here, post-processing there, and particle effects where it makes sense.

  • Particle effects
  • Custom shaders
  • Lights and shadows
  • Visualizing audio

Particle effects

We wanted to visualize the HVAC airflow controls in a fun way using the Qt particle system. The end-user can alter the airflow direction by moving the particles around on the screen using the touch screen, and since it’s all real-time rendered the particles will change colour with the air temperature.

Our particle system gives you complete freedom to create cool custom effects without coding, or you can choose to use one ready-made effects like rain, snow, smoke, and fog. Just drag and drop it in the scene, it’s that easy!

Connect with the vehicle

A beautiful UI with all the fancy effects does not matter much if the apps won't communicate and run seamlessly on target.

Everything has to work in real life.

  • Go cross-platform
  • Build the backend
  • Analyze performance
  • Assure the quality

Cross-platform by nature

By nature, Qt is cross-platform and offers exceptional scalability. This allows you to develop your GUI once and deploy it to any operating system, device, or display.

We've run Outrun on Linux, Android, AAOS, Mac, & Windows, and in embedded, desktop, and mobile environments. You can also watch our example of a multi-OS cockpit.

Are you ready?

Follow our steps and turn your wildest ideas into reality. Start by downloading Qt or book a demo session with our experts.

Download Qt Book a demo