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 } } ] } }