add movement

js/Position.js

@@ -3,13 +3,20 @@
 
 const { KalmanFilter } = kalmanFilter
 
-const stepThreshold = 3
+const magnitudeArrayLength = 5
+
+const position = { lat: 0, lng: 0 }
+let lastIndex, xFiltered, yFiltered, zFiltered, magnitude, lastOrientation
+const magnitudeArray = []
+
+const stepLength = 0.7 // Schrittweite in Metern
+const stepThreshold = 2
 
 function toRadians (deg) {
   return deg * (Math.PI / 180)
 }
 
-export function rotateVector (accel, yaw, pitch, roll) {
+function rotateVector (accel, yaw, pitch, roll) {
   const theta = toRadians(yaw)
   const beta = toRadians(pitch)
   const gamma = toRadians(roll)
@@ -107,3 +114,32 @@ export function detectPeak (data) {
   // Prüfe, ob es einen Peak gibt (der mittlere Wert ist größer als die umliegenden)
   return (beforeLast > last && beforeLast > twoBeforeLast && beforeLast > stepThreshold)
 }
+
+export function calculatePosition (motionArray, userPosition) {
+  position.lat = userPosition.lat
+  position.lng = userPosition.lng
+  const filteredArrays = kFilter(motionArray).map((element) => [element[0], element[1], element[2], element[3], element[4], element[5]]) // Wende den Filter an
+
+  lastIndex = filteredArrays.length - 1
+  xFiltered = filteredArrays[lastIndex][0]
+  yFiltered = filteredArrays[lastIndex][1]
+  zFiltered = filteredArrays[lastIndex][2]
+
+  lastOrientation = motionArray[lastIndex][3]
+  magnitude = Math.sqrt(xFiltered * xFiltered + yFiltered * yFiltered + zFiltered * zFiltered)
+  if (magnitudeArray.length >= magnitudeArrayLength) {
+    magnitudeArray.shift()
+  }
+  magnitudeArray.push(magnitude)
+
+  if (detectPeak(magnitudeArray)) {
+    updatePosition()
+    return position
+  }
+}
+
+function updatePosition () {
+  const directionRad = lastOrientation * (Math.PI / 180)
+  position.lat += stepLength * Math.cos(directionRad)
+  position.lng += stepLength * Math.sin(directionRad)
+}

js/map.js

@@ -6,6 +6,10 @@ import 'https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate.js'
 import 'https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.min.js'
 import { findProduct, searchProducts } from './Products.js'
 import { clickOnMap } from './Graph.js'
+import { calculatePosition } from './Position.js'
+
+const motionArray = []
+const motionArrayLength = 100
 
 // Map image
 const image = './map/Zollstock-Modellv3.png'
@@ -264,6 +268,17 @@ function handleOrientation (event) {
   const bias = 120 // rotation of png
   const orientation = 360 - event.webkitCompassHeading
   map.setBearing(orientation + bias)
+  motionArray[motionArray.length - 1].push(event.webkitCompassHeading, event.beta, event.gamma)
+  userPosition = L.latLng(calculatePosition(motionArray, userPosition))
+  circle.setLatLng(userPosition)
+  map.flyTo(userPosition, 1)
+}
+
+function handleMotion (event) {
+  if (motionArray.length >= motionArrayLength) {
+    motionArray.shift()
+  }
+  motionArray.push([event.acceleration.x, event.acceleration.y, event.acceleration.z])
 }
 
 let compass = false
@@ -282,11 +297,13 @@ window.toggleCompass = () => {
 
   if (compass) {
     window.removeEventListener('deviceorientation', handleOrientation)
+    window.removeEventListener('devicemotion', handleMotion)
     map.touchRotate.enable()
     compassSymbol.innerHTML = 'near_me'
     compass = false
   } else {
     window.addEventListener('deviceorientation', handleOrientation)
+    window.addEventListener('devicemotion', handleMotion)
     map.touchRotate.disable()
     compassSymbol.innerHTML = 'explore'
     compass = true