Igor Kulikov
7 years ago
22 changed files with 2469 additions and 12 deletions
@ -0,0 +1,45 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 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 class="tb-knob" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}"> |
|||
<div #knobContainer id="knob-container" fxFlex fxLayout="column" fxLayoutAlign="center center"> |
|||
<div #knob class="knob"> |
|||
<div #knobValueContainer class="value-container" fxLayout="row" fxLayoutAlign="center center"> |
|||
<span #knobValue class="knob-value">{{ value }}</span> |
|||
</div> |
|||
<div class="canvas-background"></div> |
|||
<canvas #canvasBar id="canvasBar"></canvas> |
|||
<div #knobTopPointerContainer class="top-pointer-container"> |
|||
<div #knobTopPointer class="top-pointer"></div> |
|||
</div> |
|||
<div class="top"></div> |
|||
<div #knobErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}" |
|||
fxLayout="row" fxLayoutAlign="center center"> |
|||
<span #knobError class="knob-error">{{ error }}</span> |
|||
</div> |
|||
<div #knobTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center"> |
|||
<span #knobTitle class="knob-title">{{ title }}</span> |
|||
</div> |
|||
<div #knobMinmaxContainer class="minmax-container" fxLayout="row" fxLayoutAlign="start center"> |
|||
<span class="minmax-label">min</span> |
|||
<span fxFlex></span> |
|||
<span class="minmax-label">max</span> |
|||
</div> |
|||
<div #textMeasure id="text-measure"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,168 @@ |
|||
/** |
|||
* Copyright © 2016-2019 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. |
|||
*/ |
|||
$knob-img: url("./svg/knob.svg") !default; |
|||
|
|||
$bars-margin-pct: percentage(.033) !default; |
|||
$background-margin-pct: percentage(.05) !default; |
|||
$value-container-margin-pct: percentage(.35) !default; |
|||
$error-height: percentage(.05) !default; |
|||
$title-height: percentage(.066) !default; |
|||
$title-container-margin-pct: percentage(.2) !default; |
|||
$title-container-margin-bottom-pct: percentage(.05) !default; |
|||
$minmax-height: percentage(.04) !default; |
|||
$minmax-container-margin-pct: percentage(.18) !default; |
|||
$minmax-container-margin-bottom-pct: percentage(.12) !default; |
|||
|
|||
$background-color: #e6e7e8 !default; |
|||
|
|||
:host { |
|||
.tb-knob { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $background-color; |
|||
|
|||
.knob { |
|||
position: relative; |
|||
|
|||
&[draggable] { |
|||
user-select: none; |
|||
} |
|||
|
|||
#canvasBar { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.canvas-background { |
|||
position: absolute; |
|||
top: $background-margin-pct; |
|||
right: $background-margin-pct; |
|||
bottom: $background-margin-pct; |
|||
left: $background-margin-pct; |
|||
z-index: 2; |
|||
background: #3f4346; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.value-container { |
|||
position: absolute; |
|||
top: $value-container-margin-pct; |
|||
right: $value-container-margin-pct; |
|||
bottom: $value-container-margin-pct; |
|||
left: $value-container-margin-pct; |
|||
z-index: 4; |
|||
|
|||
.knob-value { |
|||
font-weight: 500; |
|||
color: #fff; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.error-container { |
|||
position: absolute; |
|||
top: 1%; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 4; |
|||
height: $error-height; |
|||
|
|||
.knob-error { |
|||
color: #ff3315; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.title-container { |
|||
position: absolute; |
|||
right: $title-container-margin-pct; |
|||
bottom: $title-container-margin-bottom-pct; |
|||
left: $title-container-margin-pct; |
|||
z-index: 4; |
|||
height: $title-height; |
|||
|
|||
.knob-title { |
|||
font-weight: 500; |
|||
color: #757575; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.minmax-container { |
|||
position: absolute; |
|||
right: $minmax-container-margin-pct; |
|||
bottom: $minmax-container-margin-bottom-pct; |
|||
left: $minmax-container-margin-pct; |
|||
z-index: 4; |
|||
height: $minmax-height; |
|||
|
|||
.minmax-label { |
|||
font-weight: 500; |
|||
color: #757575; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.top-pointer-container { |
|||
position: absolute; |
|||
top: $bars-margin-pct; |
|||
right: $bars-margin-pct; |
|||
bottom: $bars-margin-pct; |
|||
left: $bars-margin-pct; |
|||
z-index: 3; |
|||
cursor: pointer !important; |
|||
|
|||
.top-pointer { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 22%; |
|||
width: 5%; |
|||
height: 5%; |
|||
margin-top: -2.5%; |
|||
cursor: pointer !important; |
|||
content: ""; |
|||
background-color: #b5b5b5; |
|||
border-radius: 50%; |
|||
box-shadow: 1px 0 2px #040404; |
|||
} |
|||
} |
|||
|
|||
.top { |
|||
position: absolute; |
|||
top: $bars-margin-pct; |
|||
right: $bars-margin-pct; |
|||
bottom: $bars-margin-pct; |
|||
left: $bars-margin-pct; |
|||
z-index: 2; |
|||
cursor: pointer !important; |
|||
background: $knob-img no-repeat; |
|||
background-size: contain; |
|||
} |
|||
|
|||
#text-measure { |
|||
position: absolute; |
|||
width: auto; |
|||
height: auto; |
|||
white-space: nowrap; |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,435 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 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, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { isDefined, isNumber } from '@core/utils'; |
|||
import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge'; |
|||
import GenericOptions = CanvasGauges.GenericOptions; |
|||
import * as tinycolor_ from 'tinycolor2'; |
|||
|
|||
const tinycolor = tinycolor_; |
|||
|
|||
interface KnobSettings { |
|||
minValue: number; |
|||
maxValue: number; |
|||
initialValue: number; |
|||
title: string; |
|||
getValueMethod: string; |
|||
setValueMethod: string; |
|||
requestTimeout: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-knob', |
|||
templateUrl: './knob.component.html', |
|||
styleUrls: ['./knob.component.scss'] |
|||
}) |
|||
export class KnobComponent extends PageComponent implements OnInit, OnDestroy { |
|||
|
|||
@ViewChild('knob', {static: true}) knobRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobContainer', {static: true}) knobContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobTopPointerContainer', {static: true}) knobTopPointerContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobTopPointer', {static: true}) knobTopPointerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobValueContainer', {static: true}) knobValueContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobValue', {static: true}) knobValueRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobErrorContainer', {static: true}) knobErrorContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobError', {static: true}) knobErrorRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobTitleContainer', {static: true}) knobTitleContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobTitle', {static: true}) knobTitleRef: ElementRef<HTMLElement>; |
|||
@ViewChild('knobMinmaxContainer', {static: true}) knobMinmaxContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('textMeasure', {static: true}) textMeasureRef: ElementRef<HTMLElement>; |
|||
@ViewChild('canvasBar', {static: true}) canvasBarElementRef: ElementRef<HTMLElement>; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
value = '0'; |
|||
error = ''; |
|||
title = ''; |
|||
minValue: number; |
|||
maxValue: number; |
|||
|
|||
private startDeg = -1; |
|||
private currentDeg = 0; |
|||
private rotation = 0; |
|||
private lastDeg = 0; |
|||
private moving = false; |
|||
|
|||
private minDeg = -45; |
|||
private maxDeg = 225; |
|||
|
|||
private isSimulated: boolean; |
|||
private requestTimeout: number; |
|||
private getValueMethod: string; |
|||
private setValueMethod: string; |
|||
|
|||
private executingUpdateValue: boolean; |
|||
private scheduledValue: number; |
|||
private rpcValue: number; |
|||
|
|||
private knob: JQuery<HTMLElement>; |
|||
private knobContainer: JQuery<HTMLElement>; |
|||
private knobTopPointerContainer: JQuery<HTMLElement>; |
|||
private knobTopPointer: JQuery<HTMLElement>; |
|||
private knobValueContainer: JQuery<HTMLElement>; |
|||
private knobValue: JQuery<HTMLElement>; |
|||
private knobTitleContainer: JQuery<HTMLElement>; |
|||
private knobTitle: JQuery<HTMLElement>; |
|||
private knobErrorContainer: JQuery<HTMLElement>; |
|||
private knobError: JQuery<HTMLElement>; |
|||
private knobMinmaxContainer: JQuery<HTMLElement>; |
|||
private minmaxLabel: JQuery<HTMLElement>; |
|||
private textMeasure: JQuery<HTMLElement>; |
|||
private canvasBarElement: HTMLElement; |
|||
|
|||
private canvasBar: CanvasDigitalGauge; |
|||
|
|||
private knobResizeListener: any; |
|||
|
|||
constructor(private utils: UtilsService, |
|||
protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.knob = $(this.knobRef.nativeElement); |
|||
this.knobContainer = $(this.knobContainerRef.nativeElement); |
|||
this.knobTopPointerContainer = $(this.knobTopPointerContainerRef.nativeElement); |
|||
this.knobTopPointer = $(this.knobTopPointerRef.nativeElement); |
|||
this.knobValueContainer = $(this.knobValueContainerRef.nativeElement); |
|||
this.knobValue = $(this.knobValueRef.nativeElement); |
|||
this.knobTitleContainer = $(this.knobTitleContainerRef.nativeElement); |
|||
this.knobTitle = $(this.knobTitleRef.nativeElement); |
|||
this.knobErrorContainer = $(this.knobErrorContainerRef.nativeElement); |
|||
this.knobError = $(this.knobErrorRef.nativeElement); |
|||
this.knobMinmaxContainer = $(this.knobMinmaxContainerRef.nativeElement); |
|||
this.minmaxLabel = this.knobMinmaxContainer.find('.minmax-label'); |
|||
this.textMeasure = $(this.textMeasureRef.nativeElement); |
|||
this.canvasBarElement = this.canvasBarElementRef.nativeElement; |
|||
|
|||
this.knobResizeListener = this.resize.bind(this); |
|||
// @ts-ignore
|
|||
addResizeListener(this.knobContainerRef.nativeElement, this.knobResizeListener); |
|||
this.init(); |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
if (this.knobResizeListener) { |
|||
// @ts-ignore
|
|||
removeResizeListener(this.knobContainerRef.nativeElement, this.knobResizeListener); |
|||
} |
|||
} |
|||
|
|||
private init() { |
|||
const settings: KnobSettings = this.ctx.settings; |
|||
|
|||
this.minValue = isDefined(settings.minValue) ? settings.minValue : 0; |
|||
this.maxValue = isDefined(settings.maxValue) ? settings.maxValue : 100; |
|||
this.title = isDefined(settings.title) ? settings.title : ''; |
|||
|
|||
const levelColors = ['#19ff4b', '#ffff19', '#ff3232']; |
|||
|
|||
const canvasBarData: CanvasDigitalGaugeOptions = { |
|||
renderTo: this.canvasBarElement, |
|||
hideValue: true, |
|||
neonGlowBrightness: 0, |
|||
gaugeWidthScale: 0.4, |
|||
gaugeColor: 'rgba(0, 0, 0, 0)', |
|||
levelColors, |
|||
minValue: this.minValue, |
|||
maxValue: this.maxValue, |
|||
gaugeType: 'donut', |
|||
dashThickness: 2, |
|||
donutStartAngle: 3/4*Math.PI, |
|||
donutEndAngle: 9/4*Math.PI, |
|||
animation: false |
|||
}; |
|||
|
|||
this.canvasBar = new CanvasDigitalGauge(canvasBarData).draw(); |
|||
|
|||
this.knob.on('click', (e) => { |
|||
if (this.moving) { |
|||
this.moving = false; |
|||
return false; |
|||
} |
|||
e.preventDefault(); |
|||
|
|||
const offset = this.knob.offset(); |
|||
const center = { |
|||
y : offset.top + this.knob.height()/2, |
|||
x: offset.left + this.knob.width()/2 |
|||
}; |
|||
const rad2deg = 180/Math.PI; |
|||
const t: Touch = ((e.originalEvent as any).touches) ? (e.originalEvent as any).touches[0] : e; |
|||
|
|||
const a = center.y - t.pageY; |
|||
const b = center.x - t.pageX; |
|||
let deg = Math.atan2(a,b)*rad2deg; |
|||
if(deg < 0){ |
|||
deg = 360 + deg; |
|||
} |
|||
if (deg > this.maxDeg) { |
|||
if (deg - 360 > this.minDeg) { |
|||
deg = deg - 360; |
|||
} else { |
|||
return false; |
|||
} |
|||
} |
|||
this.currentDeg = deg; |
|||
this.lastDeg = deg; |
|||
this.knobTopPointerContainer.css('transform','rotate('+(this.currentDeg)+'deg)'); |
|||
this.turn(this.degreeToRatio(this.currentDeg)); |
|||
this.rotation = this.currentDeg; |
|||
this.startDeg = -1; |
|||
}); |
|||
|
|||
this.knob.on('mousedown touchstart', (e) => { |
|||
e.preventDefault(); |
|||
const offset = this.knob.offset(); |
|||
const center = { |
|||
y : offset.top + this.knob.height()/2, |
|||
x: offset.left + this.knob.width()/2 |
|||
}; |
|||
const rad2deg = 180/Math.PI; |
|||
|
|||
this.knob.on('mousemove.rem touchmove.rem', (ev) => { |
|||
this.moving = true; |
|||
const t: Touch = ((ev.originalEvent as any).touches) ? (ev.originalEvent as any).touches[0] : ev; |
|||
|
|||
const a = center.y - t.pageY; |
|||
const b = center.x - t.pageX; |
|||
let deg = Math.atan2(a,b)*rad2deg; |
|||
if(deg < 0){ |
|||
deg = 360 + deg; |
|||
} |
|||
|
|||
if(this.startDeg === -1){ |
|||
this.startDeg = deg; |
|||
} |
|||
|
|||
let tmp = Math.floor((deg-this.startDeg) + this.rotation); |
|||
|
|||
if(tmp < 0){ |
|||
tmp = 360 + tmp; |
|||
} |
|||
else if(tmp > 359){ |
|||
tmp = tmp % 360; |
|||
} |
|||
|
|||
if (tmp > this.maxDeg) { |
|||
if (tmp - 360 > this.minDeg) { |
|||
tmp = tmp - 360; |
|||
} else { |
|||
const deltaMax = Math.abs(this.maxDeg - this.lastDeg); |
|||
const deltaMin = Math.abs(this.minDeg - this.lastDeg); |
|||
if (deltaMax < deltaMin) { |
|||
tmp = this.maxDeg; |
|||
} else { |
|||
tmp = this.minDeg; |
|||
} |
|||
} |
|||
} |
|||
if(Math.abs(tmp - this.lastDeg) > 180){ |
|||
this.startDeg = deg; |
|||
this.rotation = this.currentDeg; |
|||
return false; |
|||
} |
|||
|
|||
this.currentDeg = tmp; |
|||
this.lastDeg = tmp; |
|||
|
|||
this.knobTopPointerContainer.css('transform','rotate('+(this.currentDeg)+'deg)'); |
|||
this.turn(this.degreeToRatio(this.currentDeg)); |
|||
}); |
|||
|
|||
$(document).on('mouseup.rem touchend.rem',() => { |
|||
this.knob.off('.rem'); |
|||
$(document).off('.rem'); |
|||
this.rotation = this.currentDeg; |
|||
this.startDeg = -1; |
|||
}); |
|||
|
|||
}); |
|||
|
|||
const initialValue = isDefined(settings.initialValue) ? settings.initialValue : this.minValue; |
|||
this.setValue(initialValue); |
|||
|
|||
const subscription = this.ctx.defaultSubscription; |
|||
const rpcEnabled = subscription.rpcEnabled; |
|||
|
|||
this.isSimulated = this.utils.widgetEditMode; |
|||
|
|||
this.requestTimeout = 500; |
|||
if (settings.requestTimeout) { |
|||
this.requestTimeout = settings.requestTimeout; |
|||
} |
|||
this.getValueMethod = 'getValue'; |
|||
if (settings.getValueMethod && settings.getValueMethod.length) { |
|||
this.getValueMethod = settings.getValueMethod; |
|||
} |
|||
this.setValueMethod = 'setValue'; |
|||
if (settings.setValueMethod && settings.setValueMethod.length) { |
|||
this.setValueMethod = settings.setValueMethod; |
|||
} |
|||
if (!rpcEnabled) { |
|||
this.onError('Target device is not set!'); |
|||
} else { |
|||
if (!this.isSimulated) { |
|||
this.rpcRequestValue(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private degreeToRatio(degree: number): number { |
|||
return (degree-this.minDeg)/(this.maxDeg-this.minDeg); |
|||
} |
|||
|
|||
private ratioToDegree(ratio: number): number { |
|||
return this.minDeg + ratio*(this.maxDeg-this.minDeg); |
|||
} |
|||
|
|||
private turn(ratio: number) { |
|||
const value = Number((this.minValue + (this.maxValue - this.minValue)*ratio).toFixed(this.ctx.decimals)); |
|||
if (this.canvasBar.value !== value) { |
|||
this.canvasBar.value = value; |
|||
} |
|||
this.updateColor(this.canvasBar.getValueColor()); |
|||
this.onValue(value); |
|||
} |
|||
|
|||
private resize() { |
|||
const width = this.knobContainer.width(); |
|||
const height = this.knobContainer.height(); |
|||
const size = Math.min(width, height); |
|||
this.knob.css({width: size, height: size}); |
|||
this.canvasBar.update({width: size, height: size} as GenericOptions); |
|||
this.setFontSize(this.knobTitle, this.title, this.knobTitleContainer.height(), this.knobTitleContainer.width()); |
|||
this.setFontSize(this.knobError, this.error, this.knobErrorContainer.height(), this.knobErrorContainer.width()); |
|||
const minmaxHeight = this.knobMinmaxContainer.height(); |
|||
this.minmaxLabel.css({fontSize: minmaxHeight+'px', lineHeight: minmaxHeight+'px'}); |
|||
this.checkValueSize(); |
|||
} |
|||
|
|||
private checkValueSize() { |
|||
const fontSize = this.knobValueContainer.height()/3.3; |
|||
const containerWidth = this.knobValueContainer.width(); |
|||
this.setFontSize(this.knobValue, this.value+'', fontSize, containerWidth); |
|||
} |
|||
|
|||
private setFontSize(element: JQuery<HTMLElement>, text: string, fontSize: number, maxWidth: number) { |
|||
let textWidth = this.measureTextWidth(text, fontSize); |
|||
while (textWidth > maxWidth) { |
|||
fontSize--; |
|||
textWidth = this.measureTextWidth(text, fontSize); |
|||
} |
|||
element.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
} |
|||
|
|||
private measureTextWidth(text: string, fontSize: number): number { |
|||
this.textMeasure.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
this.textMeasure.text(text); |
|||
return this.textMeasure.width(); |
|||
} |
|||
|
|||
private setValue(value: number) { |
|||
const ratio = (value-this.minValue) / (this.maxValue - this.minValue); |
|||
this.rotation = this.lastDeg = this.currentDeg = this.ratioToDegree(ratio); |
|||
this.knobTopPointerContainer.css('transform','rotate('+(this.currentDeg)+'deg)'); |
|||
if (this.canvasBar.value !== value) { |
|||
this.canvasBar.value = value; |
|||
} |
|||
this.updateColor(this.canvasBar.getValueColor()); |
|||
this.value = this.formatValue(value); |
|||
this.checkValueSize(); |
|||
} |
|||
|
|||
private updateColor(color: string) { |
|||
const glowColor = tinycolor(color).brighten(30).toHexString(); |
|||
this.knobValue.css({color: glowColor}); |
|||
const textShadow = `${color} 1px 1px 10px, ${glowColor} 1px 1px 10px`; |
|||
this.knobValue.css({textShadow}); |
|||
this.knobTopPointer.css({backgroundColor: glowColor}); |
|||
const boxShadow = `inset 1px 0 2px #040404, 1px 1px 8px 2px ${glowColor}`; |
|||
this.knobTopPointer.css({boxShadow}); |
|||
} |
|||
|
|||
private onValue(value: number) { |
|||
this.value = this.formatValue(value); |
|||
this.checkValueSize(); |
|||
this.rpcUpdateValue(value); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
private formatValue(value: any): string { |
|||
return this.ctx.utils.formatValue(value, this.ctx.decimals, this.ctx.units, true); |
|||
} |
|||
|
|||
private rpcRequestValue() { |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendTwoWayCommand(this.getValueMethod, null, this.requestTimeout).subscribe( |
|||
(responseBody) => { |
|||
if (isNumber(responseBody)) { |
|||
const numValue = Number(Number(responseBody).toFixed(this.ctx.decimals)); |
|||
this.setValue(numValue); |
|||
} else { |
|||
const errorText = `Unable to parse response: ${responseBody}`; |
|||
this.onError(errorText); |
|||
} |
|||
}, |
|||
() => { |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private rpcUpdateValue(value: number) { |
|||
if (this.executingUpdateValue) { |
|||
this.scheduledValue = value; |
|||
return; |
|||
} else { |
|||
this.scheduledValue = null; |
|||
this.rpcValue = value; |
|||
this.executingUpdateValue = true; |
|||
} |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendOneWayCommand(this.setValueMethod, value, this.requestTimeout).subscribe( |
|||
() => { |
|||
this.executingUpdateValue = false; |
|||
if (this.scheduledValue != null && this.scheduledValue !== this.rpcValue) { |
|||
this.rpcUpdateValue(this.scheduledValue); |
|||
} |
|||
}, |
|||
() => { |
|||
this.executingUpdateValue = false; |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private onError(error: string) { |
|||
this.error = error; |
|||
this.setFontSize(this.knobError, this.error, this.knobErrorContainer.height(), this.knobErrorContainer.width()); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 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 class="tb-led-indicator" fxLayout="column"> |
|||
<div fxFlex="20" #ledTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle"> |
|||
<span #ledTitle class="led-title">{{title}}</span> |
|||
</div> |
|||
<div fxFlex="{{showTitle ? 80 : 100}}" |
|||
[ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" #ledContainer id="led-container" fxLayout="column" fxLayoutAlign="center center"> |
|||
<div #led class="led"> |
|||
</div> |
|||
</div> |
|||
<div #ledErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}" |
|||
fxLayout="row" fxLayoutAlign="center center"> |
|||
<span #ledError class="led-error">{{ error }}</span> |
|||
</div> |
|||
<div #textMeasure id="text-measure"></div> |
|||
</div> |
|||
@ -0,0 +1,74 @@ |
|||
/** |
|||
* Copyright © 2016-2019 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 "~compass-sass-mixins/lib/compass"; |
|||
|
|||
$error-height: 14px !default; |
|||
|
|||
$background-color: #e6e7e8 !default; |
|||
|
|||
:host { |
|||
.tb-led-indicator { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $background-color; |
|||
|
|||
.title-container { |
|||
.led-title { |
|||
font-weight: 500; |
|||
color: #757575; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.error-container { |
|||
position: absolute; |
|||
top: 1%; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 4; |
|||
height: $error-height; |
|||
|
|||
.led-error { |
|||
color: #ff3315; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
#text-measure { |
|||
position: absolute; |
|||
width: auto; |
|||
height: auto; |
|||
white-space: nowrap; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
#led-container { |
|||
padding: 10px; |
|||
|
|||
.led { |
|||
position: relative; |
|||
cursor: pointer; |
|||
background-image: radial-gradient(circle closest-corner at 50% 50%, transparent, rgba(0, 0, 0, .25)); |
|||
border-radius: 50%; |
|||
transition: background-color .5s, box-shadow .5s; |
|||
|
|||
&.disabled { |
|||
background-image: radial-gradient(circle closest-corner at 50% 50%, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1)); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,342 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 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, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { isDefined } from '@core/utils'; |
|||
import * as tinycolor_ from 'tinycolor2'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; |
|||
import { DatasourceType, widgetType } from '@shared/models/widget.models'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
import Timeout = NodeJS.Timeout; |
|||
|
|||
const tinycolor = tinycolor_; |
|||
|
|||
const checkStatusPollingInterval = 10000; |
|||
|
|||
type RetrieveValueMethod = 'attribute' | 'timeseries'; |
|||
|
|||
interface LedIndicatorSettings { |
|||
initialValue: boolean; |
|||
title: string; |
|||
ledColor: string; |
|||
performCheckStatus: boolean; |
|||
checkStatusMethod: string; |
|||
retrieveValueMethod: RetrieveValueMethod; |
|||
valueAttribute: string; |
|||
parseValueFunction: string; |
|||
requestTimeout: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-led-indicator', |
|||
templateUrl: './led-indicator.component.html', |
|||
styleUrls: ['./led-indicator.component.scss'] |
|||
}) |
|||
export class LedIndicatorComponent extends PageComponent implements OnInit, OnDestroy { |
|||
|
|||
@ViewChild('led', {static: true}) ledRef: ElementRef<HTMLElement>; |
|||
@ViewChild('ledContainer', {static: true}) ledContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('textMeasure', {static: true}) textMeasureRef: ElementRef<HTMLElement>; |
|||
@ViewChild('ledTitleContainer', {static: true}) ledTitleContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('ledTitle', {static: true}) ledTitleRef: ElementRef<HTMLElement>; |
|||
@ViewChild('ledErrorContainer', {static: true}) ledErrorContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('ledError', {static: true}) ledErrorRef: ElementRef<HTMLElement>; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
showTitle = false; |
|||
value = false; |
|||
error = ''; |
|||
title = ''; |
|||
|
|||
private valueAttribute: string; |
|||
private ledColor: string; |
|||
private ledMiddleColor: string; |
|||
private disabledColor: string; |
|||
private disabledMiddleColor: string; |
|||
|
|||
private isSimulated: boolean; |
|||
private requestTimeout: number; |
|||
private retrieveValueMethod: RetrieveValueMethod; |
|||
private parseValueFunction: (data: any) => boolean; |
|||
private performCheckStatus: boolean; |
|||
private checkStatusMethod: string; |
|||
|
|||
private destroyed = false; |
|||
private checkStatusTimeoutHandle: Timeout; |
|||
private subscription: IWidgetSubscription; |
|||
|
|||
private led: JQuery<HTMLElement>; |
|||
private ledContainer: JQuery<HTMLElement>; |
|||
private textMeasure: JQuery<HTMLElement>; |
|||
private ledTitleContainer: JQuery<HTMLElement>; |
|||
private ledTitle: JQuery<HTMLElement>; |
|||
private ledErrorContainer: JQuery<HTMLElement>; |
|||
private ledError: JQuery<HTMLElement>; |
|||
|
|||
private ledResizeListener: any; |
|||
|
|||
private subscriptionOptions: WidgetSubscriptionOptions = { |
|||
callbacks: { |
|||
onDataUpdated: this.onDataUpdated.bind(this), |
|||
onDataUpdateError: this.onDataUpdateError.bind(this), |
|||
dataLoading: () => {} |
|||
} |
|||
}; |
|||
|
|||
|
|||
constructor(private utils: UtilsService, |
|||
protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.led = $(this.ledRef.nativeElement); |
|||
this.ledContainer = $(this.ledContainerRef.nativeElement); |
|||
this.textMeasure = $(this.textMeasureRef.nativeElement); |
|||
this.ledTitleContainer = $(this.ledTitleContainerRef.nativeElement); |
|||
this.ledTitle = $(this.ledTitleRef.nativeElement); |
|||
this.ledErrorContainer = $(this.ledErrorContainerRef.nativeElement); |
|||
this.ledError = $(this.ledErrorRef.nativeElement); |
|||
|
|||
this.ledResizeListener = this.resize.bind(this); |
|||
// @ts-ignore
|
|||
addResizeListener(this.ledContainerRef.nativeElement, this.ledResizeListener); |
|||
this.init(); |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
this.destroyed = true; |
|||
if (this.checkStatusTimeoutHandle) { |
|||
clearTimeout(this.checkStatusTimeoutHandle); |
|||
} |
|||
if (this.subscription) { |
|||
this.ctx.subscriptionApi.removeSubscription(this.subscription.id); |
|||
} |
|||
if (this.ledResizeListener) { |
|||
// @ts-ignore
|
|||
removeResizeListener(this.ledContainerRef.nativeElement, this.ledResizeListener); |
|||
} |
|||
} |
|||
|
|||
private init() { |
|||
const settings: LedIndicatorSettings = this.ctx.settings; |
|||
this.title = isDefined(settings.title) ? settings.title : ''; |
|||
this.showTitle = !!(this.title && this.title.length); |
|||
|
|||
const origColor = isDefined(settings.ledColor) ? settings.ledColor : 'green'; |
|||
this.valueAttribute = isDefined(settings.valueAttribute) ? settings.valueAttribute : 'value'; |
|||
|
|||
this.ledColor = tinycolor(origColor).brighten(30).toHexString(); |
|||
this.ledMiddleColor = tinycolor(origColor).toHexString(); |
|||
this.disabledColor = tinycolor(origColor).darken(40).toHexString(); |
|||
this.disabledMiddleColor = tinycolor(origColor).darken(60).toHexString(); |
|||
|
|||
const initialValue = isDefined(settings.initialValue) ? settings.initialValue : false; |
|||
this.setValue(initialValue, true); |
|||
|
|||
const subscription = this.ctx.defaultSubscription; |
|||
const rpcEnabled = subscription.rpcEnabled; |
|||
|
|||
this.isSimulated = this.utils.widgetEditMode; |
|||
|
|||
this.requestTimeout = 500; |
|||
if (settings.requestTimeout) { |
|||
this.requestTimeout = settings.requestTimeout; |
|||
} |
|||
this.retrieveValueMethod = 'attribute'; |
|||
if (settings.retrieveValueMethod && settings.retrieveValueMethod.length) { |
|||
this.retrieveValueMethod = settings.retrieveValueMethod; |
|||
} |
|||
this.parseValueFunction = (data) => !!data; |
|||
if (settings.parseValueFunction && settings.parseValueFunction.length) { |
|||
try { |
|||
this.parseValueFunction = new Function('data', settings.parseValueFunction) as (data: any) => boolean; |
|||
} catch (e) { |
|||
this.parseValueFunction = (data) => !!data; |
|||
} |
|||
} |
|||
this.performCheckStatus = settings.performCheckStatus !== false; |
|||
if (this.performCheckStatus) { |
|||
this.checkStatusMethod = 'checkStatus'; |
|||
if (settings.checkStatusMethod && settings.checkStatusMethod.length) { |
|||
this.checkStatusMethod = settings.checkStatusMethod; |
|||
} |
|||
} |
|||
if (!rpcEnabled) { |
|||
this.onError('Target device is not set!'); |
|||
} else { |
|||
if (!this.isSimulated) { |
|||
if (this.performCheckStatus) { |
|||
this.rpcCheckStatus(); |
|||
} else { |
|||
this.subscribeForValue(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private resize() { |
|||
const width = this.ledContainer.width(); |
|||
const height = this.ledContainer.height(); |
|||
const size = Math.min(width, height); |
|||
|
|||
this.led.css({width: size, height: size}); |
|||
|
|||
if (this.showTitle) { |
|||
this.setFontSize(this.ledTitle, this.title, this.ledTitleContainer.height() * 2 / 3, this.ledTitleContainer.width()); |
|||
} |
|||
this.setFontSize(this.ledError, this.error, this.ledErrorContainer.height(), this.ledErrorContainer.width()); |
|||
} |
|||
|
|||
private setFontSize(element: JQuery<HTMLElement>, text: string, fontSize: number, maxWidth: number) { |
|||
let textWidth = this.measureTextWidth(text, fontSize); |
|||
while (textWidth > maxWidth) { |
|||
fontSize--; |
|||
textWidth = this.measureTextWidth(text, fontSize); |
|||
} |
|||
element.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
} |
|||
|
|||
private measureTextWidth(text: string, fontSize: number): number { |
|||
this.textMeasure.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
this.textMeasure.text(text); |
|||
return this.textMeasure.width(); |
|||
} |
|||
|
|||
private onError(error: string) { |
|||
this.error = error; |
|||
this.setFontSize(this.ledError, this.error, this.ledErrorContainer.height(), this.ledErrorContainer.width()); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
private setValue(value: boolean, forceUpdate?: boolean) { |
|||
if (this.value !== value || forceUpdate) { |
|||
this.value = value; |
|||
this.updateColor(); |
|||
} |
|||
} |
|||
|
|||
private updateColor() { |
|||
const color = this.value ? this.ledColor : this.disabledColor; |
|||
const middleColor = this.value ? this.ledMiddleColor : this.disabledMiddleColor; |
|||
const boxShadow = `#000 0 -1px 6px 1px, inset ${middleColor} 0 -1px 8px, ${color} 0 3px 11px`; |
|||
this.led.css({backgroundColor: color}); |
|||
this.led.css({boxShadow}); |
|||
if (this.value) { |
|||
this.led.removeClass( 'disabled' ); |
|||
} else { |
|||
this.led.addClass( 'disabled' ); |
|||
} |
|||
} |
|||
|
|||
private rpcCheckStatus() { |
|||
if (this.destroyed) { |
|||
return; |
|||
} |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendTwoWayCommand(this.checkStatusMethod, null, this.requestTimeout).subscribe( |
|||
(responseBody) => { |
|||
const status = !!responseBody; |
|||
if (status) { |
|||
if (this.checkStatusTimeoutHandle) { |
|||
clearTimeout(this.checkStatusTimeoutHandle); |
|||
this.checkStatusTimeoutHandle = null; |
|||
} |
|||
this.subscribeForValue(); |
|||
} else { |
|||
const errorText = 'Unknown device status!'; |
|||
this.onError(errorText); |
|||
if (this.checkStatusTimeoutHandle) { |
|||
clearTimeout(this.checkStatusTimeoutHandle); |
|||
} |
|||
this.checkStatusTimeoutHandle = setTimeout(this.rpcCheckStatus.bind(this), checkStatusPollingInterval); |
|||
} |
|||
}, |
|||
() => { |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
if (this.checkStatusTimeoutHandle) { |
|||
clearTimeout(this.checkStatusTimeoutHandle); |
|||
} |
|||
this.checkStatusTimeoutHandle = setTimeout(this.rpcCheckStatus.bind(this), checkStatusPollingInterval); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private subscribeForValue() { |
|||
const subscriptionsInfo: SubscriptionInfo[] = [{ |
|||
type: DatasourceType.entity, |
|||
entityType: EntityType.DEVICE, |
|||
entityId: this.ctx.defaultSubscription.targetDeviceId |
|||
}]; |
|||
|
|||
if (this.retrieveValueMethod === 'attribute') { |
|||
subscriptionsInfo[0].attributes = [ |
|||
{name: this.valueAttribute} |
|||
]; |
|||
} else { |
|||
subscriptionsInfo[0].timeseries = [ |
|||
{name: this.valueAttribute} |
|||
]; |
|||
} |
|||
|
|||
this.ctx.subscriptionApi.createSubscriptionFromInfo ( |
|||
widgetType.latest, subscriptionsInfo, this.subscriptionOptions, false, true).subscribe( |
|||
(subscription) => { |
|||
this.subscription = subscription; |
|||
} |
|||
); |
|||
} |
|||
|
|||
private onDataUpdated (subscription: IWidgetSubscription, detectChanges: boolean) { |
|||
let value = false; |
|||
const data = subscription.data; |
|||
if (data.length) { |
|||
const keyData = data[0]; |
|||
if (keyData && keyData.data && keyData.data[0]) { |
|||
const attrValue = keyData.data[0][1]; |
|||
if (attrValue) { |
|||
let parsed = null; |
|||
try { |
|||
parsed = this.parseValueFunction(JSON.parse(attrValue)); |
|||
} catch (e){/**/} |
|||
value = !!parsed; |
|||
} |
|||
} |
|||
} |
|||
this.setValue(value); |
|||
if (detectChanges) { |
|||
this.ctx.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
private onDataUpdateError(subscription: IWidgetSubscription, e: any) { |
|||
const exceptionData = this.utils.parseException(e); |
|||
let errorText = exceptionData.name; |
|||
if (exceptionData.message) { |
|||
errorText += ': ' + exceptionData.message; |
|||
} |
|||
this.onError(errorText); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 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 class="tb-round-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}"> |
|||
<div #switchTitleContainer fxFlex="20" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle"> |
|||
<span #switchTitle class="switch-title">{{title}}</span> |
|||
</div> |
|||
<div #switchContainer fxFlex="{{showTitle ? 80 : 100}}" [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" id="switch-container" fxLayout="column" fxLayoutAlign="center center"> |
|||
<div #switch class="switch"> |
|||
<input #onoff type="checkbox" id="{{checkboxId}}" name="onoff" /> |
|||
<div class="back"> |
|||
<label class="but" for="{{checkboxId}}"> |
|||
<span class="on">I</span> |
|||
<span class="off">0</span> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}" |
|||
fxLayout="row" fxLayoutAlign="center center"> |
|||
<span #switchError class="switch-error">{{ error }}</span> |
|||
</div> |
|||
<div #textMeasure id="text-measure"></div> |
|||
</div> |
|||
@ -0,0 +1,198 @@ |
|||
/** |
|||
* Copyright © 2016-2019 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 "~compass-sass-mixins/lib/compass"; |
|||
|
|||
$error-height: 14px !default; |
|||
|
|||
$background-color: #e6e7e8 !default; |
|||
|
|||
:host { |
|||
.tb-round-switch { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $background-color; |
|||
|
|||
.title-container { |
|||
.switch-title { |
|||
font-weight: 500; |
|||
color: #757575; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.error-container { |
|||
position: absolute; |
|||
top: 1%; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 4; |
|||
height: $error-height; |
|||
|
|||
.switch-error { |
|||
color: #ff3315; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
#text-measure { |
|||
position: absolute; |
|||
width: auto; |
|||
height: auto; |
|||
white-space: nowrap; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
#switch-container { |
|||
padding: 10px; |
|||
|
|||
.switch { |
|||
position: relative; |
|||
|
|||
box-sizing: border-box; |
|||
width: 260px; |
|||
min-width: 260px; |
|||
height: 260px; |
|||
min-height: 260px; |
|||
padding: 25px; |
|||
font-family: sans-serif; |
|||
font-size: 48px; |
|||
|
|||
color: #424242; |
|||
cursor: pointer; |
|||
background: #ddd; |
|||
background: linear-gradient(180deg, #bbb, #ddd); |
|||
border-radius: 130px; |
|||
|
|||
box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), |
|||
0 0 3px 1px rgba(0, 0, 0, .1), |
|||
inset 0 8px 3px -8px rgba(255, 255, 255, .4); |
|||
|
|||
input { |
|||
display: none; |
|||
} |
|||
|
|||
.on, |
|||
.off { |
|||
position: absolute; |
|||
width: 100%; |
|||
text-align: center; |
|||
|
|||
text-shadow: 1px 1px 4px #4a4a4a; |
|||
} |
|||
|
|||
.on { |
|||
top: 10px; |
|||
font-family: sans-serif; |
|||
color: #444; |
|||
|
|||
transition: all .1s; |
|||
} |
|||
|
|||
.off { |
|||
bottom: 5px; |
|||
|
|||
transition: all .1s; |
|||
|
|||
transform: scaleY(.85); |
|||
} |
|||
|
|||
.but { |
|||
position: relative; |
|||
display: block; |
|||
width: 200px; |
|||
height: 178px; |
|||
font-size: 48px; |
|||
cursor: pointer; |
|||
background-color: #d8d8d8; |
|||
border-bottom-width: 0; |
|||
border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px; |
|||
|
|||
box-shadow: inset 8px 6px 5px -7px #a2a2a2, |
|||
inset -8px 6px 5px -7px #a2a2a2, |
|||
inset 0 -3px 2px -2px rgba(200, 200, 200, .5), |
|||
0 3px 3px -2px #fff, |
|||
inset 0 -230px 60px -200px rgba(255, 255, 255, .2), |
|||
inset 0 220px 40px -200px rgba(0, 0, 0, .3); |
|||
|
|||
transition: all .2s; |
|||
} |
|||
|
|||
.back { |
|||
|
|||
box-sizing: border-box; |
|||
width: 210px; |
|||
height: 210px; |
|||
padding: 4px 4px; |
|||
cursor: pointer; |
|||
background-color: #888787; |
|||
background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%); |
|||
border-radius: 105px; |
|||
|
|||
box-shadow: 30px 30px 30px -20px rgba(58, 58, 58, .3), |
|||
-30px 30px 30px -20px rgba(58, 58, 58, .3), |
|||
0 30px 30px 0 rgba(16, 16, 16, .3), |
|||
inset 0 -1px 0 0 #484848; |
|||
|
|||
transition: all .2s; |
|||
} |
|||
|
|||
|
|||
input:checked + .back .on, |
|||
input:checked + .back .off { |
|||
text-shadow: 1px 1px 4px #4a4a4a; |
|||
} |
|||
|
|||
input:checked + .back .on { |
|||
top: 10px; |
|||
color: #4c4c4c; |
|||
|
|||
transform: scaleY(.85); |
|||
} |
|||
|
|||
input:checked + .back .off { |
|||
bottom: 5px; |
|||
color: #444; |
|||
|
|||
transform: scaleY(1); |
|||
} |
|||
|
|||
input:checked + .back .but { |
|||
margin-top: 20px; |
|||
background: #dcdcdc radial-gradient(circle closest-corner at 50% 15%, rgba(0, 0, 0, .3), transparent); |
|||
border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px; |
|||
|
|||
box-shadow: inset 8px -4px 5px -7px #a9a9a9, |
|||
inset -8px -4px 5px -7px #808080, |
|||
0 -3px 8px -4px rgba(50, 50, 50, .4), |
|||
inset 0 3px 4px -2px #9c9c9c, |
|||
inset 0 280px 40px -200px rgba(0, 0, 0, .2), |
|||
inset 0 -200px 40px -200px rgba(180, 180, 180, .2); |
|||
} |
|||
|
|||
input:checked + .back { |
|||
padding: 2px 4px; |
|||
|
|||
background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%); |
|||
|
|||
box-shadow: 30px 30px 30px -20px rgba(49, 49, 49, .1), |
|||
-30px 30px 30px -20px rgba(111, 111, 111, .1), |
|||
0 30px 30px 0 rgba(0, 0, 0, .2), |
|||
inset 0 1px 2px 0 rgba(167, 167, 167, .6); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,338 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 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 { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { isDefined } from '@core/utils'; |
|||
import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; |
|||
import { DatasourceType, widgetType } from '@shared/models/widget.models'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
|
|||
type RetrieveValueMethod = 'rpc' | 'attribute' | 'timeseries'; |
|||
|
|||
interface RoundSwitchSettings { |
|||
initialValue: boolean; |
|||
title: string; |
|||
retrieveValueMethod: RetrieveValueMethod; |
|||
valueKey: string; |
|||
getValueMethod: string; |
|||
setValueMethod: string; |
|||
parseValueFunction: string; |
|||
convertValueFunction: string; |
|||
requestTimeout: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-round-switch', |
|||
templateUrl: './round-switch.component.html', |
|||
styleUrls: ['./round-switch.component.scss'] |
|||
}) |
|||
export class RoundSwitchComponent extends PageComponent implements OnInit, OnDestroy { |
|||
|
|||
@ViewChild('switch', {static: true}) switchElementRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchContainer', {static: true}) switchContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('onoff', {static: true}) onoffRef: ElementRef<HTMLElement>; |
|||
@ViewChild('textMeasure', {static: true}) textMeasureRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchTitleContainer', {static: true}) switchTitleContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchTitle', {static: true}) switchTitleRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchErrorContainer', {static: true}) switchErrorContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchError', {static: true}) switchErrorRef: ElementRef<HTMLElement>; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
showTitle = false; |
|||
value = false; |
|||
error = ''; |
|||
title = ''; |
|||
checkboxId = 'onoff-' + this.utils.guid(); |
|||
|
|||
private isSimulated: boolean; |
|||
private requestTimeout: number; |
|||
private retrieveValueMethod: RetrieveValueMethod; |
|||
private valueKey: string; |
|||
private parseValueFunction: (data: any) => boolean; |
|||
private convertValueFunction: (value: any) => any; |
|||
private getValueMethod: string; |
|||
private setValueMethod: string; |
|||
|
|||
private valueSubscription: IWidgetSubscription; |
|||
|
|||
private executingUpdateValue: boolean; |
|||
private scheduledValue: boolean; |
|||
private rpcValue: boolean; |
|||
|
|||
private switchElement: JQuery<HTMLElement>; |
|||
private switchContainer: JQuery<HTMLElement>; |
|||
private onoff: JQuery<HTMLElement>; |
|||
private textMeasure: JQuery<HTMLElement>; |
|||
private switchTitleContainer: JQuery<HTMLElement>; |
|||
private switchTitle: JQuery<HTMLElement>; |
|||
private switchErrorContainer: JQuery<HTMLElement>; |
|||
private switchError: JQuery<HTMLElement>; |
|||
|
|||
private switchResizeListener: any; |
|||
|
|||
constructor(private utils: UtilsService, |
|||
protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.switchElement = $(this.switchElementRef.nativeElement); |
|||
this.switchContainer = $(this.switchContainerRef.nativeElement); |
|||
this.onoff = $(this.onoffRef.nativeElement); |
|||
this.textMeasure = $(this.textMeasureRef.nativeElement); |
|||
this.switchTitleContainer = $(this.switchTitleContainerRef.nativeElement); |
|||
this.switchTitle = $(this.switchTitleRef.nativeElement); |
|||
this.switchErrorContainer = $(this.switchErrorContainerRef.nativeElement); |
|||
this.switchError = $(this.switchErrorRef.nativeElement); |
|||
|
|||
this.onoff.on('change', () => { |
|||
this.value = this.onoff.prop('checked') === false; |
|||
this.onValue(); |
|||
}); |
|||
|
|||
this.switchResizeListener = this.resize.bind(this); |
|||
// @ts-ignore
|
|||
addResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); |
|||
this.init(); |
|||
// this.ctx.resize = this.resize.bind(this);
|
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
if (this.valueSubscription) { |
|||
this.ctx.subscriptionApi.removeSubscription(this.valueSubscription.id); |
|||
} |
|||
if (this.switchResizeListener) { |
|||
// @ts-ignore
|
|||
removeResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); |
|||
} |
|||
} |
|||
|
|||
private init() { |
|||
const settings: RoundSwitchSettings = this.ctx.settings; |
|||
this.title = isDefined(settings.title) ? settings.title : ''; |
|||
this.showTitle = !!(this.title && this.title.length); |
|||
const initialValue = isDefined(settings.initialValue) ? settings.initialValue : false; |
|||
this.setValue(initialValue); |
|||
|
|||
const subscription = this.ctx.defaultSubscription; |
|||
const rpcEnabled = subscription.rpcEnabled; |
|||
|
|||
this.isSimulated = this.utils.widgetEditMode; |
|||
|
|||
this.requestTimeout = 500; |
|||
if (settings.requestTimeout) { |
|||
this.requestTimeout = settings.requestTimeout; |
|||
} |
|||
this.retrieveValueMethod = 'rpc'; |
|||
if (settings.retrieveValueMethod && settings.retrieveValueMethod.length) { |
|||
this.retrieveValueMethod = settings.retrieveValueMethod; |
|||
} |
|||
this.valueKey = 'value'; |
|||
if (settings.valueKey && settings.valueKey.length) { |
|||
this.valueKey = settings.valueKey; |
|||
} |
|||
this.parseValueFunction = (data) => !!data; |
|||
if (settings.parseValueFunction && settings.parseValueFunction.length) { |
|||
try { |
|||
this.parseValueFunction = new Function('data', settings.parseValueFunction) as (data: any) => boolean; |
|||
} catch (e) { |
|||
this.parseValueFunction = (data) => !!data; |
|||
} |
|||
} |
|||
this.convertValueFunction = (value) => value; |
|||
if (settings.convertValueFunction && settings.convertValueFunction.length) { |
|||
try { |
|||
this.convertValueFunction = new Function('value', settings.convertValueFunction) as (value: any) => any; |
|||
} catch (e) { |
|||
this.convertValueFunction = (value) => value; |
|||
} |
|||
} |
|||
this.getValueMethod = 'getValue'; |
|||
if (settings.getValueMethod && settings.getValueMethod.length) { |
|||
this.getValueMethod = settings.getValueMethod; |
|||
} |
|||
this.setValueMethod = 'setValue'; |
|||
if (settings.setValueMethod && settings.setValueMethod.length) { |
|||
this.setValueMethod = settings.setValueMethod; |
|||
} |
|||
if (!rpcEnabled) { |
|||
this.onError('Target device is not set!'); |
|||
} else { |
|||
if (!this.isSimulated) { |
|||
if (this.retrieveValueMethod === 'rpc') { |
|||
this.rpcRequestValue(); |
|||
} else if (this.retrieveValueMethod === 'attribute' || this.retrieveValueMethod === 'timeseries') { |
|||
this.subscribeForValue(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
private resize() { |
|||
const width = this.switchContainer.width(); |
|||
const height = this.switchContainer.height(); |
|||
const size = Math.min(width, height); |
|||
const scale = size/260; |
|||
this.switchElement.css({ |
|||
'-webkit-transform': `scale(${scale})`, |
|||
'-moz-transform': `scale(${scale})`, |
|||
'-ms-transform': `scale(${scale})`, |
|||
'-o-transform': `scale(${scale})`, |
|||
transform: `scale(${scale})` |
|||
}); |
|||
if (this.showTitle) { |
|||
this.setFontSize(this.switchTitle, this.title, this.switchTitleContainer.height() * 2 / 3, this.switchTitleContainer.width()); |
|||
} |
|||
this.setFontSize(this.switchError, this.error, this.switchErrorContainer.height(), this.switchErrorContainer.width()); |
|||
} |
|||
|
|||
private setFontSize(element: JQuery<HTMLElement>, text: string, fontSize: number, maxWidth: number) { |
|||
let textWidth = this.measureTextWidth(text, fontSize); |
|||
while (textWidth > maxWidth) { |
|||
fontSize--; |
|||
textWidth = this.measureTextWidth(text, fontSize); |
|||
} |
|||
element.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
} |
|||
|
|||
private measureTextWidth(text: string, fontSize: number): number { |
|||
this.textMeasure.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
this.textMeasure.text(text); |
|||
return this.textMeasure.width(); |
|||
} |
|||
|
|||
private onError(error: string) { |
|||
this.error = error; |
|||
this.setFontSize(this.switchError, this.error, this.switchErrorContainer.height(), this.switchErrorContainer.width()); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
private setValue(value: boolean) { |
|||
this.value = value ? true : false; |
|||
this.onoff.prop('checked', !this.value); |
|||
} |
|||
|
|||
private onValue() { |
|||
this.rpcUpdateValue(this.value); |
|||
} |
|||
|
|||
private rpcRequestValue() { |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendTwoWayCommand(this.getValueMethod, null, this.requestTimeout).subscribe( |
|||
(responseBody) => { |
|||
this.setValue(this.parseValueFunction(responseBody)); |
|||
}, |
|||
() => { |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private rpcUpdateValue(value) { |
|||
if (this.executingUpdateValue) { |
|||
this.scheduledValue = value; |
|||
return; |
|||
} else { |
|||
this.scheduledValue = null; |
|||
this.rpcValue = value; |
|||
this.executingUpdateValue = true; |
|||
} |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendOneWayCommand(this.setValueMethod, this.convertValueFunction(value), this.requestTimeout).subscribe( |
|||
() => { |
|||
this.executingUpdateValue = false; |
|||
if (this.scheduledValue != null && this.scheduledValue !== this.rpcValue) { |
|||
this.rpcUpdateValue(this.scheduledValue); |
|||
} |
|||
}, |
|||
() => { |
|||
this.executingUpdateValue = false; |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private subscribeForValue() { |
|||
const valueSubscriptionInfo: SubscriptionInfo[] = [{ |
|||
type: DatasourceType.entity, |
|||
entityType: EntityType.DEVICE, |
|||
entityId: this.ctx.defaultSubscription.targetDeviceId |
|||
}]; |
|||
if (this.retrieveValueMethod === 'attribute') { |
|||
valueSubscriptionInfo[0].attributes = [ |
|||
{name: this.valueKey} |
|||
]; |
|||
} else { |
|||
valueSubscriptionInfo[0].timeseries = [ |
|||
{name: this.valueKey} |
|||
]; |
|||
} |
|||
const subscriptionOptions: WidgetSubscriptionOptions = { |
|||
callbacks: { |
|||
onDataUpdated: this.onDataUpdated.bind(this), |
|||
onDataUpdateError: this.onDataUpdateError.bind(this) |
|||
} |
|||
}; |
|||
this.ctx.subscriptionApi.createSubscriptionFromInfo ( |
|||
widgetType.latest, valueSubscriptionInfo, subscriptionOptions, false, true).subscribe( |
|||
(subscription) => { |
|||
this.valueSubscription = subscription; |
|||
} |
|||
); |
|||
} |
|||
|
|||
private onDataUpdated(subscription: IWidgetSubscription, detectChanges: boolean) { |
|||
let value = false; |
|||
const data = subscription.data; |
|||
if (data.length) { |
|||
const keyData = data[0]; |
|||
if (keyData && keyData.data && keyData.data[0]) { |
|||
const attrValue = keyData.data[0][1]; |
|||
if (attrValue) { |
|||
let parsed = null; |
|||
try { |
|||
parsed = this.parseValueFunction(JSON.parse(attrValue)); |
|||
} catch (e){/**/} |
|||
value = !!parsed; |
|||
} |
|||
} |
|||
} |
|||
this.setValue(value); |
|||
if (detectChanges) { |
|||
this.ctx.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
private onDataUpdateError(subscription: IWidgetSubscription, e: any) { |
|||
const exceptionData = this.utils.parseException(e); |
|||
let errorText = exceptionData.name; |
|||
if (exceptionData.message) { |
|||
errorText += ': ' + exceptionData.message; |
|||
} |
|||
this.onError(errorText); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 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 { NgModule } from '@angular/core'; |
|||
import { CommonModule } from '@angular/common'; |
|||
import { SharedModule } from '@app/shared/shared.module'; |
|||
import { LedIndicatorComponent } from '@home/components/widget/lib/rpc/led-indicator.component'; |
|||
import { RoundSwitchComponent } from '@home/components/widget/lib/rpc/round-switch.component'; |
|||
import { SwitchComponent } from '@home/components/widget/lib/rpc/switch.component'; |
|||
import { KnobComponent } from '@home/components/widget/lib/rpc/knob.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: |
|||
[ |
|||
LedIndicatorComponent, |
|||
RoundSwitchComponent, |
|||
SwitchComponent, |
|||
KnobComponent |
|||
], |
|||
imports: [ |
|||
CommonModule, |
|||
SharedModule |
|||
], |
|||
exports: [ |
|||
LedIndicatorComponent, |
|||
RoundSwitchComponent, |
|||
SwitchComponent, |
|||
KnobComponent |
|||
] |
|||
}) |
|||
export class RpcWidgetsModule { } |
|||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,39 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 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 class="tb-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}"> |
|||
<div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}" |
|||
fxLayout="row" fxLayoutAlign="center center"> |
|||
<span #switchError class="switch-error">{{ error }}</span> |
|||
</div> |
|||
<div #switchTitleContainer fxFlex="30" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle"> |
|||
<span #switchTitle class="switch-title">{{title}}</span> |
|||
</div> |
|||
<div #switchContainer fxFlex="{{showTitle ? 70 : 100}}" id="switch-container" fxLayout="column" fxLayoutAlign="center center"> |
|||
<div #switch class="switch"> |
|||
<mat-slide-toggle #matSlideToggle [(ngModel)]="value" (change)="onValue()"> |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div #onoffContainer class="onoff-container" fxLayout="row" fxLayoutAlign="center start" [fxShow]="showOnOffLabels"> |
|||
<span #offLabel fxFlex class="off-label" [fxShow]="!value" style="text-align: center;">OFF</span> |
|||
<span fxFlex [fxShow]="value"></span> |
|||
<span #onLabel fxFlex class="on-label" [fxShow]="value" style="text-align: center;">ON</span> |
|||
<span fxFlex [fxShow]="!value"></span> |
|||
</div> |
|||
</div> |
|||
<div #textMeasure id="text-measure"></div> |
|||
</div> |
|||
@ -0,0 +1,147 @@ |
|||
/** |
|||
* Copyright © 2016-2019 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. |
|||
*/ |
|||
|
|||
|
|||
$thumb-img: url("./svg/thumb.svg") !default; |
|||
$thumb-checked-img: url("./svg/thumb-checked.svg") !default; |
|||
$thumb-bar-img: url("./svg/thumb-bar.svg") !default; |
|||
$thumb-bar-checked-img: url("./svg/thumb-bar-checked.svg") !default; |
|||
|
|||
$background-color: #e6e7e8 !default; |
|||
|
|||
$error-height: 14px !default; |
|||
|
|||
:host { |
|||
|
|||
.tb-switch { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $background-color; |
|||
|
|||
.error-container { |
|||
position: absolute; |
|||
top: 1%; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 4; |
|||
height: $error-height; |
|||
|
|||
.switch-error { |
|||
color: #ff3315; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.onoff-container { |
|||
height: 100%; |
|||
font-weight: 500; |
|||
color: #757575; |
|||
white-space: nowrap; |
|||
|
|||
.off-label { |
|||
color: #b7b5b5; |
|||
} |
|||
|
|||
.on-label { |
|||
color: #ff7e57; |
|||
text-shadow: #ff6e4a 1px 1px 10px, #ffd1c3 1px 1px 10px; |
|||
} |
|||
} |
|||
|
|||
.title-container { |
|||
.switch-title { |
|||
font-weight: 500; |
|||
color: #757575; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
#switch-container { |
|||
padding-right: 10px; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
.switch { |
|||
position: relative; |
|||
} |
|||
|
|||
#text-measure { |
|||
position: absolute; |
|||
width: auto; |
|||
height: auto; |
|||
white-space: nowrap; |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.tb-switch { |
|||
.switch { |
|||
mat-slide-toggle { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
margin: 0; |
|||
|
|||
.mat-slide-toggle-bar { |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $thumb-bar-img no-repeat; |
|||
background-size: contain; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.mat-slide-toggle-thumb-container { |
|||
top: 5%; |
|||
left: .25%; |
|||
width: 50%; |
|||
height: 90%; |
|||
} |
|||
|
|||
.mat-slide-toggle-thumb { |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $thumb-img no-repeat; |
|||
background-size: contain; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
&.mat-checked { |
|||
.mat-slide-toggle-thumb-container { |
|||
transform: translate3d(100%,0,0); |
|||
} |
|||
.mat-slide-toggle-bar { |
|||
background: $thumb-bar-checked-img no-repeat; |
|||
background-size: contain; |
|||
} |
|||
|
|||
.mat-slide-toggle-thumb { |
|||
background: $thumb-checked-img no-repeat; |
|||
background-size: contain; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,354 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 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, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { isDefined } from '@core/utils'; |
|||
import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; |
|||
import { DatasourceType, widgetType } from '@shared/models/widget.models'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
import { MatSlideToggle } from '@angular/material/slide-toggle'; |
|||
|
|||
const switchAspectRation = 2.7893; |
|||
|
|||
type RetrieveValueMethod = 'rpc' | 'attribute' | 'timeseries'; |
|||
|
|||
interface SwitchSettings { |
|||
initialValue: boolean; |
|||
title: string; |
|||
showOnOffLabels: boolean; |
|||
retrieveValueMethod: RetrieveValueMethod; |
|||
valueKey: string; |
|||
getValueMethod: string; |
|||
setValueMethod: string; |
|||
parseValueFunction: string; |
|||
convertValueFunction: string; |
|||
requestTimeout: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-switch', |
|||
templateUrl: './switch.component.html', |
|||
styleUrls: ['./switch.component.scss'] |
|||
}) |
|||
export class SwitchComponent extends PageComponent implements OnInit, OnDestroy { |
|||
|
|||
@ViewChild('switch', {static: true}) switchElementRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchContainer', {static: true}) switchContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('matSlideToggle', {static: true}) matSlideToggleRef: MatSlideToggle; |
|||
@ViewChild('onoffContainer', {static: true}) onoffContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('onLabel', {static: true}) onLabelRef: ElementRef<HTMLElement>; |
|||
@ViewChild('offLabel', {static: true}) offLabelRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchTitleContainer', {static: true}) switchTitleContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchTitle', {static: true}) switchTitleRef: ElementRef<HTMLElement>; |
|||
@ViewChild('textMeasure', {static: true}) textMeasureRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchErrorContainer', {static: true}) switchErrorContainerRef: ElementRef<HTMLElement>; |
|||
@ViewChild('switchError', {static: true}) switchErrorRef: ElementRef<HTMLElement>; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
showTitle = false; |
|||
value = false; |
|||
error = ''; |
|||
title = ''; |
|||
showOnOffLabels = false; |
|||
|
|||
private isSimulated: boolean; |
|||
private requestTimeout: number; |
|||
private retrieveValueMethod: RetrieveValueMethod; |
|||
private valueKey: string; |
|||
private parseValueFunction: (data: any) => boolean; |
|||
private convertValueFunction: (value: any) => any; |
|||
private getValueMethod: string; |
|||
private setValueMethod: string; |
|||
|
|||
private valueSubscription: IWidgetSubscription; |
|||
|
|||
private executingUpdateValue: boolean; |
|||
private scheduledValue: boolean; |
|||
private rpcValue: boolean; |
|||
|
|||
private switchElement: JQuery<HTMLElement>; |
|||
private switchContainer: JQuery<HTMLElement>; |
|||
private matSlideToggle: JQuery<HTMLElement>; |
|||
private onoffContainer: JQuery<HTMLElement>; |
|||
private onLabel: JQuery<HTMLElement>; |
|||
private offLabel: JQuery<HTMLElement>; |
|||
private switchTitleContainer: JQuery<HTMLElement>; |
|||
private switchTitle: JQuery<HTMLElement>; |
|||
private textMeasure: JQuery<HTMLElement>; |
|||
private switchErrorContainer: JQuery<HTMLElement>; |
|||
private switchError: JQuery<HTMLElement>; |
|||
|
|||
private switchResizeListener: any; |
|||
|
|||
constructor(private utils: UtilsService, |
|||
protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.switchElement = $(this.switchElementRef.nativeElement); |
|||
this.switchContainer = $(this.switchContainerRef.nativeElement); |
|||
this.matSlideToggle = $(this.matSlideToggleRef._elementRef.nativeElement); |
|||
this.onoffContainer = $(this.onoffContainerRef.nativeElement); |
|||
this.onLabel = $(this.onLabelRef.nativeElement); |
|||
this.offLabel = $(this.offLabelRef.nativeElement); |
|||
this.switchTitleContainer = $(this.switchTitleContainerRef.nativeElement); |
|||
this.switchTitle = $(this.switchTitleRef.nativeElement); |
|||
this.textMeasure = $(this.textMeasureRef.nativeElement); |
|||
this.switchErrorContainer = $(this.switchErrorContainerRef.nativeElement); |
|||
this.switchError = $(this.switchErrorRef.nativeElement); |
|||
|
|||
this.switchResizeListener = this.resize.bind(this); |
|||
// @ts-ignore
|
|||
addResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); |
|||
this.init(); |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
if (this.valueSubscription) { |
|||
this.ctx.subscriptionApi.removeSubscription(this.valueSubscription.id); |
|||
} |
|||
if (this.switchResizeListener) { |
|||
// @ts-ignore
|
|||
removeResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); |
|||
} |
|||
} |
|||
|
|||
private init() { |
|||
const settings: SwitchSettings = this.ctx.settings; |
|||
this.title = isDefined(settings.title) ? settings.title : ''; |
|||
this.showTitle = !!(this.title && this.title.length); |
|||
this.showOnOffLabels = isDefined(settings.showOnOffLabels) ? settings.showOnOffLabels : true; |
|||
const initialValue = isDefined(settings.initialValue) ? settings.initialValue : false; |
|||
this.setValue(initialValue); |
|||
|
|||
const subscription = this.ctx.defaultSubscription; |
|||
const rpcEnabled = subscription.rpcEnabled; |
|||
|
|||
this.isSimulated = this.utils.widgetEditMode; |
|||
|
|||
this.requestTimeout = 500; |
|||
if (settings.requestTimeout) { |
|||
this.requestTimeout = settings.requestTimeout; |
|||
} |
|||
this.retrieveValueMethod = 'rpc'; |
|||
if (settings.retrieveValueMethod && settings.retrieveValueMethod.length) { |
|||
this.retrieveValueMethod = settings.retrieveValueMethod; |
|||
} |
|||
this.valueKey = 'value'; |
|||
if (settings.valueKey && settings.valueKey.length) { |
|||
this.valueKey = settings.valueKey; |
|||
} |
|||
this.parseValueFunction = (data) => !!data; |
|||
if (settings.parseValueFunction && settings.parseValueFunction.length) { |
|||
try { |
|||
this.parseValueFunction = new Function('data', settings.parseValueFunction) as (data: any) => boolean; |
|||
} catch (e) { |
|||
this.parseValueFunction = (data) => !!data; |
|||
} |
|||
} |
|||
this.convertValueFunction = (value) => value; |
|||
if (settings.convertValueFunction && settings.convertValueFunction.length) { |
|||
try { |
|||
this.convertValueFunction = new Function('value', settings.convertValueFunction) as (value: any) => any; |
|||
} catch (e) { |
|||
this.convertValueFunction = (value) => value; |
|||
} |
|||
} |
|||
this.getValueMethod = 'getValue'; |
|||
if (settings.getValueMethod && settings.getValueMethod.length) { |
|||
this.getValueMethod = settings.getValueMethod; |
|||
} |
|||
this.setValueMethod = 'setValue'; |
|||
if (settings.setValueMethod && settings.setValueMethod.length) { |
|||
this.setValueMethod = settings.setValueMethod; |
|||
} |
|||
if (!rpcEnabled) { |
|||
this.onError('Target device is not set!'); |
|||
} else { |
|||
if (!this.isSimulated) { |
|||
if (this.retrieveValueMethod === 'rpc') { |
|||
this.rpcRequestValue(); |
|||
} else if (this.retrieveValueMethod === 'attribute' || this.retrieveValueMethod === 'timeseries') { |
|||
this.subscribeForValue(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
private resize() { |
|||
let width = this.switchContainer.width(); |
|||
let height = this.switchContainer.height(); |
|||
if (this.showOnOffLabels) { |
|||
height = height*2/3; |
|||
} |
|||
const ratio = width/height; |
|||
if (ratio > switchAspectRation) { |
|||
width = height*switchAspectRation; |
|||
} else { |
|||
height = width/switchAspectRation; |
|||
} |
|||
this.switchElement.css({width, height}); |
|||
this.matSlideToggle.css({width, height, minWidth: width}); |
|||
|
|||
if (this.showTitle) { |
|||
this.setFontSize(this.switchTitle, this.title, this.switchTitleContainer.height() * 2 / 3, this.switchTitleContainer.width()); |
|||
} |
|||
|
|||
if (this.showOnOffLabels) { |
|||
this.onoffContainer.css({width, height: this.switchContainer.height() / 3}); |
|||
this.setFontSize(this.onLabel, 'OFF', this.onoffContainer.height(), this.onoffContainer.width() / 2); |
|||
this.setFontSize(this.offLabel, 'OFF', this.onoffContainer.height(), this.onoffContainer.width() / 2); |
|||
} |
|||
|
|||
this.setFontSize(this.switchError, this.error, this.switchErrorContainer.height(), this.switchErrorContainer.width()); |
|||
} |
|||
|
|||
private setFontSize(element: JQuery<HTMLElement>, text: string, fontSize: number, maxWidth: number) { |
|||
let textWidth = this.measureTextWidth(text, fontSize); |
|||
while (textWidth > maxWidth) { |
|||
fontSize--; |
|||
textWidth = this.measureTextWidth(text, fontSize); |
|||
} |
|||
element.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
} |
|||
|
|||
private measureTextWidth(text: string, fontSize: number): number { |
|||
this.textMeasure.css({fontSize: fontSize+'px', lineHeight: fontSize+'px'}); |
|||
this.textMeasure.text(text); |
|||
return this.textMeasure.width(); |
|||
} |
|||
|
|||
private onError(error: string) { |
|||
this.error = error; |
|||
this.setFontSize(this.switchError, this.error, this.switchErrorContainer.height(), this.switchErrorContainer.width()); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
private setValue(value: boolean) { |
|||
this.value = value ? true : false; |
|||
} |
|||
|
|||
public onValue() { |
|||
this.rpcUpdateValue(this.value); |
|||
} |
|||
|
|||
private rpcRequestValue() { |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendTwoWayCommand(this.getValueMethod, null, this.requestTimeout).subscribe( |
|||
(responseBody) => { |
|||
this.setValue(this.parseValueFunction(responseBody)); |
|||
}, |
|||
() => { |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private rpcUpdateValue(value) { |
|||
if (this.executingUpdateValue) { |
|||
this.scheduledValue = value; |
|||
return; |
|||
} else { |
|||
this.scheduledValue = null; |
|||
this.rpcValue = value; |
|||
this.executingUpdateValue = true; |
|||
} |
|||
this.error = ''; |
|||
this.ctx.controlApi.sendOneWayCommand(this.setValueMethod, this.convertValueFunction(value), this.requestTimeout).subscribe( |
|||
() => { |
|||
this.executingUpdateValue = false; |
|||
if (this.scheduledValue != null && this.scheduledValue !== this.rpcValue) { |
|||
this.rpcUpdateValue(this.scheduledValue); |
|||
} |
|||
}, |
|||
() => { |
|||
this.executingUpdateValue = false; |
|||
const errorText = this.ctx.defaultSubscription.rpcErrorText; |
|||
this.onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
private subscribeForValue() { |
|||
const valueSubscriptionInfo: SubscriptionInfo[] = [{ |
|||
type: DatasourceType.entity, |
|||
entityType: EntityType.DEVICE, |
|||
entityId: this.ctx.defaultSubscription.targetDeviceId |
|||
}]; |
|||
if (this.retrieveValueMethod === 'attribute') { |
|||
valueSubscriptionInfo[0].attributes = [ |
|||
{name: this.valueKey} |
|||
]; |
|||
} else { |
|||
valueSubscriptionInfo[0].timeseries = [ |
|||
{name: this.valueKey} |
|||
]; |
|||
} |
|||
const subscriptionOptions: WidgetSubscriptionOptions = { |
|||
callbacks: { |
|||
onDataUpdated: this.onDataUpdated.bind(this), |
|||
onDataUpdateError: this.onDataUpdateError.bind(this) |
|||
} |
|||
}; |
|||
this.ctx.subscriptionApi.createSubscriptionFromInfo ( |
|||
widgetType.latest, valueSubscriptionInfo, subscriptionOptions, false, true).subscribe( |
|||
(subscription) => { |
|||
this.valueSubscription = subscription; |
|||
} |
|||
); |
|||
} |
|||
|
|||
private onDataUpdated(subscription: IWidgetSubscription, detectChanges: boolean) { |
|||
let value = false; |
|||
const data = subscription.data; |
|||
if (data.length) { |
|||
const keyData = data[0]; |
|||
if (keyData && keyData.data && keyData.data[0]) { |
|||
const attrValue = keyData.data[0][1]; |
|||
if (attrValue) { |
|||
let parsed = null; |
|||
try { |
|||
parsed = this.parseValueFunction(JSON.parse(attrValue)); |
|||
} catch (e){/**/} |
|||
value = !!parsed; |
|||
} |
|||
} |
|||
} |
|||
this.setValue(value); |
|||
if (detectChanges) { |
|||
this.ctx.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
private onDataUpdateError(subscription: IWidgetSubscription, e: any) { |
|||
const exceptionData = this.utils.parseException(e); |
|||
let errorText = exceptionData.name; |
|||
if (exceptionData.message) { |
|||
errorText += ': ' + exceptionData.message; |
|||
} |
|||
this.onError(errorText); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue