Dashboard.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtMultimedia 5.12

Item {
    id: dash
    visible: true
    anchors.fill: parent

    property string m_gear: "0"
    property double m_consumption: 0
    property double m_odometer: 0
    property double m_speed: 0
    property double m_rpm: 0
    property string m_error: "Alles Gut"
    property double m_tankanz: 0

    function openRearView()
    {
        // Need a (valid) camera when starting the application! Switching inbetween is not supported!

        if(camera.cameraStatus == 8){
            // Camera is available and provides image!
            rearView.open();
            fallbackImage.visible = false;
        }

        else if(camera.cameraStatus == 1){
            // No Webcam attached (Camera is already used by other application)
            rearView.open();
            fallbackImage.visible = true;
        }
    }

    function closeRearView()
    {
        // Best to put it into a state. This way we need to turn it off everytime the gear is shifted
        rearView.close();
    }

    function blinkLeft()
    {
        // Turns the blinker(s) on / off. But each one seperately. Should be possible to put it into one function.
        if(!blinking_L.running){
            blinking_R.stop();
            blRightImg.opacity = 0
            blinking_L.start();
        }

        else if(blinking_L.running){
            blinking_L.stop();
            blLeftImg.opacity = 0;
        }
    }

    function blinkRight()
    {
        if(!blinking_R.running){
            blinking_L.stop();
            blLeftImg.opacity = 0
            blinking_R.start();
        }

        else if(blinking_R.running){
            blinking_R.stop();
            blRightImg.opacity = 0;
        }
    }

    Rectangle{
        id: bckgrnd
        anchors.fill: parent
        color: "black"
    }


    // ++++ SPEED ++++

    Rectangle{
        id: speedDisp
        height: dash.height
        width:  600
        anchors{
            left: dash.left
            bottom: dash.bottom
            leftMargin: 70
        }
        color: "transparent"
        Dial{
            id: speedDial
            height: dash.height -50
            value: dash.m_speed
            width: 550
            anchors.centerIn: parent
            from: 0
            to: 220      // km/h
            Text {
                anchors.centerIn: parent
                font.pointSize: 100
                color: "white"
                text: Math.round(speedDial.value)
            }
        }
    }

    // ++++ RPM ++++

    Rectangle{
        id: rpmDisp
        height: dash.height
        width:  600
        anchors{
            right: dash.right
            bottom: dash.bottom
            rightMargin: 70
        }
        color: "transparent"

        Dial{
            id: rpmDial
            height: dash.height -50
            value: dash.m_rpm
            width: 550
            anchors.centerIn: parent
            from: 0
            to: 10000
            Text {
                id: rpmText
                anchors.centerIn: parent
                font.pointSize: 70
                color: "white"
                text: Math.round(rpmDial.value)
            }
            Timer {
                interval: 100; running: true; repeat: true;
                onTriggered: {
                    var rpm = Math.round(rpmDial.value);
                    rpmText.text = rpm;
                    if(rpm < 5000){
                        rpmText.color = "white"
                    }
                    else if(rpm > 4000){
                        rpmText.color = "red"
                    }
                }
            }
        }
    }


    // ++++ CENTER INFO ++++

    Column{
        id: centerInfo
        anchors{
            bottom: dash.bottom
            leftMargin: 10
            rightMargin: 10
            bottomMargin: 10
            horizontalCenter: dash.horizontalCenter
        }
        spacing: 10

        Row{
            spacing: 300
            anchors.horizontalCenter: parent.horizontalCenter

            Rectangle{
                height: 60
                width: 60
                color: "transparent"

                Image{
                    id: blLeftImg
                    opacity: 0
                    width: 100
                    height: 100
                    mirror: true
                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: -10
                    source: "/arrow.png"
                }
            }

            Rectangle{
                height: 60
                width: 60
                color: "transparent"

                Image{
                    id: blRightImg
                    opacity: 0
                    width: 100
                    height: 100
                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: -10
                    source: "/arrow.png"
                }
            }
        }

        // ++++ BLINKING ANIMATION LEFT ++++

        SequentialAnimation{
            id: blinking_L
            loops: Animation.Infinite
            running: false

            NumberAnimation{
                target: blLeftImg
                property: "opacity";
                to: 1
                duration: 250
                easing.type: Easing.OutQuad
            }

            PauseAnimation {
                duration: 300
            }
            NumberAnimation{
                target: blLeftImg
                property: "opacity";
                to: 0
                duration: 250
                easing.type: Easing.OutQuad
            }
            PauseAnimation {
                duration: 300
            }
        }

        // ++++ BLINKING ANIMATION RIGHT ++++

        SequentialAnimation{
            id: blinking_R
            loops: Animation.Infinite
            running: false

            NumberAnimation{
                target: blRightImg
                property: "opacity";
                to: 1
                duration: 250
                easing.type: Easing.OutQuad
            }

            PauseAnimation {
                duration: 300
            }
            NumberAnimation{
                target: blRightImg
                property: "opacity";
                to: 0
                duration: 250
                easing.type: Easing.OutQuad
            }
            PauseAnimation {
                duration: 300
            }
        }

        // ++++ FURTHER DISPLAY INFORMATION ++++

        Text{
            id: clock
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 20
            color: "white"

            Image{
                anchors{
                    bottom: clock.bottom
                    right: clock.left
                    verticalCenter: clock.verticalCenter
                    rightMargin: 10
                }
                width: 30
                height: 30
                source: "/clockIcon"
            }
        }

        Timer {
            // sets current real world time
            interval: 100; running: true; repeat: true;
            onTriggered: clock.text = new Date().toLocaleTimeString("hh::mm")
        }

        Text{
            id: gear
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Gang: " + dash.m_gear
            font.pointSize: 20
            color: "white"
        }
        Text{
            id: consumption
            anchors.horizontalCenter: parent.horizontalCenter
            text: {
                if(dash.m_speed < 0.1){
                    dash.m_consumption + " Liter/h";
                }
                else{
                    dash.m_consumption + " Liter/100km";
                }
            }
            font.pointSize: 20
            color: "white"
        }

        Text{
            id: odometer
            anchors.horizontalCenter: parent.horizontalCenter
            text: dash.m_odometer + " km"
            font.pointSize: 20
            color: "white"
        }

        Text{
            id: tankanzeige
            anchors.horizontalCenter: parent.horizontalCenter
            text: dash.m_tankanz + " %"
            font.pointSize: 20
            color: "white"
        }

        Text{
            id: errLog
            anchors.horizontalCenter: parent.horizontalCenter
            text: dash.m_error
            font.pointSize: 20
            color: "red"
        }
    }


    // ++++ REARVIEW CAMERA ++++

    Popup{
        // Popup isn't centered to provide complete overview
        id: rearView
        x: 680
        y: 30
        width: 440
        height: 330

        Camera{
            id: camera
        }
        VideoOutput{
            id: vo
            anchors.fill: parent
            source: camera
        }
        Image{
            id: fallbackImage
            anchors.fill: parent
            source: "/Bomber"
        }
    }
}