1af55e8400
* Add location widget * Fix translate, clear code * Fix translate * Add date input widgets * Add image input widgets * Init web camera input widget * Add functional web camera input widget * Add styles to webcamera iputs widget * Add link code
75 lines
3.5 KiB
HTML
75 lines
3.5 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2020 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.
|
|
|
|
-->
|
|
<div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera">
|
|
<div [fxShow]="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"/>
|
|
</div>
|
|
<button mat-raised-button color="primary" (click)="takePhoto()">
|
|
{{ "widgets.input-widgets.take-photo" | translate }}
|
|
</button>
|
|
</div>
|
|
<div [fxShow]="isShowCamera" fxLayout="column" fxLayoutAlign="center center" class="camera-container">
|
|
<div class="camera" [fxShow]="!isPreviewPhoto">
|
|
<video autoplay muted playsinline class="camera-stream" #videoStream></video>
|
|
<div class="camera-controls" fxLayout="row wrap" fxLayoutAlign="space-between end">
|
|
<div fxFlex></div>
|
|
<button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
|
|
<mat-icon>switch_camera</mat-icon>
|
|
</button>
|
|
<button mat-fab color="accent" (click)="createPhoto()">
|
|
<mat-icon>photo_camera</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="primary" (click)="closeCamera()">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
<div fxFlex></div>
|
|
</div>
|
|
</div>
|
|
<div class="camera" [fxShow]="isPreviewPhoto">
|
|
<img alt="preview photo" class="camera-stream" [src]="previewPhoto">
|
|
<canvas #canvas style="display:none;"></canvas>
|
|
<div class="camera-controls" fxLayout="row" fxLayoutAlign="space-between end">
|
|
<div fxFlex></div>
|
|
<button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
<button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()">
|
|
<mat-icon>check</mat-icon>
|
|
</button>
|
|
<div fxFlex></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="message-text" [fxHide]="isEntityDetected">
|
|
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
|
|
</div>
|
|
<div class="message-text" [fxShow]="isEntityDetected && !dataKeyDetected">
|
|
{{ 'widgets.input-widgets.no-datakey-selected' | translate }}
|
|
</div>
|
|
<div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && !isCameraSupport">
|
|
{{ 'widgets.input-widgets.no-support-web-camera' | translate }}
|
|
</div>
|
|
<div class="message-text" [fxShow]="isEntityDetected && dataKeyDetected && isCameraSupport && !isDeviceDetect">
|
|
{{ 'widgets.input-widgets.no-support-web-camera' | translate }}
|
|
</div>
|
|
</div>
|