diff --git a/html/engine.js b/html/engine.js
index 89a2c64..287e1c3 100644
--- a/html/engine.js
+++ b/html/engine.js
@@ -1,24 +1,57 @@
-//engine.js
+// engine.js
-let map;
-let point;
-
-const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
const socket = new WebSocket("wss://trackme.ovh/ws");
+const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
+const CACHE_NAME = "trackme-v1";
+const urlsToCache = [
+ "/",
+ "/leaflet/leaflet.js",
+ "/engine.js",
+ "/style.css",
+];
+const blueIconUrl = "marker-icon.png";
+const purpleIconUrl = "marker-icon-alt.png";
+
+let follow = true;
+let userdata;
+
+function userGPSsuccess(position) {
+ const lat = position.coords.latitude;
+ const lon = position.coords.longitude;
+ trackerdata = [lat,lon];
+}
+
+function userGPSerror(err) {
+ trackerdata = [49,0];
+}
+
+function getPosition(pos) {
+ if (navigator.geolocation) {
+ return new Promise((resolve, _reject) => {
+ navigator.geolocation.getCurrentPosition(userGPSsuccess, userGPSerror);
+ resolve("Position fetched");
+ });
+ }
+}
+
+function createLocation(map, point, coords, text, iconUrl) {
+ let icon = new L.Icon.Default;
+ icon.options.iconUrl = iconUrl;
-function create_location(coords, text) {
point = L.marker(coords, {
- color: 'red',
- fillColor: '#f03',
+ color: "red",
+ fillColor: "#f03",
fillOpacity: 0.5,
- radius: 50
+ radius: 50,
+ icon: icon
}).addTo(map).bindPopup(text);
- point.getPopup().autoPan=false;
+
+ point.getPopup().autoPan = false;
point.openPopup();
}
-function create_map(coords) {
- map = L.map('map', {
+function createMap(coords) {
+ let map = L.map("map", {
center: coords,
zoom: 15
});
@@ -27,69 +60,63 @@ function create_map(coords) {
attribution: `© OpenStreetMap / PaulBSD`
}).addTo(map);
map.zoomControl.setPosition('bottomright');
+
+ return map;
}
-function update(data) {
- const coords = [data.latitude,data.longitude];
- const speed = data.speed/10;
- let section = parseInt(data.direction/45 + 0.5);
- section = section % 8;
- const text = `time: ${data.time}
latitude: ${data.latitude}
longitude: ${data.longitude}
height: ${data.height}
speed: ${speed}
direction: ${arrows[section]} ${data.direction}°
serial: ${data.serial}`;
+function middle(trackercoords, usercoords) {
+ let mid = [0, 0];
+ for (let i in mid) {
+ mid[i] = Math.min(trackercoords[i], usercoords[i]) + Math.abs(trackercoords[i] - usercoords[i]);
+ }
+ return mid;
+}
+
+function update(map, trackerpoint, trackerdata) {
+ const coords = [trackerdata.latitude, trackerdata.longitude];
+ const speed = trackerdata.speed/10;
+ const section = parseInt(trackerdata.direction/45 + 0.5) % 8;
+ const text = `time: ${trackerdata.time}
latitude: ${trackerdata.latitude}
longitude: ${trackerdata.longitude}
height: ${trackerdata.height}
speed: ${speed}
direction: ${arrows[section]} ${trackerdata.direction}°
serial: ${trackerdata.serial}`;
if (map) {
- map.setView(coords);
- map.flyTo(coords);
+ if (follow) {
+ map.setView(coords);
+ map.flyTo(coords);
+ }
} else {
- create_map(coords);
+ map = createMap(coords);
}
- if (point) {
- point.setLatLng(coords);
- point.setPopupContent(text);
+ if (trackerpoint) {
+ trackerpoint.setLatLng(coords);
+ trackerpoint.setPopupContent(text);
} else {
- create_location(coords, text);
+ createLocation(map, trackerpoint, coords, text, blueIconUrl);
}
}
-function ping() {
- socket.send("ping");
-}
+function main() {
+ let map;
+ let trackerpoint;
+ let userpoint;
+ let pos;
-socket.addEventListener("message", (event) => {
- const data = JSON.parse(event.data);
- update(data);
-});
-
-socket.addEventListener("open", (event) => {
- console.log(event);
- socket.send("ping");
-});
-
-setInterval(ping, 1000)
-
-// service worker
-if ('serviceWorker' in navigator) {
- navigator.serviceWorker.register('/engine.js')
- .then((reg) => {
- console.log('Enregistrement réussi');
- }).catch((error) => {
- console.log('Erreur : ' + error);
+ let togglefollow = document.querySelector("#togglefollow");
+ togglefollow.addEventListener("click", function() {
+ follow = !follow;
+ if (follow) togglefollow.innerHTML = "Unfollow";
+ else togglefollow.innerHTML = "Follow";
});
+
+ socket.addEventListener("message", (event) => {
+ const trackerdata = JSON.parse(event.data);
+ update(map, trackerpoint, trackerdata);
+ });
+
+ socket.addEventListener("open", (event) => {
+ socket.send("ping");
+ });
+
+ setInterval(getPosition, 1000, pos);
+ setInterval(function () { socket.send("ping") }, 1000);
}
-const CACHE_NAME = 'my-site-cache-v1';
-const urlsToCache = [
- '/',
- '/leaflet/leaflet.js',
- '/engine.js',
- '/style.css',
-];
-
-self.addEventListener('install', function(event) {
- // Perform install steps
- event.waitUntil(
- caches.open(CACHE_NAME)
- .then(function(cache) {
- console.log('Opened cache');
- return cache.addAll(urlsToCache);
- })
- );
-});
+main();
diff --git a/html/index.html b/html/index.html
index 5971c8f..3b91750 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,7 +9,10 @@
-
-
+
+