dasschmalter/main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Das Schmalter")

    Page {
        id: app
        state: "OFF"
        anchors.fill: parent

        property string ipAdress: _cppAppSettings.loadSetting("ip-adress")

        Label {
            id: currentStateLa

            anchors.horizontalCenter: parent.horizontalCenter
            anchors.topMargin: parent.height * 0.01
            anchors.top: parent.top
            font.pixelSize: app.landscape() ? parent.height * 0.1:parent.width * 0.1

            text: "current state: " + app.state
        }

        Button {
            id: onOffBt

            property int animationDuration: 300
            property int animationDelay: 50

            width: app.landscape() ?  parent.height * 0.8:parent.width * 0.8
            height: width
            anchors.centerIn: parent

            background: Item {
                id: lamp

                Image {
                    id: lampOn1
                    source: "on1.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: onOffBt.animationDelay * 0
                            }
                            NumberAnimation {
                                duration: onOffBt.animationDuration
                                properties: "scale"
                                from: app.state === "ON" ? 0:1
                                to: app.state === "ON" ? 1:0
                                target: lampOn1
                            }
                        }
                    }
                }
                Image {
                    id: lampOn2
                    source: "on2.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: onOffBt.animationDelay * 1
                            }
                            NumberAnimation {
                                duration: onOffBt.animationDuration
                                properties: "scale"
                                from: app.state === "ON" ? 0:1
                                to: app.state === "ON" ? 1:0
                                target: lampOn2
                            }
                        }
                    }
                }
                Image {
                    id: lampOn3
                    source: "on3.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: onOffBt.animationDelay * 2
                            }
                            NumberAnimation {
                                duration: onOffBt.animationDuration
                                properties: "scale"
                                from: app.state === "ON" ? 0:1
                                to: app.state === "ON" ? 1:0
                                target: lampOn3
                            }
                        }
                    }
                }
                Image {
                    id: lampOn4
                    source: "on4.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: onOffBt.animationDelay * 3
                            }
                            NumberAnimation {
                                duration: onOffBt.animationDuration
                                properties: "scale"
                                from: app.state === "ON" ? 0:1
                                to: app.state === "ON" ? 1:0
                                target: lampOn4
                            }
                        }
                    }
                }
                Image {
                    id: lampOn5
                    source: "on5.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: onOffBt.animationDelay * 4
                            }
                            NumberAnimation {
                                duration: onOffBt.animationDuration
                                properties: "scale"
                                from: app.state === "ON" ? 0:1
                                to: app.state === "ON" ? 1:0
                                target: lampOn5
                            }
                        }
                    }
                }
                Image {
                    id: lampOff
                    source: "off.png"
                    anchors.fill: parent
                    scale: 1
                }
                Image {
                    id: lampOn0
                    source: "on0.png"
                    anchors.fill: parent
                    opacity: 0

                    Behavior on opacity {
                        NumberAnimation {
                            duration: 200
                        }
                    }
                }
            }

            onClicked: {
                app.toggleLigth()
            }
        }

        Button {
            id: settingsBt
            anchors {
                bottom: parent.bottom
                left: parent.left
                leftMargin: ( app.width - width ) * 0.5
            }

            text: "settings"

            onClicked: {
                settingsDia.open()
            }
        }

        Dialog {
            id: settingsDia

            modal: true

            x: ( app.width - width ) * 0.5
            y: ( app.height - height ) * 0.5

            title: "Settings"

            contentItem: Item {
                Row {
                    spacing: 10
                    Label {
                        id: settingsIpAdressLa
                        text: "ip-adress"
                    }
                    TextField {
                        id: settingsIpAdressTf
                        text: _cppAppSettings.loadSetting("ip-adress")
                        anchors.verticalCenter: settingsIpAdressLa.verticalCenter
                        onTextChanged: {
                            _cppAppSettings.writeSetting("ip-adress", text)
                            app.ipAdress = text
                        }
                    }
                }
            }

        }

        function getState(){
            sendRequest("http://"+app.ipAdress+"/api/state")
        }

        function requestFinished(){

        }

        function toggleLigth(){
            if(app.state == 'OFF'){
                sendRequest("http://"+app.ipAdress+"/api/on")
            }
            else if(app.state == 'ON'){
                sendRequest("http://"+app.ipAdress+"/api/off")
            }
            else{
                alert("ERROR! " + currentState);
            }
            getState();
        }

        function sendRequest(link){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = (function(response) {
                return function(){
                    if(response.readyState === 4 && response.status === 200){
                        console.log(response.responseText)
                if(response.responseText !== ""){

                    var responseObj = JSON.parse(response.responseText);

                    if(responseObj["command"] === "state"){

                        if(app.state === responseObj["response"]){
                            return;
                        }

                        console.log("statechanged")
                        app.state = responseObj["response"]

                        if(currentState == 'OFF'){

                            document.getElementById("toggleLightBt").classList.remove("disabled")

                            document.getElementById("toggleLightBt").innerHTML = "Turn on";

                        }

                        else if(currentState == 'ON'){

                            document.getElementById("toggleLightBt").classList.remove("disabled")

                            document.getElementById("toggleLightBt").innerHTML = "Turn off";

                        }

                        else{

                            document.getElementById("toggleLightBt").classList.add("disabled")

                            document.getElementById("toggleLightBt").innerHTML = "ERROR";

                            document.getElementById("toggleLightBt").innerHTML = "Unkwon error while connecting to Das Schmalter";


                        }
                    }


                }
                else if(this.readyState === 4){
                    document.getElementById("errorDiv").innerHTML = "Error while connecting to Das Schmalter: "+this.status
                }
            }
                }})(xmlhttp);

            xmlhttp.open("GET", link);
            xmlhttp.send();
            console.log("request sent")
        }

        function landscape(){
            return(app.width > app.height)
        }

        Timer {
            id: refreshTimer
            running: true
            interval: 200
            onTriggered: {
                app.getState();
                refreshTimer.start()
            }
        }

        states: [
            State {
                name: "ON"
                PropertyChanges {
                    target: lampOn0
                    opacity: 1
                }
                PropertyChanges {
                    target: lampOn1
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn2
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn3
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn4
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn5
                    scale: 1
                }
            },
            State {
                name: "OFF"
                PropertyChanges {
                    target: lampOn0
                    opacity: 0
                }
                PropertyChanges {
                    target: lampOn1
                    scale: 0
                }
                PropertyChanges {
                    target: lampOn2
                    scale: 0
                }
                PropertyChanges {
                    target: lampOn3
                    scale: 0
                }
                PropertyChanges {
                    target: lampOn4
                    scale: 0
                }
                PropertyChanges {
                    target: lampOn5
                    scale: 0
                }
            }
        ]
    }
}