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" ...

Get Hands-On Embedded Programming with C++17 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.