GUI näyttää nyt täysin erilaiselta. Käytettävyyden kannalta parempi vai huonompi?
Koko GUI ja sen päivitys hoituu Javascriptillä ja AJAX:illa. Tämä poistaa ylimääräistä rasitusta moduulilta.
GUI:n Koodi:
<html>
<head>
<title>Lämmityksen ajastin</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/file?file=ulkoasu.css">
<script type="text/javascript">
var get = new XMLHttpRequest();
var responsed = "Loading";
setInterval(function()
{
wGet("/input?");
getResponse();
var responsedata = responsed.split("|");
var hours = responsedata[2] / 60 / 60;
var minutes = responsedata[2] / 60 % 60;
var seconds = responsedata[2] % 60;
minutes = parseInt(minutes);
seconds = parseInt(seconds);
if(minutes < 10){minutes = "0" + minutes;}
if(seconds < 10){seconds = "0" + seconds;}
var timeLeft = parseInt(hours) + ":" + minutes + ":" + seconds;
if(responsedata[2] == 0){timeLeft = 0;}
if(responsedata[1] == "On" || responsedata[1] == "Off"){
document.getElementById("data").innerHTML = "Heater: " + responsedata[1] + "<br>Time Left: " + timeLeft;
}
}, 2500)
function wGet(data)
{
get.open("GET", data, true);
get.onreadystatechange = getResponse;
get.send(null);
}
function getResponse() {
if (get.readyState == 4 && get.status == 200)
{
responsed = get.responseText;
}
}
function setHeating()
{
var valittuAika = document.getElementById("Aika").selectedIndex;
switch(valittuAika)
{
case 0:
wGet('/msg?addTime=7200')
break;
case 1:
wGet('/msg?addTime=5400')
break;
case 2:
wGet('/msg?addTime=3600')
break;
case 3:
wGet('/msg?addTime=1800')
break;
}
}
function setElements()
{
document.getElementById("turnOnButton").style.width = "250px";
}
</script>
</head>
<body onLoad="setElements()">
<center><b>
<p id="data">Loading</p>
<select id="Aika">
<option SELECTED>2H
<option>1H 30Min
<option>1H
<option>30Min
</select>
<button onClick="setHeating()" id="turnOnButton">Turn On</button><br>
<button onClick="wGet('/msg?addTime=0')" >Off</button><br>
</center></b>
</body>
<html>
Siivosin kanssa vähän koodia ESP:ltä. Ledin vilkuttelua ei enään tarvita oled näytön takia. Siirryin myös interruptien käytöstä käyttämään timeriä nappien painallusten havaitsemiseen.
memclear
cls
oledcls
state = Off
po 13, 0
po 14, 0
connect "Retejo Secondary" "gfdsaasdfg" "192.168.1.102" "192.168.1.1" "255.255.255.0"
msgbranch [messageHandler]
heatingTime = 0
heatingTimeMin = 0
humanTime = 0
scheduled = 0
timer 1000, [timerSec]
wprint |<meta http-equiv='refresh' content='11110;URL=/file?file=GUI.html'></head>|
wprint "|"
wprint htmlvar(state)
wprint "|"
wprint htmlvar(heatingTime)
wprint "|"
oledprint "Heater: " 0 0
oledprint "Time left: " 0 1
oledprint ip() 0 6
wait
[messageHandler]
let messageToReturn = state & "|"
let messageToReturn = messageToReturn & heatingTime
msgreturn messageToReturn
msgget "addTime" timeAddMessage
if timeAddMessage > 0 then goto [turnOn] else goto [turnOff]
wait
[turnOn]
po 13, 1
po 14, 1
heatingTime = timeAddMessage
oledprint "On " 8 0
state = On
wait
[turnOff]
po 13, 0
po 14, 0
state = Off
oledprint "Off" 8 0
heatingTime = 0
wait
[phyButton]
if io(pi,12) = 0 then wait
plusheatingTime = heatingTime + 1800
if plusheatingTime < 7200 then timeAddMessage = plusheatingTime
if plusheatingTime < 7200 then goto [addTime]
if plusheatingTime > 7200 then goto [turnOff]
wait
[addTime]
heatingTime = heatingTime + 1800
goto [turnOn]
wait
[timerSec]
plusheatingTime = 0
heatingTime = heatingTime - 1
heatingTimeMin = heatingTime / 60
if heatingTime > 3600 then heatingTimeMin = heatingTimeMin - 60
let heatingTimeMin = left(heatingTimeMin,2)
let heatingTimeMin = replace(heatingTimeMin,".","")
if heatingTime > 3600 then humanTime = "1h "
if heatingTime > 3600 then humanTime = humanTime & heatingTimeMin
if heatingTime > 3600 then humanTime = humanTime & "min"
if heatingTimeMin <= 0 then heatingTimeMin = 0
if heatingTime < 3600 then humanTime = heatingTimeMin & "min"
gosub [checkTime]
if io(pi,12) = 1 then goto [phyButton]
if heatingTime <= 0 then goto [turnOff]
wait
[checkTime]
if pasttime <> humanTime then gosub [updateOled]
return
[updateOled]
oledprint " " 0 2
oledprint humanTime 0 2
pasttime = humanTime
return
Ja loppuun pari kuvaa.
-Jokke
No comments:
Post a Comment