diff --git a/js/Position.js b/js/Position.js index 0aa4672..1adf1ac 100644 --- a/js/Position.js +++ b/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) +} diff --git a/js/map.js b/js/map.js index 8278f93..0f97d2b 100644 --- a/js/map.js +++ b/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