Hands-On Embedded Programming with C++17

QML

Moving on, we are done with the C++ side of things and can now look at the QML UI.

First, here is the main QML file:

import QtQuick 2.0 
import QtQuick.Scene3D 2.0 
import QtQuick.Layouts 1.2 
import QtMultimedia 5.0 
 
Item { 
    id: mainview 
    width: 1215 
    height: 720 
    visible: true 
    property bool isHoverEnabled: false 
    property int mediaLatencyOffset: 68 

The QML file consists out of a hierarchy of elements. Here, we define the top element, giving it its dimensions and name:

 state: "stopped" states: [ State { name: "playing" PropertyChanges { target: playButtonImage source: { if (playButtonMouseArea.containsMouse) "qrc:/images/pausehoverpressed.png" else "qrc:/images/pausenormal.png" } } PropertyChanges { target: stopButtonImage source: "qrc:/images/stopnormal.png" ...