diff options
author | stuebinm | 2022-01-18 09:43:24 +0100 |
---|---|---|
committer | stuebinm | 2022-01-20 13:19:44 +0100 |
commit | 0bcabe1c4b1dd74af233674dfa6c6ec3011ce2c0 (patch) | |
tree | 5c58943f99245ff7f745f50b46c34ae288c3e503 /assets/ilztal.live | |
parent | db83a406bc6e63289e47ff5d2228c08430832655 (diff) |
restructuring directories
Diffstat (limited to 'assets/ilztal.live')
-rw-r--r-- | assets/ilztal.live/geolocation/index.html | 179 | ||||
-rw-r--r-- | assets/ilztal.live/geolocation/mapview.html | 94 | ||||
-rw-r--r-- | assets/ilztal.live/geolocation/view.html | 77 |
3 files changed, 0 insertions, 350 deletions
diff --git a/assets/ilztal.live/geolocation/index.html b/assets/ilztal.live/geolocation/index.html deleted file mode 100644 index 052a9fa..0000000 --- a/assets/ilztal.live/geolocation/index.html +++ /dev/null @@ -1,179 +0,0 @@ -<!doctype html> -<html class="no-js" lang=""> - <head> - <meta charset="utf-8"> - <meta http-equiv="x-ua-compatible" content="ie=edge"> - <title>geolocation tracker test</title> - <meta name="description" content=""> - <meta name="viewport" content="width=device-width, initial-scale=1"> - - <link rel="apple-touch-icon" href="/apple-touch-icon.png"> - <!-- Place favicon.ico in the root directory --> - - </head> - <body> - <!--[if lt IE 8]> - <p class="browserupgrade"> - You are using an <strong>outdated</strong> browser. Please - <a href="http://browsehappy.com/">upgrade your browser</a> to improve - your experience. - </p> - <![endif]--> - - <button id = "initialise">Start Tracking</button><br/> - <p id = "status"></p> - <a id = "map-link" target="_blank"></a> - - <p> - Latitude: <span id="latitude"></span><br> - Longitude: <span id="longitude"></span><br> - Altitude: <span id="altitude"></span><br> - Accuracy: <span id="accuracy"></span><br> - Speed: <span id="speed"></span><br> - Angle: <span id="angle"></span><br> - </p> - - <input id="note" placeholder="enter note here"> - <button id="submit-note">Submit</button> - - <p> - <button id="download">Download Log</button> - <button id="reset">Reset History</button> - </p> - <p id="error"></p> - </body> - <script> - - /* TODO: - / - how to push things to rocket? (probably just http post for now …) - / - how to rate-limit new positions (either count dates, or option in geolocation?) - / - how to get closest point on path? - */ - - let lat = document.getElementById("latitude"); - let long = document.getElementById("longitude"); - let speed = document.getElementById("speed"); - let acc = document.getElementById("accuracy"); - let angle = document.getElementById("angle"); - let alt = document.getElementById("altitude"); - - let status = document.querySelector('#status'); - let mapLink = document.querySelector('#map-link'); - - function resetDisplay () { - lat.innerText = "-"; - long.innerText = "-"; - speed.innerText = "-"; - acc.innerText = "-"; - angle.innerText = "-"; - alt.innerText = "-"; - } - - function init() { - - mapLink.href = ''; - mapLink.textContent = ''; - - resetDisplay(); - - if(!navigator.geolocation) { - status.textContent = 'Error: Geolocation API is not supported!'; - } else { - status.textContent = 'Initialising …'; - trackPosition(); - } - - } - var errcount = 1; - var geolog = []; - - function trackPosition() { - function success(position) { - const latitude = position.coords.latitude; - const longitude = position.coords.longitude; - errcount = 0; - - status.textContent = ''; - mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; - mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; - - lat.innerText = position.coords.latitude; - long.innerText = position.coords.longitude; - alt.innerText = position.coords.altitude; - acc.innerText = position.coords.accuracy; - speed.innerText = position.coords.speed; - angle.innerText = position.coords.heading; - - document.getElementById("error").innerText = JSON.stringify(position.coords); - - let datapoint = { - timestamp: new Date().toISOString(), - data: { - latitude: position.coords.latitude, - longitude: position.coords.longitude, - altitude: position.coords.altitude, - accuracy: position.coords.accuracy, - altitudeAccuracy: position.coords.altitudeAccuracy, - heading: position.coords.heading, - speed: position.coords.speed - } - }; - - geolog.push(datapoint); - fetch( - "https://ilztal.live/geoloc/push", - { method: "POST", body: JSON.stringify(datapoint)} - ).then(() => console.log("pushed position")) - .catch(e => console.log("some error: ", e)) - } - - function error() { - status.textContent = "("+errcount+") Error: Getting Location failed, retrying …"; - resetDisplay(); - errcount += 1; - setTimeout(trackPosition, 3000); - } - - navigator.geolocation.watchPosition(success, error); - } - - function downloadHistory () { - let json = JSON.stringify(geolog); - let a = document.createElement("a"); - console.log("attempting download!", geolog); - a.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(json)); - a.setAttribute("download","history.json"); - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - } - - document.getElementById("initialise").addEventListener('click', init); - - document.getElementById("submit-note").onclick = (a) => { - let input = document.getElementById("note"); - let text = input.value; - console.log("submitting note:", text); - geolog.push(text); - fetch("https://ilztal.live/geoloc/push", - {method:"POST", body: JSON.stringify({ - //ty: "note", - timestamp: new Date().toISOString(), - data: text - })} - ).then(() => input.value = "") - .catch(e => { - document.getElementById("error").innerText = "error:" + e; - console.log("error occurred"); - }); - }; - - document.getElementById("download").onclick = (a) => downloadHistory(); - - document.getElementById("reset").onclick = (a) => geolog = []; - - </script> - - - </body> -</html> diff --git a/assets/ilztal.live/geolocation/mapview.html b/assets/ilztal.live/geolocation/mapview.html deleted file mode 100644 index bb62f62..0000000 --- a/assets/ilztal.live/geolocation/mapview.html +++ /dev/null @@ -1,94 +0,0 @@ -<!doctype html> -<html class="no-js" lang=""> - <head> - <meta charset="utf-8"> - <meta http-equiv="x-ua-compatible" content="ie=edge"> - <title>Position view</title> - <meta name="description" content=""> - <meta name="viewport" content="width=device-width, initial-scale=1"> - - <link rel="apple-touch-icon" href="/apple-touch-icon.png"> - <!-- Place favicon.ico in the root directory --> - - <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" - integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" - crossorigin=""/> - <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" - integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" - crossorigin=""></script> - - </head> - <body> - <!--[if lt IE 8]> - <p class="browserupgrade"> - You are using an <strong>outdated</strong> browser. Please - <a href="http://browsehappy.com/">upgrade your browser</a> to improve - your experience. - </p> - <![endif]--> - - <div align="justify"> - <div id="MapID2" style="height:100vh; margin-left: auto; margin-right:auto; width:80%"></div> - </div> - <script> - var mymap = L.map('MapID2'); - L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA', { - attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', - maxZoom: 18, - id: 'mapbox/streets-v11', - accessToken: 'pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA' - }).addTo(mymap); - var marker = L.marker([0,0]).addTo(mymap); - marker.bindPopup("Hello Train!"); - - mymap.setView([0,0], 16); - function updateMap(pos) { - if (pos === null) { - console.log("no data yet?"); - return; - } - mymap.setView(pos); - mymap.scrollWheelZoom.disable(); - marker.setLatLng(pos); - } - updateMap([48.13716,11.57540]); - - function fetchUpdate () { - fetch("https://ilztal.live/geoloc/history") - .then((data) => { - let text = data.text().then(text => { - let hist = JSON.parse(text); - console.log(hist) - - let latlngs = hist.filter(e => e.data.latitude !== undefined).map((e) => [e.data.latitude, e.data.longitude]); - - console.log(latlngs); - let polyline = L.polyline(latlngs, {color: "red"}).addTo(mymap); - - mymap.fitBounds(polyline.getBounds()) - - for (idx in hist) { - if (hist[idx].data.latitude === undefined) { - console.log(hist[idx].data, idx, 1+parseInt(idx)) - let nidx = 1+parseInt(idx); - if (hist[nidx] !== undefined && hist[nidx].data.latitude !== undefined) { - let marker = L.marker([hist[nidx].data.latitude, hist[nidx].data.longitude]) - .addTo(mymap); - marker.bindPopup(hist[idx].data); - } - } - } - }); - - }) - .catch((e) => { - console.log("some error!", e); - setTimeout(fetchUpdate, 3000); - }) - } - - fetchUpdate() - </script> - - </body> -</html> diff --git a/assets/ilztal.live/geolocation/view.html b/assets/ilztal.live/geolocation/view.html deleted file mode 100644 index 58b4c76..0000000 --- a/assets/ilztal.live/geolocation/view.html +++ /dev/null @@ -1,77 +0,0 @@ -<!doctype html> -<html class="no-js" lang=""> - <head> - <meta charset="utf-8"> - <meta http-equiv="x-ua-compatible" content="ie=edge"> - <title>Position view</title> - <meta name="description" content=""> - <meta name="viewport" content="width=device-width, initial-scale=1"> - - <link rel="apple-touch-icon" href="/apple-touch-icon.png"> - <!-- Place favicon.ico in the root directory --> - - <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" - integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" - crossorigin=""/> - <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" - integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" - crossorigin=""></script> - - </head> - <body> - <!--[if lt IE 8]> - <p class="browserupgrade"> - You are using an <strong>outdated</strong> browser. Please - <a href="http://browsehappy.com/">upgrade your browser</a> to improve - your experience. - </p> - <![endif]--> - - <div align="justify"> - <div id="MapID2" style="height:60vh; margin-left: auto; margin-right:auto; width:80%"></div> - </div> - <script> - var mymap = L.map('MapID2'); - L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA', { - attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', - maxZoom: 18, - id: 'mapbox/streets-v11', - accessToken: 'pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA' - }).addTo(mymap); - var marker = L.marker([0,0]).addTo(mymap); - marker.bindPopup("Hello Train!"); - - mymap.setView([0,0], 16); - function updateMap(pos) { - if (pos === null) { - console.log("no data yet?"); - return; - } - mymap.setView(pos); - mymap.scrollWheelZoom.disable(); - marker.setLatLng(pos); - } - updateMap([48.13716,11.57540]); - - function fetchUpdate () { - fetch("https://ilztal.live/geoloc/current") - .then((data) => { - let text = data.text().then(text => { - let pos = JSON.parse(text); - console.log(pos) - updateMap(pos.pos); - }); - - setTimeout(fetchUpdate, 3000); - }) - .catch((e) => { - console.log("some error!", e); - setTimeout(fetchUpdate, 3000); - }) - } - - fetchUpdate() - </script> - - </body> -</html> |