+
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..3257987f4a 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,9 @@
///
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 +117,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 +152,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
// Highlights settings
highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]],
- highlights: this.prepareHighlightsFormArray(settings.highlights),
+ highlights: [settings.highlights, []],
// Animation settings
animation: [settings.animation, []],
@@ -170,13 +173,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 +190,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 +205,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 +217,17 @@ 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();
- }
-
- 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);
+ 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;
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
deleted file mode 100644
index f92edfcde5..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
-
-
-
{{ highlightRangeText() }}
-
-
-
-
-
-
-
-
-
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss
deleted file mode 100644
index 8b61fb7e3d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright © 2016-2023 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
- display: block;
- .mat-expansion-panel {
- box-shadow: none;
- &.gauge-highlight {
- border: 1px groove rgba(0, 0, 0, .25);
- .mat-expansion-panel-header {
- padding: 0 24px 0 8px;
- &.mat-expanded {
- height: 48px;
- }
- }
- }
- }
-}
-
-:host ::ng-deep {
- .mat-expansion-panel {
- &.gauge-highlight {
- .mat-expansion-panel-body {
- padding: 0 8px 8px;
- }
- }
- }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
deleted file mode 100644
index e5c1ec9fbc..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-///
-/// Copyright © 2016-2023 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-/// http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { PageComponent } from '@shared/components/page.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { TranslateService } from '@ngx-translate/core';
-import { isNumber } from '@core/utils';
-
-export interface GaugeHighlight {
- from: number;
- to: number;
- color: string;
-}
-
-@Component({
- selector: 'tb-gauge-highlight',
- templateUrl: './gauge-highlight.component.html',
- styleUrls: ['./gauge-highlight.component.scss'],
- providers: [
- {
- provide: NG_VALUE_ACCESSOR,
- useExisting: forwardRef(() => GaugeHighlightComponent),
- multi: true
- }
- ]
-})
-export class GaugeHighlightComponent extends PageComponent implements OnInit, ControlValueAccessor {
-
- @Input()
- disabled: boolean;
-
- @Input()
- expanded = false;
-
- @Output()
- removeHighlight = new EventEmitter();
-
- private modelValue: GaugeHighlight;
-
- private propagateChange = null;
-
- public gaugeHighlightFormGroup: UntypedFormGroup;
-
- constructor(protected store: Store,
- private translate: TranslateService,
- private fb: UntypedFormBuilder) {
- super(store);
- }
-
- ngOnInit(): void {
- this.gaugeHighlightFormGroup = this.fb.group({
- from: [null, []],
- to: [null, []],
- color: [null, []]
- });
- this.gaugeHighlightFormGroup.valueChanges.subscribe(() => {
- this.updateModel();
- });
- }
-
- registerOnChange(fn: any): void {
- this.propagateChange = fn;
- }
-
- registerOnTouched(fn: any): void {
- }
-
- setDisabledState(isDisabled: boolean): void {
- this.disabled = isDisabled;
- if (isDisabled) {
- this.gaugeHighlightFormGroup.disable({emitEvent: false});
- } else {
- this.gaugeHighlightFormGroup.enable({emitEvent: false});
- }
- }
-
- writeValue(value: GaugeHighlight): void {
- this.modelValue = value;
- this.gaugeHighlightFormGroup.patchValue(
- value, {emitEvent: false}
- );
- }
-
- highlightRangeText(): string {
- const value: GaugeHighlight = this.gaugeHighlightFormGroup.value;
- const from = isNumber(value.from) ? value.from : 0;
- const to = isNumber(value.to) ? value.to : 0;
- return `${from} - ${to}`;
- }
-
- private updateModel() {
- const value: GaugeHighlight = this.gaugeHighlightFormGroup.value;
- this.modelValue = value;
- if (this.gaugeHighlightFormGroup.valid) {
- this.propagateChange(this.modelValue);
- } else {
- this.propagateChange(null);
- }
- }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
index 93749fadb5..2366bd0321 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
@@ -58,7 +58,6 @@ import {
import {
AlarmsTableKeySettingsComponent
} from '@home/components/widget/lib/settings/alarm/alarms-table-key-settings.component';
-import { GaugeHighlightComponent } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
import {
AnalogueRadialGaugeWidgetSettingsComponent
} from '@home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component';
@@ -321,7 +320,6 @@ import {
EntitiesTableKeySettingsComponent,
AlarmsTableWidgetSettingsComponent,
AlarmsTableKeySettingsComponent,
- GaugeHighlightComponent,
AnalogueRadialGaugeWidgetSettingsComponent,
AnalogueLinearGaugeWidgetSettingsComponent,
AnalogueCompassWidgetSettingsComponent,
@@ -438,7 +436,6 @@ import {
EntitiesTableKeySettingsComponent,
AlarmsTableWidgetSettingsComponent,
AlarmsTableKeySettingsComponent,
- GaugeHighlightComponent,
AnalogueRadialGaugeWidgetSettingsComponent,
AnalogueLinearGaugeWidgetSettingsComponent,
AnalogueCompassWidgetSettingsComponent,
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 001db8a505..fbd324666d 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5008,6 +5008,7 @@
"title-icon": "Title icon",
"display-icon": "Display title icon",
"card-icon": "Card icon",
+ "icon": "Icon",
"icon-color": "Icon color",
"icon-size": "Icon size",
"advanced-settings": "Advanced settings",
@@ -5354,10 +5355,14 @@
"ticks-settings": "Ticks settings",
"min-value": "Minimum value",
"max-value": "Maximum value",
+ "min-value-short": "min",
+ "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",
@@ -5369,21 +5374,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",
@@ -5393,7 +5406,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",
@@ -5408,17 +5422,21 @@
"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",
+ "progress-bar-color-start": "Progress bar color - start gradient",
"progress-bar-color-end": "Progress bar color - end gradient",
"major-ticks-names": "Major ticks names",
"show-stroke-ticks": "Show ticks stroke",
"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",
@@ -5462,7 +5480,18 @@
"tick-color": "Tick color",
"tick-values": "Tick values",
"no-tick-values": "No tick values configured",
- "add-tick-value": "Add tick value"
+ "add-tick-value": "Add tick value",
+ "gauge-appearance": "Gauge appearance",
+ "units-title": "Units title",
+ "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",
+ "label-style": "Label style"
},
"gpio": {
"pin": "Pin",