<html><head>
<meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'/>
<link rel='stylesheet' href='style.css'>
<title>WiFiThermostat - WTherm-3598</title>
<script>
function g(i) { return document.getElementById(i) };
var xhttp, updateTime, reqTime, reqFin;
function sendBtn(btn, conf) {
var frmn='BtnFrm'+btn;
var form = g(frmn);
if(conf !== undefined) {
if(confirm(conf)) return transmit(form);
else return false;
}
else return transmit(form);
}
function transmit(f) {
if (!xhttp) {
reqTime = 0;
reqFin = false;
xhttp = new XMLHttpRequest();
xhttp.timeout = 1000;
xhttp.overrideMimeType("application/json");
xhttp.open('POST', 'api');
xhttp.send(f ? (new FormData(f)) : '');
xhttp.onreadystatechange = function () {
if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
var data = JSON.parse(xhttp.responseText);
if(data.setTemp !== undefined) g('setTemp').innerHTML = data.setTemp.toFixed(1) + '°';
if(data.currSetTemp !== undefined) g('currSetTemp').innerHTML = data.currSetTemp.toFixed(1) + '°';
if(data.psetName !== undefined) g('pset').innerHTML = data.psetName.toUpperCase();
if(data.psetName0 !== undefined) g('btnPs0').innerHTML = data.psetName0;
if(data.psetName1 !== undefined) g('btnPs1').innerHTML = data.psetName1;
if(data.psetName2 !== undefined) g('btnPs2').innerHTML = data.psetName2;
if(data.temp !== undefined && data.hum !== undefined) g('currTempHum').innerHTML = data.temp.toFixed(1) + '° ' + data.hum.toFixed(0) + '%';
else if(data.temp !== undefined) g('currTempHum').innerHTML = data.temp.toFixed(1) + '°';
if(data.outTemp !== undefined && data.outHum !== undefined) g('outTempHum').innerHTML = data.outTemp.toFixed(1) + '° ' + data.outHum.toFixed(0) + '%';
else if(data.outTemp !== undefined) g('outTempHum').innerHTML = data.outTemp.toFixed(1) + '°';
if(data.modeName !== undefined) g('mode').innerHTML = data.modeName.toUpperCase();
if(data.mode == '1') { g('btnModeOn').setAttribute('class', ''); g('btnModeOff').setAttribute('class', 'bgrey');}
else { g('btnModeOn').setAttribute('class', 'bgrey'); g('btnModeOff').setAttribute('class', '');}
if(data.pset == '0') { g('btnPs0').setAttribute('class', ''); g('btnPs1').setAttribute('class', 'bgrey'); g('btnPs2').setAttribute('class', 'bgrey');}
else if(data.pset == '1') {g('btnPs0').setAttribute('class', 'bgrey'); g('btnPs1').setAttribute('class', ''); g('btnPs2').setAttribute('class', 'bgrey');}
else if(data.pset == '2') {g('btnPs0').setAttribute('class', 'bgrey'); g('btnPs1').setAttribute('class', 'bgrey'); g('btnPs2').setAttribute('class', ''); }
if(data.heating == '1' && data.mode == '1') { g('heating').innerHTML = 'HEATING'; g('heating').style = 'color:red;'; }
else if(data.heating == '0' && data.mode == '1') { g('heating').innerHTML = 'IDLE'; g('heating').style = 'color:#1fa3ec;'; }
else if(data.mode == '0') { g('heating').innerHTML = 'OFF'; g('heating').style = 'color:black;'; }
var APname;
if(data.WiFiNum == 1) APname='Default';
else if(data.WiFiNum == 1) APname='Fallback';
if(data.ssid !== undefined && data.WiFiNum !== undefined && data.WiFiNum > 0) g('ssid').innerHTML = data.ssid + ' (' + APname + '-AP)';
else if(data.ssid !== undefined) g('ssid').innerHTML = data.ssid;
if(data.mqttstate !== undefined) {
if(data.mqttstate == "CONNECTED") { g('mqttstate').innerHTML = data.mqttstate + ' to <i>' + data.mqtthost + '</i>'; }
else g('mqttstate').innerHTML = data.mqttstate;
}
if(data.uptime !== undefined) g('uptime').innerHTML = data.uptime;
if(data.date !== undefined) g('date').innerHTML = data.date;
else g('date').innerHTML = 'NTP disabled';
if(data.time !== undefined) g('time').innerHTML = data.time;
else g('time').innerHTML = 'NTP disabled';
if(data.mqttreconn !== undefined) g('mqttreconn').innerHTML = data.mqttreconn;
xhttp = null;
updateTime = 0;
reqFin = true;
}
else {
if(!reqFin && reqTime > 10) {
xhttp = null;
reqFin = true;
}
}
}
}
return false;
}
function init() {
transmit();
}
setInterval(transmit, 2500);
</script>
</head>
<body onload='init()'>
<div id='main'>
<div id='head'>WiFiThermostat - WTherm-3598
</div><hr>
<div></div>
<p><b>Temperature</b></p>
<div id='setTemp' style='text-align:center;font-weight:bold;font-size:40px'></div>
<div></div>
<table style='width:100%'><tr>
<td style='width:50%'><form id='BtnFrmMinus'><input type='hidden' name='BtnMinus' value='1'><button onclick='return sendBtn("Minus")'>-</button></form></td>
<td style='width:50%'><form id='BtnFrmPlus'><input type='hidden' name='BtnPlus' value='1'><button onclick='return sendBtn("Plus")'>+</button></form></td>
</tr></table>
<table style='width:100%'>
<tr><td style='width:50%'>Current Temp/Hum </td><td><b><span id='currTempHum'></span></td></tr>
<tr><td>Outside Temp/Hum </td><td><b><span id='outTempHum'></span></td></tr>
<tr><td>Actual set Temp </td><td><b><span id='currSetTemp'></span></b></td></tr>
<tr><td>Heating State </td><td><b><span id='heating'></span></b></td></tr>
</table>
<div></div>
<div></div>
<p><b>Preset</b></p>
<div id='pset' style='text-align:center;font-weight:bold;font-size:20px'></div>
<div></div>
<form id='BtnFrmPset0'><input type='hidden' name='BtnPset0' value='1'><button id='btnPs0' onclick='return sendBtn("Pset0")'>NORMAL</button></form>
<form id='BtnFrmPset1'><input type='hidden' name='BtnPset1' value='1'><button id='btnPs1' onclick='return sendBtn("Pset1")'>REDUCTION 1</button></form>
<form id='BtnFrmPset2'><input type='hidden' name='BtnPset2' value='1'><button id='btnPs2' onclick='return sendBtn("Pset2")'>REDUCTION 2</button></form>
<div></div>
<div></div>
<div></div>
<form action='redTemps' method='GET'><button>Set Reduction Temps</button></form>
<div></div>
<p><b>Mode</b></p>
<div id='mode' style='text-align:center;font-weight:bold;font-size:20px'></div>
<div></div>
<table style='width:100%'><tr>
<td style='width:50%'><form id='BtnFrmOn'><input type='hidden' name='BtnOn' value='1'><button id='btnModeOn' onclick='return sendBtn("On")'>HEAT</button></form></td>
<td style='width:50%'><form id='BtnFrmOff'><input type='hidden' name='BtnOff' value='1'><button id='btnModeOff' onclick='return sendBtn("Off")'>OFF</button></form></td>
</tr></table>
<hr>
<div></div>
<p><b>System</b></p>
<table style='width:100%'>
<tr><td colspan=3>WiFi connected to <i><span id='ssid'></span></i></tr></td>
<tr><td colspan=3>MQTT <span id='mqttstate'></span></tr></td>
<tr><td colspan=3>MQTT reconnects: <span id='mqttreconn'></span></tr></td>
<tr><td>Uptime</td><td><span id='uptime'></span></td></tr>
<tr><td>Date</td><td><span id='date'></span></td></tr>
<tr><td>Time</td><td><span id='time'></span></td></tr>
</table>
<br>
<table style='width:100%'>
<tr><td style='width:100%'><form action='conf' method='get'><button>Configuration</button></form></td></tr>
<tr><td style='width:100%'><form action='console' method='get'><button>Web Console</button></form></td></tr>
<tr><td style='width:100%'><form action='wsconsole' method='get'><button>WebSockets Console</button></form></td></tr>
<tr><td style='width:100%'><form action='/' method='get' onsubmit='return confirm("Confirm Restart");'><button name='restart' class='bred'>Restart</button></form></td></tr>
</table>
<div style='text-align:right;font-size:0.7em;color:#AAA;'><hr/><a href='https://git.flokra.at/flo/WiFiThermostat' target='_blank' style='color:#AAA;'>WiFiThermostat</a> 0.6.1 by <a href='https://www.flokra.at/' target='_blank' style='color:#AAA;'>FloKra</a></div>
</div></body></html>