Adding a control to the HMI

Getting the HMI application to run on the target and appear as expected on the screen is an essential step in HMI development. You can then extend the HMI by adding controls to specific services in your embedded system.

We will write a control for setting the audio volume. Specifically, we will define a UI component (using QML) to provide volume adjustment controls and also write the QPPS library calls (using C++) to publish the latest volume level to the audio status PPS object.

Note: Like the Home screen app included with the reference image, our sample control updates the audio status to reflect the latest volume setting but it doesn't actually change the volume of the audio output. This last task involves sending commands to the Audio Manager service through PPS and is beyond the scope of this HMI-writing tutorial.

Summary of steps

In this section of the tutorial, we will:

  1. Add the source code for the QPPS library to the HMI project, to build our own copy of the library.
  2. Define a new C++ class (VolumeModule) to act as the interface between the QML code and the QPPS classes.
  3. Add image resources for the HMI volume control.
  4. Define new QML components (VolumeUI and VolumeSlider) to create the UI for the audio volume control.