diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts
index 8aa59a8b4bd775d9e104757404312a594d83a319..b277cb202759cfac6fb0618016dcce2002bdb573 100644
--- a/src/app/components/map/map.component.ts
+++ b/src/app/components/map/map.component.ts
@@ -4,8 +4,9 @@ import { Subscription } from 'rxjs';
import * as L from "leaflet";
import { IMqttMessage, MqttService } from 'ngx-mqtt';
-import { environment } from 'src/environments/environment';
-import {RelativePos, WGS84} from 'src/app/model/base-model';
+import { environment, MarkerColorMap } from 'src/environments/environment';
+import {Position, PositionUpdate, RelativePos, WGS84} from 'src/app/model/base-model';
+
@Component({
selector: 'app-map',
@@ -18,61 +19,92 @@ export class MapComponent implements OnInit {
private subsOrigin: Subscription;
private map!: L.Map;
-
- private origin!: WGS84;
+ private root!: Position;
- agentsInfo = new Map();
- markOverlays = new Map();
+ agentsInfo: { [key: string]: {} } = {};
+ markOverlays: { [key: string]: L.LayerGroup<any> } = {};
posOverlays: { [key: string]: L.LayerGroup<any> } = {};
constructor(private _mqttService: MqttService) {
- this.origin = {"latitude": 51.02545, "longitude": 13.72295}
+ this.root = {"refSystemId": "ROOT", "point": {"latitude": 51.02545, "longitude": 13.72295}}
- this.subsPosition = this._mqttService.observe('testtopic/5699').subscribe((message: IMqttMessage) => {
- let pos: RelativePos = JSON.parse(message.payload.toString())
- this.updatePosition('default', pos)
+ this.subsPosition = this._mqttService.observe('ipos/client/root').subscribe((message: IMqttMessage) => {
+ this.root = JSON.parse(message.payload.toString())
+ console.log("New root: ", this.root)
+ this.registerPoint("ROOT", {"position": this.root})
});
- this.subsOrigin = this._mqttService.observe('testtopic/5699/origin').subscribe((message: IMqttMessage) => {
- this.origin = JSON.parse(message.payload.toString())
+ this.subsOrigin = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => {
+ let upd: PositionUpdate = JSON.parse(message.payload.toString())
+ upd.object.forEach(obj => this.registerPoint(obj.id, obj));
});
}
- ngOnInit(): void {}
+ ngOnInit(): void { }
// --- Controllers
- updatePosition(key: string, pos: RelativePos) {
- // estimated position of an agent
-
- let glob_pos = this.convert2wgs(pos)
+ ref2root(pos: RelativePos) {
+ // convert a relative position to WFG84 format
+ let source = <WGS84>this.root.point
+ let origin = L.latLng([source.latitude, source.longitude])
+ let point = L.Projection.Mercator.project(origin)
+ let newPoint = L.point([point.x + pos.x, point.y + pos.y])
+ let newLatLng = L.Projection.Mercator.unproject(newPoint)
+ return newLatLng
+ }
- // let point = L.point(pos.x, pos.y);
- // let glob_pos = (this.map).layerPointToLatLng(point)
- // --- Leyers
- if (key in this.posOverlays) {
- this.posOverlays[key].clearLayers();
+ registerPoint(key: string, desc: { [key: string]: any }) {
+ // --- Leyers for markers
+ if (key in this.markOverlays) {
+ this.markOverlays[key].clearLayers();
} else {
- this.posOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
+ this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
}
// --- Info
- this.agentsInfo.set(key, {"glob_pos": glob_pos})
+ let pos = desc["position"]
+ this.agentsInfo[key] = desc
+ this.addMarker(key, pos)
+ }
- L.circle(glob_pos, 6, { color: '#d32f2f' }
- ).addTo(this.posOverlays[key]);
+ addMarker(key: string, pos: Position) {
+ let point = pos.point
- }
+ if ('x' in point) {
+ var globPos = this.ref2root(point)
+ } else {
+ var globPos = L.latLng([point.latitude, point.longitude]);
+ }
- convert2wgs(pos: RelativePos) {
- let origin = L.latLng([this.origin.latitude, this.origin.longitude]);
- let point = this.map.latLngToContainerPoint(origin);
- let newPoint = L.point([point.x + pos.x, point.y + pos.y]);
- let newLatLng = this.map.containerPointToLatLng(newPoint);
- return newLatLng
+ // --- Marker
+ if (key in MarkerColorMap) {
+ var markerConf = MarkerColorMap[key]
+ } else {
+ var markerConf = MarkerColorMap['Default']
+ }
+
+ let marker = L.marker(globPos, {
+ icon: L.icon({
+ iconSize: [25, 41],
+ iconAnchor: [13, 41],
+ iconUrl: `assets/marker-icon-${markerConf.marker}.png`,
+ iconRetinaUrl: `assets/marker-icon-2x-${markerConf.marker}.png`,
+ shadowUrl: 'assets/marker-shadow.png',
+ className: 'true-position-marker'
+ })
+ }).bindPopup(key).openPopup();
+ marker.addTo(this.markOverlays[key])
+
+ // --- Accuracy
+ if (pos?.accuracy) {
+ L.circle(globPos, pos.accuracy, { color: markerConf.circle}
+ ).addTo(this.markOverlays[key]);
+ }
}
+
// @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
// --- Layers: Define base layers so we can reference them multiple times
streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -117,13 +149,18 @@ export class MapComponent implements OnInit {
let legend = new L.Control({ position: "bottomleft" });
legend.onAdd = function () {
var div = L.DomUtil.create("div", "legend");
- div.innerHTML += '<img style="opacity: .5" src="assets/marker-icon-grey.png"> <span> Agents </span><br>';
+ div.innerHTML += '<img style="opacity: .5" src="assets/marker-icon-grey.png"> <span> Employee </span><br>';
div.innerHTML += '<i class="est-pos"></i> <span> Estimated position </span><br>';
return div;
};
- legend.addTo(this.map);
+ // legend.addTo(this.map);
+
+ //-- check root
+ if (this.root) {
+ this.registerPoint("ROOT", {"position": this.root})
+ }
}
diff --git a/src/app/model/base-model.ts b/src/app/model/base-model.ts
index 009c868db22757ac1fa243dcb1d6480f4305459b..eecefd6d9f348e0d4b519c1eeec7811b5ef5e2f5 100644
--- a/src/app/model/base-model.ts
+++ b/src/app/model/base-model.ts
@@ -1,10 +1,60 @@
+export interface PositionUpdate {
+ object: Object[]
+ type: NotificationType
+}
+
+export interface Object {
+ id: string
+ sensorId: string
+ type: ObjectType
+ sensorType: SensorType
+ position: Position
+ orientation?: Orientation
+ lastPosUpdate: string
+}
+
+export interface Position {
+ refSystemId: string
+ point: WGS84 | RelativePos
+ accuracy?: number
+}
+
export interface WGS84 {
latitude: number
longitude: number
+ altitude?: number
}
export interface RelativePos {
x: number
y: number
+ z?: number
+}
+
+interface Orientation {
+ x: number
+ y: number
+ z: number
+ w: number
}
+
+enum NotificationType {
+ EntryNotification,
+ Unknown
+}
+
+enum ObjectType {
+ HUMAN,
+ BOX,
+ ROBOT
+}
+
+enum SensorType {
+ UWB,
+ Bluetooth,
+ WiFi
+}
+
+
+
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index e774c01f3394fdae294675b02dfe07c08b67cdfd..bd32caccf976dccb6b8d1038f005ab3d906fa9cf 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,4 +1,35 @@
+import { IMqttServiceOptions } from 'ngx-mqtt';
+
export const environment = {
production: true,
- APIEndpoint: 'http://webserver:7071'
+
+ mapbox: {
+ accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ',
+ accessToken2: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlYm13ZTJtZ2gyb25wbGhqdGhmZzkifQ.atRzBqwKjY9wEUlue2YLzQ'
+ },
+
+ indoorequal: {
+ APIkey: 'l70N1y3m02lRDrlIqOzYyB'
+ },
+
};
+
+export const MQTTconfig: IMqttServiceOptions = {
+ hostname: 'broker.hivemq.com',
+ port: 8000,
+ path: '/mqtt'
+};
+
+export const MarkerColorMap: { [key: string]: MarkerColor } = {
+ "ROOT": {"marker": "red", "circle": "#d32f2f"},
+ "Employee1": {"marker": "green", "circle": "#008632"},
+ "Employee2": {"marker": "blue", "circle": "#0076EE"},
+ "Employee3": {"marker": "violet", "circle": "#9700ee"},
+ "Employee4": {"marker": "yellow", "circle": "#eee600"},
+ "Default": {"marker": "grey", "circle": "#606060"},
+}
+
+interface MarkerColor {
+ marker: string
+ circle: string
+}
\ No newline at end of file
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index c18a7872e7be2aad6a2922ce6f1c315fcc3d6fe0..156a6241ea12cdd965e6ff6c76b5617a387addb6 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,7 +6,6 @@ import { IMqttServiceOptions } from 'ngx-mqtt';
export const environment = {
production: false,
- APIEndpoint: 'http://localhost:7071',
mapbox: {
accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ',
@@ -25,6 +24,20 @@ export const MQTTconfig: IMqttServiceOptions = {
path: '/mqtt'
};
+export const MarkerColorMap: { [key: string]: MarkerColor } = {
+ "ROOT": {"marker": "red", "circle": "#d32f2f"},
+ "Employee1": {"marker": "green", "circle": "#008632"},
+ "Employee2": {"marker": "blue", "circle": "#0076EE"},
+ "Employee3": {"marker": "violet", "circle": "#9700ee"},
+ "Employee4": {"marker": "yellow", "circle": "#eee600"},
+ "Default": {"marker": "grey", "circle": "#606060"},
+}
+
+interface MarkerColor {
+ marker: string
+ circle: string
+}
+
/*
* For easier debugging in development mode, you can import the following file