-
Notifications
You must be signed in to change notification settings - Fork 4
/
fetch.html
49 lines (46 loc) · 37.7 KB
/
fetch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang='en'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset='utf-8' />
<link rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='0' y='0' rx='6' ry='6' width='44' height='44' style='fill:%233c3c3b' transform='rotate(0 14 20)'/%3E%3Cg transform='rotate(45 26 23)'%3E%3Crect x='4' y='15' rx='2' ry='2' width='4' height='20' style='fill:%2325a843' /%3E%3Crect x='12' y='7.5' rx='2' ry='2' width='4' height='35' style='fill:%23ffd103'/%3E%3Crect x='20' y='0' rx='2' ry='2' width='4' height='50' style='fill:%23f28d22' /%3E%3Crect x='28' y='7.5' rx='2' ry='2' width='4' height='35' style='fill:%23e9493e'/%3E%3Ccircle cx='41' cy='25' r='5' fill='white' /%3E%3C/g%3E%3C/svg%3E"
type="image/svg+xml">
<title id="unitT"></title>
</head>
<STYLE>
*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0;padding:0}body{user-select:none;-webkit-user-select:none;margin:0;background:#e8e8e8;color:#4e4a4a}#dateV{opacity:0;top:10px;writing-mode:vertical-lr;position:fixed;pointer-events:none}#openSys:hover #dateV{opacity:1}#container{display:flex;position:absolute;height:100vh;width:100vw;justify-content:center}#framie{height:100%;transition:.8s;position:relative;z-index:2;padding-bottom:60px;left:1px}iframe{width:100%;height:100%;border:0;background:#fff;box-shadow:4px 0 13px -7px #000}#unitId{top:2%;z-index:1;display:flex;position:fixed}#allList{display:flex;transform:translate3d(0,0,0);grid-row-gap:1vh;margin:auto;padding:5px;transition:.8s ease-out;flex-direction:column;padding-bottom:40px;padding-top:40px;color:#fff}#allList>div>:not(.bigNum){box-shadow:0 0 10px 1px #00000026}.allExtra{grid-row-gap:.5vh!important}#bigNumber{display:grid;gap:1vh;transition:.8s ease-out}.bigNum{display:flex;grid-template-columns:auto auto auto auto;gap:1vh;width:-webkit-fill-available;justify-content:start;transition:.8s ease-out}.bigNumOne{justify-content:center!important;grid-template-columns:auto!important;width:unset!important}.bigNumWrap{width:-webkit-fill-available;display:flex;justify-items:stretch;cursor:default;padding:4.2px;border-radius:5px;width:150px;height:75px;flex-direction:column;background:#837c7c;flex-wrap:nowrap;justify-content:space-between;box-shadow:0 0 10px 1px #00000026}.bigC{background:#009c63}#sensorList{display:grid;gap:1vh;justify-content:center;transition:.8s ease-out}#sliderList{display:grid;gap:1vh;min-width:288px;transition:.8s ease-out}#sliderList .sensorset{width:inherit;height:40px;background:#837c7c}.clickables:active,.push:active{transform:scale(.95);-webkit-transform:scale(.95);transition:.1s}.slider,.npSl{-webkit-appearance:none;position:absolute;height:inherit}.slider{mix-blend-mode:color;background:#847d7d;width:calc(100% + 44.2px);left:-24.2px;top:0}.npSl{width:100%;left:-.2px;position:inherit;height:40px;overflow:hidden;border-radius:5px}.sliderAmount{margin-top:-4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:50px;cursor:pointer;box-shadow:-100vw 0 0 100vw #458fd1;border-left:20px solid #458fd1;border-right:20px solid #837c7c}.slider::-moz-range-thumb{width:0;height:70px;cursor:pointer;box-shadow:-100vw 0 0 100vw #458fd1;border-left:20px solid #458fd1;border-right:20px solid #837c7c}.npSl::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:42px;cursor:pointer;box-shadow:0 0 2px 0 #fff;background:#3e88cb}.npSl::-moz-range-thumb{width:20px;height:42px;cursor:pointer;box-shadow:0 0 2px 0 #fff;background:#3e88cb;border:0}.npH{background-image:linear-gradient(to right,red,yellow,lime,cyan,blue,magenta,red)}.npV{background-image:linear-gradient(to right,#333,white)}.npS{background-image:linear-gradient(to right,white,#333)}.slTS{-webkit-appearance:none;position:absolute;height:40px;z-index:1;border-radius:5px;width:100%;top:0;mix-blend-mode:overlay;pointer-events:none;background:#8a8787}.slTS:hover{background:transparent}.slTS:nth-child(1)::-webkit-slider-thumb{border-left:10px solid #d25e42;border-right:10px solid #458fd1}.slTS:nth-child(2)::-webkit-slider-thumb{border-left:10px solid #458fd1;border-right:10px solid #d25e42}.slTS:nth-child(1)::-moz-range-thumb{border-left:10px solid #d25e42;border-right:10px solid #458fd1}.slTS:nth-child(2)::-moz-range-thumb{border-left:10px solid #458fd1;border-right:10px solid #d25e42}.slTS::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:40px;cursor:pointer;appearance:none;pointer-events:all}.slTS::-moz-range-thumb{width:0;height:100vh;cursor:pointer;appearance:none;pointer-events:all}.slTimeSet{display:flex;align-items:center;justify-content:center}.slTimeSetWrap{height:40px;padding:4.2px;border-radius:5px;overflow:hidden;position:relative}.slTimeText{position:absolute;right:4.2px;bottom:2.2px;font-weight:400}.sensorset:not(.btnTile){background:#847d7d}.sensorset{display:flex;justify-items:stretch;flex-direction:column;padding:4.2px;flex-wrap:nowrap;border-radius:5px;width:150px;overflow:hidden;position:relative;align-items:stretch;cursor:pointer}.valueBig{font-size:27pt;text-align:right}.valuesBig{overflow-wrap:anywhere}.valWrap{background:#635d5d;border-radius:5px;text-align:end;display:flex;align-items:center;justify-content:flex-end;width:100%}.vInputs{height:30px;width:84%;border:0;background:none;text-align:end;color:inherit}.vInputs:focus-visible{width:inherit}input:focus::placeholder{opacity:.2}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kindInput{padding:0 2px 0 1px}.on,.push:active{background:#3e88cb!important}.alert{background:#d8524f!important}.btnTile{background:#635d5d;min-height:60px}.sensors{padding-bottom:4px;overflow-wrap:anywhere}.row{display:flex;justify-content:space-between}.odd{padding-right:1px;overflow-wrap:anywhere}.odd:hover{overflow:visible}.even{word-spacing:-2px;white-space:nowrap;align-self:self-end}.cron{padding-bottom:1pt;text-align:end}input::placeholder{opacity:1;color:#fff}#opener{bottom:0;z-index:2;width:100%;position:fixed}.open{background:none;display:flex;max-width:200px;align-items:center;margin:auto;padding-bottom:2vh;justify-content:space-between}.sidenav{height:100%;width:280px;position:fixed;z-index:20;top:0;left:-280px;background:#111111d9;transition:.6s;overflow-y:hidden;display:flex;flex-direction:column;align-items:center;cursor:pointer;justify-content:center;color:#fff}.menueItem{display:grid;justify-content:start;grid-template-columns:25px auto;align-items:end}.numberUnit{font-size:10px;color:#818181}#menueList div:hover{color:#444}.nc{word-break:break-all}.sideNbtn{position:absolute;bottom:2%;font-size:35px;color:#b3b3b3}#openSys{left:20px;width:40px}#closeBtn{right:20px}#menueList{overflow:scroll;-ms-overflow-style:none;scrollbar-width:none;transition:.2s;width:max-content;max-width:280px}#menueList::-webkit-scrollbar{display:none}#menueList div{padding:3px;font-size:25px}#sysInfo{background:#ffffff17;color:#fff;transition:.5s;border-radius:5px;width:200px;height:0;overflow:hidden;position:absolute;top:5px;display:flex;flex-direction:column;justify-content:space-evenly}.syspair{display:flex;justify-content:flex-start}.syspair>div{font-size:8pt!important}.syspair div:nth-child(1){text-align:end;width:35%;padding-right:5px}.menueWrap{transition:.5s;height:185px;flex-shrink:999}.bigSpan:nth-child(1){grid-row:1 / span 2;height:100%}@media screen and (max-height:450px){framie{padding-bottom:40px}#opener{height:40px}}@media screen and (max-width:799px){#framie{position:absolute}}@media screen and (max-width:450px){#allList{grid-row-gap:5px;min-width:unset}#opener{height:40px}#framie{padding-bottom:40px}.allExtra{grid-row-gap:2.5px!important}#bigNumber{grid-row-gap:5px}#sliderList{gap:5px 1vh}#sensorList{gap:5px}.bigNum{gap:5px}.sensors{padding-bottom:2%}}@media (prefers-color-scheme:dark){body{background:#000;color:#b3b3b3}input::placeholder,#allList{color:#b3b3b3}iframe,.slTimeSetWrap{background:#000}#opener{background:#000000a8}.bigNumWrap{background:#444}.bigC{background:#553630}.slTS{mix-blend-mode:lighten;background:#444!important}.slTS:nth-child(1)::-webkit-slider-thumb{border-left:10px solid #6d1343;border-right:10px solid #44607a}.slTS:nth-child(2)::-webkit-slider-thumb{border-left:10px solid #44607a;border-right:10px solid #6d1343}.slTS:nth-child(1)::-moz-range-thumb{border-left:10px solid #6d1343;border-right:10px solid #44607a}.slTS:nth-child(2)::-moz-range-thumb{border-left:10px solid #44607a;border-right:10px solid #6d1343}.slider{mix-blend-mode:lighten;background:#444}.slider::-webkit-slider-thumb{box-shadow:-100vw 0 0 100vw #44607a;border-left:20px solid #44607a;border-right:20px solid #444}.slider::-moz-range-thumb{box-shadow:-100vw 0 0 100vw #44607a;border-left:20px solid #44607a;border-right:20px solid #444}.npSl::-webkit-slider-thumb{box-shadow:0 0 4px 3px grey;background:#44607a}.npSl::-moz-range-thumb{box-shadow:0 0 4px 3px grey;background:#44607a}.npS,.npH,.npV{background-color:#9b9b9b;background-blend-mode:multiply}.on,.push:active{background:#44607a!important}.alert{background:#553044!important}.valueBig{background:none}.btnTile,.valWrap{background:#333}.sensorset:not(.btnTile),#sliderList .sensorset{background:#444}}
</STYLE>
<body onload="fetchJson()">
<script>
var jsonPath,nNr,nP,nP2,nN,unitNr,unitNr1,fJ,nIV,iIV,navOpen,myParam,currVal,html,manNav,gesVal,iO,firstRun=1,bigLength=0,hasParams=1,isittime=1,NrofSlides=0,tsX=0,teX=0,tsY=0,teY=0,msTs=0,msTe=0;async function fetchJson(t){try{for(Array of document.styleSheets)for(e of Array.cssRules)e.conditionText?.includes("prefers-color-scheme")&&(document.cookie.includes("Col=1")?e.media.mediaText="(prefers-color-scheme: light)":e.media.mediaText="(prefers-color-scheme: dark)")}catch(e){}urlParams=new URLSearchParams(window.location.search),myParam=urlParams.get("unit"),"reboot"==urlParams.get("cmd")&&(window.location.href=window.location.origin+"/tools?cmd=reboot"),null==myParam&&(hasParams=0),someoneEn=0,jsonPath||(jsonPath="/json");let n=nNr;if(responseTime=Date.now(),response=await getUrl(jsonPath),myJson=await response.json(),isittime&&n===nNr){html="",html1="",html2="",html3="";unit=myJson.WiFi.Hostname,unitNr=myJson.System["Unit Number"],sysInfo=myJson.System;let e=`\n <div class="syspair"><div>Sysinfo</div><div>${unit}</div></div>\n <div class="syspair"><div>Local Time:</div><div>${sysInfo["Local Time"]}</div></div>\n <div class="syspair"><div>Uptime:</div><div>${minutesToDhm(sysInfo.Uptime)}</div></div>\n <div class="syspair"><div>Load:</div><div>${sysInfo.Load}%</div></div>\n ${sysInfo["Internal Temperature"]?`<div class="syspair">\n <div>Temp:</div>\n <div style="color: ${sysInfo["Internal Temperature"]>65?"red":"inherit"};">\n ${sysInfo["Internal Temperature"]}°C\n </div>\n </div>`:""}\n <div class="syspair"><div>Free Ram:</div><div>${sysInfo["Free RAM"]}</div></div>\n <div class="syspair"><div>Free Stack:</div><div>${sysInfo["Free Stack"]}</div></div>\n <div class="syspair"><div>IP Address:</div><div>${myJson.WiFi["IP Address"]}</div></div>\n <div class="syspair"><div>RSSI:</div><div>${myJson.WiFi.RSSI} dBm</div></div>\n <div class="syspair"><div>Build:</div><div>${sysInfo.Build}</div></div>\n <div class="syspair"><div>Eco Mode:</div><div>${"true"===sysInfo["CPU Eco Mode"]?"on":"off"}</div></div>\n `,[t,n]=myJson.System["Local Time"].split(" ");n=n.split(":").slice(0,-1).join(":");let[l,a,o]=t.split("-");if(myJson.Sensors.length){for(const e of myJson.Sensors){var s="";if(sensorName=e.TaskName,sensorName.includes("?")){const[,e]=getComputedStyle(document.body).backgroundColor.match(/\d+/g);tBG=`background:#${sensorName.split("?")[1]}${"0"===e?"80":""}`,sensorName=sensorName.split("?")[0]}else tBG="";var i=changeNN(sensorName);if(htS1=' sensorset clickables" style="'+tBG+'" onclick="playSound(3000), ',htS2='<div class="sensors" style="font-weight:bold;">'+i+"</div>",exC=[87,38,41,42].includes(e.TaskDeviceNumber),exC2=!e.Type?.includes("Display"),taskEnabled=e.TaskEnabled.toString(),"true"===taskEnabled&&!sensorName.includes("XX")&&!exC&&exC2&&!hasParams)if(e.TaskValues){someoneEn=1,firstItem=!0;for(const t of e.TaskValues){if(wasUsed=!1,"nan"==t.Value&&(t.Value=0,t.NrDecimals=0),"number"==typeof t.Value?num2Value=t.Value.toFixed(t.NrDecimals):num2Value=t.Value,iN=t.Name.toString(),itemN=iN.split("?")[0],kindN=iN.split("?")[1],kindN||(kindN=""),"H"==kindN&&(kindN="%"),"T"==kindN&&(num2Value=num2Value.toString(),num2Value=num2Value.replace(".",":"),4==t.NrDecimals&&(num2Value=num2Value.replace(/(.*)(.)(.)/,"$1.$2$3")),kindN=""),slMax=1023,slMin=0,slStep=1,bS="",1==e.TaskDeviceNumber&&(wasUsed=!0,"btnStateC"===iN&&t.Value<2||1===t.Value?bS="on":2===t.Value&&(bS="alert"),e.TaskDeviceGPIO1&&"State"===iN||"iState"===iN?("iState"===iN&&(t.Value=1==t.Value?0:1),uttonGP=sensorName+"|"+e.TaskDeviceGPIO1,html+='<div class="btnTile '+bS+htS1+"buttonClick('"+uttonGP+"', '"+t.Value+"')\">"+htS2):"pState"===iN?e.TaskDeviceGPIO1&&(uttonGP=sensorName+"?"+e.TaskDeviceGPIO1,html+='<div class="'+bS+' btnTile push sensorset" onpointerdown="playSound(3000), pushClick(\''+uttonGP+"',1)\" onpointerup=\"pushClick('"+uttonGP+'\',0)"><div id="'+sensorName+'" class="sensors" style="font-weight:bold;">'+sensorName+"</div></div>"):itemN.includes("btnState")?("ibtnState"===itemN&&(t.Value=1==t.Value?0:1),kindN&&(sensorName=sensorName+"|"+kindN),html+='<div class="btnTile '+bS+htS1+"buttonClick('"+sensorName+"', '"+t.Value+"')\">"+htS2):wasUsed=!1),33==e.TaskDeviceNumber&&!iN.includes("XX")&&!sensorName.includes("bigVal"))if(wasUsed=!0,"C"===kindN&&t.Value<2||1===t.Value?bS="on":2===t.Value&&(bS="alert"),["dButtons","vInput","pButtons"].some((t=>e.TaskName.includes(t)))&&t.Name.includes("noVal"))t.Name.includes("noValAuto")?window.innerWidth>=450&&document.cookie.includes("Two=1")&&(html+='<div class="sensorset btnTile"></div>'):html+='<div class="sensorset btnTile"></div>';else if(sensorName.includes("dButtons"))t.Value>-1&&(itemNB=itemN.split("&")[0],itemNB2=changeNN(itemNB),itemN.split(">")[1]&&getRemoteGPIOState(e.TaskNumber,itemN.split("&")[1].split(">")[0],itemN.split(">")[1],myJson.System["Unit Number"],t.ValueNumber),"A"==itemN.split("&")[1]?html+='<div class="btnTile '+bS+htS1+"getNodes('"+itemNB+'\')"><div class="sensors nodes" style="font-weight:bold;">'+itemNB2+"</div></div>":html+='<div class="btnTile '+bS+htS1+"buttonClick('"+itemN+'\')"><div id="'+itemN+'" class="sensors" style="font-weight:bold;">'+itemNB2+"</div></div>");else if(sensorName.includes("pButtons"))t.Value>-1&&(itemNB=itemN.split("&")[0],itemNB2=changeNN(itemNB),html+='<div class="'+bS+' btnTile push sensorset" onpointerdown="playSound(3000), pushClick(\''+itemN+"',1)\" onpointerup=\"pushClick('"+itemN+'\',0)"><div id="'+itemN+'" class="sensors" style="font-weight:bold;">'+itemNB2+"</div></div>");else if(sensorName.includes("vInput"))itemN||(itemN=" "),html+='<div class="sensorset clickables"><div class="sensors" style="font-weight:bold" onclick="getInput(this.nextElementSibling.firstChild)">'+itemN+'</div><div class="valWrap"><input type="number" class="vInputs '+e.TaskNumber+","+t.ValueNumber+'" id="'+itemN+'"name="'+sensorName+'" placeholder="'+num2Value+'" onkeydown="getInput(this)" onclick="getInput(this,1)"> <div class="kindInput">'+kindN+"</div></div></div>";else if(sensorName.includes("vSlider"))slName=iN,slKind="",(iN.match(/\?/g)||[]).length>=3&&([slName,slMin,slMax,slStep,slKind]=iN.split("?")),slName=changeNN(slName),num2Value=Number(num2Value).toFixed((slStep.toString().split(".")[1]||"").length),"noVal"==slName&&(slName=" "),slKind||(slKind=""),"H"==slKind&&(slKind="%"),html2+='<div class="sensorset"><input type="range" min="'+slMin+'" max="'+slMax+'" step="'+slStep+'" value="'+num2Value+'" id="'+iN+'"class="slider sL '+e.TaskNumber+","+t.ValueNumber,sensorName.includes("vSliderSw")&&(html2+=" swSlider"),sensorName.includes("nvSlider")?html2+=' noVal"><div class="sensors" style="align-items: flex-end;"><div style="font-weight:bold;">'+slName+"</div></div></div>":html2+='"><div class="sensors" style="align-items: flex-end;"><div style="font-weight:bold;">'+slName+'</div><div class="sliderAmount" style="text-align: right;">'+num2Value+slKind+"</div></div></div>";else if(sensorName.includes("tSlider")){4!==t.NrDecimals&&(iN="For the Time slider the value must have<br>4 decimals!"),slT1=t.Value.toFixed(4),slT2=(slT1+"").split(".")[1],slT1=Math.floor(slT1),hour1=Math.floor(slT1/60),minute1=slT1%60;const n=minute1.toString().padStart(2,"0");hour2=Math.floor(slT2/60),minute2=slT2%60;const s=minute2.toString().padStart(2,"0");iN=changeNN(iN),htmlSlider1='<input class="slTS" type="range" min="0" max="1440" step="5" value="',html2+='<div id="'+iN+'" class="slTimeSetWrap '+sensorName+" "+e.TaskNumber+","+t.ValueNumber+'" style="font-weight:bold;">'+iN+'<div class="slTimeText"> <span class="hAmount1">'+hour1+'</span><span>:</span><span class="mAmount1">'+n+'</span><span>-</span><span class="hAmount2">'+hour2+'</span><span>:</span><span class="mAmount2">'+s+'</span></div><div class="slTimeSet">'+htmlSlider1+slT1+'" id="'+iN+'L">'+htmlSlider1+slT2+'" id="'+iN+'R"></div></div>'}else if(sensorName.includes("neoPixel")){const n="h"===iN?"?H":"s"===iN?"?S":"v"===iN?"?V":"";html2+=`<input type="range" max="${"h"===iN?359:100}" min="0" value="${num2Value}" id="${sensorName}${n}" class="sL npSl ${e.TaskNumber},${t.ValueNumber} np${iN.toUpperCase()} noVal">`}else wasUsed=!1;if(sensorName.includes("bigVal")){wasUsed=!0;let t='<div class="valuesBig" style="font-weight:bold;text-align:left;">';1==firstItem&&(html3+='<div class="bigNum">',bigLength<e.TaskValues.length&&(bigLength=e.TaskValues.length)),htmlBig2='<div style="'+tBG+'" class="bigNumWrap ',iN.includes("XX")||(3!==e.TaskValues.length||e.TaskValues.some((e=>"XX"===iN))||(window.innerWidth<450||document.cookie.includes("Two=1"))&&(s="bigSpan"),sensorName.includes("bigValC")?html3+=htmlBig2+"bigC "+s+'">':html3+=htmlBig2+s+'">',htS3=t+iN+'</div><div id="',["Clock","Uhr","Zeit","Time"].some((e=>iN.includes(e)))?html3+=htS3+'clock" class="valueBig">'+n+"</div></div>":iN.toLowerCase().includes("datum")?html3+=htS3+'date" class="valueBig">'+o+"."+a.toString()+"</div></div>":iN.toLowerCase().includes("date")?html3+=htS3+'date" class="valueBig">'+a+"-"+o.toString()+"</div></div>":["year","jahr"].some((e=>iN.toLowerCase().includes(e)))?html3+=htS3+'year" class="valueBig">'+l+"</div></div>":iN.includes("noVal")?html3+=t+'</div><div class="valueBig"></span></div></div>':(itemN=changeNN(itemN),html3+=t+itemN+'</div><div class="valueBig">'+num2Value+'<span style="background:none;padding-right: 1%;">'+kindN+"</span></div></div>"))}wasUsed||(43==e.TaskDeviceNumber?firstItem&&(1===t.Value&&(bS="on"),html+='<div class="btnTile '+bS+' sensorset clickables" onclick="playSound(3000); splitOn('+e.TaskNumber+'); topF()""><div class="sensors" style="font-weight:bold;">'+sensorName+'</div><div class=even style="font-size: 20pt;">⏲︎</div></div></div>'):(1==firstItem&&(html1+='<div class="'+htS1+"buttonClick('"+sensorName+"')\">"+htS2),t.Name.toString().includes("XX")||(81==e.TaskDeviceNumber?html1+='<div class="cron"><div>'+itemN+'</div><div style="font-size: 10pt;">'+t.Value+"</div></div>":html1+="<div class=row><div class=odd>"+itemN+"</div><div class=even>"+num2Value+" "+kindN+"</div></div>"))),firstItem=!1}html+="</div>",html1+="</div>",html3+="</div>",document.cookie.includes("Sort=1")||(html+=html1,html1="")}else html1+='<div class="sensorset clickables" onclick="buttonClick(\''+sensorName+'\')"><div class="sensors" style="font-weight:bold;">'+sensorName+"</div><div></div><div></div></div>",someoneEn=1,document.getElementById("sensorList").innerHTML=html}someoneEn||hasParams||(html+='<div class="sensorset clickables" onclick="splitOn(); topF()"> <div class="sensors" style="font-weight:bold;">no tasks enabled or visible...</div>')}else html+='<div class="sensorset clickables"><div class="sensors" style="font-weight:bold;">no tasks configured...</div>';html+=html1,document.getElementById("sysInfo").innerHTML=e,document.getElementById("sensorList").innerHTML=html,document.getElementById("sliderList").innerHTML=html2,document.getElementById("bigNumber").innerHTML=html3,firstRun&&(document.cookie.includes("Snd=")||mC("Snd"),window.navigator.userAgent.match(/iPhone/i)&&(document.body.style.height="101vh"),fJ=setInterval(fetchJson,2e3),getNodes(),longPressS(),longPressN(),addEonce(),unitNr1=myJson.System["Unit Number"],initIP=0,"(IP unset)"==myJson.WiFi["IP Address"]?initIP="192.168.4.1":initIP=myJson.WiFi["IP Address"],nP2="http://"+initIP+"/devices",nP="http://"+initIP+"/tools",firstRun=0),styleU=unitNr===unitNr1?"⊚︎":"",hasParams||(document.getElementById("unitId").innerHTML=styleU+unit+'<span class="numberUnit"> ('+myJson.WiFi.RSSI+")</span>",document.getElementById("unitT").innerHTML=styleU+unit),paramS(),changeCss(),resizeText(),longPressB()}}async function getRemoteGPIOState(e,t,n,s,i){return await getUrl(`control?cmd=SendTo,${t},"SendTo,${s},'taskvalueset,${e},${i},%5BPlugin%23GPIO%23Pinstate%23${n}%5D'"`)}function changeNN(e){return e.replace(/_/g," ").replace(/\./g,"<br>")}function changeCss(){let e,t,n,s="auto ",i=null;document.querySelectorAll("input[type=range]").length?document.getElementById("allList").classList.remove("allExtra"):document.getElementById("allList").classList.add("allExtra");var l=document.querySelectorAll(".bigNum"),a=document.getElementById("sensorList"),o=a.getElementsByClassName("sensorset").length;if(n=0,l.length||(n=o),4==bigLength||n>9)t=s+s+s+s,e=4;else if(3==bigLength||n>4)t=s+s+s,e=3;else if(2==bigLength||n>1)t=s+s,e=2;else if(1==bigLength||n<2){if(t=s,i="important",l.length)for(let e=0;e<l.length;++e)l[e].classList.add("bigNumOne");e=1}else t=s+s,e=2;if(widthLimit=150*e+e*(window.innerHeight/100),window.innerWidth<widthLimit||document.cookie.includes("Two=1")){if(l.length)for(let e=0;e<l.length;++e)l[e].style.cssText="display: grid; grid-template-columns: auto auto;";1==bigLength||0==bigLength&&1==o?(e=1,t=s,i="important"):(e=2,t=s+s)}if(a.style.setProperty("grid-template-columns",t,i),o%e!=0&&1!=e){calcTile=e-(o-e*Math.floor(o/e));for(let e=1;e<=calcTile;e++)html+='<div class="sensorset"></div>'}document.getElementById("sensorList").innerHTML=html,bigLength=0}function paramS(){document.querySelectorAll(".slTS").forEach((e=>{e.addEventListener("input",updateSlTS),e.addEventListener("change",sliderChTS),e.addEventListener("pointerup",(e=>{iIV=setTimeout(blurInput,1e3)}))})),document.querySelectorAll(".sL").forEach((e=>{e.addEventListener("input",updateSlider),e.addEventListener("change",sliderChange),e.addEventListener("pointerup",(e=>{iIV=setTimeout(blurInput,1e3)}))})),neoS=document.querySelectorAll(".npS"),neoS.forEach((e=>{hVal=document.getElementById(e.id.split("?")[0]+"?H")?.value,vVal=document.getElementById(e.id.split("?")[0]+"?V")?.value||20,vVal<20&&(vVal=20),e.style.backgroundImage="linear-gradient(to right, hsl(0,0%,"+vVal+"%),hsl("+hVal+",100%,50%))"}))}function addEonce(){document.addEventListener("touchstart",(e=>{msTs=Date.now(),tsX=e.changedTouches[0].screenX,tsY=e.changedTouches[0].screenY})),document.addEventListener("touchend",(e=>{msTe=Date.now(),teX=e.changedTouches[0].screenX,teY=e.changedTouches[0].screenY,checkDirection()})),document.addEventListener("mousemove",(e=>{manNav||navOpen||e.clientX<10&&-280===document.getElementById("mySidenav").offsetLeft&&openNav()})),document.getElementById("mySidenav").addEventListener("mouseleave",(e=>{manNav||closeNav()}))}function checkDirection(){touchtime=msTe-msTs,touchDistX=teX-tsX,touchDistY=teY-tsY,teX<tsX&&navOpen&&Math.abs(touchDistX)>40&&Math.abs(touchDistY)<30&&touchtime<250&&closeNav(),teX>tsX&&!navOpen&&Math.abs(touchDistX)>40&&Math.abs(touchDistY)<30&&touchtime<250&&openNav()}function updateSlTS(e){isittime=0,slider=e.target,"L"==slider.id.slice(-1)?nuM=1:nuM=2;const t=slider.parentElement.closest(".slTimeSetWrap").firstElementChild.querySelector(".hAmount"+nuM),n=slider.parentElement.closest(".slTimeSetWrap").firstElementChild.querySelector(".mAmount"+nuM);var s=Math.floor(slider.value/60);const i=(slider.value%60).toString().padStart(2,"0");t.textContent=s,n.textContent=i}function updateSlider(e){if(NrofSlides++,isittime=0,slider=e.target,currVal=slider.attributes.value.nodeValue,slKind=slider.id.split("?")[4],!slider.className.includes("noVal")){const t=slider.closest("div.sensorset").querySelector(".sliderAmount");slKind||(slKind=""),"H"==slKind&&(slKind="%"),slA=Number(e.target.value).toFixed(void 0!==e.target.step.split(".")[1]&&e.target.step.split(".")[1].length)+slKind,t.textContent=slA}"npSl"==slider.classList[1]&&(sliderId=slider.id.split("?")[0],hVal=document.getElementById(sliderId+"?H")?.value,sVal=document.getElementById(sliderId+"?S")?.value,vVal=document.getElementById(sliderId+"?V")?.value,gesVal=[hVal,sVal,vVal],vVal=vVal??0,sVal&&hVal&&(vVal<20&&(vVal=20),sGrad=document.getElementById(sliderId+"?S"),sGrad.style.backgroundImage="linear-gradient(to right, hsl(0,0%,"+vVal+"%),hsl("+hVal+",100%,50%))"))}function sliderChTS(e){playSound(4e3),slider=e.target;const t=slider.parentNode.parentNode;if(slider.id==t.id+"L")var n=document.getElementById(t.id+"R");else n=document.getElementById(t.id+"L");unitNr===unitNr1?(slider.id==t.id+"L"?getUrl("control?cmd=taskvalueset,"+t.classList[2]+","+e.target.value+"."+n.value.toString().padStart(4,"0")):getUrl("control?cmd=taskvalueset,"+t.classList[2]+","+n.value+"."+e.target.value.toString().padStart(4,"0")),getUrl("control?cmd=event,"+t.classList[1]+"Event="+t.classList[2].split(",")[1])):(slider.id==t.id+"L"?getUrl("control?cmd=SendTo,"+nNr+',"taskvalueset,'+t.classList[2]+","+e.target.value+"."+n.value.toString().padStart(4,"0")+'"'):getUrl("control?cmd=SendTo,"+nNr+',"taskvalueset,'+t.classList[2]+","+n.value+"."+e.target.value.toString().padStart(4,"0")+'"'),getUrl("control?cmd=SendTo,"+nNr+',"event,'+t.classList[1]+"Event="+t.classList[2].split(",")[1]+'"'))}function sliderChange(e){playSound(4e3),slider=e.target,maxVal=parseFloat(slider.attributes.max.nodeValue),minVal=parseFloat(slider.attributes.min.nodeValue),OnOff="",slA=e.target.value,1==NrofSlides&&"swSlider"==slider.classList[3]&&(df=1*(maxVal-minVal)/10,slA>maxVal-df&&currVal!==maxVal&&(slA=maxVal,OnOff=",1",isittime=1,setTimeout(fetchJson,500)),slA<minVal+df&&currVal!==minVal&&(slA=minVal,OnOff=",0",isittime=1,setTimeout(fetchJson,500))),(slider.id.match(/\?/g)||[]).length>=3||"npSl"==slider.classList[1]?sliderId=slider.id.split("?")[0]:sliderId=slider.id,gesVal&&(gesVal=gesVal.filter((e=>e))),unitNr===unitNr1?(getUrl("control?cmd=taskvalueset,"+slider.classList[2]+","+slA),"npSl"!=slider.classList[1]?getUrl("control?cmd=event,"+sliderId+"Event="+slA+OnOff):getUrl("control?cmd=event,"+sliderId+"Event="+gesVal)):(getUrl("control?cmd=SendTo,"+nNr+',"taskvalueset,'+slider.classList[2]+","+slA+'"'),"npSl"!=slider.classList[1]?getUrl("control?cmd=SendTo,"+nNr+',"event,'+sliderId+"Event="+slA+OnOff+'"'):getUrl("control?cmd=SendTo,"+nNr+',"event,'+sliderId+"Event="+gesVal+'"')),NrofSlides=0}function buttonClick(e,t){e.split("&")[1]?(utton2=e.split("&")[0],nNr2=e.split("&")[1].split(">")[0],e.split(">")[1]&&!e.split(">")[1].endsWith("L")?getUrl("control?cmd=SendTo,"+nNr2+',"GPIOToggle,'+e.split(">")[1]+'"'):getUrl("control?cmd=SendTo,"+nNr2+',"event,'+utton2+'Event"')):e.split("|")[1]?(gpioNr=e.split("|")[1],uN=e.split("|")[0],gS=1==t?0:1,unitNr===unitNr1?(getUrl("control?cmd=gpio,"+gpioNr+","+gS),getUrl("control?cmd=event,"+uN+"Event")):(getUrl("control?cmd=SendTo,"+nNr+',"gpio,'+gpioNr+","+gS+'"'),getUrl("control?cmd=SendTo,"+nNr+',"event,'+uN+'Event"'))):getUrl(unitNr===unitNr1?"control?cmd=event,"+e+"Event":"control?cmd=SendTo,"+nNr+',"event,'+e+'Event"'),setTimeout(fetchJson,400)}function pushClick(e,t){0==t?(isittime=1,playSound(1e3)):isittime=0,e.split("?")[1]?(gpioNr=e.split("?")[1],getUrl(unitNr===unitNr1?"control?cmd=gpio,"+gpioNr+","+t:"control?cmd=SendTo,"+nNr+',"gpio,'+gpioNr+","+t+'"')):e.split("&")[1]?(utton2=e.split("&")[0],nNr2=e.split("&")[1],getUrl("control?cmd=SendTo,"+nNr2+',"event,'+utton2+"Event="+t+'"')):getUrl(unitNr===unitNr1?"control?cmd=event,"+e+"Event="+t:"control?cmd=SendTo,"+nNr+',"event,'+e+"Event="+t+'"')}function getInput(e,t){"click"===event.type&&(isittime=0,iIV=setTimeout(blurInput,8e3),e.addEventListener("blur",(e=>{clearTimeout(iIV),isittime=1,setTimeout(fetchJson,400)}))),e.value.length>12&&(e.value=e.value.slice(0,12)),"Enter"===event.key||"click"===event.type&&!t?(isittime=1,e.value?(playSound(4e3),getUrl(unitNr===unitNr1?"control?cmd=taskvalueset,"+e.classList[1]+","+e.value:"control?cmd=SendTo,"+nNr+',"taskvalueset,'+e.classList[1]+","+e.value+'"'),buttonClick(e.id)):setTimeout(fetchJson,400),clearTimeout(iIV)):"Escape"===event.key?document.getElementById(e.id).value="":(clearTimeout(iIV),iIV=setTimeout(blurInput,5e3))}function blurInput(){isittime=1}function openNav(e){navOpen=1,e&&(manNav=1),nIV&&clearInterval(nIV),nIV=setInterval(getNodes,1e4),-280===document.getElementById("mySidenav").offsetLeft?(getNodes(),document.getElementById("mySidenav").style.left="0"):closeNav()}function closeNav(){manNav=0,navOpen=0,clearInterval(nIV),document.getElementById("mySidenav").style.left="-280px"}function openSys(){0===document.getElementById("sysInfo").offsetHeight?(document.getElementById("menueWrap1").style.flexShrink="0",document.getElementById("sysInfo").style.height="180px"):(document.getElementById("sysInfo").style.height="0",document.getElementById("menueWrap1").style.flexShrink="999")}async function getNodes(e,t,n){n||(response=await getUrl("json"),myJson=await response.json());let s="";nInf=myJson.nodes;let i=-1;if(myJson.nodes.forEach((n=>{i++,n.nr==myParam&&hasParams&&(nodeChange(i),hasParams=0),n.nr===unitNr1?n.nr===unitNr?styleN="⊙︎":styleN="⊚︎":n.nr===unitNr?styleN="·︎":styleN="",s+='<div class="menueItem"><div class="serverUnit" style="text-align: center;">'+styleN+'</div><div id="'+n.name+'" class="nc" onclick="sendUpdate(); nodeChange('+i+');iFr();">'+n.name+'<span class="numberUnit">'+n.nr+"</span></div></div>",(e||t)&&(t?n.nr===unitNr1?fetch("control?cmd=event,"+e+"Long"):fetch("/control?cmd=SendTo,"+n.nr+',"event,'+e+'Long"'):isittime&&(n.nr===unitNr1?fetch("control?cmd=event,"+e+"Event"):fetch("/control?cmd=SendTo,"+n.nr+',"event,'+e+'Event"')))})),i=0,document.getElementById("menueList").innerHTML=s,hasParams){let e='<div class="sensorset clickables"><div class="sensors" style="font-weight:bold;">can not find node # '+myParam+"...</div></div>";document.getElementById("sensorList").innerHTML=e,hasParams=0,setTimeout(fetchJson,3e3)}else nIV||setTimeout(fetchJson,1e3)}function sendUpdate(){setTimeout(getNodes.bind(null,"","",1),600)}function nodeChange(e){nInf=nInf[e],nInf&&(nNr=nInf.nr,nN=nInf.name,nP=`http://${nInf.ip}/tools`,nP2=`http://${nInf.ip}/devices`,jsonPath=`http://${nInf.ip}/json`,window.history.replaceState(null,null,"?unit="+nNr),fetchJson(1)),window.innerWidth<450&&0===document.getElementById("sysInfo").offsetHeight&&closeNav()}function resizeText(){const e=({clientWidth:e,clientHeight:t,scrollWidth:n,scrollHeight:s})=>n>e||s>t;(({element:t,elements:n,minSize:s=10,maxSize:i=115,step:l=1,unit:a="pt"})=>{(n||[t]).forEach((t=>{let n=s,o=!1;const d=t.parentNode;for(;!o&&n<i;)t.style.fontSize=`${n}${a}`,o=e(d),o||(n+=l);t.style.fontSize=`${n-l-1}${a}`,t.style.lineHeight="0.75"}))})({elements:document.querySelectorAll(".valueBig"),step:1})}function launchFs(e){e.requestFullscreen()}function splitOn(e){0===document.getElementById("framie").offsetWidth?(iO=1,iFr(e),document.getElementById("framie").style.width="100%"):(iO=0,document.getElementById("framie").style.width=0,document.getElementById("framie").innerHTML=""),setTimeout(fetchJson,100)}function iFr(e){iO&&(document.getElementById("framie").innerHTML=e?'<iframe src="'+nP2+"?index="+e+'&page=1"></iframe>':'<iframe src="'+nP2+'"></iframe>',closeNav())}function topF(){document.body.scrollTop=0,document.documentElement.scrollTop=0}function longPressN(){document.getElementById("mOpen").addEventListener("long-press",(function(e){window.location.href=nP}))}function longPressS(){document.body.addEventListener("long-press",(function(e){e.preventDefault(),"closeBtn"===e.target.id?mC("Snd"):"nOpen"===e.target.id?mC("Sort"):"openSys"===e.target.id?mC("Two"):"unitId"===e.target.id&&mC("Col")}))}function mC(e){const t=1==(document.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`)?.pop()||"");playSound(t?500:900),document.cookie=`${e}=${t?0:1}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/; SameSite=Lax;`}function longPressB(){let e=!1;document.querySelectorAll(".clickables").forEach((t=>{t.addEventListener("long-press",(function(n){n.preventDefault();const s=t.querySelector(".sensors"),i=t.querySelector(".nodes");i?getNodes(i.textContent,"1"):s.id.split("&")[1]?(utton2=s.id.split("&")[0],nNr2=s.id.split("&")[1].split(">")[0],s.id.split(">")[1].endsWith("L")?getUrl("control?cmd=SendTo,"+nNr2+',"GPIOToggle,'+s.id.split(">")[1].split("L")[0]+'"'):getUrl("control?cmd=SendTo,"+nNr2+',"event,'+utton2+'Long"'),setTimeout(fetchJson,400)):(unitNr!==unitNr1||e?(getUrl("control?cmd=SendTo,"+nNr+',"event,'+s.textContent+'Long"'),e=!0):(getUrl("control?cmd=event,"+s.textContent+"Long"),e=!0),setTimeout(fetchJson,400)),playSound(1e3),isittime=0,iIV=setTimeout(blurInput,600)}))}))}function minutesToDhm(e){const t=Math.floor(e/1440),n=Math.floor(e%1440/60),s=e%60,i=(e,t)=>e>0?`${e} ${t}${1===e?"":"s"} `:"";return i(t,"day")+i(n,"hour")+i(s,"minute")}function playSound(e){(document.cookie.includes("Snd=1")||e<1e3)&&(isittime||3e3!==e)&&(c=new AudioContext,o=c.createOscillator(),g=c.createGain(),frequency=e,o.frequency.value=frequency,o.type="sawtooth",o.connect(g),g.connect(c.destination),g.gain.setValueAtTime(.05,0),o.start(0),g.gain.exponentialRampToValueAtTime(1e-5,c.currentTime+.01),o.stop(c.currentTime+.01))}async function getUrl(e){let t=new AbortController;setTimeout((()=>t.abort()),2e3);try{response=await fetch(e,{signal:t.signal})}catch{}return response}document.addEventListener("visibilitychange",(()=>{"visible"===document.visibilityState?(clearTimeout(fJ),fetchJson(),fJ=setInterval(fetchJson,2e3)):clearTimeout(fJ)})),function(e,t){"use strict";var n=null,s="PointerEvent"in e||e.navigator&&"msPointerEnabled"in e.navigator,i="ontouchstart"in e||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0,l=0,a=0;function o(e){var n;d(),e=void 0!==(n=e).changedTouches?n.changedTouches[0]:n,this.dispatchEvent(new CustomEvent("long-press",{bubbles:!0,cancelable:!0,detail:{clientX:e.clientX,clientY:e.clientY,offsetX:e.offsetX,offsetY:e.offsetY,pageX:e.pageX,pageY:e.pageY},clientX:e.clientX,clientY:e.clientY,offsetX:e.offsetX,offsetY:e.offsetY,pageX:e.pageX,pageY:e.pageY,screenX:e.screenX,screenY:e.screenY}))||t.addEventListener("click",(function e(n){var s;t.removeEventListener("click",e,!0),(s=n).stopImmediatePropagation(),s.preventDefault(),s.stopPropagation()}),!0)}function d(t){var s;(s=n)&&(e.cancelAnimationFrame?e.cancelAnimationFrame(s.value):e.webkitCancelAnimationFrame?e.webkitCancelAnimationFrame(s.value):e.webkitCancelRequestAnimationFrame?e.webkitCancelRequestAnimationFrame(s.value):e.mozCancelRequestAnimationFrame?e.mozCancelRequestAnimationFrame(s.value):e.oCancelRequestAnimationFrame?e.oCancelRequestAnimationFrame(s.value):e.msCancelRequestAnimationFrame?e.msCancelRequestAnimationFrame(s.value):clearTimeout(s)),n=null}"function"!=typeof e.CustomEvent&&(e.CustomEvent=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var s=t.createEvent("CustomEvent");return s.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),s},e.CustomEvent.prototype=e.Event.prototype),e.requestAnimFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t){e.setTimeout(t,1e3/60)},t.addEventListener(s?"pointerup":i?"touchend":"mouseup",d,!0),t.addEventListener(s?"pointerleave":i?"touchleave":"mouseleave",d,!0),t.addEventListener(s?"pointermove":i?"touchmove":"mousemove",(function(e){var t=Math.abs(l-e.clientX),n=Math.abs(a-e.clientY);(t>=10||n>=10)&&d()}),!0),t.addEventListener("wheel",d,!0),t.addEventListener("scroll",d,!0),t.addEventListener(s?"pointerdown":i?"touchstart":"mousedown",(function(t){var s,i;l=t.clientX,a=t.clientY,d(s=t),i=s.target,n=function(t,n){if(!(e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame&&e.mozCancelRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame))return e.setTimeout(t,n);var s=(new Date).getTime(),i={},l=function(){(new Date).getTime()-s>=n?t.call():i.value=requestAnimFrame(l)};return i.value=requestAnimFrame(l),i}(o.bind(i,s),600)}),!0)}(window,document);
</script>
<div id="container">
<div id="framie"></div>
<div id="mySidenav" class="sidenav">
<div id="sysInfo">no info found...</div>
<div class="menueWrap" id="menueWrap1"></div>
<div id="menueList"></div>
<div class="menueWrap" id="menueWrap2"></div>
<div class="sideNbtn" id="openSys" onclick="openSys()">
<div id="dateV">20241118/1</div>ℹ︎
</div>
<div class="sideNbtn" id="closeBtn" onclick="closeNav()">×︎</div>
</div>
<div id="unitId" style="cursor: pointer;" onclick="launchFs(document.documentElement)"> </div>
<div id="allList">
<div id="bigNumber"></div>
<div id="sliderList"></div>
<div id="sensorList"></div>
</div>
<div id="opener">
<div class="open">
<span id="nOpen" style="font-size:30px;cursor:pointer;background:none;"
onclick="openNav(event)">☰︎</span>
<span id="mOpen" style="font-size:30px;cursor:pointer;background:none;"
onclick="splitOn(); topF()">⌂︎</span>
</div>
</div>
</div>
</body>
</html>