support cardinal directions; style improvements

This commit is contained in:
Will Freeman
2025-03-18 20:41:17 -06:00
parent e97524f1b8
commit fd1a722b9e
2 changed files with 56 additions and 25 deletions
+41 -24
View File
@@ -2,39 +2,50 @@
<v-sheet min-width="240">
<v-list density="compact">
<v-list-item v-if="isFaceRecognition">
<v-icon start>mdi-face-recognition</v-icon> <b>Face Recognition</b>
<div class="d-flex align-center">
<v-icon start>mdi-face-recognition</v-icon> <b>Face Recognition</b>
</div>
</v-list-item>
<v-list-item>
<v-icon start>mdi-cctv</v-icon> <b>License Plate Reader</b>
<div class="d-flex align-center">
<v-icon start>mdi-cctv</v-icon> <b>License Plate Reader</b>
</div>
</v-list-item>
<v-list-item v-if="isFaceRecognition">
<v-icon start>mdi-adjust</v-icon> <b>Omnidirectional</b>
</v-list-item>
<v-list-item v-else>
<v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
<div class="d-flex align-center">
<v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
</div>
</v-list-item>
<v-list-item>
<v-icon start>mdi-domain</v-icon> <b>
<span v-if="alpr.tags.manufacturer">
{{ alpr.tags.manufacturer }}
</span>
<span v-else-if="alpr.tags.brand">
{{ alpr.tags.brand }}
</span>
<span v-else>
Unspecified Manufacturer
</span>
</b>
<div class="d-flex align-center">
<v-icon start>mdi-domain</v-icon> <b>
<span v-if="alpr.tags.manufacturer">
{{ alpr.tags.manufacturer }}
</span>
<span v-else-if="alpr.tags.brand">
{{ alpr.tags.brand }}
</span>
<span v-else>
Unspecified Manufacturer
</span>
</b>
</div>
</v-list-item>
<v-list-item>
<v-icon start>mdi-account-tie</v-icon> <b>
<span v-if="alpr.tags.operator">
{{ alpr.tags.operator }}
</span>
<span v-else>
Unspecified Operator
</span>
</b>
<div class="d-flex align-center">
<v-icon start>mdi-account-tie</v-icon>
<b>
<span v-if="alpr.tags.operator">
{{ alpr.tags.operator }}
</span>
<span v-else>
Unspecified Operator
</span>
</b>
</div>
</v-list-item>
</v-list>
@@ -61,12 +72,18 @@ const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
const cardinalDirection = computed(() => {
const direction = props.alpr.tags.direction || props.alpr.tags["camera:direction"];
return direction === undefined ? 'Unspecified Direction' : degreesToCardinal(parseInt(direction))
if (direction === undefined) {
return 'Unspecified Direction';
} else if (direction.includes(';')) {
return 'Faces Multiple Directions';
} else {
return /^\d+$/.test(direction) ? degreesToCardinal(parseInt(direction)) : direction;
}
}
);
function degreesToCardinal(degrees: number): string {
const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
const cardinals = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NE'];
return 'Faces ' + cardinals[Math.round(degrees / 45) % 8];
}
+15 -1
View File
@@ -58,7 +58,7 @@ let currentLocationLayer: FeatureGroup;
function createSVGMarkers(alpr: ALPR): string {
const orientationValues = (alpr.tags.direction || alpr.tags['camera:direction'] || '')
.split(';')
.map(val => val.trim());
.map(val => /^\d+$/.test(val) ? parseInt(val) : cardinalToDegrees(val.trim()));
const fovPath = `
<path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
@@ -80,6 +80,20 @@ function createSVGMarkers(alpr: ALPR): string {
`;
}
function cardinalToDegrees(cardinal: string): number {
const cardinalMap: Record<string, number> = {
N: 0,
NE: 45,
E: 90,
SE: 135,
S: 180,
SW: 225,
W: 270,
NW: 315,
};
return cardinalMap[cardinal] ?? cardinal;
}
function createMarker(alpr: ALPR): Marker | CircleMarker {
if (hasPlottableOrientation(alpr.tags.direction || alpr.tags['camera:direction'])) {
const icon = L.divIcon({