Skip to content
Snippets Groups Projects
Commit 85321deb authored by Oleksandr Husak's avatar Oleksandr Husak
Browse files

display orientation for markers

parent ef7468a6
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
README.md
+ 4
− 4
View file @ 85321deb
...@@ -48,10 +48,10 @@ Connection settings ...@@ -48,10 +48,10 @@ Connection settings
"accuracy": 1 "accuracy": 1
}, },
"orientation": { "orientation": {
"x": 1, "x": 0,
"y": 0.5, "y": 0,
"z": 1, "z": -0.7071,
"w": 1.5 "w": 0.7071
}, },
"extractedAttributes": { "extractedAttributes": {
"batteryChargeLevel": 70, "batteryChargeLevel": 70,
......
package-lock.json
+ 35
− 0
View file @ 85321deb
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"apexcharts": "^3.29.0", "apexcharts": "^3.29.0",
"express": "^4.17.1", "express": "^4.17.1",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"leaflet-arrowheads": "^1.4.0",
"moment": "^2.24.0", "moment": "^2.24.0",
"ng-apexcharts": "^1.5.12", "ng-apexcharts": "^1.5.12",
"ngx-mqtt": "^9.0.5", "ngx-mqtt": "^9.0.5",
...@@ -8578,6 +8579,23 @@ ...@@ -8578,6 +8579,23 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==" "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
}, },
"node_modules/leaflet-arrowheads": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/leaflet-arrowheads/-/leaflet-arrowheads-1.4.0.tgz",
"integrity": "sha512-aIjsmoWe1VJXaGOpKpS6E8EzN2vpx3GGCNP/FxQteLVzAg5xMID7elf9hj/1CWLJo8FuGRjSvKkUQDj7mocrYA==",
"dependencies": {
"leaflet": "^1.7.1",
"leaflet-geometryutil": "^0.10.0"
}
},
"node_modules/leaflet-geometryutil": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/leaflet-geometryutil/-/leaflet-geometryutil-0.10.0.tgz",
"integrity": "sha512-4OGu2OnpHLx+7QpOY6NatrAiSWWrP/Z3HOM9ZsmQ0JWIzAytFS6SLUnKHVjwpgRzPUpV/6w0b4Fh24pVIgqFHw==",
"dependencies": {
"leaflet": "^1.6.0"
}
},
"node_modules/less": { "node_modules/less": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz", "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
...@@ -22939,6 +22957,23 @@ ...@@ -22939,6 +22957,23 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==" "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
}, },
"leaflet-arrowheads": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/leaflet-arrowheads/-/leaflet-arrowheads-1.4.0.tgz",
"integrity": "sha512-aIjsmoWe1VJXaGOpKpS6E8EzN2vpx3GGCNP/FxQteLVzAg5xMID7elf9hj/1CWLJo8FuGRjSvKkUQDj7mocrYA==",
"requires": {
"leaflet": "^1.7.1",
"leaflet-geometryutil": "^0.10.0"
}
},
"leaflet-geometryutil": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/leaflet-geometryutil/-/leaflet-geometryutil-0.10.0.tgz",
"integrity": "sha512-4OGu2OnpHLx+7QpOY6NatrAiSWWrP/Z3HOM9ZsmQ0JWIzAytFS6SLUnKHVjwpgRzPUpV/6w0b4Fh24pVIgqFHw==",
"requires": {
"leaflet": "^1.6.0"
}
},
"less": { "less": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz", "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
package.json
+ 1
− 0
View file @ 85321deb
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"apexcharts": "^3.29.0", "apexcharts": "^3.29.0",
"express": "^4.17.1", "express": "^4.17.1",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"leaflet-arrowheads": "^1.4.0",
"moment": "^2.24.0", "moment": "^2.24.0",
"ng-apexcharts": "^1.5.12", "ng-apexcharts": "^1.5.12",
"ngx-mqtt": "^9.0.5", "ngx-mqtt": "^9.0.5",
......
src/app/components/map/map.component.ts
+ 76
− 5
View file @ 85321deb
...@@ -2,10 +2,11 @@ import { Component, OnInit } from '@angular/core'; ...@@ -2,10 +2,11 @@ import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import * as L from "leaflet"; import * as L from "leaflet";
import 'leaflet-arrowheads';
import { IMqttMessage, MqttService } from 'ngx-mqtt'; import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { environment, MarkerColorMap } from 'src/environments/environment'; import { environment, MarkerColorMap } from 'src/environments/environment';
import {Position, PositionUpdate, RelativePos, WGS84} from 'src/app/model/base-model'; import {Position, PositionUpdate, RelativePos, Quaternion, WGS84} from 'src/app/model/base-model';
@Component({ @Component({
...@@ -71,17 +72,49 @@ export class MapComponent implements OnInit { ...@@ -71,17 +72,49 @@ export class MapComponent implements OnInit {
if (desc.extractedAttributes) { if (desc.extractedAttributes) {
props = `<p> \ props = `<p> \
<h3>${key}</h3> <h3>${key}</h3>
<strong>Charge</strong>: ${desc.extractedAttributes.batteryChargeLevel}% <br>\ <strong>Charge</strong>: ${desc.extractedAttributes?.batteryChargeLevel}% <br>\
<strong>Items</strong>: ${desc.extractedAttributes.loadedItems}\ <strong>Items</strong>: ${desc.extractedAttributes?.loadedItems} <br>\
<strong>Errors</strong>: ${desc.extractedAttributes?.errors}\
</p>` </p>`
} else { } else {
props = `<p><h3>${key}</h3></p>` props = `<p><h3>${key}</h3></p>`
} }
this.addMarker(key, pos, props) // Rotaion
let quter = desc.orientation
// if (quter) {
// // console.log("Init:", orient)
// let orient = this.calcOrient(quter.w, quter.x, quter.y, quter.z)
// // console.log("Orient:", orient)
// let orientPoint: RelativePos = {
// "x": orient[0] + pos.point.x,
// "y": orient[1] + pos.point.y,
// "z": orient[2] + pos.point.z
// }
// let globPointOrient = this.ref2root(orientPoint)
// if ('x' in pos.point) {
// var globPos = this.ref2root(pos.point)
// } else {
// var globPos = L.latLng([pos.point.latitude, pos.point.longitude]);
// }
// // add arrow
// var arrow = L.polyline([globPos, globPointOrient], {color: 'grey'}).arrowheads(
// {
// fill: true,
// // size: '30%',
// color: 'grey'
// }
// ).addTo(this.map);
// }
this.addMarker(key, pos, props, quter)
} }
addMarker(key: string, pos: Position, popup: string) { addMarker(key: string, pos: Position, popup: string, quter: Quaternion) {
let point = pos.point let point = pos.point
if ('x' in point) { if ('x' in point) {
...@@ -114,6 +147,44 @@ export class MapComponent implements OnInit { ...@@ -114,6 +147,44 @@ export class MapComponent implements OnInit {
L.circle(globPos, pos.accuracy, { color: markerConf.circle} L.circle(globPos, pos.accuracy, { color: markerConf.circle}
).addTo(this.markOverlays[key]); ).addTo(this.markOverlays[key]);
} }
// --- Orientation
if (quter && 'x' in point) {
let orient = this.calcOrient(quter.w, quter.x, quter.y, quter.z)
let orientPoint: RelativePos = {
"x": orient[0] + point.x,
"y": orient[1] + point.y,
"z": orient[2]
}
let globPointOrient = this.ref2root(orientPoint)
// add arrow
var arrow = L.polyline([globPos, globPointOrient], {color: 'grey'}).arrowheads(
{
fill: true,
// size: '30%',
color: 'grey'
}
);
arrow.addTo(this.markOverlays[key])
}
}
quaternionMult(q: number[], r: number[]) {
return [r[0]*q[0]-r[1]*q[1]-r[2]*q[2]-r[3]*q[3],
r[0]*q[1]+r[1]*q[0]-r[2]*q[3]+r[3]*q[2],
r[0]*q[2]+r[1]*q[3]+r[2]*q[0]-r[3]*q[1],
r[0]*q[3]-r[1]*q[2]+r[2]*q[1]+r[3]*q[0]]
}
calcOrient(w: number, x: number, y: number, z: number) {
// Rotation transforms from one orientation to another
let point = [0,0,3,0] // point vector
let qConj = [w,-1*x,-1*y,-1*z]
let q = [w,x,y,z]
let point_new = this.quaternionMult(this.quaternionMult(q,point),qConj)
return point_new.slice(1)
} }
......
src/app/model/base-model.ts
+ 2
− 2
View file @ 85321deb
...@@ -10,7 +10,7 @@ export interface Object { ...@@ -10,7 +10,7 @@ export interface Object {
type: ObjectType type: ObjectType
sensorType: SensorType sensorType: SensorType
position: Position position: Position
orientation?: Orientation orientation?: Quaternion
lastPosUpdate: string lastPosUpdate: string
zoneDescriptors: ZoneDesc[] zoneDescriptors: ZoneDesc[]
extractedAttributes?: ExtAttribute extractedAttributes?: ExtAttribute
...@@ -39,7 +39,7 @@ export interface ZoneDesc { ...@@ -39,7 +39,7 @@ export interface ZoneDesc {
notificationType: NotificationType notificationType: NotificationType
} }
interface Orientation { export interface Quaternion {
x: number x: number
y: number y: number
z: number z: number
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment