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

new root marker, colors for agents in table

parent ac7a3d99
No related branches found
No related tags found
No related merge requests found
...@@ -17,7 +17,7 @@ import { ...@@ -17,7 +17,7 @@ import {
} from 'ng-apexcharts'; } from 'ng-apexcharts';
import { getMarkerConfig } from 'src/environments/environment'; 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 = { export type ChartOptions = {
series: ApexAxisChartSeries; series: ApexAxisChartSeries;
...@@ -76,7 +76,7 @@ export class ChartTimelineComponent implements OnInit { ...@@ -76,7 +76,7 @@ export class ChartTimelineComponent implements OnInit {
try { try {
let upd: PositionUpdate = JSON.parse(message.payload.toString()) let upd: PositionUpdate = JSON.parse(message.payload.toString())
upd.objects.forEach(obj => { upd.objects.forEach(obj => {
validateTypeObject(obj) validateTypeAgent(obj)
this.addNewSeries(obj) this.addNewSeries(obj)
}); });
} catch(e) { } catch(e) {
...@@ -89,7 +89,7 @@ export class ChartTimelineComponent implements OnInit { ...@@ -89,7 +89,7 @@ export class ChartTimelineComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
addNewSeries(obj: Object) { addNewSeries(obj: Agent) {
// --- Get index of the agent in series // --- Get index of the agent in series
let name = obj.id let name = obj.id
let idx = this.chartOptions.series.findIndex((s: { name: string; }) => s.name === name) let idx = this.chartOptions.series.findIndex((s: { name: string; }) => s.name === name)
...@@ -104,7 +104,7 @@ export class ChartTimelineComponent implements OnInit { ...@@ -104,7 +104,7 @@ export class ChartTimelineComponent implements OnInit {
// this.chartOptions.series[idx]["color"] = markerConf?.circle // this.chartOptions.series[idx]["color"] = markerConf?.circle
// } // }
var markerConf = getMarkerConfig(idx+1) // 0 is root 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 // --- Add new data
obj.zoneDescriptors.forEach(zone => { obj.zoneDescriptors.forEach(zone => {
...@@ -116,8 +116,8 @@ export class ChartTimelineComponent implements OnInit { ...@@ -116,8 +116,8 @@ export class ChartTimelineComponent implements OnInit {
new Date(obj.lastPosUpdate).getTime(), new Date(obj.lastPosUpdate).getTime(),
new Date(obj.lastPosUpdate).getTime() + 1000 new Date(obj.lastPosUpdate).getTime() + 1000
], ],
"fillColor": markerConf?.circle, "fillColor": markerConf?.color,
"strokeColor": markerConf?.circle "strokeColor": markerConf?.color
} }
this.chartOptions.series[idx]["data"].push(patch) this.chartOptions.series[idx]["data"].push(patch)
...@@ -130,8 +130,8 @@ export class ChartTimelineComponent implements OnInit { ...@@ -130,8 +130,8 @@ export class ChartTimelineComponent implements OnInit {
oldData['y'][0], oldData['y'][0],
new Date(obj.lastPosUpdate).getTime() new Date(obj.lastPosUpdate).getTime()
], ],
"fillColor": markerConf?.circle, "fillColor": markerConf?.color,
"strokeColor": markerConf?.circle "strokeColor": markerConf?.color
} }
this.chartOptions.series[idx]["data"].push(patch) this.chartOptions.series[idx]["data"].push(patch)
} }
......
...@@ -6,7 +6,7 @@ import 'leaflet-arrowheads'; ...@@ -6,7 +6,7 @@ import 'leaflet-arrowheads';
import { IMqttMessage, MqttService } from 'ngx-mqtt'; import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { environment, getMarkerConfig} from 'src/environments/environment'; 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({ @Component({
...@@ -46,7 +46,7 @@ export class MapComponent implements OnInit { ...@@ -46,7 +46,7 @@ export class MapComponent implements OnInit {
let upd: PositionUpdate = <PositionUpdate>JSON.parse(message.payload.toString()) let upd: PositionUpdate = <PositionUpdate>JSON.parse(message.payload.toString())
upd.objects.forEach(obj => { upd.objects.forEach(obj => {
validateTypeObject(obj) validateTypeAgent(obj)
this.registerPoint(obj.id, obj) this.registerPoint(obj.id, obj)
}); });
} catch(e) { } catch(e) {
...@@ -73,14 +73,15 @@ export class MapComponent implements OnInit { ...@@ -73,14 +73,15 @@ export class MapComponent implements OnInit {
registerPoint(key: string, desc: { [key: string]: any }) { registerPoint(key: string, desc: { [key: string]: any }) {
// --- Leyers for markers // --- Leyers for markers
if (key in this.markOverlays) { if (key in this.markOverlays) {
console.log(this.markOverlays)
this.markOverlays[key].clearLayers(); this.markOverlays[key].clearLayers();
} else { } else {
this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map) this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
} }
// --- Info // --- Info
let pos = desc["position"]
this.agentsInfo[key] = desc this.agentsInfo[key] = desc
let pos = desc["position"]
var props = undefined var props = undefined
if (desc.extractedAttributes) { if (desc.extractedAttributes) {
...@@ -101,7 +102,7 @@ export class MapComponent implements OnInit { ...@@ -101,7 +102,7 @@ export class MapComponent implements OnInit {
// empty position // empty position
if (pos==undefined) { if (pos==undefined) {
console.log("Eroro: empty position.") console.log("Error: empty position.")
return return
} }
...@@ -109,7 +110,7 @@ export class MapComponent implements OnInit { ...@@ -109,7 +110,7 @@ export class MapComponent implements OnInit {
// empty point // empty point
if (Object.values(point).every((e)=>{e==undefined})) { if (Object.values(point).every((e)=>{e==undefined})) {
console.log("Eroro: empty point.") console.log("Error: empty point.")
return; return;
} }
...@@ -119,17 +120,25 @@ export class MapComponent implements OnInit { ...@@ -119,17 +120,25 @@ export class MapComponent implements OnInit {
var globPos = L.latLng([point.latitude, point.longitude]); var globPos = L.latLng([point.latitude, point.longitude]);
} }
// --- Marker if (key=="ROOT") {
let serialNum = Object.keys(this.markOverlays).length - 1 // because this point already exists // Root Marker
console.log(this.markOverlays) let marker = L.marker(globPos, {
console.log("serialNum ", serialNum) icon: L.icon({
var markerConf = getMarkerConfig(serialNum) iconSize: [40, 40],
iconAnchor: [21, 25],
iconUrl: `assets/marker-ball-pink.png`,
className: 'true-position-marker'
})
}).bindPopup(popup).openPopup();
marker.addTo(this.markOverlays[key])
// if (key in MarkerColorMap) { } else {
// var markerConf = MarkerColorMap[key] // --- Marker config
// } else { let serialNum = Object.keys(this.markOverlays).indexOf(key)
// var markerConf = MarkerColorMap['Default'] // if (serialNum == 0 && Object.keys(this.markOverlays).length > 1) {
// serialNum = 1
// } // }
var markerConf = getMarkerConfig(serialNum)
let marker = L.marker(globPos, { let marker = L.marker(globPos, {
icon: L.icon({ icon: L.icon({
...@@ -145,7 +154,7 @@ export class MapComponent implements OnInit { ...@@ -145,7 +154,7 @@ export class MapComponent implements OnInit {
// --- Accuracy // --- Accuracy
if (pos?.accuracy) { if (pos?.accuracy) {
L.circle(globPos, pos.accuracy, { color: markerConf.circle} L.circle(globPos, pos.accuracy, { color: markerConf.color}
).addTo(this.markOverlays[key]); ).addTo(this.markOverlays[key]);
} }
...@@ -159,10 +168,10 @@ export class MapComponent implements OnInit { ...@@ -159,10 +168,10 @@ export class MapComponent implements OnInit {
let globPointOrient = this.ref2root(orient) let globPointOrient = this.ref2root(orient)
// add arrow // add arrow
var arrow = L.polyline([globPos, globPointOrient], {color: 'grey'}).arrowheads( var arrow = L.polyline([globPos, globPointOrient], {color: markerConf.color}).arrowheads(
{ {
fill: true, fill: true,
color: 'grey' color: markerConf.color
} }
); );
arrow.addTo(this.markOverlays[key]) arrow.addTo(this.markOverlays[key])
...@@ -170,6 +179,8 @@ export class MapComponent implements OnInit { ...@@ -170,6 +179,8 @@ export class MapComponent implements OnInit {
} }
} }
}
// @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/ // @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
// --- Layers: Define base layers so we can reference them multiple times // --- Layers: Define base layers so we can reference them multiple times
streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
<mat-icon aria-hidden="false" aria-label="Agent">people</mat-icon> Agent <mat-icon aria-hidden="false" aria-label="Agent">people</mat-icon> Agent
</th> </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> </ng-container>
<!-- Type --> <!-- Type -->
......
import { Component, OnInit, ViewChild } from '@angular/core'; 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 { IMqttMessage, MqttService } from 'ngx-mqtt';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { MatTable } from '@angular/material/table'; import { MatTable } from '@angular/material/table';
import { getMarkerConfig} from 'src/environments/environment';
@Component({ @Component({
selector: 'app-table', selector: 'app-table',
...@@ -39,10 +40,19 @@ export class TableComponent implements OnInit { ...@@ -39,10 +40,19 @@ export class TableComponent implements OnInit {
let upd: PositionUpdate = JSON.parse(message.payload.toString()) let upd: PositionUpdate = JSON.parse(message.payload.toString())
// upd.objects.forEach(obj => validateTypeObject(obj)); // upd.objects.forEach(obj => validateTypeObject(obj));
this.dataSource.push(...upd.objects); 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(); this.table?.renderRows();
} catch(e) { } catch(e) {
console.log(e) console.log(e)
} }
// console.log(this.dataSource)
}); });
} }
......
export interface PositionUpdate { export interface PositionUpdate {
objects: Object[] objects: Agent[]
type: NotificationType type: NotificationType
} }
export interface Object { export interface Agent {
id: string id: string
sensorId: string sensorId: string
type: ObjectType type: ObjectType
...@@ -77,9 +77,9 @@ export function validateTypePosition(obj: any) { ...@@ -77,9 +77,9 @@ export function validateTypePosition(obj: any) {
} }
} }
export function validateTypeObject(obj: any) { export function validateTypeAgent(obj: any) {
if (!isObject(obj)) { if (!isAgent(obj)) {
throw new TypeError("Unvalid Object: " + Object.keys(obj)) throw new TypeError("Unvalid Agent: " + Object.keys(obj))
} }
} }
...@@ -101,7 +101,7 @@ export function isPosition(obj: any): obj is Position { ...@@ -101,7 +101,7 @@ export function isPosition(obj: any): obj is Position {
&& Object.prototype.hasOwnProperty.call(obj, "refSystemId") && 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 return "id" in obj
&& "type" in obj && "type" in obj
&& "sensorId" in obj && "sensorId" in obj
......
src/assets/marker-ball-pink.png

17.1 KiB

...@@ -36,26 +36,30 @@ export const MQTTconfig: IMqttServiceOptions = { ...@@ -36,26 +36,30 @@ export const MQTTconfig: IMqttServiceOptions = {
// }; // };
export const MarkerColorList: MarkerColor[] = [ export const MarkerColorList: MarkerColor[] = [
{"marker": "red", "circle": "#d32f2f"}, {"marker": "red", "color": "#d32f2f"},
{"marker": "green", "circle": "#008632"}, {"marker": "green", "color": "#008632"},
{"marker": "blue", "circle": "#0076EE"}, {"marker": "blue", "color": "#0076EE"},
{"marker": "violet", "circle": "#9700ee"}, {"marker": "violet", "color": "#9700ee"},
{"marker": "yellow", "circle": "#eee600"}, {"marker": "yellow", "color": "#eee600"},
{"marker": "grey", "circle": "#606060"}, {"marker": "grey", "color": "#606060"},
] ]
interface MarkerColor { interface MarkerColor {
marker: string marker: string
circle: string color: string
} }
export function getMarkerConfig(counter: number) { export function getMarkerConfig(counter: number) {
let idx = counter
if (counter < 0) {
counter = 0
}
if (MarkerColorList.length <= counter) { if (MarkerColorList.length <= counter) {
idx = counter - MarkerColorList.length counter = counter - MarkerColorList.length
} }
return MarkerColorList[idx]
return MarkerColorList[counter]
} }
/* /*
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment