Dirk/NTUhrVPx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2022 / 12

Browse Source
This commit is contained in:
NTEN\Nenninger
2022-12-28 23:07:31 +01:00
parent 2ca96a99b5
commit 04e2975cb1
2 changed files with 738 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

777
ESPNTUhrPx.ino
View File

File diff suppressed because it is too large Load Diff

259
index_html.h
View File

@@ -10,9 +10,9 @@ const char html_page_index[] PROGMEM = R"rawliteral(
body {font-size: 1.5rem; margin:0px auto; padding-bottom: 25px; min-height:100%;} body {font-size: 1.5rem; margin:0px auto; padding-bottom: 25px; min-height:100%;}
body * {font-size: 1.3rem;} body * {font-size: 1.3rem;}
input[type=checkbox]{ input[type=checkbox]{
transform: scale(1.5); transform: scale(1.5);
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
label {min-width: 150px;display: inline-block;text-align: left; padding-left: 5px;} label {min-width: 150px;display: inline-block;text-align: left; padding-left: 5px;}
input,select,option { display: inline-block;text-align:center;} input,select,option { display: inline-block;text-align:center;}
@@ -142,10 +142,8 @@ const char html_page_index[] PROGMEM = R"rawliteral(
width: 100%; width: 100%;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@media(min-width: 600px) { @media(min-width: 600px) {
margin: 0 1em 2em;
margin: 0 1em 2em; }
}
&:hover { text-decoration: none; } &:hover { text-decoration: none; }
@@ -185,7 +183,8 @@ const char html_page_index[] PROGMEM = R"rawliteral(
<label class="center">aktuell:</label><br> <label class="center">aktuell:</label><br>
<span class='act' id="actTime"></span><br> <span class='act' id="actTime"></span><br>
<span class='act' id="actTacTime"></span><br> <span class='act' id="actTacTime"></span><br>
<span class='act' id="actDate"></span> <span class='act' id="actDate"></span><br>
<span class='act' id="actKW"></span>
</div><br> </div><br>
<div class='fs075'> <div class='fs075'>
<label>letzter abgleich:</label> <label>letzter abgleich:</label>
@@ -199,14 +198,20 @@ const char html_page_index[] PROGMEM = R"rawliteral(
<option value=0>taktische Uhrzeit</option> <option value=0>taktische Uhrzeit</option>
<option value=1>Uhrzeit</option> <option value=1>Uhrzeit</option>
<option value=2>Datum / Uhrzeit</option> <option value=2>Datum / Uhrzeit</option>
<option value=3>Analoguhr</option>
<option value=4>Analoguhr / Datum</option>
</select> </select>
</div> </div>
<div class='option m50' onclick="return false"> <div class='option m50' onclick="return false">
<label for="brigtness">Helligkeit LEDs</label> <span class="wsnw">
<span class="wsnw"><span id="brigtness"></span> %</span><br> <label for="brigtness">Helligkeit LEDs</label>
<label for="lux">Umgebungshelligkeit</label> <span><span id="brigtness"></span> %</span><br>
<span class="wsnw"><span id="lux"></span> LUX</span><br> </span>
<div class="left margin12left"> <span class="wsnw">
<label for="temp">Temperatur Elektronik</label>
<span><span id="temp"></span>° C</span><br>
</span>
<div class="left">
<span class="wsnw"> <span class="wsnw">
<label for="SSID">SSID:</label> <label for="SSID">SSID:</label>
<span id="SSID"></span> <span id="SSID"></span>
@@ -218,6 +223,14 @@ const char html_page_index[] PROGMEM = R"rawliteral(
<input id="rtcactive" type='checkbox' onclick="return false" readonly> <input id="rtcactive" type='checkbox' onclick="return false" readonly>
<label for="rtcactive">RTC okay</label> <label for="rtcactive">RTC okay</label>
</span> </span>
<span class="wsnw">
<input id="withSeconds" type='checkbox' onclick="return false" readonly>
<label for="withSeconds">Sekunden zeigen</label>
</span>
<span class="wsnw">
<input id="alwaysAccessPoint" type='checkbox' onclick="return false" readonly>
<label for="alwaysAccessPoint">AccessPoint erstellen auch bei erfolgreicher WiFi Verbindung</label>
</span>
</div> </div>
</div> </div>
<input id="d" type='text' style='width:80%;font-size:0.75rem;' value=''> <input id="d" type='text' style='width:80%;font-size:0.75rem;' value=''>
@@ -226,25 +239,37 @@ const char html_page_index[] PROGMEM = R"rawliteral(
</div> </div>
<div class='option m50'> <div class='option m50'>
<input class="fs17" id="reset" class="btn" type='button' value='neu starten' onclick='reset();'> <input class="fs17" id="reset" class="btn" type='button' value='neu starten' onclick='reset();'>
</div> </div>
<div id="te"> <div id="te">
<div id="close" onclick="closeEdit();">X</div> <div id="close" onclick="closeEdit();">X</div>
<div class='value'> <div class='value'>
<h1><span id="el"></span></h1> <h1><span id="el"></span></h1>
<label for="eActTimeC">Uhrzeit: </label><input type="color" id="eActTimeC" value=""><br> <label for="eActTimeC">Uhrzeit: </label><input type="color" id="eActTimeC" value=""><br>
<label for="eActTacTimeC">taktische Zeit: </label><input type="color" id="eActTacTimeC" value=""><br> <label for="eActTacTimeC">taktische Zeit: </label><input type="color" id="eActTacTimeC" value=""><br>
<label for="eActDateC">Datum: </label><input type="color" id="eActDateC" value=""><br> <label for="eActDateC">Datum: </label><input type="color" id="eActDateC" value=""><br>
<label for="eActKWC">KW: </label><input type="color" id="eActKWC" value=""><br>
<input type="button" class="btn fs12" onclick="setColor();closeEdit();" value="setzen"><br><br> <input type="button" class="btn fs12" onclick="setColor();closeEdit();" value="setzen"><br><br>
<input type="button" id="doSetTime" class="btn fs12" onclick="doSetTime();" value="Uhrzeit nach diesem Gerät setzen"><br> <input type="button" id="doSetTime" class="btn fs12" onclick="doSetTime();" value="Uhrzeit nach diesem Gerät setzen"><br>
</div> </div>
</div> </div>
<div id="oe"> <div id="oe">
<div id="close" onclick="closeOptionEdit();">X</div> <div id="close" onclick="closeOptionEdit();">X</div>
<div class='value'> <div class='value'>
<h1><span id="el">Optionen</span></h1> <h1><span id="el">Optionen</span></h1>
<input id="ebs" type='number' min="5" max="100" step="5" onchange="document.getElementById('eab').checked = false;"> % <input id="ebs" type='number' min="5" max="100" step="5"> %
<label for="ebs">Helligkeitsfaktor (in Prozent)</label><br> <label for="ebs">Helligkeitsfaktor (in Prozent)</label><br>
<span>
<input id="eWithSeconds" type='checkbox'>
<label for="eWithSeconds">zeige Sekunden</label>
</span>
<span>
<input id="eAlwaysAccessPoint" type='checkbox'>
<label for="eAlwaysAccessPoint">AccessPoint erstellen auch bei erfolgreicher WiFi Verbindung</label>
</span>
<br>
<input type="button" class="btn" onclick="setOption();" value="setzen">
<br><br>
<span> <span>
<label for="eSSID">SSID:</label> <label for="eSSID">SSID:</label>
<input id="eSSID" type='text' onclick="return false"> <input id="eSSID" type='text' onclick="return false">
@@ -255,7 +280,14 @@ const char html_page_index[] PROGMEM = R"rawliteral(
<input id="ePASS" type='text' onclick="return false"> <input id="ePASS" type='text' onclick="return false">
</span> </span>
<br> <br>
<input type="button" class="btn" onclick="setOption();" value="setzen"><br> <input type="button" class="btn" onclick="setWifi();" value="setzen">
<br><br>
<span>
<label for="apPASS">AccessPoint Passwort:</label>
<input id="apPASS" type='text' maxlength="64" minlength="8" onclick="return false">
</span>
<br>
<input type="button" class="btn" onclick="setAPPass();" value="setzen"><br>
</div> </div>
</div> </div>
</div> </div>
@@ -296,6 +328,7 @@ const char html_page_index[] PROGMEM = R"rawliteral(
document.getElementById("eActTimeC").value = RGBToHex(document.getElementById('actTime').style.color); document.getElementById("eActTimeC").value = RGBToHex(document.getElementById('actTime').style.color);
document.getElementById("eActTacTimeC").value = RGBToHex(document.getElementById('actTacTime').style.color); document.getElementById("eActTacTimeC").value = RGBToHex(document.getElementById('actTacTime').style.color);
document.getElementById("eActDateC").value = RGBToHex(document.getElementById('actDate').style.color); document.getElementById("eActDateC").value = RGBToHex(document.getElementById('actDate').style.color);
document.getElementById("eActKWC").value = RGBToHex(document.getElementById('actKW').style.color);
} }
document.getElementById("te").style.display = "initial"; document.getElementById("te").style.display = "initial";
} }
@@ -305,10 +338,11 @@ const char html_page_index[] PROGMEM = R"rawliteral(
} }
function editOption(){ function editOption(){
document.getElementById('ebs').value = document.getElementById('brigtness').innerHTML; document.getElementById('ebs').value = document.getElementById('brigtness').innerHTML;
document.getElementById('eSSID').value = document.getElementById('SSID').innerHTML; document.getElementById('eSSID').value = document.getElementById('SSID').innerHTML;
document.getElementById("eWithSeconds").checked = document.getElementById("withSeconds").checked;
document.getElementById("oe").style.display = "initial"; document.getElementById("eAlwaysAccessPoint").checked = document.getElementById("alwaysAccessPoint").checked;
document.getElementById("oe").style.display = "initial";
} }
Number.prototype.AddZero= function(b,c){ Number.prototype.AddZero= function(b,c){
@@ -317,52 +351,26 @@ const char html_page_index[] PROGMEM = R"rawliteral(
} }
function showOK(){ function showOK(){
document.getElementById("message").innerHTML='ok'; document.getElementById("message").innerHTML='ok';
document.getElementById("message").style.backgroundColor = "#0f0"; document.getElementById("message").style.backgroundColor = "#0f0";
document.getElementById("message").style.display = "initial"; document.getElementById("message").style.display = "initial";
setTimeout(function(){ setTimeout(function(){
document.getElementById("message").style.display = "none"; document.getElementById("message").style.display = "none";
}, 2000); }, 2000);
} }
function fetchHandle(res){ function fetchHandle(res){
if(!res.ok){ if(!res.ok){
console.log(res); console.log(res);
document.getElementById("site").style.backgroundColor = "#f00"; document.getElementById("site").style.backgroundColor = "#f00";
}else{ }else{
if(EEPROMDataChanged) if(EEPROMDataChanged)
document.getElementById("site").style.backgroundColor = "#ffa"; document.getElementById("site").style.backgroundColor = "#ffa";
else else
document.getElementById("site").style.backgroundColor = "#fff"; document.getElementById("site").style.backgroundColor = "#fff";
return res; return res;
} }
} }
/*
+String(now());
color = timeColor[0] << 16;
color += timeColor[1] << 8;
color += timeColor[2];
ret += "," + String(color);
color = tacticalTimeColor[0] << 16;
color += tacticalTimeColor[1] << 8;
color += tacticalTimeColor[2];
ret += "," + String(color);
color = dateColor[0] << 16;
color += dateColor[1] << 8;
color += dateColor[2];
ret += "," + String(color);
ret += "," + String(timeIndex);
ret += "," + String(lastTimeSyncTyp);
ret += "," + String(lastTimeSyncTime);
ret += ",\"" + String(lux_value)+"\"";
ret += ",\"" + String(brightness)+"\"";
ret += "," + String(autobrightness);
ret += "," + String(rtcEnabled);
ret += "," + String(GPSdoSync);
ret += "," + String(countSatellites);
ret += "," + String(countGPS);
ret += "," + String(EEPROMDataNotSaved);
*/
function fetch_handle_response(res){ function fetch_handle_response(res){
var elem=document.getElementById('d'); var elem=document.getElementById('d');
@@ -372,43 +380,47 @@ const char html_page_index[] PROGMEM = R"rawliteral(
}else if(res[0] == '['){ }else if(res[0] == '['){
try{ try{
var data = JSON.parse(res); var data = JSON.parse(res);
ti = data[0]; ti = data[0];
showAktTimeFromUnix(ti); showAktTimeFromUnix(ti);
colorString = "#" + data[1].toString(16).padStart(6, '0'); colorString = "#" + data[1].toString(16).padStart(6, '0');
document.getElementById('actTime').style.color = colorString; document.getElementById('actTime').style.color = colorString;
colorString = "#" + data[2].toString(16).padStart(6, '0'); colorString = "#" + data[2].toString(16).padStart(6, '0');
document.getElementById('actTacTime').style.color = colorString; document.getElementById('actTacTime').style.color = colorString;
colorString = "#" + data[3].toString(16).padStart(6, '0'); colorString = "#" + data[3].toString(16).padStart(6, '0');
document.getElementById('actDate').style.color = colorString; document.getElementById('actDate').style.color = colorString;
document.getElementById('showWhat').value = parseInt(data[4]); document.getElementById('showWhat').value = parseInt(data[4]);
showTimeFromUnix(data[6],'sync'); switch(data[5]){
switch(data[5]){ case 0:
case 0: document.getElementById('sync').innerHTML = " keiner";
document.getElementById('sync').innerHTML = " keiner"; break;
break; case 1:
case 1: document.getElementById('sync').innerHTML += " (GPS)";
document.getElementById('sync').innerHTML += " (GPS)"; break;
break; case 2:
case 2: document.getElementById('sync').innerHTML += " (NTP)";
document.getElementById('sync').innerHTML += " (NTP)"; break;
break; case 3:
case 3: document.getElementById('sync').innerHTML += " (manuel)";
document.getElementById('sync').innerHTML += " (manuel)"; break;
break; }
}brigtness showTimeFromUnix(data[6],'sync');
document.getElementById('brigtness').innerHTML = (data[7]*100);
document.getElementById('lux').innerHTML = data[7]; document.getElementById("rtcactive").checked = (data[8] == 1);
document.getElementById('brigtness').innerHTML = (data[8]*100);
document.getElementById("rtcactive").checked = (data[10] == 1); EEPROMDataChanged = (data[9] == 1);
if(EEPROMDataChanged){
EEPROMDataChanged = (data[14] == 1); document.getElementById("site").style.backgroundColor = "#ffa";
if(EEPROMDataChanged){ }
document.getElementById("site").style.backgroundColor = "#ffa"; document.getElementById('SSID').innerHTML = data[10];
} document.getElementById('temp').innerHTML = data[11];
document.getElementById('SSID').innerHTML = data[15]; var options = parseInt(data[12]);
document.getElementById("withSeconds").checked = (options >> 0) & 0x1;
document.getElementById("alwaysAccessPoint").checked = (options >> 1) & 0x1;
colorString = "#" + data[13].toString(16).padStart(6, '0');
document.getElementById('actKW').style.color = colorString;
document.getElementById('actKW').innerHTML = "KW " + data[14];
}catch(e){ }catch(e){
console.log(e); console.log(e);
} }
@@ -418,13 +430,18 @@ const char html_page_index[] PROGMEM = R"rawliteral(
function doSend(_value1,_value2=[],_value3=[]){ function doSend(_value1,_value2=[],_value3=[]){
var send_str = "/do?"+_value1[0]+"="+_value1[1]; var send_str = "/do?"+_value1[0]+"="+_value1[1];
if(_value2.length > 0){ if(_value2.length > 0){
send_str += "&"+_value2[0]+"="+_value2[1]; send_str += "&"+_value2[0]+"="+_value2[1];
} }
if(_value3.length > 0){ if(_value3.length > 0){
send_str += "&"+_value3[0]+"="+_value3[1]; send_str += "&"+_value3[0]+"="+_value3[1];
} }
fetch(send_str).then(fetchHandle).then((res) => res.text()).then((text) => fetch_handle_response(text)).catch((err) => { console.log(err);document.getElementById("site").style.backgroundColor = "#f00";}); fetch(send_str).then(fetchHandle).then((res) => res.text()).then((text) => fetch_handle_response(text)).catch((err) => { console.log(err);document.getElementById("site").style.backgroundColor = "#f00";});
} }
function doPoll(){
var send_str = "/poll";
fetch(send_str).then(fetchHandle).then((res) => res.text()).then((text) => fetch_handle_response(text)).catch((err) => { console.log(err);document.getElementById("site").style.backgroundColor = "#f00";});
}
function doSetTime(_idx = -1){ function doSetTime(_idx = -1){
var d=new Date(); var d=new Date();
@@ -435,10 +452,12 @@ const char html_page_index[] PROGMEM = R"rawliteral(
function setColor(){ function setColor(){
var elem=document.getElementById('eActTimeC'); var elem=document.getElementById('eActTimeC');
doSend(['set','color'],['to',elem.value.substring(1)]); doSend(['set','color'],['to',elem.value.substring(1)]);
elem=document.getElementById('eActTacTimeC'); elem=document.getElementById('eActTacTimeC');
doSend(['set','tcolor'],['to',elem.value.substring(1)]); doSend(['set','tcolor'],['to',elem.value.substring(1)]);
elem=document.getElementById('eActDateC'); elem=document.getElementById('eActDateC');
doSend(['set','dcolor'],['to',elem.value.substring(1)]); doSend(['set','dcolor'],['to',elem.value.substring(1)]);
elem=document.getElementById('eActKWC');
doSend(['set','kwcolor'],['to',elem.value.substring(1)]);
} }
function setTimeFromUnix(_ti,_id){ function setTimeFromUnix(_ti,_id){
@@ -491,21 +510,30 @@ const char html_page_index[] PROGMEM = R"rawliteral(
function setWifi(){ function setWifi(){
var elem=document.getElementById("eSSID"); var elem=document.getElementById("eSSID");
var elem2=document.getElementById("ePASS"); var elem2=document.getElementById("ePASS");
doSend(['set','wifi'],['ssid',elem.value],['pwd',elem2.value]); doSend(['set','wifi'],['ssid',encodeURIComponent(elem.value)],['pwd',encodeURIComponent(elem2.value)]);
} }
function setAPPass(){
var elem=document.getElementById("apPASS");
var pwd = String(elem.value);
if((pwd.length > 7) && (pwd.length < 65)){
doSend(['set','appass'],['pwd',encodeURIComponent(pwd)]);
elem.value = '';
}else{
alert('Das AccessPoint Passwort muss zwischen 8 und 64 Zeichen lang sein!');
}
}
function setOption(){ function setOption(){
setBrightness(); setBrightness();
var option = 0; var option = 0;
if(document.getElementById("eWithSeconds").checked)
if(document.getElementById("eab").checked) option += 1;
option += 1; if(document.getElementById("eAlwaysAccessPoint").checked)
doSend(['set','option'],['options',option]); option += 2;
setWifi(); doSend(['set','option'],['options',option]);
closeOptionEdit();
} }
function save() { function save() {
@@ -517,15 +545,14 @@ const char html_page_index[] PROGMEM = R"rawliteral(
} }
function poll() { function poll() {
doSend(['poll','']); doPoll();
setTimeout(function(){ setTimeout(function(){
poll(); poll();
}, 1000); }, 1000);
} }
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
poll();
poll();
}); });
</script> </script>
</body> </body>