erste Version wo display nicht flackert ...
This commit is contained in:
533
index_html.h
Normal file
533
index_html.h
Normal file
@@ -0,0 +1,533 @@
|
||||
const char html_page_index[] PROGMEM = R"rawliteral(
|
||||
<!DOCTYPE HTML><html>
|
||||
<head>
|
||||
<title>N-Tools.de Uhr</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="data:,">
|
||||
<style>
|
||||
html {font-family: Roboto, Arial; display: inline-block; text-align: center;}
|
||||
body {font-size: 1.5rem; margin:0px auto; padding-bottom: 25px; min-height:100%;}
|
||||
body * {font-size: 1.3rem;}
|
||||
input[type=checkbox]{
|
||||
transform: scale(1.5);
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
label {min-width: 150px;display: inline-block;text-align: left; padding-left: 5px;}
|
||||
input,select,option { display: inline-block;text-align:center;}
|
||||
h1,h2,h3{padding:0px;margin:0px;)}
|
||||
h1{font-size: 1.7rem;}
|
||||
.head{
|
||||
background: linear-gradient(to bottom, #1b62d8 0%, #003399 100%);
|
||||
text-align: right;
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 8px 32px 0 rgb(0 0 0 / 40%), 0 3px 20px 0 rgb(0 0 0 / 38%);
|
||||
color:#fff;
|
||||
}
|
||||
.site{
|
||||
|
||||
}
|
||||
.option {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 16px 32px 0 rgb(0 0 0 / 40%), 0 6px 20px 0 rgb(0 0 0 / 38%);
|
||||
min-width: 160px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
display: inline-grid;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.value {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
.act{
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 2px 5px 2px 5px;
|
||||
}
|
||||
.m50{
|
||||
min-width: 50%;
|
||||
}
|
||||
.fs25{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.fs12{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.fs17{
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
.fs075, .fs075 *{
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.left{
|
||||
text-align: left;
|
||||
}
|
||||
.margin25left{
|
||||
margin-left: 25%;
|
||||
}
|
||||
.margin12left{
|
||||
margin-left: 12%;
|
||||
}
|
||||
#te{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
margin: auto;
|
||||
padding: 3%;
|
||||
box-shadow: 0 16px 32px 0 rgb(0 0 0 / 40%), 0 6px 20px 0 rgb(0 0 0 / 38%);
|
||||
min-height: 70%;
|
||||
width: 74%;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
opacity: 1.0;
|
||||
}
|
||||
#te > .value{
|
||||
text-align: left;
|
||||
}
|
||||
#oe{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
margin: auto;
|
||||
padding: 3%;
|
||||
box-shadow: 0 16px 32px 0 rgb(0 0 0 / 40%), 0 6px 20px 0 rgb(0 0 0 / 38%);
|
||||
min-height: 70%;
|
||||
width: 74%;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
opacity: 1.0;
|
||||
}
|
||||
#oe > .value{
|
||||
text-align: left;
|
||||
}
|
||||
#close{
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
#message{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 35%;
|
||||
margin: auto;
|
||||
padding: 5px;
|
||||
box-shadow: 0 16px 32px 0 rgb(0 0 0 / 40%), 0 6px 20px 0 rgb(0 0 0 / 38%);
|
||||
width: 30%;
|
||||
border-radius: 4px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #1b62d8;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
@media(min-width: 600px) {
|
||||
|
||||
margin: 0 1em 2em;
|
||||
|
||||
}
|
||||
|
||||
&:hover { text-decoration: none; }
|
||||
|
||||
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
|
||||
outline: 1px solid;
|
||||
outline-color: rgba(255, 255, 255, .5);
|
||||
outline-offset: 0px;
|
||||
text-shadow: none;
|
||||
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input[type=button]:hover {
|
||||
box-shadow: 0 16px 32px 0 rgb(0 0 0 / 40%), 0 6px 20px 0 rgb(0 0 0 / 38%);
|
||||
outline-color: rgba(255, 255, 255, 0);
|
||||
outline-offset: 15px;
|
||||
text-shadow: 1px 1px 2px #427388;
|
||||
}
|
||||
.wsnw{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="head" class="head">
|
||||
<h1>N-Tools Uhr VPx</h1>
|
||||
<h3>`VERSION`</h3>
|
||||
<h3>`ID`</h3>
|
||||
</div>
|
||||
<div id="site" class="site">
|
||||
<div id="message"></div>
|
||||
<div class='option' onclick="editTime(-1);">
|
||||
<div class='value'>
|
||||
<label class="center">aktuell:</label><br>
|
||||
<span class='act' id="actTime"></span><br>
|
||||
<span class='act' id="actTacTime"></span><br>
|
||||
<span class='act' id="actDate"></span>
|
||||
</div><br>
|
||||
<div class='fs075'>
|
||||
<label>letzter abgleich:</label>
|
||||
<span id="sync"></span>
|
||||
</div>
|
||||
</div><br>
|
||||
<br>
|
||||
<div class='option m50'>
|
||||
<label for="showWhat">Zeige</label>
|
||||
<select id="showWhat" onchange="setShowWhat();">
|
||||
<option value=0>taktische Uhrzeit</option>
|
||||
<option value=1>Uhrzeit</option>
|
||||
<option value=2>Datum / Uhrzeit</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class='option m50' onclick="return false">
|
||||
<label for="brigtness">Helligkeit LEDs</label>
|
||||
<span class="wsnw"><span id="brigtness"></span> %</span><br>
|
||||
<label for="lux">Umgebungshelligkeit</label>
|
||||
<span class="wsnw"><span id="lux"></span> LUX</span><br>
|
||||
<div class="left margin12left">
|
||||
<span class="wsnw">
|
||||
<label for="SSID">SSID:</label>
|
||||
<span id="SSID"></span>
|
||||
</span>
|
||||
<br>
|
||||
<input type="button" onclick="editOption();" value="Optionen ändern"><br>
|
||||
<br>
|
||||
<span class="wsnw">
|
||||
<input id="rtcactive" type='checkbox' onclick="return false" readonly>
|
||||
<label for="rtcactive">RTC okay</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<input id="d" type='text' style='width:80%;font-size:0.75rem;' value=''>
|
||||
<div class='option m50'>
|
||||
<input class="fs17" id="save" class="btn" type='button' value='dauerhaft speichern' onclick='save();'>
|
||||
</div>
|
||||
<div class='option m50'>
|
||||
<input class="fs17" id="reset" class="btn" type='button' value='neu starten' onclick='reset();'>
|
||||
</div>
|
||||
<div id="te">
|
||||
<div id="close" onclick="closeEdit();">X</div>
|
||||
<div class='value'>
|
||||
<h1><span id="el"></span></h1>
|
||||
<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="eActDateC">Datum: </label><input type="color" id="eActDateC" value=""><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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="oe">
|
||||
<div id="close" onclick="closeOptionEdit();">X</div>
|
||||
<div class='value'>
|
||||
<h1><span id="el">Optionen</span></h1>
|
||||
<input id="ebs" type='number' min="5" max="100" step="5" onchange="document.getElementById('eab').checked = false;"> %
|
||||
<label for="ebs">Helligkeitsfaktor (in Prozent)</label><br>
|
||||
<span>
|
||||
<label for="eSSID">SSID:</label>
|
||||
<input id="eSSID" type='text' onclick="return false">
|
||||
</span>
|
||||
<br>
|
||||
<span>
|
||||
<label for="ePASS">Passwort:</label>
|
||||
<input id="ePASS" type='text' onclick="return false">
|
||||
</span>
|
||||
<br>
|
||||
<input type="button" class="btn" onclick="setOption();" value="setzen"><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var ti = new Date;
|
||||
var EEPROMDataChanged = false;
|
||||
|
||||
function RGBToHex(rgb) {
|
||||
// Choose correct separator
|
||||
let sep = rgb.indexOf(",") > -1 ? "," : " ";
|
||||
// Turn "rgb(r,g,b)" into [r,g,b]
|
||||
rgb = rgb.substr(4).split(")")[0].split(sep);
|
||||
|
||||
let r = (+rgb[0]).toString(16),
|
||||
g = (+rgb[1]).toString(16),
|
||||
b = (+rgb[2]).toString(16);
|
||||
|
||||
if (r.length == 1)
|
||||
r = "0" + r;
|
||||
if (g.length == 1)
|
||||
g = "0" + g;
|
||||
if (b.length == 1)
|
||||
b = "0" + b;
|
||||
console.log("#" + r + g + b);
|
||||
return "#" + r + g + b;
|
||||
}
|
||||
|
||||
|
||||
function closeEdit(){
|
||||
document.getElementById("te").style.display = "none";
|
||||
}
|
||||
|
||||
function editTime(_what){
|
||||
if(_what == -1){
|
||||
document.getElementById("el").innerHTML = 'Farben';
|
||||
document.getElementById("eActTimeC").value = RGBToHex(document.getElementById('actTime').style.color);
|
||||
document.getElementById("eActTacTimeC").value = RGBToHex(document.getElementById('actTacTime').style.color);
|
||||
document.getElementById("eActDateC").value = RGBToHex(document.getElementById('actDate').style.color);
|
||||
}
|
||||
document.getElementById("te").style.display = "initial";
|
||||
}
|
||||
|
||||
function closeOptionEdit(){
|
||||
document.getElementById("oe").style.display = "none";
|
||||
}
|
||||
|
||||
function editOption(){
|
||||
document.getElementById('ebs').value = document.getElementById('brigtness').innerHTML;
|
||||
document.getElementById('eSSID').value = document.getElementById('SSID').innerHTML;
|
||||
|
||||
document.getElementById("oe").style.display = "initial";
|
||||
}
|
||||
|
||||
Number.prototype.AddZero= function(b,c){
|
||||
var l= (String(b || 10).length - String(this).length)+1;
|
||||
return l>0? new Array(l).join(c || '0')+this : this;
|
||||
}
|
||||
|
||||
function showOK(){
|
||||
document.getElementById("message").innerHTML='ok';
|
||||
document.getElementById("message").style.backgroundColor = "#0f0";
|
||||
document.getElementById("message").style.display = "initial";
|
||||
setTimeout(function(){
|
||||
document.getElementById("message").style.display = "none";
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function fetchHandle(res){
|
||||
if(!res.ok){
|
||||
console.log(res);
|
||||
document.getElementById("site").style.backgroundColor = "#f00";
|
||||
}else{
|
||||
if(EEPROMDataChanged)
|
||||
document.getElementById("site").style.backgroundColor = "#ffa";
|
||||
else
|
||||
document.getElementById("site").style.backgroundColor = "#fff";
|
||||
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){
|
||||
var elem=document.getElementById('d');
|
||||
elem.value=res;
|
||||
if(res == 'OK'){
|
||||
showOK();
|
||||
}else if(res[0] == '['){
|
||||
try{
|
||||
var data = JSON.parse(res);
|
||||
ti = data[0];
|
||||
showAktTimeFromUnix(ti);
|
||||
colorString = "#" + data[1].toString(16).padStart(6, '0');
|
||||
document.getElementById('actTime').style.color = colorString;
|
||||
colorString = "#" + data[2].toString(16).padStart(6, '0');
|
||||
document.getElementById('actTacTime').style.color = colorString;
|
||||
colorString = "#" + data[3].toString(16).padStart(6, '0');
|
||||
document.getElementById('actDate').style.color = colorString;
|
||||
|
||||
document.getElementById('showWhat').value = parseInt(data[4]);
|
||||
showTimeFromUnix(data[6],'sync');
|
||||
switch(data[5]){
|
||||
case 0:
|
||||
document.getElementById('sync').innerHTML = " keiner";
|
||||
break;
|
||||
case 1:
|
||||
document.getElementById('sync').innerHTML += " (GPS)";
|
||||
break;
|
||||
case 2:
|
||||
document.getElementById('sync').innerHTML += " (NTP)";
|
||||
break;
|
||||
case 3:
|
||||
document.getElementById('sync').innerHTML += " (manuel)";
|
||||
break;
|
||||
}brigtness
|
||||
|
||||
document.getElementById('lux').innerHTML = data[7];
|
||||
document.getElementById('brigtness').innerHTML = (data[8]*100);
|
||||
document.getElementById("rtcactive").checked = (data[10] == 1);
|
||||
|
||||
EEPROMDataChanged = (data[14] == 1);
|
||||
if(EEPROMDataChanged){
|
||||
document.getElementById("site").style.backgroundColor = "#ffa";
|
||||
}
|
||||
document.getElementById('SSID').innerHTML = data[15];
|
||||
|
||||
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function doSend(_value1,_value2=[],_value3=[]){
|
||||
var send_str = "/do?"+_value1[0]+"="+_value1[1];
|
||||
if(_value2.length > 0){
|
||||
send_str += "&"+_value2[0]+"="+_value2[1];
|
||||
}
|
||||
if(_value3.length > 0){
|
||||
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";});
|
||||
}
|
||||
|
||||
function doSetTime(_idx = -1){
|
||||
var d=new Date();
|
||||
d.setTime(d.getTime() - (d.getTimezoneOffset()*60*1000) + 1000);
|
||||
doSend(['set','time'],['to',Math.floor(d /1000)],['idx',_idx]);
|
||||
}
|
||||
|
||||
function setColor(){
|
||||
var elem=document.getElementById('eActTimeC');
|
||||
doSend(['set','color'],['to',elem.value.substring(1)]);
|
||||
elem=document.getElementById('eActTacTimeC');
|
||||
doSend(['set','tcolor'],['to',elem.value.substring(1)]);
|
||||
elem=document.getElementById('eActDateC');
|
||||
doSend(['set','dcolor'],['to',elem.value.substring(1)]);
|
||||
}
|
||||
|
||||
function setTimeFromUnix(_ti,_id){
|
||||
var elem=document.getElementById(_id);
|
||||
//var st = String(new Date(_ti*1000).toISOString().substr(0,19));
|
||||
var st = new Date(parseInt(_ti) * 1000);
|
||||
var sst = st.toISOString().slice(0,19);
|
||||
elem.value = sst;
|
||||
}
|
||||
|
||||
function showAktTimeFromUnix(_ti){
|
||||
var elem=document.getElementById('actTime');
|
||||
var elem2=document.getElementById('actTacTime');
|
||||
var elem3=document.getElementById('actDate');
|
||||
var st = new Date(parseInt(_ti) * 1000);
|
||||
st.setTime(st.getTime() + (st.getTimezoneOffset()*60*1000));
|
||||
//var sst = st.toUTCString();
|
||||
var sstTime = ("0" + st.getHours()).slice(-2) + ":" + ("0" + st.getMinutes()).slice(-2) + ":" + ("0" + st.getSeconds()).slice(-2);
|
||||
elem.innerHTML = sstTime;
|
||||
const formatter = new Intl.DateTimeFormat('en', { month: 'short' });
|
||||
const month = formatter.format(st);
|
||||
var sstTacTime = ("0" + st.getDate()).slice(-2) + "" + ("0" + st.getHours()).slice(-2) + "" + ("0" + st.getMinutes()).slice(-2) + month.toLowerCase() + ("" + st.getFullYear()).slice(-2);
|
||||
elem2.innerHTML = sstTacTime;
|
||||
var sstDate = ("0" + st.getDate()).slice(-2) + "." + ("0"+(st.getMonth()+1)).slice(-2) + "." +st.getFullYear();
|
||||
elem3.innerHTML = sstDate;
|
||||
}
|
||||
|
||||
function showTimeFromUnix(_ti,_id){
|
||||
var elem=document.getElementById(_id);
|
||||
var st = new Date(parseInt(_ti) * 1000);
|
||||
st.setTime(st.getTime() + (st.getTimezoneOffset()*60*1000));
|
||||
//var sst = st.toUTCString();
|
||||
var sst = ("0" + st.getDate()).slice(-2) + "." + ("0"+(st.getMonth()+1)).slice(-2) + "." +st.getFullYear() + " " + ("0" + st.getHours()).slice(-2) + ":" + ("0" + st.getMinutes()).slice(-2) + ":" + ("0" + st.getSeconds()).slice(-2);
|
||||
elem.innerHTML = sst;
|
||||
}
|
||||
|
||||
function setShowWhat(_what = -2){
|
||||
if(_what == -2){
|
||||
var elem=document.getElementById("showWhat");
|
||||
doSend(['set','option'],['showWhat',elem.value]);
|
||||
}else{
|
||||
doSend(['set','option'],['showWhat',_what]);
|
||||
}
|
||||
}
|
||||
|
||||
function setBrightness(){
|
||||
var elem=document.getElementById("ebs");
|
||||
doSend(['set','option'],['brightness',(elem.value / 100)]);
|
||||
}
|
||||
|
||||
function setWifi(){
|
||||
var elem=document.getElementById("eSSID");
|
||||
var elem2=document.getElementById("ePASS");
|
||||
doSend(['set','wifi'],['ssid',elem.value],['pwd',elem2.value]);
|
||||
}
|
||||
|
||||
|
||||
function setOption(){
|
||||
setBrightness();
|
||||
var option = 0;
|
||||
|
||||
if(document.getElementById("eab").checked)
|
||||
option += 1;
|
||||
doSend(['set','option'],['options',option]);
|
||||
|
||||
setWifi();
|
||||
closeOptionEdit();
|
||||
}
|
||||
|
||||
function save() {
|
||||
doSend(['save','']);
|
||||
}
|
||||
|
||||
function reset() {
|
||||
doSend(['reset','']);
|
||||
}
|
||||
|
||||
function poll() {
|
||||
doSend(['poll','']);
|
||||
setTimeout(function(){
|
||||
poll();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
poll();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
)rawliteral";
|
||||
Reference in New Issue
Block a user