UI: Add label widget settings form

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html

@@ -0,0 +1,71 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section [formGroup]="labelWidgetFontFormGroup" fxLayout="column">
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.label-widget.font-family</mat-label>
+    <input matInput formControlName="family">
+  </mat-form-field>
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.label-widget.relative-font-size</mat-label>
+    <input matInput type="number" min="1" step="1" formControlName="size">
+  </mat-form-field>
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.label-widget.font-style</mat-label>
+    <mat-select formControlName="style">
+      <mat-option [value]="'normal'">
+        {{ 'widgets.label-widget.font-style-normal' | translate }}
+      </mat-option>
+      <mat-option [value]="'italic'">
+        {{ 'widgets.label-widget.font-style-italic' | translate }}
+      </mat-option>
+      <mat-option [value]="'oblique'">
+        {{ 'widgets.label-widget.font-style-oblique' | translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field fxFlex class="mat-block">
+    <mat-label translate>widgets.label-widget.font-weight</mat-label>
+    <mat-select formControlName="weight">
+      <mat-option [value]="'normal'">
+        {{ 'widgets.label-widget.font-weight-normal' | translate }}
+      </mat-option>
+      <mat-option [value]="'bold'">
+        {{ 'widgets.label-widget.font-weight-bold' | translate }}
+      </mat-option>
+      <mat-option [value]="'bolder'">
+        {{ 'widgets.label-widget.font-weight-bolder' | translate }}
+      </mat-option>
+      <mat-option [value]="'lighter'">
+        {{ 'widgets.label-widget.font-weight-lighter' | translate }}
+      </mat-option>
+      <mat-option [value]="'100'">100</mat-option>
+      <mat-option [value]="'200'">200</mat-option>
+      <mat-option [value]="'300'">300</mat-option>
+      <mat-option [value]="'400'">400</mat-option>
+      <mat-option [value]="'500'">500</mat-option>
+      <mat-option [value]="'600'">600</mat-option>
+      <mat-option [value]="'700'">700</mat-option>
+      <mat-option [value]="'800'">800</mat-option>
+      <mat-option [value]="'900'">900</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <tb-color-input
+    formControlName="color"
+    label="{{ 'widgets.label-widget.color' | translate }}">
+  </tb-color-input>
+</section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts

@@ -0,0 +1,104 @@
+///
+/// Copyright © 2016-2022 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, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, 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';
+
+export interface LabelWidgetFont {
+  family: string;
+  size: number;
+  style: 'normal' | 'italic' | 'oblique';
+  weight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+  color: string;
+}
+
+@Component({
+  selector: 'tb-label-widget-font',
+  templateUrl: './label-widget-font.component.html',
+  styleUrls: [],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LabelWidgetFontComponent),
+      multi: true
+    }
+  ]
+})
+export class LabelWidgetFontComponent extends PageComponent implements OnInit, ControlValueAccessor {
+
+  @HostBinding('style.display') display = 'block';
+
+  @Input()
+  disabled: boolean;
+
+  private modelValue: LabelWidgetFont;
+
+  private propagateChange = null;
+
+  public labelWidgetFontFormGroup: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private translate: TranslateService,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  ngOnInit(): void {
+    this.labelWidgetFontFormGroup = this.fb.group({
+      family: [null, []],
+      size: [null, [Validators.min(1)]],
+      style: [null, []],
+      weight: [null, []],
+      color: [null, []]
+    });
+    this.labelWidgetFontFormGroup.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.labelWidgetFontFormGroup.disable({emitEvent: false});
+    } else {
+      this.labelWidgetFontFormGroup.enable({emitEvent: false});
+    }
+  }
+
+  writeValue(value: LabelWidgetFont): void {
+    this.modelValue = value;
+    this.labelWidgetFontFormGroup.patchValue(
+      value, {emitEvent: false}
+    );
+  }
+
+  private updateModel() {
+    const value: LabelWidgetFont = this.labelWidgetFontFormGroup.value;
+    this.modelValue = value;
+    this.propagateChange(this.modelValue);
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html

@@ -0,0 +1,72 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<mat-expansion-panel class="label-widget-label" fxFlex [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
+  <mat-expansion-panel-header>
+    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <mat-panel-title>
+        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+          {{ labelWidgetLabelFormGroup.get('pattern').value }}
+        </div>
+      </mat-panel-title>
+      <span fxFlex></span>
+      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
+              type="button"
+              (click)="removeLabel.emit()"
+              matTooltip="{{ 'action.remove' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </mat-expansion-panel-header>
+  <ng-template matExpansionPanelContent>
+    <div fxLayout="column" fxLayoutGap="0.5em">
+      <mat-divider></mat-divider>
+      <section class="tb-widget-settings" fxLayout="column">
+        <mat-form-field style="padding-bottom: 16px;">
+          <mat-label translate>widgets.label-widget.label-pattern</mat-label>
+          <input required matInput formControlName="pattern">
+          <mat-error *ngIf="labelWidgetLabelFormGroup.get('pattern').hasError('required')">
+            {{ 'widgets.label-widget.label-pattern-required' | translate }}
+          </mat-error>
+          <mat-hint [innerHTML]="'widgets.label-widget.label-pattern-hint' | translate | safe: 'html'"></mat-hint>
+        </mat-form-field>
+        <fieldset class="fields-group">
+          <legend class="group-title" translate>widgets.label-widget.label-position</legend>
+          <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+            <mat-form-field fxFlex>
+              <mat-label translate>widgets.label-widget.x-pos</mat-label>
+              <input matInput type="number" min="0" max="100" step="1" formControlName="x">
+            </mat-form-field>
+            <mat-form-field fxFlex>
+              <mat-label translate>widgets.label-widget.y-pos</mat-label>
+              <input matInput type="number" min="0" max="100" step="1" formControlName="y">
+            </mat-form-field>
+          </section>
+        </fieldset>
+        <tb-color-input
+          formControlName="backgroundColor"
+          label="{{ 'widgets.label-widget.background-color' | translate }}">
+        </tb-color-input>
+        <fieldset class="fields-group">
+          <legend class="group-title" translate>widgets.label-widget.font-settings</legend>
+          <tb-label-widget-font formControlName="font"></tb-label-widget-font>
+        </fieldset>
+      </section>
+    </div>
+  </ng-template>
+</mat-expansion-panel>

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss

@@ -0,0 +1,40 @@
+/**
+ * Copyright © 2016-2022 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;
+    &.label-widget-label {
+      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 {
+    &.label-widget-label {
+      .mat-expansion-panel-body {
+        padding: 0 8px 8px;
+      }
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts

@@ -0,0 +1,113 @@
+///
+/// Copyright © 2016-2022 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, FormBuilder, FormGroup, 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 { LabelWidgetFont } from '@home/components/widget/lib/settings/label-widget-font.component';
+
+export interface LabelWidgetLabel {
+  pattern: string;
+  x: number;
+  y: number;
+  backgroundColor: string;
+  font: LabelWidgetFont;
+}
+
+@Component({
+  selector: 'tb-label-widget-label',
+  templateUrl: './label-widget-label.component.html',
+  styleUrls: ['./label-widget-label.component.scss', './widget-settings.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LabelWidgetLabelComponent),
+      multi: true
+    }
+  ]
+})
+export class LabelWidgetLabelComponent extends PageComponent implements OnInit, ControlValueAccessor {
+
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  expanded = false;
+
+  @Output()
+  removeLabel = new EventEmitter();
+
+  private modelValue: LabelWidgetLabel;
+
+  private propagateChange = null;
+
+  public labelWidgetLabelFormGroup: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private translate: TranslateService,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  ngOnInit(): void {
+    this.labelWidgetLabelFormGroup = this.fb.group({
+      pattern: [null, [Validators.required]],
+      x: [null, [Validators.min(0), Validators.max(100)]],
+      y: [null, [Validators.min(0), Validators.max(100)]],
+      backgroundColor: [null, []],
+      font: [null, []]
+    });
+    this.labelWidgetLabelFormGroup.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.labelWidgetLabelFormGroup.disable({emitEvent: false});
+    } else {
+      this.labelWidgetLabelFormGroup.enable({emitEvent: false});
+    }
+  }
+
+  writeValue(value: LabelWidgetLabel): void {
+    this.modelValue = value;
+    this.labelWidgetLabelFormGroup.patchValue(
+      value, {emitEvent: false}
+    );
+  }
+
+  private updateModel() {
+    const value: LabelWidgetLabel = this.labelWidgetLabelFormGroup.value;
+    this.modelValue = value;
+    if (this.labelWidgetLabelFormGroup.valid) {
+      this.propagateChange(this.modelValue);
+    } else {
+      this.propagateChange(null);
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html

@@ -0,0 +1,49 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column">
+  <tb-image-input required
+                  label="{{ 'widgets.label-widget.background-image' | translate }}"
+                  formControlName="backgroundImageUrl">
+  </tb-image-input>
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.label-widget.labels</legend>
+    <div fxLayout="column">
+      <div class="tb-label-widget-labels">
+        <div *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabel;
+                 let $index = index; last as isLast;"
+             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+          <tb-label-widget-label [formControl]="labelControl"
+                                 [expanded]="$index === 0"
+                                 (removeLabel)="removeLabel($index)">
+          </tb-label-widget-label>
+        </div>
+      </div>
+      <div *ngIf="!labelsFormArray().controls.length">
+      <span translate fxLayoutAlign="center center"
+            class="tb-prompt">widgets.label-widget.no-labels</span>
+      </div>
+      <div style="padding-top: 16px;">
+        <button mat-raised-button color="primary"
+                type="button"
+                (click)="addLabel()">
+          <span translate>widgets.label-widget.add-label</span>
+        </button>
+      </div>
+    </div>
+  </fieldset>
+</section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss

@@ -0,0 +1,32 @@
+/**
+ * Copyright © 2016-2022 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 '../../../../../../../scss/constants';
+
+:host {
+  .tb-label-widget-labels {
+    overflow-y: auto;
+    &.mat-padding {
+      padding: 8px;
+      @media #{$mat-gt-sm} {
+        padding: 16px;
+      }
+    }
+  }
+
+  .tb-prompt{
+    margin: 30px 0;
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts

@@ -0,0 +1,92 @@
+///
+/// Copyright © 2016-2022 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 } from '@angular/core';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { LabelWidgetLabel } from '@home/components/widget/lib/settings/label-widget-label.component';
+
+@Component({
+  selector: 'tb-label-widget-settings',
+  templateUrl: './label-widget-settings.component.html',
+  styleUrls: ['./label-widget-settings.component.scss', './widget-settings.scss']
+})
+export class LabelWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  labelWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.labelWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      backgroundImageUrl: 'data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==',
+      labels: []
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    const labelsControls: Array<AbstractControl> = [];
+    if (settings.labels) {
+      settings.labels.forEach((label) => {
+        labelsControls.push(this.fb.control(label, [Validators.required]));
+      });
+    }
+    this.labelWidgetSettingsForm = this.fb.group({
+      backgroundImageUrl: [settings.backgroundImageUrl, [Validators.required]],
+      labels: this.fb.array(labelsControls)
+    });
+  }
+
+  labelsFormArray(): FormArray {
+    return this.labelWidgetSettingsForm.get('labels') as FormArray;
+  }
+
+  public trackByLabel(index: number, labelControl: AbstractControl): number {
+    return index;
+  }
+
+  public removeLabel(index: number) {
+    (this.labelWidgetSettingsForm.get('labels') as FormArray).removeAt(index);
+  }
+
+  public addLabel() {
+    const label: LabelWidgetLabel = {
+      pattern: '${#0}',
+      x: 50,
+      y: 50,
+      backgroundColor: 'rgba(0,0,0,0)',
+      font: {
+        family: 'Roboto',
+        size: 6,
+        style: 'normal',
+        weight: '500',
+        color: '#fff'
+      }
+    };
+    const labelsArray = this.labelWidgetSettingsForm.get('labels') as FormArray;
+    labelsArray.push(this.fb.control(label, [Validators.required]));
+    this.labelWidgetSettingsForm.updateValueAndValidity();
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html

@@ -19,19 +19,17 @@
   <mat-slide-toggle class="mat-slide" formControlName="useMarkdownTextFunction">
     {{ 'widgets.markdown.use-markdown-text-function' | translate }}
   </mat-slide-toggle>
-  <section fxLayout="column" [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value">
+  <tb-js-func [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
-    <tb-js-func formControlName="markdownTextFunction"
+              formControlName="markdownTextFunction"
-                [globalVariables]="functionScopeVariables"
+              [globalVariables]="functionScopeVariables"
-                [functionArgs]="['data']"
+              [functionArgs]="['data']"
-                functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
+              functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
-                helpId="widget/lib/markdown/markdown_text_fn">
+              helpId="widget/lib/markdown/markdown_text_fn">
-    </tb-js-func>
+  </tb-js-func>
-  </section>
+  <tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
-  <section fxLayout="column" [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value">
+                      formControlName="markdownTextPattern"
-    <tb-markdown-editor formControlName="markdownTextPattern"
+                      label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}">
-                        label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}">
+  </tb-markdown-editor>
-    </tb-markdown-editor>
-  </section>
   <tb-css formControlName="markdownCss"
           label="{{ 'widgets.markdown.markdown-css' | translate }}">
   </tb-css>

ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html

@@ -26,12 +26,11 @@
       {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }}
     </mat-error>
   </mat-form-field>
-  <section fxLayout="column" [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
+  <tb-js-func [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
-    <tb-js-func formControlName="qrCodeTextFunction"
+              formControlName="qrCodeTextFunction"
-                [globalVariables]="functionScopeVariables"
+              [globalVariables]="functionScopeVariables"
-                [functionArgs]="['data']"
+              [functionArgs]="['data']"
-                functionTitle="{{ 'widgets.qr-code.qr-code-text-function' | translate }}"
+              functionTitle="{{ 'widgets.qr-code.qr-code-text-function' | translate }}"
-                helpId="widget/lib/qrcode/qrcode_text_fn">
+              helpId="widget/lib/qrcode/qrcode_text_fn">
-    </tb-js-func>
+  </tb-js-func>
-  </section>
 </section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -32,6 +32,9 @@ import {
 import {
   MarkdownWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/markdown-widget-settings.component';
+import { LabelWidgetFontComponent } from '@home/components/widget/lib/settings/label-widget-font.component';
+import { LabelWidgetLabelComponent } from '@home/components/widget/lib/settings/label-widget-label.component';
+import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settings/label-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +42,10 @@ import {
     TimeseriesTableWidgetSettingsComponent,
     TimeseriesTableKeySettingsComponent,
     TimeseriesTableLatestKeySettingsComponent,
-    MarkdownWidgetSettingsComponent
+    MarkdownWidgetSettingsComponent,
+    LabelWidgetFontComponent,
+    LabelWidgetLabelComponent,
+    LabelWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -51,7 +57,10 @@ import {
     TimeseriesTableWidgetSettingsComponent,
     TimeseriesTableKeySettingsComponent,
     TimeseriesTableLatestKeySettingsComponent,
-    MarkdownWidgetSettingsComponent
+    MarkdownWidgetSettingsComponent,
+    LabelWidgetFontComponent,
+    LabelWidgetLabelComponent,
+    LabelWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -62,5 +71,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-timeseries-table-widget-settings': TimeseriesTableWidgetSettingsComponent,
   'tb-timeseries-table-key-settings': TimeseriesTableKeySettingsComponent,
   'tb-timeseries-table-latest-key-settings': TimeseriesTableLatestKeySettingsComponent,
-  'tb-markdown-widget-settings': MarkdownWidgetSettingsComponent
+  'tb-markdown-widget-settings': MarkdownWidgetSettingsComponent,
+  'tb-label-widget-settings': LabelWidgetSettingsComponent
 };

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3292,6 +3292,32 @@
             "qr-code-text-pattern-required": "QR code text pattern is required.",
             "qr-code-text-function": "QR code text function"
         },
+        "label-widget": {
+          "font-family": "Font family",
+          "relative-font-size": "Relative font size (percents)",
+          "font-style": "Style",
+          "font-style-normal": "Normal",
+          "font-style-italic": "Italic",
+          "font-style-oblique": "Oblique",
+          "font-weight": "Weight",
+          "font-weight-normal": "Normal",
+          "font-weight-bold": "Bold",
+          "font-weight-bolder": "Bolder",
+          "font-weight-lighter": "Lighter",
+          "color": "Color",
+          "label-pattern": "Pattern",
+          "label-pattern-hint": "Hint: for ex. 'Text <code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code> units.' or <code><span style=\"color: #000;\">$&#123;</span>#&lt;key index&gt;<span style=\"color: #000;\">&#125;</span></code> units'",
+          "label-pattern-required": "Pattern is required",
+          "label-position": "Position (Percentage relative to background)",
+          "x-pos": "X",
+          "y-pos": "Y",
+          "background-color": "Background color",
+          "font-settings": "Font settings",
+          "background-image": "Background image",
+          "labels": "Labels",
+          "no-labels": "No labels configured",
+          "add-label": "Add label"
+        },
         "persistent-table": {
             "rpc-id": "RPC ID",
             "message-type": "Message type",