dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3285 from vvlladd28/improvement/web-camera-widget

Browse Source 
Fix updated data from web camera input widget
This commit is contained in:
Igor Kulikov 2020-08-11 19:44:15 +03:00 committed by GitHub
commit 5a41def986
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui-ngx/package-lock.json generated
View File

@ -8044,6 +8044,11 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
"integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
},
"leaflet-editable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz",
"integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ=="
},
"leaflet-polylinedecorator": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/leaflet-polylinedecorator/-/leaflet-polylinedecorator-1.6.0.tgz",
@ -9021,10 +9026,10 @@
"integrity": "sha512-4O3GWAYJaauMCILm07weko2rHA8a4kjn7+8Lg4s1d7SxwS/3IpkVD/GljbRrIJ1c1W/XGJ3GbuK7RyYZEJChhw=="
},
"ngx-flowchart": {
"version": "git://github.com/thingsboard/ngx-flowchart.git#97a77477ca8579becf0e3a07866046b4536fe30a",
"version": "git://github.com/thingsboard/ngx-flowchart.git#7a02f4748b5e7821a883c903107af5f20415d026",
"from": "git://github.com/thingsboard/ngx-flowchart.git#master",
"requires": {
"tslib": "^1.10.0"
"tslib": "^1.13.0"
},
"dependencies": {
"tslib": {

12
ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.html
View File

@ -16,11 +16,11 @@
-->
<div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera">
<div [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && isDeviceDetect" fxFlexFill>
<div *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && isDeviceDetect" fxFlexFill>
<div [fxShow]="!isShowCamera" fxLayout="column" fxLayoutAlign="space-between center" fxFlexFill>
<div class="tb-web-camera__last-photo" fxFlex>
<span [fxShow]="!lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
<img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
<img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="safeLastPhoto" alt="last photo"/>
</div>
<button mat-raised-button color="primary" (click)="takePhoto()">
{{ "widgets.input-widgets.take-photo" | translate }}
@ -59,16 +59,16 @@
</div>
</div>
</div>
<div class="message-text" [fxHide]="isEntityDetected">
<div class="message-text" *ngIf="!isEntityDetected">
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
</div>
<div class="message-text" [fxShow]="isEntityDetected && !dataKeyDetected">
<div class="message-text" *ngIf="isEntityDetected && !dataKeyDetected">
{{ 'widgets.input-widgets.no-datakey-selected' | translate }}
</div>
<div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && !isCameraSupport">
<div class="message-text" *ngIf="isEntityDetected && dataKeyDetected && !isCameraSupport">
{{ 'widgets.input-widgets.no-support-web-camera' | translate }}
</div>
<div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && !isDeviceDetect">
<div class="message-text" *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && !isDeviceDetect">
{{ 'widgets.input-widgets.no-support-web-camera' | translate }}
</div>
</div>

13
ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts
View File

@ -37,6 +37,8 @@ import { AttributeService } from '@core/http/attribute.service';
import { EntityId } from '@shared/models/id/entity-id';
import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { Observable } from 'rxjs';
import { isString } from '@core/utils';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
interface WebCameraInputWidgetSettings {
widgetTitle: string;
@ -62,6 +64,7 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn
private overlay: Overlay,
private utils: UtilsService,
private attributeService: AttributeService,
private sanitizer: DomSanitizer
) {
super(store);
}
@ -109,8 +112,8 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn
isPreviewPhoto = false;
singleDevice = true;
updatePhoto = false;
previewPhoto: any;
lastPhoto: any;
previewPhoto: SafeUrl;
lastPhoto: SafeUrl;
private static hasGetUserMedia(): boolean {
return !!(window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia);
@ -159,8 +162,8 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn
private updateWidgetData(data: Array<DatasourceData>) {
const keyData = data[0].data;
if (keyData && keyData.length) {
this.lastPhoto = keyData[0][1];
if (keyData?.length && isString(keyData[0][1]) && keyData[0][1].startsWith('data:image/')) {
this.lastPhoto = this.sanitizer.bypassSecurityTrustUrl(keyData[0][1]);
}
}
@ -256,7 +259,7 @@ export class WebCameraInputWidgetComponent extends PageComponent implements OnIn
const mimeType: string = this.settings.imageFormat ? this.settings.imageFormat : WebCameraInputWidgetComponent.DEFAULT_IMAGE_TYPE;
const quality: number = this.settings.imageQuality ? this.settings.imageQuality : WebCameraInputWidgetComponent.DEFAULT_IMAGE_QUALITY;
this.previewPhoto = this.canvasElement.toDataURL(mimeType, quality);
this.previewPhoto = this.sanitizer.bypassSecurityTrustUrl(this.canvasElement.toDataURL(mimeType, quality));
this.isPreviewPhoto = true;
}