+
widgets.gauge.needle-settings
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
index 07f2be69bd..b2bc6621a1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
@@ -15,11 +15,10 @@
///
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
-import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent {
@@ -119,19 +118,24 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
minorTicks: [settings.majorTicksCount, [Validators.min(0)]],
colorMinorTicks: [settings.colorMinorTicks, []],
numbersFont: [settings.numbersFont, []],
+ numbersColor: [settings.numbersFont.color, []],
// Unit title settings
showUnitTitle: [settings.showUnitTitle, []],
unitTitle: [settings.unitTitle, []],
titleFont: [settings.titleFont, []],
+ titleColor: [settings.titleFont.color, []],
// Units settings
unitsFont: [settings.unitsFont, []],
+ unitsColor: [settings.unitsFont.color, []],
// Value box settings
valueBox: [settings.valueBox, []],
valueInt: [settings.valueInt, [Validators.min(0)]],
valueFont: [settings.valueFont, []],
+ valueColor: [settings.valueFont.color, []],
+ valueColorShadow: [settings.valueFont.shadowColor, []],
colorValueBoxRect: [settings.colorValueBoxRect, []],
colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []],
colorValueBoxBackground: [settings.colorValueBoxBackground, []],
@@ -149,7 +153,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
// Highlights settings
highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]],
- highlights: this.prepareHighlightsFormArray(settings.highlights),
+ highlights: this.prepareHighlights(settings.highlights),
// Animation settings
animation: [settings.animation, []],
@@ -170,13 +174,16 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
if (showUnitTitle) {
this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable();
this.analogueGaugeWidgetSettingsForm.get('titleFont').enable();
+ this.analogueGaugeWidgetSettingsForm.get('titleColor').enable();
} else {
this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable();
this.analogueGaugeWidgetSettingsForm.get('titleFont').disable();
+ this.analogueGaugeWidgetSettingsForm.get('titleColor').disable();
}
if (valueBox) {
this.analogueGaugeWidgetSettingsForm.get('valueInt').enable();
this.analogueGaugeWidgetSettingsForm.get('valueFont').enable();
+ this.analogueGaugeWidgetSettingsForm.get('valueColor').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable();
@@ -184,6 +191,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
} else {
this.analogueGaugeWidgetSettingsForm.get('valueInt').disable();
this.analogueGaugeWidgetSettingsForm.get('valueFont').disable();
+ this.analogueGaugeWidgetSettingsForm.get('valueColor').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable();
@@ -198,8 +206,10 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
}
this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent});
+ this.analogueGaugeWidgetSettingsForm.get('titleColor').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent});
+ this.analogueGaugeWidgetSettingsForm.get('valueColor').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent});
@@ -208,50 +218,21 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent});
}
- protected doUpdateSettings(settingsForm: UntypedFormGroup, settings: WidgetSettings) {
- settingsForm.setControl('highlights', this.prepareHighlightsFormArray(settings.highlights), {emitEvent: false});
- }
-
- private prepareHighlightsFormArray(highlights: GaugeHighlight[] | undefined): UntypedFormArray {
- const highlightsControls: Array
= [];
- if (highlights) {
- highlights.forEach((highlight) => {
- highlightsControls.push(this.fb.control(highlight, [Validators.required]));
- });
+ protected prepareOutputSettings(settings) {
+ settings.numbersFont.color = this.analogueGaugeWidgetSettingsForm.get('numbersColor').value;
+ if (settings.titleFont) {
+ settings.titleFont.color = this.analogueGaugeWidgetSettingsForm.get('titleColor').value;
}
- return this.fb.array(highlightsControls);
- }
-
- highlightsFormArray(): UntypedFormArray {
- return this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
- }
-
- public trackByHighlightControl(index: number, highlightControl: AbstractControl): any {
- return highlightControl;
- }
-
- public removeHighlight(index: number) {
- (this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray).removeAt(index);
- }
-
- public addHighlight() {
- const highlight: GaugeHighlight = {
- from: null,
- to: null,
- color: null
- };
- const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
- const highlightControl = this.fb.control(highlight, [Validators.required]);
- (highlightControl as any).new = true;
- highlightsArray.push(highlightControl);
- this.analogueGaugeWidgetSettingsForm.updateValueAndValidity();
+ settings.unitsFont.color = this.analogueGaugeWidgetSettingsForm.get('unitsColor').value;
+ if (settings.valueFont) {
+ settings.valueFont.color = this.analogueGaugeWidgetSettingsForm.get('valueColor').value;
+ settings.valueFont.shadowColor = this.analogueGaugeWidgetSettingsForm.get('valueColorShadow').value;
+ }
+ return settings;
}
- highlightDrop(event: CdkDragDrop) {
- const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
- const highlight = highlightsArray.at(event.previousIndex);
- highlightsArray.removeAt(event.previousIndex);
- highlightsArray.insert(event.currentIndex, highlight);
+ private prepareHighlights(highlights: GaugeHighlight[] | undefined) {
+ return {type: 'range', rangeList: highlights};
}
}
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 6605b31a47..fab1642201 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5362,8 +5362,10 @@
"max-value-short": "max",
"start-ticks-angle": "Start ticks angle",
"ticks-angle": "Ticks angle",
+ "major-ticks": "Major ticks",
"major-ticks-count": "Major ticks count",
"major-ticks-color": "Major ticks color",
+ "minor-ticks": "Minor ticks",
"minor-ticks-count": "Minor ticks count",
"minor-ticks-color": "Minor ticks color",
"tick-numbers-font": "Tick numbers font",
@@ -5375,21 +5377,29 @@
"units-font": "Units text font",
"value-box-settings": "Value box settings",
"show-value-box": "Show value box",
+ "value-box": "Value box",
"value-int": "Digits count for integer part of value",
+ "value-text": "Value text",
+ "value-text-shadow": "Value text shadow",
"value-font": "Value text font",
+ "rect-stroke-color-start": "Rectangle stroke color - start gradient",
+ "rect-stroke-color-end": "Rectangle stroke color - end gradient",
+ "background-color": "Background color",
+ "shadow-color": "Shadow color",
"value-box-rect-stroke-color": "Value box rectangle stroke color",
"value-box-rect-stroke-color-end": "Value box rectangle stroke color - end gradient",
"value-box-background-color": "Value box background color",
"value-box-shadow-color": "Value box shadow color",
"plate-settings": "Plate settings",
- "show-plate-border": "Show plate border",
+ "show-plate-border": "Plate border",
"plate-color": "Plate color",
"needle-settings": "Needle settings",
"needle-circle-size": "Needle circle size",
"needle-color": "Needle color",
+ "needle-color-start": "Needle color - start gradient",
"needle-color-end": "Needle color - end gradient",
"needle-color-shadow-up": "Upper half of the needle shadow color",
- "needle-color-shadow-down": "Drop shadow needle color",
+ "needle-color-shadow-down": "Drop shadow",
"highlights-settings": "Highlights settings",
"highlights-width": "Highlights width",
"highlights": "Highlights",
@@ -5399,7 +5409,8 @@
"no-highlights": "No highlights configured",
"add-highlight": "Add highlight",
"animation-settings": "Animation settings",
- "enable-animation": "Enable animation",
+ "enable-animation": "Animation",
+ "animation-duration-rule": "Animation duration and rule",
"animation-duration": "Animation duration",
"animation-rule": "Animation rule",
"animation-linear": "Linear",
@@ -5414,9 +5425,10 @@
"animation-debounce": "Debounce",
"animation-delastic": "Delastic",
"linear-gauge-settings": "Linear gauge settings",
+ "bar-stroke": "Bar stroke",
"bar-stroke-width": "Bar stroke width",
"bar-stroke-color": "Bar stroke color",
- "bar-background-color": "Gauge bar background color",
+ "bar-background-color": "Bar background color - start gradient",
"bar-background-color-end": "Bar background color - end gradient",
"progress-bar-color": "Progress bar color",
"progress-bar": "Progress bar",
@@ -5427,6 +5439,7 @@
"major-ticks-font": "Major ticks font",
"border-color": "Border color",
"border-width": "Border width",
+ "needle-circle": "Needle circle",
"needle-circle-color": "Needle circle color",
"animation-target": "Animation target",
"animation-target-needle": "Needle",
@@ -5476,6 +5489,8 @@
"value": "Value",
"ticks": "Ticks",
"arrow-and-scale-color": "Arrow and scale default color",
+ "scale-settings": "Scale settings",
+ "scale": "Scale",
"scale-color": "Scale colors",
"compass-appearance": "Compass appearance",
"labels": "Labels",