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

iterative marker color

parent 63690b40
No related branches found
No related tags found
No related merge requests found
...@@ -16,8 +16,8 @@ import { ...@@ -16,8 +16,8 @@ import {
ChartComponent ChartComponent
} from 'ng-apexcharts'; } from 'ng-apexcharts';
import { MarkerColorMap } from 'src/environments/environment'; import { getMarkerConfig } from 'src/environments/environment';
import {NotificationType, Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model'; import { Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
export type ChartOptions = { export type ChartOptions = {
series: ApexAxisChartSeries; series: ApexAxisChartSeries;
...@@ -99,10 +99,12 @@ export class ChartTimelineComponent implements OnInit { ...@@ -99,10 +99,12 @@ export class ChartTimelineComponent implements OnInit {
} }
// --- Marker // --- Marker
if (name in MarkerColorMap) { // if (name in MarkerColorMap) {
var markerConf = MarkerColorMap[name] // var markerConf = MarkerColorMap[name]
this.chartOptions.series[idx]["color"] = markerConf?.circle // this.chartOptions.series[idx]["color"] = markerConf?.circle
} // }
var markerConf = getMarkerConfig(idx+1) // 0 is root
this.chartOptions.series[idx]["color"] = markerConf?.circle
// --- Add new data // --- Add new data
obj.zoneDescriptors.forEach(zone => { obj.zoneDescriptors.forEach(zone => {
......
...@@ -5,7 +5,7 @@ import * as L from "leaflet"; ...@@ -5,7 +5,7 @@ import * as L from "leaflet";
import 'leaflet-arrowheads'; import 'leaflet-arrowheads';
import { IMqttMessage, MqttService } from 'ngx-mqtt'; import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { environment, MarkerColorMap } 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, validateTypeObject} from 'src/app/model/base-model';
...@@ -94,10 +94,6 @@ export class MapComponent implements OnInit { ...@@ -94,10 +94,6 @@ export class MapComponent implements OnInit {
props = `<p><h3>${key}</h3></p>` props = `<p><h3>${key}</h3></p>`
} }
// Rotaion
let quter = desc.orientation
this.addMarker(key, pos, props, desc.extractedAttributes?.theta) this.addMarker(key, pos, props, desc.extractedAttributes?.theta)
} }
...@@ -122,13 +118,18 @@ export class MapComponent implements OnInit { ...@@ -122,13 +118,18 @@ export class MapComponent implements OnInit {
} else { } else {
var globPos = L.latLng([point.latitude, point.longitude]); var globPos = L.latLng([point.latitude, point.longitude]);
} }
// --- Marker // --- Marker
if (key in MarkerColorMap) { let serialNum = Object.keys(this.markOverlays).length - 1 // because this point already exists
var markerConf = MarkerColorMap[key] console.log(this.markOverlays)
} else { console.log("serialNum ", serialNum)
var markerConf = MarkerColorMap['Default'] var markerConf = getMarkerConfig(serialNum)
}
// if (key in MarkerColorMap) {
// var markerConf = MarkerColorMap[key]
// } else {
// var markerConf = MarkerColorMap['Default']
// }
let marker = L.marker(globPos, { let marker = L.marker(globPos, {
icon: L.icon({ icon: L.icon({
......
...@@ -44,11 +44,38 @@ ...@@ -44,11 +44,38 @@
</th> </th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span *ngFor="let dim of (element.position.point | keyvalue)"> <span *ngFor="let dim of (element.position.point | keyvalue)">
{{dim.key}}: {{dim.value}} {{dim.key}}: {{dim.value}} <br>
</span>
<span *ngIf="element?.extractedAttributes">
theta: {{element?.extractedAttributes?.theta}}
</span> </span>
</td> </td>
</ng-container> </ng-container>
<!-- Battery -->
<ng-container matColumnDef="battery">
<th mat-header-cell *matHeaderCellDef>
<mat-icon aria-hidden="false" aria-label="battery">battery_5_bar</mat-icon> <br> Battery
</th>
<td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.batteryChargeLevel}}%</td>
</ng-container>
<!-- Items -->
<ng-container matColumnDef="loadedItems">
<th mat-header-cell *matHeaderCellDef>
<mat-icon aria-hidden="false" aria-label="items">feed</mat-icon> Items
</th>
<td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.loadedItems}}</td>
</ng-container>
<!-- Errors -->
<ng-container matColumnDef="errors">
<th mat-header-cell *matHeaderCellDef>
<mat-icon aria-hidden="false" aria-label="errors">error</mat-icon> Errors
</th>
<td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.errors}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
......
...@@ -18,7 +18,7 @@ export class TableComponent implements OnInit { ...@@ -18,7 +18,7 @@ export class TableComponent implements OnInit {
private subsPosition: Subscription; private subsPosition: Subscription;
displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position']; displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position', 'battery', 'loadedItems', 'errors'];
// testMessages: PositionUpdate[] = [ // testMessages: PositionUpdate[] = [
...@@ -37,7 +37,7 @@ export class TableComponent implements OnInit { ...@@ -37,7 +37,7 @@ export class TableComponent implements OnInit {
this.subsPosition = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => { this.subsPosition = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => {
try { try {
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);
this.table?.renderRows(); this.table?.renderRows();
} catch(e) { } catch(e) {
......
...@@ -73,13 +73,12 @@ interface ExtAttribute { ...@@ -73,13 +73,12 @@ interface ExtAttribute {
export function validateTypePosition(obj: any) { export function validateTypePosition(obj: any) {
if (!isPosition(obj)) { if (!isPosition(obj)) {
throw new TypeError("Object is not Position") throw new TypeError("Unvalid Position")
} }
} }
export function validateTypeObject(obj: any) { export function validateTypeObject(obj: any) {
if (!isObject(obj)) { if (!isObject(obj)) {
console.log(obj)
throw new TypeError("Unvalid Object: " + Object.keys(obj)) throw new TypeError("Unvalid Object: " + Object.keys(obj))
} }
} }
......
...@@ -35,20 +35,28 @@ export const MQTTconfig: IMqttServiceOptions = { ...@@ -35,20 +35,28 @@ export const MQTTconfig: IMqttServiceOptions = {
// path: '/mqtt' // path: '/mqtt'
// }; // };
export const MarkerColorMap: { [key: string]: MarkerColor } = { export const MarkerColorList: MarkerColor[] = [
"ROOT": {"marker": "red", "circle": "#d32f2f"}, {"marker": "red", "circle": "#d32f2f"},
"Employee1": {"marker": "green", "circle": "#008632"}, {"marker": "green", "circle": "#008632"},
"Employee2": {"marker": "blue", "circle": "#0076EE"}, {"marker": "blue", "circle": "#0076EE"},
"Employee3": {"marker": "violet", "circle": "#9700ee"}, {"marker": "violet", "circle": "#9700ee"},
"Employee4": {"marker": "yellow", "circle": "#eee600"}, {"marker": "yellow", "circle": "#eee600"},
"Default": {"marker": "grey", "circle": "#606060"}, {"marker": "grey", "circle": "#606060"},
} ]
interface MarkerColor { interface MarkerColor {
marker: string marker: string
circle: string circle: string
} }
export function getMarkerConfig(counter: number) {
let idx = counter
if (MarkerColorList.length <= counter) {
idx = counter - MarkerColorList.length
}
return MarkerColorList[idx]
}
/* /*
* For easier debugging in development mode, you can import the following file * For easier debugging in development mode, you can import the following file
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment