This repository has been archived on 2022-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
dasschmalter/DasSchmalterApp/Qt-Code/main.qml

394 lines
13 KiB
QML
Raw Normal View History

2019-02-23 10:33:02 +01:00
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4
import com.itsblue.dasschmalter 1.0
2019-02-23 10:33:02 +01:00
Window {
visible: true
width: 640
height: 480
2019-03-07 22:13:23 +01:00
title: qsTr("DasSchmalter")
2019-02-23 10:33:02 +01:00
Page {
id: app
state: "CONNECTING"
2019-02-23 10:33:02 +01:00
anchors.fill: parent
2019-02-23 14:55:38 +01:00
property string ipAdress: settings.read("ip-adress")
AppSettings {
id: settings
}
2019-02-23 21:49:41 +01:00
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
}
2019-02-23 10:33:02 +01:00
Button {
id: onOffBt
2019-02-23 21:49:41 +01:00
property int animationDuration: 300
property int animationDelay: 50
width: app.landscape() ? parent.height * 0.8:parent.width * 0.8
2019-02-23 14:55:38 +01:00
height: width
anchors.centerIn: parent
2019-02-23 10:33:02 +01:00
2019-02-23 14:55:38 +01:00
background: Item {
id: lamp
2019-02-23 21:49:41 +01:00
2019-02-23 14:55:38 +01:00
Image {
id: lampOn1
source: "on1.png"
anchors.fill: parent
scale: 0
2019-02-23 15:52:11 +01:00
Behavior on scale {
SequentialAnimation {
PauseAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDelay * 0
2019-02-23 15:52:11 +01:00
}
NumberAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDuration
2019-02-23 15:52:11 +01:00
properties: "scale"
2019-02-23 21:49:41 +01:00
from: app.state === "ON" ? 0:1
to: app.state === "ON" ? 1:0
2019-02-23 15:52:11 +01:00
target: lampOn1
}
}
}
2019-02-23 14:55:38 +01:00
}
Image {
id: lampOn2
source: "on2.png"
anchors.fill: parent
scale: 0
2019-02-23 15:52:11 +01:00
Behavior on scale {
SequentialAnimation {
PauseAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDelay * 1
2019-02-23 15:52:11 +01:00
}
NumberAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDuration
2019-02-23 15:52:11 +01:00
properties: "scale"
2019-02-23 21:49:41 +01:00
from: app.state === "ON" ? 0:1
to: app.state === "ON" ? 1:0
2019-02-23 15:52:11 +01:00
target: lampOn2
}
}
}
2019-02-23 14:55:38 +01:00
}
Image {
id: lampOn3
source: "on3.png"
anchors.fill: parent
scale: 0
2019-02-23 15:52:11 +01:00
Behavior on scale {
SequentialAnimation {
PauseAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDelay * 2
2019-02-23 15:52:11 +01:00
}
NumberAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDuration
2019-02-23 15:52:11 +01:00
properties: "scale"
2019-02-23 21:49:41 +01:00
from: app.state === "ON" ? 0:1
to: app.state === "ON" ? 1:0
2019-02-23 15:52:11 +01:00
target: lampOn3
}
}
}
2019-02-23 14:55:38 +01:00
}
Image {
id: lampOn4
source: "on4.png"
anchors.fill: parent
scale: 0
2019-02-23 15:52:11 +01:00
Behavior on scale {
SequentialAnimation {
PauseAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDelay * 3
2019-02-23 15:52:11 +01:00
}
NumberAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDuration
2019-02-23 15:52:11 +01:00
properties: "scale"
2019-02-23 21:49:41 +01:00
from: app.state === "ON" ? 0:1
to: app.state === "ON" ? 1:0
2019-02-23 15:52:11 +01:00
target: lampOn4
}
}
}
2019-02-23 14:55:38 +01:00
}
Image {
id: lampOn5
2019-02-23 15:52:11 +01:00
source: "on5.png"
2019-02-23 14:55:38 +01:00
anchors.fill: parent
scale: 0
2019-02-23 15:52:11 +01:00
Behavior on scale {
SequentialAnimation {
PauseAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDelay * 4
2019-02-23 15:52:11 +01:00
}
NumberAnimation {
2019-02-23 21:49:41 +01:00
duration: onOffBt.animationDuration
2019-02-23 15:52:11 +01:00
properties: "scale"
2019-02-23 21:49:41 +01:00
from: app.state === "ON" ? 0:1
to: app.state === "ON" ? 1:0
2019-02-23 15:52:11 +01:00
target: lampOn5
}
}
}
2019-02-23 14:55:38 +01:00
}
Image {
id: lampOff
source: "off.png"
anchors.fill: parent
scale: 1
}
2019-02-23 21:49:41 +01:00
Image {
id: lampOn0
source: "on0.png"
anchors.fill: parent
opacity: 0
Behavior on opacity {
NumberAnimation {
duration: 200
}
}
}
}
onClicked: {
app.toggleLigth()
}
}
Rectangle {
id: lampCrossLineRa
anchors.centerIn: onOffBt
anchors.verticalCenterOffset: 15
height: onOffBt.height * 0.7
width: onOffBt.width * 0.03
radius: width * 0.2
rotation: 30
opacity: 1
color: Qt.darker("grey", 1.5)
Behavior on opacity {
NumberAnimation {
duration: 200
}
}
}
2019-02-23 21:49:41 +01:00
Button {
id: settingsBt
anchors {
bottom: parent.bottom
left: parent.left
leftMargin: ( app.width - width ) * 0.5
2019-02-23 14:55:38 +01:00
}
2019-02-23 21:49:41 +01:00
text: "settings"
2019-02-23 14:55:38 +01:00
onClicked: {
2019-02-23 21:49:41 +01:00
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: settings.read("ip-adress")
2019-02-23 21:49:41 +01:00
anchors.verticalCenter: settingsIpAdressLa.verticalCenter
onTextChanged: {
settings.write("ip-adress", text)
2019-02-23 21:49:41 +01:00
app.ipAdress = text
}
}
}
}
}
Timer {
id: refreshTimer
running: true
repeat: false
interval: 100
onTriggered: {
// sync state
app.getState();
}
}
states: [
State {
name: "ON"
PropertyChanges { target: onOffBt; opacity: 1; enabled: true; }
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; }
PropertyChanges { target: lampCrossLineRa; opacity: 0; }
},
State {
name: "OFF"
PropertyChanges { target: onOffBt; opacity: 1; enabled: true; }
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; }
PropertyChanges { target: lampCrossLineRa; opacity: 0; }
},
State {
name: "ERROR"
PropertyChanges { target: onOffBt; opacity: 0.5; enabled: false; }
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; }
PropertyChanges { target: lampCrossLineRa; opacity: 1; }
},
State {
name: "CONNECTING"
PropertyChanges { target: onOffBt; opacity: 0.5; enabled: false; }
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; }
PropertyChanges { target: lampCrossLineRa; opacity: 0; }
}
]
// -----------------
// --- functions ---
// -----------------
2019-02-23 21:49:41 +01:00
function getState(){
// function to sync the state of the app with the state of the schmalter
2019-02-23 21:49:41 +01:00
sendRequest("http://"+app.ipAdress+"/api/state")
}
function toggleLigth(){
// function to toggle the remote schmalter
2019-02-23 21:49:41 +01:00
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);
}
// sync state
2019-02-23 21:49:41 +01:00
getState();
}
function sendRequest(link){
// function to send a http request
// create request object
2019-02-23 21:49:41 +01:00
var xmlhttp = new XMLHttpRequest();
// define a function to be executed after the request finished
2019-02-23 21:49:41 +01:00
xmlhttp.onreadystatechange = (function(response) {
return function(){
app.processResponse(response)
}})(xmlhttp);
2019-02-23 21:49:41 +01:00
// prepare the request
xmlhttp.open("GET", link);
2019-02-23 21:49:41 +01:00
// send the request
xmlhttp.send();
}
2019-02-23 21:49:41 +01:00
function processResponse(response){
// function to handle sensponses from das schmalter
2019-02-23 21:49:41 +01:00
if(response.readyState === 4){
switch (response.status){
case 200: {
// success
2019-02-23 21:49:41 +01:00
if(response.responseText !== ""){
// if the response was not empty
2019-02-23 21:49:41 +01:00
// get the data out of the json formatted string
var responseObj = JSON.parse(response.responseText);
2019-02-23 21:49:41 +01:00
if(responseObj["command"] === "state"){
// if the request was a state check
2019-02-23 21:49:41 +01:00
if(app.state !== responseObj["response"]){
// if the current state of the schmalter doesn't match the current state of the app -> update the app's state
app.state = responseObj["response"]
}
2019-02-23 21:49:41 +01:00
}
}
break
}
default: {
// error
console.log("ERROR: " + response.status)
// set the app state to ERROR
app.state = "ERROR"
2019-02-23 21:49:41 +01:00
}
2019-02-23 14:55:38 +01:00
}
2019-02-23 21:49:41 +01:00
// start the refresh timer
refreshTimer.start()
}
2019-02-23 21:49:41 +01:00
}
function landscape(){
return(app.width > app.height)
}
2019-02-23 10:33:02 +01:00
}
}