366 lines
11 KiB
QML
366 lines
11 KiB
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
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|