UI: Ability to update dashboard image from screenshot

@@ -47,6 +47,7 @@
     "flot": "git://github.com/thingsboard/flot.git#0.9-work",
     "flot.curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master",
     "font-awesome": "^4.7.0",
+    "html2canvas": "^1.0.0-rc.7",
     "jquery": "^3.5.1",
     "jquery.terminal": "^2.18.3",
     "js-beautify": "^1.13.0",

+<!--
+
+    Copyright © 2016-2021 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.
+
+-->
+<form (ngSubmit)="save()">
+  <mat-toolbar color="primary">
+    <h2 translate>dashboard.update-image</h2>
+    <span fxFlex></span>
+    <button mat-button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <div mat-dialog-content style="position: relative;">
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="16px">
+      <div class="tb-image-preview-container">
+        <div *ngIf="!safeImageUrl; else elseBlock">{{ 'dashboard.no-image' | translate }}</div>
+        <ng-template #elseBlock><img class="tb-image-preview" [src]="safeImageUrl" /></ng-template>
+      </div>
+      <button mat-raised-button color="accent"
+              type="button"
+              [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
+              (click)="takeScreenShot()">
+        {{ 'dashboard.take-screenshot' | translate }}
+      </button>
+      <div [formGroup]="dashboardImageFormGroup">
+        <tb-image-input [showPreview]="false" label="{{'dashboard.image' | translate}}"
+                        formControlName="dashboardImage">
+        </tb-image-input>
+      </div>
+    </fieldset>
+    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill" fxLayout="column"
+         fxLayoutAlign="center center">
+        <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
+    </div>
+  </div>
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || (takingScreenshot$ | async) || !dashboardImageFormGroup.dirty">
+      {{ 'action.update' | translate }}
+    </button>
+  </div>
+</form>

+/**
+ * Copyright © 2016-2021 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.
+ */
+
+$previewSize: 300px !default;
+
+:host {
+  .tb-image-preview {
+    width: auto;
+    max-width: $previewSize - 2;
+    height: auto;
+    max-height: $previewSize - 2;
+  }
+
+  .tb-image-preview-container {
+    position: relative;
+    float: left;
+    width: $previewSize;
+    height: $previewSize;
+    margin-right: 12px;
+    vertical-align: top;
+    border: solid 1px;
+
+    div {
+      width: 100%;
+      font-size: 18px;
+      text-align: center;
+    }
+
+    div,
+    .tb-image-preview {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .taking-screenshot-progress {
+    background-color: rgba(255, 255, 255, 0.65);
+  }
+}

+///
+/// Copyright © 2016-2021 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, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { DialogComponent } from '@app/shared/components/dialog.component';
+import { DashboardId } from '@shared/models/id/dashboard-id';
+import { DashboardService } from '@core/http/dashboard.service';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import html2canvas from 'html2canvas';
+import { map, share } from 'rxjs/operators';
+import { BehaviorSubject, from } from 'rxjs';
+
+export interface DashboardImageDialogData {
+  dashboardId: DashboardId;
+  currentImage?: string;
+  dashboardElement: HTMLElement;
+}
+
+export interface DashboardImageDialogResult {
+  image?: string;
+}
+
+@Component({
+  selector: 'tb-dashboard-image-dialog',
+  templateUrl: './dashboard-image-dialog.component.html',
+  styleUrls: ['./dashboard-image-dialog.component.scss']
+})
+export class DashboardImageDialogComponent extends DialogComponent<DashboardImageDialogComponent, DashboardImageDialogResult> {
+
+  takingScreenshotSubject = new BehaviorSubject(false);
+
+  takingScreenshot$ = this.takingScreenshotSubject.asObservable().pipe(
+    share()
+  );
+
+  dashboardId: DashboardId;
+  safeImageUrl?: SafeUrl;
+  dashboardElement: HTMLElement;
+
+  dashboardImageFormGroup: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              @Inject(MAT_DIALOG_DATA) public data: DashboardImageDialogData,
+              public dialogRef: MatDialogRef<DashboardImageDialogComponent, DashboardImageDialogResult>,
+              private dashboardService: DashboardService,
+              private sanitizer: DomSanitizer,
+              private fb: FormBuilder) {
+    super(store, router, dialogRef);
+
+    this.dashboardId = this.data.dashboardId;
+    this.updateImage(this.data.currentImage);
+    this.dashboardElement = this.data.dashboardElement;
+
+    this.dashboardImageFormGroup = this.fb.group({
+      dashboardImage: [this.data.currentImage]
+    });
+
+    this.dashboardImageFormGroup.get('dashboardImage').valueChanges.subscribe(
+      (newImage) => {
+        this.updateImage(newImage);
+      }
+    );
+  }
+
+  takeScreenShot() {
+    this.takingScreenshotSubject.next(true);
+    from(html2canvas(this.dashboardElement, {
+      logging: false,
+      useCORS: true,
+      foreignObjectRendering: false,
+      scale: 512 / this.dashboardElement.clientWidth
+    })).pipe(
+      map(canvas => canvas.toDataURL())).subscribe(
+      (image) => {
+        this.updateImage(image);
+        this.dashboardImageFormGroup.patchValue({dashboardImage: image}, {emitEvent: false});
+        this.dashboardImageFormGroup.markAsDirty();
+        this.takingScreenshotSubject.next(false);
+      },
+      (e) => {
+        this.takingScreenshotSubject.next(false);
+      }
+    );
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+
+  save(): void {
+    this.dashboardService.getDashboard(this.dashboardId.id).subscribe(
+      (dashboard) => {
+        const newImage: string = this.dashboardImageFormGroup.get('dashboardImage').value;
+        dashboard.image = newImage;
+        this.dashboardService.saveDashboard(dashboard).subscribe(
+          () => {
+            this.dialogRef.close({
+              image: newImage
+            });
+          }
+        );
+      }
+    );
+  }
+
+  private updateImage(imageUrl: string) {
+    if (imageUrl) {
+      this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
+    } else {
+      this.safeImageUrl = null;
+    }
+  }
+}

@@ -81,6 +81,12 @@
                   (click)="isFullscreen = !isFullscreen">
             <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
           </button>
+          <button [fxShow]="currentDashboardId && !isEdit && isTenantAdmin() && displayUpdateDashboardImage()" mat-icon-button
+                  matTooltip="{{'dashboard.update-image' | translate}}"
+                  matTooltipPosition="below"
+                  (click)="updateDashboardImage($event)">
+            <mat-icon>wallpaper</mat-icon>
+          </button>
           <button [fxShow]="currentDashboardId && (isEdit || displayExport())" mat-icon-button
                   matTooltip="{{'dashboard.export' | translate}}"
                   matTooltipPosition="below"
@@ -133,6 +139,7 @@
     </tb-dashboard-toolbar>
   </section>
   <section class="tb-dashboard-container tb-absolute-fill"
+           #dashboardContainer
            [ngClass]="{ 'is-fullscreen': forceFullscreen,
            'tb-dashboard-toolbar-opened': toolbarOpened,
            'tb-dashboard-toolbar-animated': isToolbarOpenedAnimate,
@@ -187,7 +194,7 @@
             </tb-dashboard-layout>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
+        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
           <tb-footer-fab-buttons *ngIf="!embedded && !isMobileApp"
                                  [fxShow]="!isAddingWidget && isEdit && !widgetEditMode"
                                  relative
@@ -212,7 +219,7 @@
             <mat-icon>{{ isEdit ? 'close' : 'edit' }}</mat-icon>
           </button>
         </section>
-        <section class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
+        <section data-html2canvas-ignore class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
           <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
         </section>
       </mat-drawer-content>

@@ -16,7 +16,7 @@
 
 import {
   ChangeDetectorRef,
-  Component,
+  Component, ElementRef,
   Inject,
   Injector,
   Input,
@@ -123,6 +123,11 @@ import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/
 import { AliasEntityType, EntityType } from '@shared/models/entity-type.models';
 import { MobileService } from '@core/services/mobile.service';
 
+import {
+  DashboardImageDialogComponent,
+  DashboardImageDialogData, DashboardImageDialogResult
+} from '@home/components/dashboard-page/dashboard-image-dialog.component';
+
 // @dynamic
 @Component({
   selector: 'tb-dashboard-page',
@@ -153,6 +158,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   dashboard: Dashboard;
   dashboardConfiguration: DashboardConfiguration;
 
+  @ViewChild('dashboardContainer') dashboardContainer: ElementRef<HTMLElement>;
+
   prevDashboard: Dashboard;
 
   iframeMode = this.utils.iframeMode;
@@ -468,6 +475,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
+  public displayUpdateDashboardImage(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showUpdateDashboardImage)) {
+      return this.dashboard.configuration.settings.showUpdateDashboardImage;
+    } else {
+      return true;
+    }
+  }
+
   public displayDashboardTimewindow(): boolean {
     if (this.dashboard.configuration.settings &&
       isDefined(this.dashboard.configuration.settings.showDashboardTimewindow)) {
@@ -1248,4 +1264,24 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   onCloseSearchBundle() {
     this.searchBundle = '';
   }
+
+  public updateDashboardImage($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.dialog.open<DashboardImageDialogComponent, DashboardImageDialogData,
+      DashboardImageDialogResult>(DashboardImageDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        dashboardId: this.dashboard.id,
+        currentImage: this.dashboard.image,
+        dashboardElement: this.dashboardContainer.nativeElement
+      }
+    }).afterClosed().subscribe((result) => {
+      if (result) {
+        this.dashboard.image = result.image;
+      }
+    });
+  }
 }

@@ -69,6 +69,9 @@
           <mat-checkbox fxFlex formControlName="showDashboardExport">
             {{ 'dashboard.display-dashboard-export' | translate }}
           </mat-checkbox>
+          <mat-checkbox fxFlex formControlName="showUpdateDashboardImage">
+            {{ 'dashboard.display-update-dashboard-image' | translate }}
+          </mat-checkbox>
         </div>
         <mat-checkbox formControlName="showDashboardLogo">
           {{ 'dashboard.display-dashboard-logo' | translate }}

@@ -82,7 +82,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
         showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo, []],
         dashboardLogoUrl: [isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, []],
         showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
-        showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []]
+        showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []],
+        showUpdateDashboardImage: [isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage, []]
       });
       this.settingsFormGroup.get('stateControllerId').valueChanges.subscribe(
         (stateControllerId: StateControllerId) => {

@@ -141,6 +141,7 @@ import { EdgeDownlinkTableHeaderComponent } from '@home/components/edge/edge-dow
 import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-page/widget-types-panel.component';
 import { SecurityConfigLwm2mComponent } from '@home/components/device/security-config-lwm2m.component';
 import { SecurityConfigLwm2mServerComponent } from '@home/components/device/security-config-lwm2m-server.component';
+import { DashboardImageDialogComponent } from '@home/components/dashboard-page/dashboard-image-dialog.component';
 
 @NgModule({
   declarations:
@@ -260,6 +261,7 @@ import { SecurityConfigLwm2mServerComponent } from '@home/components/device/secu
       DashboardSettingsDialogComponent,
       ManageDashboardStatesDialogComponent,
       DashboardStateDialogComponent,
+      DashboardImageDialogComponent,
       EmbedDashboardDialogComponent,
       DisplayWidgetTypesPanelComponent
     ],
@@ -370,6 +372,7 @@ import { SecurityConfigLwm2mServerComponent } from '@home/components/device/secu
     DashboardSettingsDialogComponent,
     ManageDashboardStatesDialogComponent,
     DashboardStateDialogComponent,
+    DashboardImageDialogComponent,
     EmbedDashboardDialogComponent,
     DisplayWidgetTypesPanelComponent
   ],

@@ -91,6 +91,7 @@ export interface DashboardSettings {
   dashboardLogoUrl?: string;
   showDashboardTimewindow?: boolean;
   showDashboardExport?: boolean;
+  showUpdateDashboardImage?: boolean;
   toolbarAlwaysOpen?: boolean;
   titleColor?: string;
 }

@@ -667,6 +667,8 @@
         "add-widget": "Add new widget",
         "title": "Title",
         "image": "Dashboard image",
+        "update-image": "Update dashboard image",
+        "take-screenshot": "Take screenshot",
         "select-widget-title": "Select widget",
         "select-widget-value": "{{title}}: select widget",
         "select-widget-subtitle": "List of available widget types",
@@ -748,6 +750,7 @@
         "display-filters": "Display filters",
         "display-dashboard-timewindow": "Display timewindow",
         "display-dashboard-export": "Display export",
+        "display-update-dashboard-image": "Display update dashboard image",
         "display-dashboard-logo": "Display logo in dashboard fullscreen mode",
         "dashboard-logo-image": "Dashboard logo image",
         "import": "Import dashboard",

@@ -2222,6 +2222,11 @@ base64-arraybuffer@0.1.5:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
   integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg=
 
+base64-arraybuffer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
+  integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
+
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -3206,6 +3211,13 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
+css-line-break@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
+  integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==
+  dependencies:
+    base64-arraybuffer "^0.2.0"
+
 css-loader@4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.2.2.tgz#b668b3488d566dc22ebcf9425c5f254a05808c89"
@@ -4782,6 +4794,13 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html2canvas@^1.0.0-rc.7:
+  version "1.0.0-rc.7"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-rc.7.tgz#70c159ce0e63954a91169531894d08ad5627ac98"
+  integrity sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==
+  dependencies:
+    css-line-break "1.1.1"
+
 http-cache-semantics@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"