diff --git a/src/app/components/chart-timeline/chart-timeline.component.ts b/src/app/components/chart-timeline/chart-timeline.component.ts
index 3f56f04e71367a17c3b62085912fba670373e9ae..4646dc40f611758033acb3c737a2ea012c8e5fc0 100644
--- a/src/app/components/chart-timeline/chart-timeline.component.ts
+++ b/src/app/components/chart-timeline/chart-timeline.component.ts
@@ -17,7 +17,7 @@ import {
} from 'ng-apexcharts';
import { getMarkerConfig } from 'src/environments/environment';
-import { Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
+import { Agent, PositionUpdate, validateTypeAgent} from 'src/app/model/base-model';
export type ChartOptions = {
series: ApexAxisChartSeries;
@@ -76,7 +76,7 @@ export class ChartTimelineComponent implements OnInit {
try {
let upd: PositionUpdate = JSON.parse(message.payload.toString())
upd.objects.forEach(obj => {
- validateTypeObject(obj)
+ validateTypeAgent(obj)
this.addNewSeries(obj)
});
} catch(e) {
@@ -89,7 +89,7 @@ export class ChartTimelineComponent implements OnInit {
ngOnInit(): void {
}
- addNewSeries(obj: Object) {
+ addNewSeries(obj: Agent) {
// --- Get index of the agent in series
let name = obj.id
let idx = this.chartOptions.series.findIndex((s: { name: string; }) => s.name === name)
@@ -104,7 +104,7 @@ export class ChartTimelineComponent implements OnInit {
// this.chartOptions.series[idx]["color"] = markerConf?.circle
// }
var markerConf = getMarkerConfig(idx+1) // 0 is root
- this.chartOptions.series[idx]["color"] = markerConf?.circle
+ this.chartOptions.series[idx]["color"] = markerConf?.color
// --- Add new data
obj.zoneDescriptors.forEach(zone => {
@@ -116,8 +116,8 @@ export class ChartTimelineComponent implements OnInit {
new Date(obj.lastPosUpdate).getTime(),
new Date(obj.lastPosUpdate).getTime() + 1000
],
- "fillColor": markerConf?.circle,
- "strokeColor": markerConf?.circle
+ "fillColor": markerConf?.color,
+ "strokeColor": markerConf?.color
}
this.chartOptions.series[idx]["data"].push(patch)
@@ -130,8 +130,8 @@ export class ChartTimelineComponent implements OnInit {
oldData['y'][0],
new Date(obj.lastPosUpdate).getTime()
],
- "fillColor": markerConf?.circle,
- "strokeColor": markerConf?.circle
+ "fillColor": markerConf?.color,
+ "strokeColor": markerConf?.color
}
this.chartOptions.series[idx]["data"].push(patch)
}
diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts
index 9b604089d7cdce84c00b57e951da815ed34a63bb..681229f7a30c458b3afc94f1a6d4f7c5e2f341c5 100644
--- a/src/app/components/map/map.component.ts
+++ b/src/app/components/map/map.component.ts
@@ -6,7 +6,7 @@ import 'leaflet-arrowheads';
import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { environment, getMarkerConfig} from 'src/environments/environment';
-import {Position, PositionUpdate, RelativePos, WGS84, validateTypePosition, validateTypeObject} from 'src/app/model/base-model';
+import {Position, PositionUpdate, RelativePos, WGS84, validateTypePosition, validateTypeAgent} from 'src/app/model/base-model';
@Component({
@@ -46,7 +46,7 @@ export class MapComponent implements OnInit {
let upd: PositionUpdate = <PositionUpdate>JSON.parse(message.payload.toString())
upd.objects.forEach(obj => {
- validateTypeObject(obj)
+ validateTypeAgent(obj)
this.registerPoint(obj.id, obj)
});
} catch(e) {
@@ -73,14 +73,15 @@ export class MapComponent implements OnInit {
registerPoint(key: string, desc: { [key: string]: any }) {
// --- Leyers for markers
if (key in this.markOverlays) {
+ console.log(this.markOverlays)
this.markOverlays[key].clearLayers();
} else {
this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
}
// --- Info
- let pos = desc["position"]
this.agentsInfo[key] = desc
+ let pos = desc["position"]
var props = undefined
if (desc.extractedAttributes) {
@@ -101,7 +102,7 @@ export class MapComponent implements OnInit {
// empty position
if (pos==undefined) {
- console.log("Eroro: empty position.")
+ console.log("Error: empty position.")
return
}
@@ -109,7 +110,7 @@ export class MapComponent implements OnInit {
// empty point
if (Object.values(point).every((e)=>{e==undefined})) {
- console.log("Eroro: empty point.")
+ console.log("Error: empty point.")
return;
}
@@ -119,55 +120,65 @@ export class MapComponent implements OnInit {
var globPos = L.latLng([point.latitude, point.longitude]);
}
- // --- Marker
- let serialNum = Object.keys(this.markOverlays).length - 1 // because this point already exists
- console.log(this.markOverlays)
- console.log("serialNum ", serialNum)
- var markerConf = getMarkerConfig(serialNum)
-
- // if (key in MarkerColorMap) {
- // var markerConf = MarkerColorMap[key]
- // } else {
- // var markerConf = MarkerColorMap['Default']
- // }
+ if (key=="ROOT") {
+ // Root Marker
+ let marker = L.marker(globPos, {
+ icon: L.icon({
+ iconSize: [40, 40],
+ iconAnchor: [21, 25],
+ iconUrl: `assets/marker-ball-pink.png`,
+ className: 'true-position-marker'
+ })
+ }).bindPopup(popup).openPopup();
+ marker.addTo(this.markOverlays[key])
- 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(popup).openPopup();
- marker.addTo(this.markOverlays[key])
-
- // --- Accuracy
- if (pos?.accuracy) {
- L.circle(globPos, pos.accuracy, { color: markerConf.circle}
- ).addTo(this.markOverlays[key]);
- }
-
- // --- Orientation
- if ('x' in point) {
- let orient: RelativePos = {
- "x": point.x + (theta ? Math.cos(theta)*3.5 : 3.5),
- "y": point.y + (theta ? Math.sin(theta)*3.5 : 0),
- "z": point.z
+ } else {
+ // --- Marker config
+ let serialNum = Object.keys(this.markOverlays).indexOf(key)
+ // if (serialNum == 0 && Object.keys(this.markOverlays).length > 1) {
+ // serialNum = 1
+ // }
+ var markerConf = getMarkerConfig(serialNum)
+
+ 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(popup).openPopup();
+ marker.addTo(this.markOverlays[key])
+
+ // --- Accuracy
+ if (pos?.accuracy) {
+ L.circle(globPos, pos.accuracy, { color: markerConf.color}
+ ).addTo(this.markOverlays[key]);
}
- let globPointOrient = this.ref2root(orient)
- // add arrow
- var arrow = L.polyline([globPos, globPointOrient], {color: 'grey'}).arrowheads(
- {
- fill: true,
- color: 'grey'
+ // --- Orientation
+ if ('x' in point) {
+ let orient: RelativePos = {
+ "x": point.x + (theta ? Math.cos(theta)*3.5 : 3.5),
+ "y": point.y + (theta ? Math.sin(theta)*3.5 : 0),
+ "z": point.z
}
- );
- arrow.addTo(this.markOverlays[key])
+ let globPointOrient = this.ref2root(orient)
+
+ // add arrow
+ var arrow = L.polyline([globPos, globPointOrient], {color: markerConf.color}).arrowheads(
+ {
+ fill: true,
+ color: markerConf.color
+ }
+ );
+ arrow.addTo(this.markOverlays[key])
+ }
}
+
}
// @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index f10305d874d02f96aedda91c916138fded2f7b10..12d2ce2aa045ebb792aa97082daae0c05c5b995d 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -6,10 +6,10 @@
<th mat-header-cell *matHeaderCellDef>
<mat-icon aria-hidden="false" aria-label="Agent">people</mat-icon> Agent
</th>
- <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+ <td mat-cell *matCellDef="let element"><span [ngStyle]="{'color': element.color}">⬤</span> {{element.id}} </td>
</ng-container>
- <!-- Type -->
+ <!-- Type -->
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>
<mat-icon aria-hidden="false" aria-label="Type">style</mat-icon> Type
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index 0bebc46f88b523dbfc52eab4faec99bd21b6337d..0fa9088e0ac352f281532fb2d5540a8855b359e4 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -1,10 +1,11 @@
import { Component, OnInit, ViewChild } from '@angular/core';
-import {PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
+import {Agent, PositionUpdate} from 'src/app/model/base-model';
import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { Subscription } from 'rxjs';
import { MatTable } from '@angular/material/table';
+import { getMarkerConfig} from 'src/environments/environment';
@Component({
selector: 'app-table',
@@ -39,10 +40,19 @@ export class TableComponent implements OnInit {
let upd: PositionUpdate = JSON.parse(message.payload.toString())
// upd.objects.forEach(obj => validateTypeObject(obj));
this.dataSource.push(...upd.objects);
+
+ let agentNames = [...new Set(this.dataSource.map((agent: any) => agent.id))]
+ this.dataSource.forEach((agent: any)=> {
+ let idx = agentNames.indexOf(agent.id) + 1
+ agent.color = getMarkerConfig(idx).color
+ })
+
this.table?.renderRows();
} catch(e) {
console.log(e)
}
+
+ // console.log(this.dataSource)
});
}
diff --git a/src/app/model/base-model.ts b/src/app/model/base-model.ts
index 475efd81c4e2196a7fc3ae78bd67f11111020894..32c8dc7502bd510a3719554ae9f8c9a1e184b369 100644
--- a/src/app/model/base-model.ts
+++ b/src/app/model/base-model.ts
@@ -1,10 +1,10 @@
export interface PositionUpdate {
- objects: Object[]
+ objects: Agent[]
type: NotificationType
}
-export interface Object {
+export interface Agent {
id: string
sensorId: string
type: ObjectType
@@ -77,9 +77,9 @@ export function validateTypePosition(obj: any) {
}
}
-export function validateTypeObject(obj: any) {
- if (!isObject(obj)) {
- throw new TypeError("Unvalid Object: " + Object.keys(obj))
+export function validateTypeAgent(obj: any) {
+ if (!isAgent(obj)) {
+ throw new TypeError("Unvalid Agent: " + Object.keys(obj))
}
}
@@ -101,7 +101,7 @@ export function isPosition(obj: any): obj is Position {
&& Object.prototype.hasOwnProperty.call(obj, "refSystemId")
}
-export function isObject(obj: any): obj is Object {
+export function isAgent(obj: any): obj is Agent {
return "id" in obj
&& "type" in obj
&& "sensorId" in obj
diff --git a/src/assets/marker-ball-pink.png b/src/assets/marker-ball-pink.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ce051e9ab53c03828c27e20e372dd91ef37a258
Binary files /dev/null and b/src/assets/marker-ball-pink.png differ
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 373238d981e51c79a2b42b974c2f4c4c6f7bc2f7..6ef5e65179b037b8451466b494f6017176cd9ff5 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -36,26 +36,30 @@ export const MQTTconfig: IMqttServiceOptions = {
// };
export const MarkerColorList: MarkerColor[] = [
- {"marker": "red", "circle": "#d32f2f"},
- {"marker": "green", "circle": "#008632"},
- {"marker": "blue", "circle": "#0076EE"},
- {"marker": "violet", "circle": "#9700ee"},
- {"marker": "yellow", "circle": "#eee600"},
- {"marker": "grey", "circle": "#606060"},
+ {"marker": "red", "color": "#d32f2f"},
+ {"marker": "green", "color": "#008632"},
+ {"marker": "blue", "color": "#0076EE"},
+ {"marker": "violet", "color": "#9700ee"},
+ {"marker": "yellow", "color": "#eee600"},
+ {"marker": "grey", "color": "#606060"},
]
interface MarkerColor {
marker: string
- circle: string
+ color: string
}
export function getMarkerConfig(counter: number) {
- let idx = counter
+
+ if (counter < 0) {
+ counter = 0
+ }
if (MarkerColorList.length <= counter) {
- idx = counter - MarkerColorList.length
+ counter = counter - MarkerColorList.length
}
- return MarkerColorList[idx]
+
+ return MarkerColorList[counter]
}
/*