From fc845dc936be706a6884575c55ccd62060350458 Mon Sep 17 00:00:00 2001
From: Christian Schwinne <dev.aircoookie@gmail.com>
Date: Sat, 26 Feb 2022 01:37:30 +0100
Subject: [PATCH] Add locate button for easy lat/lon auto-fill (#2559)

---
 wled00/data/settings_time.htm | 19 ++++++++++++++-
 wled00/html_settings.h        | 44 ++++++++++++++++++-----------------
 2 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/wled00/data/settings_time.htm b/wled00/data/settings_time.htm
index 8dbe40e3..1a986b3d 100644
--- a/wled00/data/settings_time.htm
+++ b/wled00/data/settings_time.htm
@@ -6,6 +6,7 @@
 	<title>Time Settings</title>
 	<script>
     var d=document;
+		var el=false;
 		var ms=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 		var cals = 'style="font-size:27px;margin-top:-6px;cursor:pointer"'; //hack as to not repeat CSS on all pages
 	function H()
@@ -130,6 +131,20 @@
 		td = tr.insertCell(3);
 		td.innerHTML = `<input name="MD${b}" type="number" class="s" min="0" max="250" value="${d}" required>`;
 	}
+	function getLoc() {
+		if (!el) {
+			window.addEventListener("message", (event) => {
+				if (event.origin !== "https://locate.wled.me") return;
+				if (event.data instanceof Object) {
+					d.Sf.LT.value = event.data.lat;
+					d.Sf.LN.value = event.data.lon;
+					updLoc();
+				}
+			}, false);
+			el = true;
+		}
+		window.open("https://locate.wled.me","_blank");
+	}
 	function updLoc(i) {
 		if (parseFloat(d.Sf.LT.value)<0) { d.Sf.LTR.value = "S"; d.Sf.LT.value = -1*parseFloat(d.Sf.LT.value); } else d.Sf.LTR.value = "N";
 		if (parseFloat(d.Sf.LN.value)<0) { d.Sf.LNR.value = "W"; d.Sf.LN.value = -1*parseFloat(d.Sf.LN.value); } else d.Sf.LNR.value = "E";
@@ -179,7 +194,9 @@
 		UTC offset: <input name="UO" type="number" min="-65500" max="65500" required> seconds (max. 18 hours)<br>
 		Current local time is <span class="times">unknown</span>.<br>
 		Latitude: <select name="LTR"><option value="N">N</option><option value="S">S</option></select><input name="LT" type="number" class="xl" min="0" max="66.6" step="0.01"><br>
-		Longitude: <select name="LNR"><option value="E">E</option><option value="W">W</option></select><input name="LN" type="number" class="xl" min="0" max="180" step="0.01">
+		Longitude: <select name="LNR"><option value="E">E</option><option value="W">W</option></select><input name="LN" type="number" class="xl" min="0" max="180" step="0.01"><br>
+		<button type="button" id="locbtn" onclick="getLoc()">Get location</button>
+		<div><i>(opens new tab, only works in browser)</i></div>
 		<div id="sun" class="times"></div>
 		<h3>Clock</h3>
 		Clock Overlay:
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index 60553220..a7f2e0f9 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -358,7 +358,7 @@ Keep at 115200 to use Improv. Some boards may not support high rates.</i><hr>
 // Autogenerated from wled00/data/settings_time.htm, do not edit!!
 const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=500">
 <meta charset="utf-8"><title>Time Settings</title><script>
-var d=document,ms=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],cals='style="font-size:27px;margin-top:-6px;cursor:pointer"';function H(){window.open("https://kno.wled.ge/features/settings/#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),updLoc(),Cs(),FC()}function gId(t){return d.getElementById(t)}function gN(t){return d.getElementsByName(t)[0]}function expand(t,e){var n=gId("WD"+e);n.style.display="none"!==n.style.display?"none":"",t.innerHTML="none"===n.style.display?"&#128467;":"&#x2715;"}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>En.</th><th>Hour</th><th>Minute</th><th>Preset</th><th></th></tr>";for(i=0;i<8;i++){for(t+=`<tr><td><input name="W${i}" id="W${i}" type="hidden"><input id="W${i}0" type="checkbox"></td>\n<td><input name="H${i}" class="xs" type="number" min="0" max="24"></td>\n<td><input name="N${i}" class="xs" type="number" min="0" max="59"></td>\n<td><input name="T${i}" class="s" type="number" min="0" max="250"></td>\n<td><div id="CB${i}" onclick="expand(this,${i})" ${cals}>&#128467;</div></td></tr>`,t+=`<tr><td colspan=5><div id="WD${i}" style="display:none;">Run on weekdays`,t+='<table style="width:100%%;"><tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr><tr>',j=1;j<8;j++)t+=`<td><input id="W${i}${j}" type="checkbox"></td>`;for(t+=`</tr></table>from\n<select name="M${i}">`,j=0;j<12;j++)t+=`<option value="${j+1}">${ms[j]}</option>`;for(t+=`</select><input name="D${i}" class="xs" type="number" min="1" max="31"></input> to\n<select name="P${i}">`,j=0;j<12;j++)t+=`<option value="${j+1}">${ms[j]}</option>`;t+=`</select><input name="E${i}" class="xs" type="number" min="1" max="31"></input>\n\t\t<hr></div></td></tr>`}for(t+=`<tr><td><input name="W8" id="W8" type="hidden"><input id="W80" type="checkbox"></td>\n<td>Sunrise<input name="H8" value="255" type="hidden"></td>\n<td><input name="N8" class="xs" type="number" min="-59" max="59"></td>\n<td><input name="T8" class="s" type="number" min="0" max="250"></td>\n<td><div id="CB8" onclick="expand(this,8)" ${cals}>&#128467;</div></td></tr><tr><td colspan=5>`,t+='<div id="WD8"style="display:none;"><table style="width:100%%;"><tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr><tr>',j=1;j<8;j++)t+=`<td><input id="W8${j}" type="checkbox"></td>`;for(t+="</tr></table><hr></div></td></tr>",t+=`<tr><td><input name="W9" id="W9" type="hidden"><input id="W90" type="checkbox"></td>\n<td>Sunset<input name="H9" value="255" type="hidden"></td>\n<td><input name="N9" class="xs" type="number" min="-59" max="59"></td>\n<td><input name="T9" class="s" type="number" min="0" max="250"></td>\n<td><div id="CB9" onclick="expand(this,9)" ${cals}>&#128467;</div></td></tr><tr><td colspan=5>`,t+='<div id="WD9" style="display:none;"><table style="width:100%%;"><tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr><tr>',j=1;j<8;j++)t+=`<td><input id="W9${j}" type="checkbox"></td>`;t+="</tr></table><hr></div></td></tr>",gId("TMT").innerHTML=t}function FC(){for(i=0;i<10;i++){let t=gId("W"+i).value;for(j=0;j<8;j++)gId("W"+i+j).checked=t>>j&1;(127!=(127&t)||i<8&&(1!=gN("M"+i).value||1!=gN("D"+i).value||12!=gN("P"+i).value||31!=gN("E"+i).value))&&expand(gId("CB"+i),i)}}function Wd(){for(a=[0,0,0,0,0,0,0,0,0,0],i=0;i<10;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}"S"===d.Sf.LTR.value&&(d.Sf.LT.value=-1*parseFloat(d.Sf.LT.value)),"W"===d.Sf.LNR.value&&(d.Sf.LN.value=-1*parseFloat(d.Sf.LN.value))}function addRow(t,e,n,i){var d=gId("macros"),a=d.rows.length,l=d.insertRow(a),s=String.fromCharCode((t<10?48:55)+t);document.createElement("td");l.insertCell(0).innerHTML=`Button ${t}:`,l.insertCell(1).innerHTML=`<input name="MP${s}" type="number" class="s" min="0" max="250" value="${e}" required>`,l.insertCell(2).innerHTML=`<input name="ML${s}" type="number" class="s" min="0" max="250" value="${n}" required>`,l.insertCell(3).innerHTML=`<input name="MD${s}" type="number" class="s" min="0" max="250" value="${i}" required>`}function updLoc(t){parseFloat(d.Sf.LT.value)<0?(d.Sf.LTR.value="S",d.Sf.LT.value=-1*parseFloat(d.Sf.LT.value)):d.Sf.LTR.value="N",parseFloat(d.Sf.LN.value)<0?(d.Sf.LNR.value="W",d.Sf.LN.value=-1*parseFloat(d.Sf.LN.value)):d.Sf.LNR.value="E"}function GetV() {
+var d=document,el=!1,ms=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],cals='style="font-size:27px;margin-top:-6px;cursor:pointer"';function H(){window.open("https://kno.wled.ge/features/settings/#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),updLoc(),Cs(),FC()}function gId(t){return d.getElementById(t)}function gN(t){return d.getElementsByName(t)[0]}function expand(t,e){var n=gId("WD"+e);n.style.display="none"!==n.style.display?"none":"",t.innerHTML="none"===n.style.display?"&#128467;":"&#x2715;"}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>En.</th><th>Hour</th><th>Minute</th><th>Preset</th><th></th></tr>";for(i=0;i<8;i++){for(t+=`<tr><td><input name="W${i}" id="W${i}" type="hidden"><input id="W${i}0" type="checkbox"></td>\n<td><input name="H${i}" class="xs" type="number" min="0" max="24"></td>\n<td><input name="N${i}" class="xs" type="number" min="0" max="59"></td>\n<td><input name="T${i}" class="s" type="number" min="0" max="250"></td>\n<td><div id="CB${i}" onclick="expand(this,${i})" ${cals}>&#128467;</div></td></tr>`,t+=`<tr><td colspan=5><div id="WD${i}" style="display:none;">Run on weekdays`,t+='<table style="width:100%%;"><tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr><tr>',j=1;j<8;j++)t+=`<td><input id="W${i}${j}" type="checkbox"></td>`;for(t+=`</tr></table>from\n<select name="M${i}">`,j=0;j<12;j++)t+=`<option value="${j+1}">${ms[j]}</option>`;for(t+=`</select><input name="D${i}" class="xs" type="number" min="1" max="31"></input> to\n<select name="P${i}">`,j=0;j<12;j++)t+=`<option value="${j+1}">${ms[j]}</option>`;t+=`</select><input name="E${i}" class="xs" type="number" min="1" max="31"></input>\n\t\t<hr></div></td></tr>`}for(t+=`<tr><td><input name="W8" id="W8" type="hidden"><input id="W80" type="checkbox"></td>\n<td>Sunrise<input name="H8" value="255" type="hidden"></td>\n<td><input name="N8" class="xs" type="number" min="-59" max="59"></td>\n<td><input name="T8" class="s" type="number" min="0" max="250"></td>\n<td><div id="CB8" onclick="expand(this,8)" ${cals}>&#128467;</div></td></tr><tr><td colspan=5>`,t+='<div id="WD8"style="display:none;"><table style="width:100%%;"><tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr><tr>',j=1;j<8;j++)t+=`<td><input id="W8${j}" type="checkbox"></td>`;for(t+="</tr></table><hr></div></td></tr>",t+=`<tr><td><input name="W9" id="W9" type="hidden"><input id="W90" type="checkbox"></td>\n<td>Sunset<input name="H9" value="255" type="hidden"></td>\n<td><input name="N9" class="xs" type="number" min="-59" max="59"></td>\n<td><input name="T9" class="s" type="number" min="0" max="250"></td>\n<td><div id="CB9" onclick="expand(this,9)" ${cals}>&#128467;</div></td></tr><tr><td colspan=5>`,t+='<div id="WD9" style="display:none;"><table style="width:100%%;"><tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr><tr>',j=1;j<8;j++)t+=`<td><input id="W9${j}" type="checkbox"></td>`;t+="</tr></table><hr></div></td></tr>",gId("TMT").innerHTML=t}function FC(){for(i=0;i<10;i++){let t=gId("W"+i).value;for(j=0;j<8;j++)gId("W"+i+j).checked=t>>j&1;(127!=(127&t)||i<8&&(1!=gN("M"+i).value||1!=gN("D"+i).value||12!=gN("P"+i).value||31!=gN("E"+i).value))&&expand(gId("CB"+i),i)}}function Wd(){for(a=[0,0,0,0,0,0,0,0,0,0],i=0;i<10;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}"S"===d.Sf.LTR.value&&(d.Sf.LT.value=-1*parseFloat(d.Sf.LT.value)),"W"===d.Sf.LNR.value&&(d.Sf.LN.value=-1*parseFloat(d.Sf.LN.value))}function addRow(t,e,n,i){var d=gId("macros"),a=d.rows.length,l=d.insertRow(a),s=String.fromCharCode((t<10?48:55)+t);document.createElement("td");l.insertCell(0).innerHTML=`Button ${t}:`,l.insertCell(1).innerHTML=`<input name="MP${s}" type="number" class="s" min="0" max="250" value="${e}" required>`,l.insertCell(2).innerHTML=`<input name="ML${s}" type="number" class="s" min="0" max="250" value="${n}" required>`,l.insertCell(3).innerHTML=`<input name="MD${s}" type="number" class="s" min="0" max="250" value="${i}" required>`}function getLoc(){el||(window.addEventListener("message",t=>{"https://locate.wled.me"===t.origin&&t.data instanceof Object&&(d.Sf.LT.value=t.data.lat,d.Sf.LN.value=t.data.lon,updLoc())},!1),el=!0),window.open("https://locate.wled.me","_blank")}function updLoc(t){parseFloat(d.Sf.LT.value)<0?(d.Sf.LTR.value="S",d.Sf.LT.value=-1*parseFloat(d.Sf.LT.value)):d.Sf.LTR.value="N",parseFloat(d.Sf.LN.value)<0?(d.Sf.LNR.value="W",d.Sf.LN.value=-1*parseFloat(d.Sf.LN.value)):d.Sf.LNR.value="E"}function GetV() {
 %CSS%%SCSS%</head><body onload="S()"><form
  id="form_s" name="Sf" method="post" onsubmit="Wd()"><div class="helpB"><button 
 type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
@@ -383,26 +383,28 @@ unknown</span>.<br>Latitude: <select name="LTR"><option value="N">N</option>
 <option value="S">S</option></select><input name="LT" type="number" class="xl" 
 min="0" max="66.6" step="0.01"><br>Longitude: <select name="LNR"><option 
 value="E">E</option><option value="W">W</option></select><input name="LN" 
-type="number" class="xl" min="0" max="180" step="0.01"><div id="sun" 
-class="times"></div><h3>Clock</h3>Clock Overlay: <select name="OL" 
-onchange="Cs()"><option value="0" id="cn" selected="selected">None</option>
-<option value="1" id="ca">Analog Clock</option><option value="2">
-Single Digit Clock</option><option value="3" id="cc">Cronixie Clock</option>
-</select><br><div id="coc">First LED: <input name="O1" type="number" min="0" 
-max="255" required> Last LED: <input name="O2" type="number" min="0" max="255" 
-required><br><div id="cac">12h LED: <input name="OM" type="number" min="0" 
-max="255" required><br>Show 5min marks: <input type="checkbox" name="O5"><br>
-</div>Seconds (as trail): <input type="checkbox" name="OS"><br></div><div 
-id="ccc">Cronixie Display: <input name="CX" maxlength="6"><br>
-Cronixie Backlight: <input type="checkbox" name="CB"><br></div>Countdown Mode: 
-<input type="checkbox" name="CE"><br>Countdown Goal:<br>Date:&nbsp;<nowrap>20
-<input name="CY" class="xs" type="number" min="0" max="99" required>-<input 
-name="CI" class="xs" type="number" min="1" max="12" required>-<input name="CD" 
-class="xs" type="number" min="1" max="31" required></nowrap><br>Time:<nowrap>
-<input name="CH" class="xs" type="number" min="0" max="23" required>:<input 
-name="CM" class="xs" type="number" min="0" max="59" required>:<input name="CS" 
-class="xs" type="number" min="0" max="59" required></nowrap><br><h3>
-Macro presets</h3><b>Macros have moved!</b><br><i>
+type="number" class="xl" min="0" max="180" step="0.01"><br><button 
+type="button" id="locbtn" onclick="getLoc()">Get location</button><div><i>
+(opens new tab, only works in browser)</i></div><div id="sun" class="times">
+</div><h3>Clock</h3>Clock Overlay: <select name="OL" onchange="Cs()"><option 
+value="0" id="cn" selected="selected">None</option><option value="1" id="ca">
+Analog Clock</option><option value="2">Single Digit Clock</option><option 
+value="3" id="cc">Cronixie Clock</option></select><br><div id="coc">First LED: 
+<input name="O1" type="number" min="0" max="255" required> Last LED: <input 
+name="O2" type="number" min="0" max="255" required><br><div id="cac">12h LED: 
+<input name="OM" type="number" min="0" max="255" required><br>Show 5min marks: 
+<input type="checkbox" name="O5"><br></div>Seconds (as trail): <input 
+type="checkbox" name="OS"><br></div><div id="ccc">Cronixie Display: <input 
+name="CX" maxlength="6"><br>Cronixie Backlight: <input type="checkbox" 
+name="CB"><br></div>Countdown Mode: <input type="checkbox" name="CE"><br>
+Countdown Goal:<br>Date:&nbsp;<nowrap>20<input name="CY" class="xs" 
+type="number" min="0" max="99" required>-<input name="CI" class="xs" 
+type="number" min="1" max="12" required>-<input name="CD" class="xs" 
+type="number" min="1" max="31" required></nowrap><br>Time:<nowrap><input 
+name="CH" class="xs" type="number" min="0" max="23" required>:<input name="CM" 
+class="xs" type="number" min="0" max="59" required>:<input name="CS" class="xs" 
+type="number" min="0" max="59" required></nowrap><br><h3>Macro presets</h3><b>
+Macros have moved!</b><br><i>
 Presets now also can be used as macros to save both JSON and HTTP API commands.
 <br>Just enter the preset ID below!</i> <i>
 Use 0 for the default action instead of a preset</i><br>Alexa On/Off Preset: 
