;
+ const jQueryContainerElement = $(this.liquidLevelContent.nativeElement);
+ let value = 'N/A';
+
+ if (isNumeric(data)) {
+ value = convertLiters(this.convertOutputData(percentage), this.widgetUnits as CapacityUnits, ConversionType.from)
+ .toFixed(this.settings.decimals || 0);
+ }
+ this.valueColor.update(value);
+ const valueTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.valueFont),
+ color: this.valueColor.color});
+ this.backgroundOverlayColor.update(percentage);
+ if (this.overlayContainer) {
+ this.overlayContainer.attr('fill', this.backgroundOverlayColor.color);
+ }
+
+ if (this.settings.layout === LevelCardLayout.absolute) {
+ const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to);
+ const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)
+ .toFixed(this.settings.decimals || 0);
+
+ const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont),
+ color: this.settings.volumeColor});
+
+ container = jQueryContainerElement.find('.absolute-value-container');
+ content = createAbsoluteLayout({inputValue: value, volume},
+ {valueStyle: valueTextStyle, volumeStyle: volumeTextStyle}, this.widgetUnits);
+
+ } else if (this.settings.layout === LevelCardLayout.percentage) {
+ container = jQueryContainerElement.find('.percentage-value-container');
+ content = createPercentLayout(value, valueTextStyle);
+ }
+
+ if (content && container) {
+ container.html(content);
+ }
+ }
+
+ private getTooltipContent(value?: [number, any]): string {
+ const contentValue = value || [0, ''];
+ let tooltipValue: string | number = 'N/A';
+
+ if (isNumeric(contentValue[1])) {
+ tooltipValue = this.convertTooltipData(contentValue[1]);
+ }
+
+ this.tooltipLevelColor.update(tooltipValue);
+ this.tooltipDateFormat.update(contentValue[0]);
+
+ const levelTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.tooltipLevelFont),
+ color: this.tooltipLevelColor.color});
+
+ const dateTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.tooltipDateFont),
+ color: this.settings.tooltipDateColor, overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap'});
+
+ let content = ``;
+
+ if (this.settings.showTooltipLevel) {
+ const levelValue = typeof tooltipValue == 'number'
+ ? `${tooltipValue.toFixed(this.settings.tooltipLevelDecimals)} ${this.settings.tooltipUnits}`
+ : 'N/A';
+ content += this.createTooltipContent(
+ this.ctx.translate.instant('widgets.liquid-level-card.level'),
+ levelValue,
+ levelTextStyle
+ );
+ }
+
+ if (this.settings.showTooltipDate) {
+ content += this.createTooltipContent(
+ this.ctx.translate.instant('widgets.liquid-level-card.last-update'),
+ this.tooltipDateFormat.formatted,
+ dateTextStyle
+ );
+ }
+
+ content += '
';
+
+ return content;
+ }
+
+ private createTooltipContent(labelText: string, contentValue: string, textStyle: string): string {
+ return `
+
+
+
`;
+ }
+
+ private convertInputData(value: number): number {
+ if (this.settings.datasourceUnits !== CapacityUnits.percent) {
+ return (convertLiters(value, this.settings.datasourceUnits, ConversionType.to) /
+ convertLiters(this.volume, this.settings.volumeUnits, ConversionType.to)) * 100;
+ }
+
+ return value;
+ }
+
+ private convertOutputData(value: number): number {
+ if (this.widgetUnits !== CapacityUnits.percent) {
+ return convertLiters(this.volume * (value / 100), this.settings.volumeUnits, ConversionType.to);
+ }
+
+ return value;
+ }
+
+ private convertTooltipData(value: number): number {
+ const percentage = this.convertInputData(value);
+ if (this.settings.tooltipUnits !== CapacityUnits.percent) {
+ const liters = this.convertOutputData(percentage);
+
+ return convertLiters(liters, this.settings.tooltipUnits, ConversionType.from);
+ } else {
+ return percentage;
+ }
+ }
+
+ public cardClick($event: Event) {
+ this.ctx.actionsApi.cardClick($event);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
new file mode 100644
index 0000000000..cf526d6c97
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
@@ -0,0 +1,623 @@
+///
+/// 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 {
+ BackgroundSettings,
+ BackgroundType,
+ ColorSettings,
+ constantColor,
+ cssTextFromInlineStyle,
+ DateFormatSettings,
+ Font,
+ lastUpdateAgoDateFormat
+} from '@shared/models/widget-settings.models';
+import { DataKey, WidgetConfig } from '@shared/models/widget.models';
+import { AttributeData, DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { forkJoin, Observable, of } from 'rxjs';
+import { singleEntityFilterFromDeviceId } from '@shared/models/query/query.models';
+import { EntityType } from '@shared/models/entity-type.models';
+import { catchError, map, mergeMap } from 'rxjs/operators';
+import { EntityService } from '@core/http/entity.service';
+import { IAliasController } from '@core/api/widget-api.models';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { ResourcesService } from '@core/services/resources.service';
+import { FormGroup } from '@angular/forms';
+
+export interface SvgInfo {
+ svg: string;
+ limits: SvgLimits;
+}
+
+export interface SvgLimits {
+ min: number;
+ max: number;
+}
+
+export interface LevelCardWidgetSettings extends WidgetConfig {
+ tankSelectionType: LiquidWidgetDataSourceType;
+ selectedShape: Shapes;
+ shapeAttributeName: string;
+ tankColor: ColorSettings;
+ datasourceUnits: CapacityUnits;
+ layout: LevelCardLayout;
+ volumeSource: LiquidWidgetDataSourceType;
+ volumeConstant: number;
+ volumeAttributeName: string;
+ volumeUnits: CapacityUnits;
+ volumeFont: Font;
+ volumeColor: string;
+ liquidColor: ColorSettings;
+ valueFont: Font;
+ widgetUnitsSource: LiquidWidgetDataSourceType;
+ widgetUnitsAttributeName: string;
+ valueColor: ColorSettings;
+ showBackgroundOverlay: boolean;
+ backgroundOverlayColor: ColorSettings;
+ showTooltip: boolean;
+ showTooltipLevel: boolean;
+ tooltipUnits: CapacityUnits;
+ tooltipLevelDecimals: number;
+ tooltipLevelFont: Font;
+ tooltipLevelColor: ColorSettings;
+ showTooltipDate: boolean;
+ tooltipDateFormat: DateFormatSettings;
+ tooltipDateFont: Font;
+ tooltipDateColor: string;
+ tooltipBackgroundColor: string;
+ tooltipBackgroundBlur: number;
+ background: BackgroundSettings;
+}
+
+export enum Shapes {
+ vOval = 'Vertical Oval',
+ vCylinder = 'Vertical Cylinder',
+ vCapsule = 'Vertical Capsule',
+ rectangle = 'Rectangle',
+ hOval = 'Horizontal Oval',
+ hEllipse = 'Horizontal Ellipse',
+ hDishEnds = 'Horizontal Dish Ends',
+ hCylinder = 'Horizontal Cylinder',
+ hCapsule = 'Horizontal Capsule',
+ hElliptical_2_1 = 'Horizontal 2:1 Elliptical'
+}
+
+export enum CapacityUnits {
+ percent = '%',
+ liters = 'L',
+ cubicMillimeter = 'mm³',
+ cubicCentimeter = 'cm³',
+ cubicMeter = 'm³',
+ cubicKilometer = 'km³',
+ milliliter = 'mL',
+ hectoliter = 'hl',
+ cubicInch = 'in³',
+ cubicFoot = 'ft³',
+ cubicYard = 'yd³',
+ fluidOunce = 'fl-oz',
+ pint = 'pt',
+ quart = 'qt',
+ gallon = 'gal',
+ oilBarrels = 'bbl'
+}
+
+export enum LevelCardLayout {
+ simple = 'simple',
+ percentage = 'percentage',
+ absolute = 'absolute'
+}
+
+export enum LiquidWidgetDataSourceType {
+ static = 'static',
+ attribute = 'attribute'
+}
+
+export enum ConversionType {
+ to = 'to',
+ from = 'from',
+}
+
+export const svgMapping = new Map(
+ [
+ [
+ Shapes.vOval,
+ {
+ svg: 'assets/widget/liquid-level/shapes/vertical-oval.svg',
+ limits: { min: 171, max: 51 }
+ }
+ ],
+ [
+ Shapes.vCylinder,
+ {
+ svg: 'assets/widget/liquid-level/shapes/vertical-cylinder.svg',
+ limits: { min: 161, max: 55 }
+ }
+ ],
+ [
+ Shapes.vCapsule,
+ {
+ svg: 'assets/widget/liquid-level/shapes/vertical-capsule.svg',
+ limits: { min: 197, max: 25 }
+ }
+ ],
+ [
+ Shapes.rectangle,
+ {
+ svg: 'assets/widget/liquid-level/shapes/rectangle.svg',
+ limits: { min: 169, max: 52 }
+ }
+ ],
+ [
+ Shapes.hOval,
+ {
+ svg: 'assets/widget/liquid-level/shapes/horizontal-oval.svg',
+ limits: { min: 160, max: 63 }
+ }
+ ],
+ [
+ Shapes.hEllipse,
+ {
+ svg: 'assets/widget/liquid-level/shapes/horizontal-ellipse.svg',
+ limits: { min: 160, max: 64 }
+ }
+ ],
+ [
+ Shapes.hDishEnds,
+ {
+ svg: 'assets/widget/liquid-level/shapes/horizontal-dish-ends.svg',
+ limits: { min: 173, max: 50 }
+ }
+ ],
+ [
+ Shapes.hCylinder,
+ {
+ svg: 'assets/widget/liquid-level/shapes/horizontal-cylinder.svg',
+ limits: { min: 165, max: 56 }
+ }
+ ],
+ [
+ Shapes.hCapsule,
+ {
+ svg: 'assets/widget/liquid-level/shapes/horizontal-capsule.svg',
+ limits: { min: 171, max: 52 }
+ }
+ ],
+ [
+ Shapes.hElliptical_2_1,
+ {
+ svg: 'assets/widget/liquid-level/shapes/horizontal-2_1-elliptical.svg',
+ limits: { min: 173, max: 50 }
+ }
+ ]
+ ]
+);
+
+export const levelCardLayoutTranslations = new Map(
+ [
+ [LevelCardLayout.simple, 'widgets.liquid-level-card.layout-simple'],
+ [LevelCardLayout.percentage, 'widgets.liquid-level-card.layout-percentage'],
+ [LevelCardLayout.absolute, 'widgets.liquid-level-card.layout-absolute']
+ ]
+);
+
+export const LiquidWidgetDataSourceTypeTranslations = new Map(
+ [
+ [LiquidWidgetDataSourceType.static, 'widgets.liquid-level-card.static'],
+ [LiquidWidgetDataSourceType.attribute, 'widgets.liquid-level-card.attribute']
+ ]
+);
+
+export const ShapesTranslations = new Map(
+ [
+ [Shapes.vOval, 'widgets.liquid-level-card.v-oval'],
+ [Shapes.vCylinder, 'widgets.liquid-level-card.v-cylinder'],
+ [Shapes.vCapsule, 'widgets.liquid-level-card.v-capsule'],
+ [Shapes.rectangle, 'widgets.liquid-level-card.rectangle'],
+ [Shapes.hOval, 'widgets.liquid-level-card.h-oval'],
+ [Shapes.hEllipse, 'widgets.liquid-level-card.h-ellipse'],
+ [Shapes.hDishEnds, 'widgets.liquid-level-card.h-dish-ends'],
+ [Shapes.hCylinder, 'widgets.liquid-level-card.h-cylinder'],
+ [Shapes.hCapsule, 'widgets.liquid-level-card.h-capsule'],
+ [Shapes.hElliptical_2_1, 'widgets.liquid-level-card.h-elliptical_2_1']
+ ]
+);
+
+export const levelCardDefaultSettings: LevelCardWidgetSettings = {
+ tankSelectionType: LiquidWidgetDataSourceType.static,
+ selectedShape: Shapes.vCylinder,
+ shapeAttributeName: 'tankShape',
+ tankColor: constantColor('#242770'),
+ datasourceUnits: CapacityUnits.percent,
+ layout: LevelCardLayout.percentage,
+ showTitle: false,
+ title: 'Liquid level',
+ titleFont: {
+ family: 'Roboto',
+ size: 16,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '500',
+ lineHeight: '1.5'
+ },
+ titleColor: 'rgba(0, 0, 0, 0.87)',
+ showTitleIcon: false,
+ titleIcon: 'water_drop',
+ iconColor: '#5469FF',
+ volumeSource: LiquidWidgetDataSourceType.static,
+ volumeConstant: 500,
+ volumeUnits: CapacityUnits.liters,
+ volumeAttributeName: 'volume',
+ volumeFont: {
+ family: 'Roboto',
+ size: 14,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '500',
+ lineHeight: '100%'
+ },
+ volumeColor: 'rgba(0, 0, 0, 0.18)',
+ units: CapacityUnits.percent as string,
+ widgetUnitsSource: LiquidWidgetDataSourceType.static,
+ widgetUnitsAttributeName: 'units',
+ decimals: 0,
+ liquidColor: constantColor('#7A8BFF'),
+ valueFont: {
+ family: 'Roboto',
+ size: 24,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '500',
+ lineHeight: '100%'
+ },
+ valueColor: constantColor('rgba(0, 0, 0, 0.87)'),
+ showBackgroundOverlay: true,
+ backgroundOverlayColor: constantColor('rgba(255, 255, 255, 0.76)'),
+ showTooltip: true,
+ showTooltipLevel: true,
+ tooltipUnits: CapacityUnits.percent,
+ tooltipLevelDecimals: 0,
+ tooltipLevelFont: {
+ family: 'Roboto',
+ size: 13,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '500',
+ lineHeight: '100%'
+ },
+ tooltipLevelColor: constantColor('rgba(0, 0, 0, 0.76)'),
+ showTooltipDate: true,
+ tooltipDateFormat: lastUpdateAgoDateFormat(),
+ tooltipDateFont: {
+ family: 'Roboto',
+ size: 13,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '500',
+ lineHeight: '100%'
+ },
+ tooltipDateColor: 'rgba(0, 0, 0, 0.76)',
+ tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)',
+ tooltipBackgroundBlur: 3,
+ background: {
+ type: BackgroundType.color,
+ color: '#fff',
+ overlay: {
+ enabled: false,
+ color: 'rgba(255,255,255,0.72)',
+ blur: 3
+ }
+ }
+};
+
+export const convertLiters = (value: number, units: CapacityUnits, conversionType: ConversionType): number => {
+ let factor: number;
+
+ switch (units) {
+ case CapacityUnits.liters:
+ return value;
+ case CapacityUnits.cubicMillimeter:
+ factor = 1e6;
+ break;
+ case CapacityUnits.cubicCentimeter:
+ case CapacityUnits.milliliter:
+ factor = 1e3;
+ break;
+ case CapacityUnits.cubicMeter:
+ factor = 1e-3;
+ break;
+ case CapacityUnits.cubicKilometer:
+ factor = 1e-15;
+ break;
+ case CapacityUnits.hectoliter:
+ factor = 0.01;
+ break;
+ case CapacityUnits.cubicInch:
+ factor = 61.0237;
+ break;
+ case CapacityUnits.cubicFoot:
+ factor = 1 / 28.3168;
+ break;
+ case CapacityUnits.cubicYard:
+ factor = 1 / 764.555;
+ break;
+ case CapacityUnits.fluidOunce:
+ factor = 33.814;
+ break;
+ case CapacityUnits.pint:
+ factor = 1 / 0.473176;
+ break;
+ case CapacityUnits.quart:
+ factor = 1 / 0.946353;
+ break;
+ case CapacityUnits.gallon:
+ factor = 1 / 3.78541;
+ break;
+ case CapacityUnits.oilBarrels:
+ factor = 1 / 158.987;
+ break;
+ default:
+ return value;
+ // throw new Error(`Unknown unit: ${units}`);
+ }
+
+ return conversionType === ConversionType.to ? value / factor : value * factor;
+};
+
+export const extractValue = (attributes: Array, attributeName: string): T | undefined => {
+ return attributes.find(attr => attr.key === attributeName)?.value;
+};
+
+export const valueContainerStyleDefaults = cssTextFromInlineStyle({
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ gap: '8px',
+ 'text-align': 'center',
+ 'align-items': 'center',
+ 'align-content': 'center',
+ 'justify-content': 'center',
+ 'font-family': 'Roboto, Helvetica Neue, sans-serif'
+});
+
+export const valueTextStyleDefaults = 'letter-spacing: normal; font-style: normal; font-weight: 500; line-height: 100%;' +
+ ' font-size: 24px; font-family: Roboto, Helvetica Neue, sans-serif; color: #000000DE';
+
+export const volumeTextStyleDefaults = 'letter-spacing: normal; font-style: normal; font-weight: 500;' +
+ ' line-height: 100%; font-size: 14px; font-family: Roboto, Helvetica Neue, sans-serif; color: rgba(0, 0, 0, 0.18)';
+
+export const createAbsoluteLayout = (values?: {inputValue: number | string; volume: number | string},
+ styles?: {valueStyle: string; volumeStyle: string},
+ units?: string): string => {
+ const inputValue = values?.inputValue ? values?.inputValue : 500;
+ const valueTextStyle = styles?.valueStyle ? styles?.valueStyle : valueTextStyleDefaults;
+ const volume = values?.volume ? values?.volume : 1000;
+ const volumeTextStyle = styles?.volumeStyle ? styles?.volumeStyle : volumeTextStyleDefaults;
+ const displayUnits = units ? units : CapacityUnits.liters;
+
+ return `
+
+
+
+
+
+
+
+
+
`;
+
+export const optionsFilter = (searchText: string): ((key: DataKey) => boolean) =>
+ key => key?.name.toUpperCase().includes(searchText?.toUpperCase());
+
+export const fetchEntityKeysForDevice = (deviceId: string, dataKeyTypes: Array,
+ entityService: EntityService): Observable> => {
+ const entityFilter = singleEntityFilterFromDeviceId(deviceId);
+ return entityService.getEntityKeysByEntityFilter(
+ entityFilter,
+ dataKeyTypes, [EntityType.DEVICE],
+ {ignoreLoading: true, ignoreErrors: true}
+ ).pipe(
+ catchError(() => of([]))
+ );
+};
+
+export const fetchEntityKeys = (entityAliasId: string, dataKeyTypes: Array,
+ entityService: EntityService, aliasController: IAliasController): Observable> =>
+ aliasController.getAliasInfo(entityAliasId).pipe(
+ mergeMap((aliasInfo) => entityService.getEntityKeysByEntityFilter(
+ aliasInfo.entityFilter,
+ dataKeyTypes, [],
+ {ignoreLoading: true, ignoreErrors: true}
+ )),
+ catchError(() => of([] as Array))
+ );
+
+
+export const createShapeLayout = (svg: string, layout: LevelCardLayout, sanitizer: DomSanitizer): SafeUrl => {
+ if (svg && layout) {
+ const parser = new DOMParser();
+ const svgImage = parser.parseFromString(svg, 'image/svg+xml');
+
+ if (layout === LevelCardLayout.simple) {
+ svgImage.querySelector('.container-overlay').remove();
+ } else if (layout === LevelCardLayout.percentage) {
+ svgImage.querySelector('.absolute-overlay').remove();
+ svgImage.querySelector('.percentage-value-container').innerHTML = createPercentLayout();
+ } else {
+ svgImage.querySelector('.absolute-value-container').innerHTML = createAbsoluteLayout();
+ svgImage.querySelector('.percentage-overlay').remove();
+ }
+
+ const encodedSvg = encodeURIComponent(svgImage.documentElement.outerHTML);
+
+ return sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml,${encodedSvg}`);
+ }
+};
+
+export const loadSvgShapesMapping = (resourcesService: ResourcesService): Observable> => {
+ const obsArray: Array> = [];
+ const shapesImageMap: Map = new Map();
+ svgMapping.forEach((value, shape) => {
+ const obs = resourcesService.loadJsonResource(value.svg).pipe(
+ map((svg) => ({svg, shape}))
+ );
+
+ obsArray.push(obs);
+ });
+
+ return forkJoin(obsArray).pipe(
+ map(svgData => {
+ for (const data of svgData) {
+ shapesImageMap.set(data.shape, data.svg);
+ }
+ return shapesImageMap;
+ })
+ );
+};
+
+export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
+ const datasourceUnits: string = formGroup.get('datasourceUnits').value;
+ const layout: LevelCardLayout = formGroup.get('layout').value;
+ const volumeSource: LiquidWidgetDataSourceType = formGroup.get('volumeSource').value;
+ const widgetUnitsSource: LiquidWidgetDataSourceType = formGroup.get('widgetUnitsSource').value;
+ const showTooltipLevel: boolean = formGroup.get('showTooltipLevel').value;
+ const showTooltipDate: boolean = formGroup.get('showTooltipDate').value;
+ const showTooltip: boolean = formGroup.get('showTooltip').value;
+ const tankSelectionType: LiquidWidgetDataSourceType = formGroup.get('tankSelectionType').value;
+
+ if (tankSelectionType === LiquidWidgetDataSourceType.static) {
+ formGroup.get('selectedShape').enable({emitEvent: false});
+ formGroup.get('shapeAttributeName').disable({emitEvent: false});
+ } else {
+ formGroup.get('selectedShape').disable({emitEvent: false});
+ formGroup.get('shapeAttributeName').enable({emitEvent: false});
+ }
+
+ switch (layout) {
+ case LevelCardLayout.simple:
+ case LevelCardLayout.percentage:
+ formGroup.get('widgetUnitsSource').disable({emitEvent: false});
+ formGroup.get('units').disable({emitEvent: false});
+ formGroup.get('widgetUnitsAttributeName').disable({emitEvent: false});
+
+ if (datasourceUnits !== CapacityUnits.percent) {
+ formGroup.get('volumeSource').enable({emitEvent: false});
+ formGroup.get('volumeUnits').enable({emitEvent: false});
+ if (volumeSource === LiquidWidgetDataSourceType.static) {
+ formGroup.get('volumeConstant').enable({emitEvent: false});
+ formGroup.get('volumeAttributeName').disable({emitEvent: false});
+ } else {
+ formGroup.get('volumeConstant').disable({emitEvent: false});
+ formGroup.get('volumeAttributeName').enable({emitEvent: false});
+ }
+ } else {
+ formGroup.get('volumeSource').disable({emitEvent: false});
+ formGroup.get('volumeConstant').disable({emitEvent: false});
+ formGroup.get('volumeAttributeName').disable({emitEvent: false});
+ formGroup.get('volumeUnits').disable({emitEvent: false});
+ }
+
+ if (layout === LevelCardLayout.simple) {
+ formGroup.get('decimals')?.disable({emitEvent: false});
+ formGroup.get('valueFont').disable({emitEvent: false});
+ formGroup.get('valueColor').disable({emitEvent: false});
+ } else {
+ formGroup.get('decimals')?.enable({emitEvent: false});
+ formGroup.get('valueFont').enable({emitEvent: false});
+ formGroup.get('valueColor').enable({emitEvent: false});
+ }
+
+ formGroup.get('volumeFont').disable({emitEvent: false});
+ formGroup.get('volumeColor').disable({emitEvent: false});
+
+ break;
+ case LevelCardLayout.absolute:
+ formGroup.get('widgetUnitsSource').enable({emitEvent: false});
+ if (widgetUnitsSource === LiquidWidgetDataSourceType.static) {
+ formGroup.get('units').enable({emitEvent: false});
+ formGroup.get('widgetUnitsAttributeName').disable({emitEvent: false});
+ } else {
+ formGroup.get('units').disable({emitEvent: false});
+ formGroup.get('widgetUnitsAttributeName').enable({emitEvent: false});
+ }
+
+ formGroup.get('volumeSource').enable({emitEvent: false});
+ formGroup.get('volumeUnits').enable({emitEvent: false});
+ if (volumeSource === LiquidWidgetDataSourceType.static) {
+ formGroup.get('volumeConstant').enable({emitEvent: false});
+ formGroup.get('volumeAttributeName').disable({emitEvent: false});
+ } else {
+ formGroup.get('volumeConstant').disable({emitEvent: false});
+ formGroup.get('volumeAttributeName').enable({emitEvent: false});
+ }
+
+ if (formGroup.get('decimals')) {
+ formGroup.get('decimals').enable({emitEvent: false});
+ }
+ formGroup.get('valueFont').enable({emitEvent: false});
+ formGroup.get('valueColor').enable({emitEvent: false});
+
+ formGroup.get('volumeFont').enable({emitEvent: false});
+ formGroup.get('volumeColor').enable({emitEvent: false});
+
+ break;
+ }
+
+ if (showTooltip) {
+ formGroup.get('showTooltipLevel').enable({emitEvent: false});
+ formGroup.get('showTooltipDate').enable({emitEvent: false});
+ formGroup.get('tooltipBackgroundColor').enable({emitEvent: false});
+ formGroup.get('tooltipBackgroundBlur').enable({emitEvent: false});
+
+ if (showTooltipLevel) {
+ formGroup.get('tooltipLevelDecimals').enable({emitEvent: false});
+ formGroup.get('tooltipLevelFont').enable({emitEvent: false});
+ formGroup.get('tooltipLevelColor').enable({emitEvent: false});
+ formGroup.get('tooltipUnits').enable({emitEvent: false});
+ } else {
+ formGroup.get('tooltipUnits').disable({emitEvent: false});
+ formGroup.get('tooltipLevelDecimals').disable({emitEvent: false});
+ formGroup.get('tooltipLevelFont').disable({emitEvent: false});
+ formGroup.get('tooltipLevelColor').disable({emitEvent: false});
+ }
+
+ if (showTooltipDate) {
+ formGroup.get('tooltipDateFormat').enable({emitEvent: false});
+ formGroup.get('tooltipDateFont').enable({emitEvent: false});
+ formGroup.get('tooltipDateColor').enable({emitEvent: false});
+ } else {
+ formGroup.get('tooltipDateFormat').disable({emitEvent: false});
+ formGroup.get('tooltipDateFont').disable({emitEvent: false});
+ formGroup.get('tooltipDateColor').disable({emitEvent: false});
+ }
+ } else {
+ formGroup.get('showTooltipLevel').disable({emitEvent: false});
+ formGroup.get('showTooltipDate').disable({emitEvent: false});
+ formGroup.get('tooltipBackgroundColor').disable({emitEvent: false});
+ formGroup.get('tooltipBackgroundBlur').disable({emitEvent: false});
+
+ formGroup.get('tooltipUnits').disable({emitEvent: false});
+ formGroup.get('tooltipLevelDecimals').disable({emitEvent: false});
+ formGroup.get('tooltipLevelFont').disable({emitEvent: false});
+ formGroup.get('tooltipLevelColor').disable({emitEvent: false});
+
+ formGroup.get('tooltipDateFormat').disable({emitEvent: false});
+ formGroup.get('tooltipDateFont').disable({emitEvent: false});
+ formGroup.get('tooltipDateColor').disable({emitEvent: false});
+ }
+};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
index 52bd5907bd..35d7157fb4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
@@ -33,7 +33,7 @@
{{ option.name }}
-
+
![]()
+
+```
+Vertical Oval
+{:copy-code}
+```
+
+
+```
+Vertical Cylinder
+{:copy-code}
+```
+
+
+```
+Vertical Capsule
+{:copy-code}
+```
+
+
+```
+Rectangle
+{:copy-code}
+```
+
+
+```
+Horizontal Oval
+{:copy-code}
+```
+
+
+```
+Horizontal Ellipse
+{:copy-code}
+```
+
+
+```
+Horizontal Dish Ends
+{:copy-code}
+```
+
+
+```
+Horizontal Cylinder
+{:copy-code}
+```
+
+
+```
+Horizontal Capsule
+{:copy-code}
+```
+
+
+```
+Horizontal 2:1 Elliptical
+{:copy-code}
+```
+
+
+
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 f5c09ce75f..001db8a505 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4229,20 +4229,20 @@
"carat": "Carat",
"cubic-millimeter": "Cubic Millimeter",
"cubic-centimeter": "Cubic Centimeter",
- "cubic-meter": "Cubic Meter/s",
- "cubic-kilometer": "Cubic Kilometers",
+ "cubic-meter": "Cubic Meter",
+ "cubic-kilometer": "Cubic Kilometer",
"microliter": "Microliter",
"milliliter": "Milliliter",
"liter": "Liter",
"hectoliter": "Hectolitre",
"cubic-inch": "Cubic Inch",
"cubic-foot": "Cubic Foot",
- "cubic-yard": "Cubic Yards",
+ "cubic-yard": "Cubic Yard",
"fluid-ounce": "Fluid Ounce",
"pint": "Pint",
"quart": "Quart",
"gallon": "Gallon",
- "oil-barrels": "Oil Barrels",
+ "oil-barrels": "Oil Barrel",
"cubic-meter-per-kilogram": "Cubic Meter per Kilogram",
"gill": "Gill",
"hogshead": "Hogshead",
@@ -4286,7 +4286,6 @@
"ton-force-per-square-inch": "Ton-force per Square Inch",
"kilonewton-per-square-meter": "Kilonewton per Square Meter",
"newton-per-square-millimeter": "Newton per Square Millimeter",
-
"microjoule": "Microjoule",
"millijoule": "Millijoule",
"joule": "Joule",
@@ -5029,7 +5028,9 @@
"show-card-buttons": "Show card buttons",
"card-border-radius": "Card border radius",
"card-appearance": "Card appearance",
- "color": "Color"
+ "color": "Color",
+ "tooltip": "Tooltip",
+ "units-required": "Unit is required."
},
"widget-type": {
"import": "Import widget type",
@@ -6065,6 +6066,52 @@
"value-card-style": "Value card style",
"auto-scale": "Auto scale"
},
+ "liquid-level-card": {
+ "layout-simple": "Simple",
+ "layout-percentage": "Percentage",
+ "layout-absolute": "Absolute",
+ "layout": "Layout",
+ "background-overlay": "Value background overlay",
+ "total-volume": "Total volume",
+ "tank": "Tank",
+ "shape": "Shape",
+ "datasource-units": "Source units",
+ "widget-units": "Widget units",
+ "decimals": "Decimals",
+ "liquid": "Liquid",
+ "liquid-color": "Liquid color",
+ "value": "Value",
+ "value-font": "Value font",
+ "level": "Level",
+ "last-update": "Last update",
+ "shape-by-attribute": "Set tank shape by attribute name",
+ "tooltip-background": "Background color",
+ "background-blur": "Background blur",
+ "tank-color": "Tank color",
+ "static": "Static",
+ "see-examples": "See examples",
+ "attribute": "Attribute",
+ "shape-type": "Type",
+ "v-oval": "Vertical Oval",
+ "v-cylinder": "Vertical Cylinder",
+ "v-capsule": "Vertical Capsule",
+ "rectangle": "Rectangle",
+ "h-oval": "Horizontal Oval",
+ "h-ellipse": "Horizontal Ellipse",
+ "h-dish-ends": "Horizontal Dish Ends",
+ "h-cylinder": "Horizontal Cylinder",
+ "h-capsule": "Horizontal Capsule",
+ "h-elliptical_2_1": "Horizontal 2:1 Elliptical",
+ "icon": "Card icon",
+ "title": "Card title",
+ "units": "Units",
+ "color-and-font": "Color and font",
+ "shape-attribute-name": "Attribute name",
+ "total-volume-required": "Total volume is required.",
+ "attribute-name-required": "Attribute name is required.",
+ "attribute-key-not-set": "Attribute '{{attributeName}}' key not set",
+ "attribute-key-invalid": "Attribute '{{attributeName}}' key is invalid"
+ },
"aggregated-value-card": {
"subtitle": "Subtitle",
"chart": "Chart",
diff --git a/ui-ngx/src/assets/metadata/units.json b/ui-ngx/src/assets/metadata/units.json
index 5d680c6e2c..3237d6620b 100644
--- a/ui-ngx/src/assets/metadata/units.json
+++ b/ui-ngx/src/assets/metadata/units.json
@@ -249,7 +249,7 @@
},
{
"name": "unit.liter",
- "symbol": "l",
+ "symbol": "L",
"tags": ["volume","capacity","extent","liter","liters","l"]
},
{
@@ -1113,7 +1113,7 @@
"symbol": "%",
"tags": ["power source","state of charge (SoC)","battery","battery level","level","humidity","moisture","percentage",
"relative humidity","water content","soil moisture","irrigation","water in soil","soil water content","VWC",
- "Volumetric Water Content","Total Harmonic Distortion","THD","power quality","UV Transmittance","%"]
+ "Volumetric Water Content","Total Harmonic Distortion","THD","power quality","UV Transmittance","%", "capacity"]
},
{
"name": "unit.rssi",
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-2_1-elliptical.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-2_1-elliptical.svg
new file mode 100644
index 0000000000..d6196e5f71
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-2_1-elliptical.svg
@@ -0,0 +1,50 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-capsule.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-capsule.svg
new file mode 100644
index 0000000000..20319f34e7
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-capsule.svg
@@ -0,0 +1,49 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-cylinder.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-cylinder.svg
new file mode 100644
index 0000000000..e05fb41e99
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-cylinder.svg
@@ -0,0 +1,56 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-dish-ends.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-dish-ends.svg
new file mode 100644
index 0000000000..af0195c782
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-dish-ends.svg
@@ -0,0 +1,50 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-ellipse.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-ellipse.svg
new file mode 100644
index 0000000000..5d0c0b2307
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-ellipse.svg
@@ -0,0 +1,61 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-oval.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-oval.svg
new file mode 100644
index 0000000000..86af838fb2
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/horizontal-oval.svg
@@ -0,0 +1,61 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/rectangle.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/rectangle.svg
new file mode 100644
index 0000000000..800093c1d4
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/rectangle.svg
@@ -0,0 +1,49 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-capsule.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-capsule.svg
new file mode 100644
index 0000000000..dde2f5b903
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-capsule.svg
@@ -0,0 +1,49 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-cylinder.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-cylinder.svg
new file mode 100644
index 0000000000..7c15c4af9f
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-cylinder.svg
@@ -0,0 +1,57 @@
+
diff --git a/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-oval.svg b/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-oval.svg
new file mode 100644
index 0000000000..89dd578803
--- /dev/null
+++ b/ui-ngx/src/assets/widget/liquid-level/shapes/vertical-oval.svg
@@ -0,0 +1,56 @@
+
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 93272af3ca..3b29fe986c 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -368,14 +368,20 @@
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-icon-suffix {
padding: 0;
- display: none;
+ display: flex;
+ align-items: center;
+
+ > *:not(.tb-suffix-show-always) {
+ display: none;
+ }
}
}
&:hover {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-icon-suffix {
- display: flex;
- align-items: center;
+ > * {
+ display: block;
+ }
}
}
}
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 0ee154cf7d..ee6f6374cf 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -342,6 +342,12 @@ mat-label {
}
}
+mat-icon {
+ &.tb-error {
+ color: rgb(221, 44, 0);
+ }
+}
+
.tb-error-messages {
height: 24px; //30px
margin-top: -6px;
@@ -356,6 +362,13 @@ mat-label {
color: rgb(221, 44, 0);
}
+.mat-mdc-tooltip.tb-error-tooltip {
+ .mdc-tooltip__surface {
+ background-color: rgba(209, 39, 48, 0.12);
+ color: rgba(209, 39, 48, 1);
+ }
+}
+
.tb-autocomplete {
.mat-mdc-option {
border-bottom: 1px solid #eee;