From 9108afa46e51e40c0c2d4549b05042782d08932d Mon Sep 17 00:00:00 2001
From: panaaj <38519157+panaaj@users.noreply.github.com>
Date: Sun, 28 Jul 2024 16:44:26 +0930
Subject: [PATCH] scale AIS and AtoN icons
---
src/app/modules/map/mapconfig.ts | 37 ++++++++++++------
.../map/popovers/aton-popover.component.ts | 1 +
.../popovers/compass-northup.component.svg | 10 ++---
.../modules/map/popovers/compass.component.ts | 38 +++++++------------
4 files changed, 45 insertions(+), 41 deletions(-)
diff --git a/src/app/modules/map/mapconfig.ts b/src/app/modules/map/mapconfig.ts
index 3f935f6c..684f89c9 100644
--- a/src/app/modules/map/mapconfig.ts
+++ b/src/app/modules/map/mapconfig.ts
@@ -275,15 +275,18 @@ export const destinationStyles = {
})
};
+const aisScale = 1.3;
const aisActive = new Icon({
src: './assets/img/ais_active.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const aisInactive = new Icon({
src: './assets/img/ais_inactive.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const aisFocus = new Icon({
src: './assets/img/ais_self.png',
@@ -298,37 +301,44 @@ const aisFocus = new Icon({
const ais40 = new Icon({
src: './assets/img/ais_highspeed.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const ais50 = new Icon({
src: './assets/img/ais_special.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const ais60 = new Icon({
src: './assets/img/ais_passenger.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const ais70 = new Icon({
src: './assets/img/ais_cargo.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const ais80 = new Icon({
src: './assets/img/ais_tanker.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const ais90 = new Icon({
src: './assets/img/ais_other.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
const aisBuddy = new Icon({
src: './assets/img/ais_buddy.png',
rotateWithView: true,
- rotation: 0
+ rotation: 0,
+ scale: aisScale
});
export const aisVesselStyles = {
@@ -552,7 +562,8 @@ export const atonStyles = {
rotation: 0,
anchor: [12.5, 12.5],
anchorXUnits: 'pixels',
- anchorYUnits: 'pixels'
+ anchorYUnits: 'pixels',
+ scale: 0.75
}),
text: new Text({
text: '',
@@ -570,7 +581,8 @@ export const basestationStyles = {
rotation: 0,
anchor: [12.5, 14.5],
anchorXUnits: 'pixels',
- anchorYUnits: 'pixels'
+ anchorYUnits: 'pixels',
+ scale: 0.75
}),
text: new Text({
text: '',
@@ -628,7 +640,8 @@ export const meteoStyles = {
size: [35, 25],
anchor: [1, 25],
anchorXUnits: 'pixels',
- anchorYUnits: 'pixels'
+ anchorYUnits: 'pixels',
+ scale: 0.75
}),
text: new Text({
text: '',
diff --git a/src/app/modules/map/popovers/aton-popover.component.ts b/src/app/modules/map/popovers/aton-popover.component.ts
index 3cb07fe0..cbd798f3 100644
--- a/src/app/modules/map/popovers/aton-popover.component.ts
+++ b/src/app/modules/map/popovers/aton-popover.component.ts
@@ -76,6 +76,7 @@ import { Convert } from 'src/app/lib/convert';
[heading]="convert.radiansToDegrees(aton.twd)"
[speed]="app.formatSpeed(aton.tws)"
[label]="app.formattedSpeedUnits"
+ [windtrue]="true"
>
diff --git a/src/app/modules/map/popovers/compass-northup.component.svg b/src/app/modules/map/popovers/compass-northup.component.svg
index 39af2650..65f42c13 100644
--- a/src/app/modules/map/popovers/compass-northup.component.svg
+++ b/src/app/modules/map/popovers/compass-northup.component.svg
@@ -124,14 +124,14 @@
}
.compass_nup #hiPointer {
- fill:#FF0000;
- fill-opacity:0.8;
+ fill:olive;
+ fill-opacity:1;
display: block;
}
.compass_nup #loPointer {
- fill:#0088FF;
- fill-opacity:0.8;
+ fill: rgb(16, 75, 16);
+ fill-opacity:1;
display: block;
}
@@ -577,7 +577,7 @@
-
+
diff --git a/src/app/modules/map/popovers/compass.component.ts b/src/app/modules/map/popovers/compass.component.ts
index 19498ccc..284cacd0 100644
--- a/src/app/modules/map/popovers/compass.component.ts
+++ b/src/app/modules/map/popovers/compass.component.ts
@@ -256,8 +256,8 @@ export class NorthUpCompassComponent extends SvgDialBase {
@Input() label = '';
@Input() speed: number | undefined;
@Input() heading: number | undefined;
- @Input() windtrue: number | undefined;
- @Input() windapparent: number | undefined;
+ @Input() windtrue: boolean;
+ @Input() windapparent: boolean;
@ViewChild('labeltext', { static: true }) labeltext: ElementRef;
@ViewChild('headingtext', { static: true }) headingtext: ElementRef;
@ViewChild('speedtext', { static: true }) speedtext: ElementRef;
@@ -296,10 +296,10 @@ export class NorthUpCompassComponent extends SvgDialBase {
updateDial(changes?: SimpleChanges) {
const d = {
- heading: null,
- windtrue: null,
- windapparent: null,
+ windtrue: false,
+ windapparent: false,
label: null,
+ heading: null,
speed: null
};
d.heading =
@@ -308,14 +308,6 @@ export class NorthUpCompassComponent extends SvgDialBase {
: this.heading;
d.speed =
changes && changes['speed'] ? changes['speed'].currentValue : this.speed;
- d.windtrue =
- changes && changes['windtrue']
- ? changes['windtrue'].currentValue
- : this.windtrue;
- d.windapparent =
- changes && changes['windapparent']
- ? changes['windapparent'].currentValue
- : this.windapparent;
d.label =
changes && changes['label'] ? changes['label'].currentValue : this.label;
@@ -337,8 +329,11 @@ export class NorthUpCompassComponent extends SvgDialBase {
const rHeading = this.renderValue(d.heading, 0);
const rAngle = rHeading === '--' ? this.minValue : d.heading;
- this.showPointer = rHeading === '--' ? false : true;
+ this.showPointer =
+ (rHeading === '--' ? false : true) &&
+ !this.windtrue &&
+ !this.windapparent;
if (this.pointer && this.pointer.nativeElement) {
this.renderer.setAttribute(
this.pointer.nativeElement,
@@ -354,27 +349,22 @@ export class NorthUpCompassComponent extends SvgDialBase {
);
}
- const rWindTrue = this.renderValue(d.windtrue, 0);
- const rTAngle = rWindTrue === '--' ? this.minValue : d.windtrue;
- this.showWindTrue = rWindTrue === '--' ? false : true;
-
+ this.showWindTrue = (rHeading === '--' ? false : true) && this.windtrue;
if (this.needlehi && this.needlehi.nativeElement) {
this.renderer.setAttribute(
this.needlehi.nativeElement,
'transform',
- 'rotate(' + this.getAngle(rTAngle) + ' 100 100)'
+ 'rotate(' + this.getAngle(rAngle) + ' 100 100)'
);
}
- const rWindApp = this.renderValue(d.windapparent, 0);
- const rAAngle = rWindApp === '--' ? this.minValue : d.windapparent;
- this.showWindApparent = rWindApp === '--' ? false : true;
-
+ this.showWindApparent =
+ (rHeading === '--' ? false : true) && this.windapparent && !this.windtrue;
if (this.needlehi && this.needlehi.nativeElement) {
this.renderer.setAttribute(
this.needlelo.nativeElement,
'transform',
- 'rotate(' + this.getAngle(rAAngle) + ' 100 100)'
+ 'rotate(' + this.getAngle(rAngle) + ' 100 100)'
);
}
}