new root marker, colors for agents in table

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)
       }

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/

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

src/app/components/table/table.component.ts

 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)
     });
   }
 

src/app/model/base-model.ts

    
 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

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]
 }
 
 /*