Flo
/
WiFiThermostat


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<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-T5WZ</title>
<script>
  function g(i) { return document.getElementById(i) };
  function sp(i){g(i).type=(g(i).type==='text'?'password':'text');}
  var xhttp, reqTime, reqFin;
  function setCbx(el, da) {
    if(da == '1') {
      el.checked = true;
      el.style.visibility = 'visible';
    }
    else {
      el.checked = false;
      el.style.visibility = 'visible';
    }
  }
  function updCbxVal(el) {
    if (el.checked) el.value = '1';
    else {
      el.checked = true;
    el.value = '0';
      el.style.visibility = 'hidden';
    }
  }
  
  function transmit(f) {
    if (!xhttp) {   
    reqTime = 0;
    reqFin = false;
    updCbxVal(g('mqttEnable'));
    updCbxVal(g('outRet'));
    updCbxVal(g('outRetSens'));
    updCbxVal(g('willRet'));
    updCbxVal(g('hbEnable'));
    xhttp = new XMLHttpRequest();
    xhttp.timeout = 1000;
    xhttp.overrideMimeType('application/json');
    xhttp.open('POST', 'confDataMqtt');
    xhttp.send(f ? (new FormData(f)) : '');
    xhttp.onreadystatechange = function () {
      if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
        var data = JSON.parse(xhttp.responseText);
        setCbx(g('mqttEnable'), data.mqttEnable);
        g('mqttHost').value = data.mqttHost;
        g('mqttPort').value = data.mqttPort;
        g('mqttUser').value = data.mqttUser;
        g('mqttPass').value = data.mqttPass;
        g('inTop').value = data.inTop;
        g('outTop').value = data.outTop;
        g('willTop').value = data.willTop;
        g('willQos').value = data.willQos;
        setCbx(g('outRet'), data.outRet);
        setCbx(g('outRetSens'), data.outRetSens);
        g('outPubInt').value = data.outPubInt;
        g('outPubIntSens').value = data.outPubIntSens;
        setCbx(g('willRet'), data.willRet);
        g('willMsg').value = data.willMsg;
        g('connMsg').value = data.connMsg;
        setCbx(g('hbEnable'), data.hbEnable);
        g('hbReconn').value = data.hbReconn;
        g('hbReboot').value = data.hbReboot;
        xhttp = null;
        reqFin = true;
       }
       else {
         if(!reqFin && reqTime > 10) {
           xhttp = null;
           reqFin = true;
         }
       }
     }
   }
    return false;
  }
  //transmit();
  function saveConf() {
    updCbxVal(g('mqttEnable'));
    updCbxVal(g('outRet'));
    updCbxVal(g('outRetSens'));
    updCbxVal(g('willRet'));
    updCbxVal(g('hbEnable'));
    g('frmConf').submit();
  }
  function init() {
    transmit();
    setCbx(g('mqttPassSet'), 0);
  }
  setInterval(function () { ++reqTime; }, 1000);
</script>
</head>
<body onload='init()'>
<div id='main'>
<div id='head'>WiFiThermostat - WTherm-T5WZ
</div><hr>
<div></div>
<b>Configuration - MQTT</b>
<div class='config'>
<form id='frmConf' action='setConfMqtt' method='POST'>
<br>
<p><b>Enable MQTT *</b>&nbsp;<input type='checkbox' name='mqttEnable' id='mqttEnable'></p>
<fieldset>
<legend>Broker Connection</legend>
<p><b>Hostname *</b><br><input type='text' name='mqttHost' id='mqttHost'></p>
<p><b>Port *</b><br><input type='number' name='mqttPort' id='mqttPort'></p>
<p><b>User *</b><br><input type='text' name='mqttUser' id='mqttUser'></p>
<p><b>Password *</b><input type='checkbox' id='mqttPassSet' name='mqttPassSet' onclick='sp("mqttPass")'><br><input type='password' name='mqttPass' id='mqttPass'></p>
</fieldset>
<br>
<fieldset>
<legend>Last Will</legend>
<p><b>Topic *</b><br><input type='text' name='willTop' id='willTop'></p>
<p><b>Qos *</b><br><select name='willQos' id='willQos'><option>0</option><option>1</option><option selected='selected'>2</option></select></p>
<p><b>Retain-Flag *</b>&nbsp;<input type='checkbox' name='willRet' id='willRet'></p>
<p><b>Last Will Message *</b><br><input type='text' name='willMsg' id='willMsg'></p>
<p><b>Connect Message *</b><br><input type='text' name='connMsg' id='connMsg'></p>
</fieldset>
<br>
<fieldset>
<legend>Base Topics</legend>
<p><b>Base In-Topic *</b><br><input type='text' name='inTop' id='inTop'></p>
<p class='n'>* Sub-Topics like cmd... are added automatically.</p>
<div></div>
<p><b>Out/State-Topic **</b><br><input type='text' name='outTop' id='outTop'></p>
<p class='n'>** default output topic. Sub-Topics are added automatically.</p>
<p><b>Retain (States) *</b>&nbsp;<input type='checkbox' name='outRet' id='outRet'></p>
<p><b>Retain (Sensors) *</b>&nbsp;<input type='checkbox' name='outRetSens' id='outRetSens'></p>
<p class='n'>* If Retain is enabled, data is only sent on change, <br>
otherwise in intervals additionally. <br>
Intervals can also be switched off without retain. <br>
Just set them to 0 to disable.</p>
<p><b>Interval States **</b><br><input type='number' name='outPubInt' id='outPubInt'></p>
<p><b>Interval Sensors **</b><br><input type='number' name='outPubIntSens' id='outPubIntSens'></p>
<p class='n'>** 0 to disable</p>
</fieldset>
<br>
<fieldset>
<legend>Heartbeat</legend>
<p><b>Enable Heartbeat *</b>&nbsp;<input type='checkbox' name='hbEnable' id='hbEnable'></p>
<div></div><div></div>
<p class='n'>on missing Heartbeat:</p>
<p><b>Reconnect after [min]</b><br><input type='text' name='hbReconn' id='hbReconn'></p>
<p><b>Reboot after [min]</b><br><input type='text' name='hbReboot' id='hbReboot'></p>
</fieldset>
<div></div>
</form>
<div></div>
<table style='width:100%'>
<td style='width:50%'><button onclick='location="conf";' class='bgrey'>Cancel</button></td>
<td style='width:50%'><button onclick='return saveConf()' class='bred'>Save &amp; Restart</button></td>
</tr></table>
</div>

<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> v0.6.0 by <a href='https://www.flokra.at/' target='_blank' style='color:#AAA;'>FloKra</a></div>
</div></body></html>