summaryrefslogtreecommitdiff
path: root/assets/ilztal.live/geolocation/index.html
diff options
context:
space:
mode:
authorstuebinm2022-01-09 07:35:37 +0100
committerstuebinm2022-01-09 07:37:51 +0100
commiteb97c76228dd9675ccfe4662ca551f07327ca9b4 (patch)
tree2655a9194d9e22c41f794fefa221ccb0dc15c06b /assets/ilztal.live/geolocation/index.html
parentb10c39a23ce7fafe6021d74022951b28a7404f87 (diff)
add ilztal.live sources into tree
Diffstat (limited to 'assets/ilztal.live/geolocation/index.html')
-rw-r--r--assets/ilztal.live/geolocation/index.html179
1 files changed, 179 insertions, 0 deletions
diff --git a/assets/ilztal.live/geolocation/index.html b/assets/ilztal.live/geolocation/index.html
new file mode 100644
index 0000000..052a9fa
--- /dev/null
+++ b/assets/ilztal.live/geolocation/index.html
@@ -0,0 +1,179 @@
+<!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>