init project cleaned

2023-01-05 11:21:32 +01:00
commit bc98268740
54 changed files with 3861 additions and 0 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>gps saver</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <button id="startbutton" style="padding:0.5em; font-size: 1em;">Start</button>
+  <button id="stopButton" style="padding:0.5em; font-size: 1em;">STOP</button>
+  <div id="maps" style="width: 100vw; height: 100vh">
+  </div>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
+  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+  <script>
+    let startbutton = document.querySelector("#startbutton");
+    let stopButton = document.querySelector("#stopButton")
+    let mapElem = document.querySelector("#maps");
+    let map = null;
+    let allCoordinate = JSON.parse(`[]`);
+    let previewCircle = null;
+    let previewMarker = null;
+    function onPositionReceive(coord)
+    {
+      console.log(coord)
+      allCoordinate.push({
+        timestamp: coord.timestamp,
+        accuracy: coord.coords.accuracy,
+        latitude: coord.coords.latitude,
+        longitude: coord.coords.longitude,
+        altitude: coord.coords.altitude,
+        altitudeAccuracy: coord.coords.altitudeAccuracy
+      });
+      let timeStamp = coord.timestamp;
+      coord = coord.coords;
+      let diffLongitude = coord.accuracy / 111320 / 2;
+      let diffLatitude = coord.accuracy / (400750000 * (Math.cos(coord.latitude) / 360)) / 2;
+      let yMin = coord.longitude - diffLatitude;
+      let yMax = coord.longitude + diffLatitude;
+      let xMin = coord.latitude - diffLongitude;
+      let xMax = coord.latitude + diffLongitude;
+      // let url = "https://www.openstreetmap.org/export/embed.html?bbox=" + (xMin) + "%2C" + (yMin) + "%2C" + (xMax) + "%2C" + (yMax);
+
+      // mapElem.innerHTML = "";
+      if(map == null) {
+        map = L.map(mapElem).fitBounds([[xMin, yMin], [xMax, yMax]]);
+      }
+      if(previewCircle) {
+        previewCircle.remove()
+      }
+      previewCircle = L.circle([coord.latitude, coord.longitude], {
+          color: 'red',
+          fillColor: '#f03',
+          fillOpacity: 0.1,
+          radius: coord.accuracy / 2
+      }).addTo(map);
+
+      if(previewMarker) {
+        previewMarker.remove()
+      }
+      previewMarker = L.marker([coord.latitude, coord.longitude]).addTo(map);
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+
+    }
+
+    let idgeoloc = null
+    startbutton.addEventListener("click", ()=>{
+      document.body.requestFullscreen();
+      maps.innerHTML = "";
+      navigator.geolocation.getCurrentPosition(onPositionReceive);
+      idgeoloc = navigator.geolocation.watchPosition(onPositionReceive);
+    });
+    stopButton.addEventListener("click", ()=>{
+      if(idgeoloc) {
+        navigator.geolocation.clearWatch(idgeoloc);
+        idgeoloc = null;
+      }
+      document.exitFullscreen()
+      let coordinatesString = JSON.stringify(allCoordinate);
+      // maps.innerHTML = coordinatesString;
+
+      var blob = new Blob([coordinatesString], {'type':'application/json'});
+      let a = document.createElement("a");
+      a.href = window.URL.createObjectURL(blob);
+      a.download = "save.json";
+      a.click();
+
+      let coord = allCoordinate[0];
+      let diffLongitude = coord.accuracy / 111320 / 2;
+      let diffLatitude = coord.accuracy / (400750000 * (Math.cos(coord.latitude) / 360)) / 8;
+      let yMin = coord.longitude - diffLatitude;
+      let yMax = coord.longitude + diffLatitude;
+      let xMin = coord.latitude - diffLongitude;
+      let xMax = coord.latitude + diffLongitude;
+      mapElem.innerHTML = "";
+      mapElem.class = ""
+      if (map) {
+        map.remove();
+      }
+      map = L.map(mapElem).fitBounds([[xMin, yMin], [xMax, yMax]]);
+      let latLngs = [];
+      for (let coordinate of allCoordinate) {
+        latLngs.push([coordinate.latitude, coordinate.longitude])
+        previewCircle = L.circle([coordinate.latitude, coordinate.longitude], {
+            color: 'red',
+            fillColor: '#f03',
+            fillOpacity: 0.1,
+            radius: coordinate.accuracy / 2
+        }).addTo(map);
+        previewMarker = L.marker([coordinate.latitude, coordinate.longitude]).addTo(map);
+      }
+      L.polyline(latLngs).addTo(map);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+    });
+  </script>
+</body>
+</html>