From 064778951a76cf718ad8478d17413ccba166db41 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 12 May 2021 17:04:42 +0300 Subject: [PATCH] UI: Ability to update dashboard image from screenshot --- ui-ngx/package.json | 1 + .../dashboard-image-dialog.component.html | 66 +++++++++ .../dashboard-image-dialog.component.scss | 54 +++++++ .../dashboard-image-dialog.component.ts | 132 ++++++++++++++++++ .../dashboard-page.component.html | 11 +- .../dashboard-page.component.ts | 38 ++++- .../dashboard-settings-dialog.component.html | 3 + .../dashboard-settings-dialog.component.ts | 3 +- .../home/components/home-components.module.ts | 3 + .../src/app/shared/models/dashboard.models.ts | 1 + .../assets/locale/locale.constant-en_US.json | 3 + ui-ngx/yarn.lock | 19 +++ 12 files changed, 330 insertions(+), 4 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html create mode 100644 ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts diff --git a/ui-ngx/package.json b/ui-ngx/package.json index 775a685ae8..89b38ead12 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -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", diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html new file mode 100644 index 0000000000..f37e2991f3 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html @@ -0,0 +1,66 @@ + +
+ +

dashboard.update-image

+ + + + + +
+
+
+
{{ 'dashboard.no-image' | translate }}
+ +
+ +
+ + +
+
+
+ +
+
+
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss new file mode 100644 index 0000000000..7960026d56 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss @@ -0,0 +1,54 @@ +/** + * 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); + } +} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts new file mode 100644 index 0000000000..3586f781d5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts @@ -0,0 +1,132 @@ +/// +/// 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 { + + takingScreenshotSubject = new BehaviorSubject(false); + + takingScreenshot$ = this.takingScreenshotSubject.asObservable().pipe( + share() + ); + + dashboardId: DashboardId; + safeImageUrl?: SafeUrl; + dashboardElement: HTMLElement; + + dashboardImageFormGroup: FormGroup; + + constructor(protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: DashboardImageDialogData, + public dialogRef: MatDialogRef, + 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; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 9b50dcfb86..50fbbbec13 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -81,6 +81,12 @@ (click)="isFullscreen = !isFullscreen"> {{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }} + -
+
Powered by Thingsboard v.{{ thingsboardVersion }}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 0144bd4d70..34f2ad5736 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -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; + 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, { + 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; + } + }); + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html index 244045314b..f84405faed 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html @@ -69,6 +69,9 @@ {{ 'dashboard.display-dashboard-export' | translate }} + + {{ 'dashboard.display-update-dashboard-image' | translate }} + {{ 'dashboard.display-dashboard-logo' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts index 6f7b14f4e2..26ab9a3e3b 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts @@ -82,7 +82,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent { diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index 53b95c7979..98525ffa90 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -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 ], diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts index 98a19d1b13..a782fe8256 100644 --- a/ui-ngx/src/app/shared/models/dashboard.models.ts +++ b/ui-ngx/src/app/shared/models/dashboard.models.ts @@ -91,6 +91,7 @@ export interface DashboardSettings { dashboardLogoUrl?: string; showDashboardTimewindow?: boolean; showDashboardExport?: boolean; + showUpdateDashboardImage?: boolean; toolbarAlwaysOpen?: boolean; titleColor?: string; } 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 dde20e0354..1eb540a2e3 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -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", diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index b1c5167ac9..d7ed0d4e41 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -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"