Igor Kulikov
9 years ago
committed by
GitHub
GitHub
9 changed files with 703 additions and 10 deletions
@ -0,0 +1,21 @@ |
|||
/* |
|||
* Copyright © 2016-2017 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 tbKnob from './knob.directive'; |
|||
|
|||
export default angular.module('thingsboard.widgets.rpc', [ |
|||
tbKnob |
|||
]).name; |
|||
@ -0,0 +1,388 @@ |
|||
/* |
|||
* Copyright © 2016-2017 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 './knob.scss'; |
|||
|
|||
import CanvasDigitalGauge from './../CanvasDigitalGauge'; |
|||
import tinycolor from 'tinycolor2'; |
|||
|
|||
import { isNumber } from '../widget-utils'; |
|||
|
|||
/* eslint-disable import/no-unresolved, import/default */ |
|||
|
|||
import knobTemplate from './knob.tpl.html'; |
|||
|
|||
/* eslint-enable import/no-unresolved, import/default */ |
|||
|
|||
export default angular.module('thingsboard.widgets.rpc.knob', []) |
|||
.directive('tbKnob', Knob) |
|||
.name; |
|||
|
|||
/*@ngInject*/ |
|||
function Knob() { |
|||
return { |
|||
restrict: "E", |
|||
scope: true, |
|||
bindToController: { |
|||
ctx: '=' |
|||
}, |
|||
controller: KnobController, |
|||
controllerAs: 'vm', |
|||
templateUrl: knobTemplate |
|||
}; |
|||
} |
|||
|
|||
/*@ngInject*/ |
|||
function KnobController($element, $scope, $document) { |
|||
let vm = this; |
|||
|
|||
vm.value = 0; |
|||
vm.error = ''; |
|||
|
|||
var knob = angular.element('.knob', $element), |
|||
knobContainer = angular.element('#knob-container', $element), |
|||
knobTopPointerContainer = knob.find('.top-pointer-container'), |
|||
knobTopPointer = knob.find('.top-pointer'), |
|||
knobValueContainer = knob.find('.value-container'), |
|||
knobValue = knob.find('.knob-value'), |
|||
knobErrorContainer = knob.find('.error-container'), |
|||
knobError = knob.find('.knob-error'), |
|||
knobTitleContainer = knob.find('.title-container'), |
|||
knobTitle = knob.find('.knob-title'), |
|||
knobMinmaxContainer = knob.find('.minmax-container'), |
|||
minmaxLanel = knob.find('.minmax-label'), |
|||
textMeasure = knob.find('#text-measure'), |
|||
startDeg = -1, |
|||
currentDeg = 0, |
|||
rotation = 0, |
|||
lastDeg = 0, |
|||
moving = false; |
|||
|
|||
var minDeg = -45; |
|||
var maxDeg = 225; |
|||
|
|||
var canvasBarElement = angular.element('#canvasBar', $element); |
|||
|
|||
var levelColors = ['#19ff4b', '#ffff19', '#ff3232']; |
|||
|
|||
var canvasBar; |
|||
|
|||
$scope.$watch('vm.ctx', () => { |
|||
if (vm.ctx) { |
|||
init(); |
|||
} |
|||
}); |
|||
|
|||
function init() { |
|||
|
|||
vm.minValue = angular.isDefined(vm.ctx.settings.minValue) ? vm.ctx.settings.minValue : 0; |
|||
vm.maxValue = angular.isDefined(vm.ctx.settings.maxValue) ? vm.ctx.settings.maxValue : 100; |
|||
vm.title = angular.isDefined(vm.ctx.settings.title) ? vm.ctx.settings.title : ''; |
|||
|
|||
vm.darkTheme = vm.ctx.settings.theme == 'dark'; |
|||
|
|||
var canvasBarData = { |
|||
renderTo: canvasBarElement[0], |
|||
hideValue: true, |
|||
neonGlowBrightness: 0, |
|||
gaugeWidthScale: 0.4, |
|||
gaugeColor: 'rgba(0, 0, 0, 0)', |
|||
levelColors: levelColors, |
|||
minValue: vm.minValue, |
|||
maxValue: vm.maxValue, |
|||
gaugeType: 'donut', |
|||
dashThickness: 2, |
|||
donutStartAngle: 3/4*Math.PI, |
|||
donutEndAngle: 9/4*Math.PI, |
|||
animation: false |
|||
}; |
|||
|
|||
canvasBar = new CanvasDigitalGauge(canvasBarData).draw(); |
|||
|
|||
knob.on('click', (e) => { |
|||
if (moving) { |
|||
moving = false; |
|||
return false; |
|||
} |
|||
e.preventDefault(); |
|||
|
|||
var offset = knob.offset(); |
|||
var center = { |
|||
y : offset.top + knob.height()/2, |
|||
x: offset.left + knob.width()/2 |
|||
}; |
|||
var a, b, deg, |
|||
rad2deg = 180/Math.PI; |
|||
|
|||
e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; |
|||
|
|||
a = center.y - e.pageY; |
|||
b = center.x - e.pageX; |
|||
deg = Math.atan2(a,b)*rad2deg; |
|||
if(deg < 0){ |
|||
deg = 360 + deg; |
|||
} |
|||
if (deg > maxDeg) { |
|||
if (deg - 360 > minDeg) { |
|||
deg = deg - 360; |
|||
} else { |
|||
return false; |
|||
} |
|||
} |
|||
currentDeg = deg; |
|||
lastDeg = deg; |
|||
knobTopPointerContainer.css('transform','rotate('+(currentDeg)+'deg)'); |
|||
turn(degreeToRatio(currentDeg)); |
|||
rotation = currentDeg; |
|||
startDeg = -1; |
|||
}); |
|||
|
|||
knob.on('mousedown touchstart', (e) => { |
|||
e.preventDefault(); |
|||
var offset = knob.offset(); |
|||
var center = { |
|||
y : offset.top + knob.height()/2, |
|||
x: offset.left + knob.width()/2 |
|||
}; |
|||
|
|||
var a, b, deg, tmp, |
|||
rad2deg = 180/Math.PI; |
|||
|
|||
knob.on('mousemove.rem touchmove.rem', (e) => { |
|||
moving = true; |
|||
e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; |
|||
|
|||
a = center.y - e.pageY; |
|||
b = center.x - e.pageX; |
|||
deg = Math.atan2(a,b)*rad2deg; |
|||
if(deg < 0){ |
|||
deg = 360 + deg; |
|||
} |
|||
|
|||
if(startDeg == -1){ |
|||
startDeg = deg; |
|||
} |
|||
|
|||
tmp = Math.floor((deg-startDeg) + rotation); |
|||
|
|||
if(tmp < 0){ |
|||
tmp = 360 + tmp; |
|||
} |
|||
else if(tmp > 359){ |
|||
tmp = tmp % 360; |
|||
} |
|||
|
|||
if (tmp > maxDeg) { |
|||
if (tmp - 360 > minDeg) { |
|||
tmp = tmp - 360; |
|||
} else { |
|||
var deltaMax = Math.abs(maxDeg - lastDeg); |
|||
var deltaMin = Math.abs(minDeg - lastDeg); |
|||
if (deltaMax < deltaMin) { |
|||
tmp = maxDeg; |
|||
} else { |
|||
tmp = minDeg; |
|||
} |
|||
} |
|||
} |
|||
if(Math.abs(tmp - lastDeg) > 180){ |
|||
startDeg = deg; |
|||
rotation = currentDeg; |
|||
return false; |
|||
} |
|||
|
|||
currentDeg = tmp; |
|||
lastDeg = tmp; |
|||
|
|||
knobTopPointerContainer.css('transform','rotate('+(currentDeg)+'deg)'); |
|||
turn(degreeToRatio(currentDeg)); |
|||
}); |
|||
|
|||
$document.on('mouseup.rem touchend.rem',() => { |
|||
knob.off('.rem'); |
|||
$document.off('.rem'); |
|||
rotation = currentDeg; |
|||
startDeg = -1; |
|||
}); |
|||
|
|||
}); |
|||
vm.ctx.resize = resize; |
|||
resize(); |
|||
var initialValue = angular.isDefined(vm.ctx.settings.initialValue) ? vm.ctx.settings.initialValue : vm.minValue; |
|||
setValue(initialValue); |
|||
|
|||
var subscription = vm.ctx.defaultSubscription; |
|||
var rpcEnabled = subscription.rpcEnabled; |
|||
|
|||
vm.isSimulated = $scope.widgetEditMode; |
|||
|
|||
vm.requestTimeout = 500; |
|||
if (vm.ctx.settings.requestTimeout) { |
|||
vm.requestTimeout = vm.ctx.settings.requestTimeout; |
|||
} |
|||
vm.getValueMethod = 'getValue'; |
|||
if (vm.ctx.settings.getValueMethod && vm.ctx.settings.getValueMethod.length) { |
|||
vm.getValueMethod = vm.ctx.settings.getValueMethod; |
|||
} |
|||
vm.setValueMethod = 'setValue'; |
|||
if (vm.ctx.settings.setValueMethod && vm.ctx.settings.setValueMethod.length) { |
|||
vm.setValueMethod = vm.ctx.settings.setValueMethod; |
|||
} |
|||
if (!rpcEnabled) { |
|||
onError('Target device is not set!'); |
|||
} else { |
|||
if (!vm.isSimulated) { |
|||
rpcRequestValue(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
function ratioToDegree(ratio) { |
|||
return minDeg + ratio*(maxDeg-minDeg); |
|||
} |
|||
|
|||
function degreeToRatio(degree) { |
|||
return (degree-minDeg)/(maxDeg-minDeg); |
|||
} |
|||
|
|||
function resize() { |
|||
var width = knobContainer.width(); |
|||
var height = knobContainer.height(); |
|||
var size = Math.min(width, height); |
|||
knob.css({width: size, height: size}); |
|||
canvasBar.update({width: size, height: size}); |
|||
setFontSize(knobTitle, vm.title, knobTitleContainer.height(), knobTitleContainer.width()); |
|||
setFontSize(knobError, vm.error, knobErrorContainer.height(), knobErrorContainer.width()); |
|||
var minmaxHeight = knobMinmaxContainer.height(); |
|||
minmaxLanel.css({'fontSize': minmaxHeight+'px', 'lineHeight': minmaxHeight+'px'}); |
|||
checkValueSize(); |
|||
} |
|||
|
|||
function turn(ratio) { |
|||
var value = (vm.minValue + (vm.maxValue - vm.minValue)*ratio).toFixed(vm.ctx.decimals); |
|||
if (canvasBar.value != value) { |
|||
canvasBar.value = value; |
|||
} |
|||
updateColor(canvasBar.getValueColor()); |
|||
onValue(value); |
|||
} |
|||
|
|||
function setValue(value) { |
|||
var ratio = (value-vm.minValue) / (vm.maxValue - vm.minValue); |
|||
rotation = lastDeg = currentDeg = ratioToDegree(ratio); |
|||
knobTopPointerContainer.css('transform','rotate('+(currentDeg)+'deg)'); |
|||
if (canvasBar.value != value) { |
|||
canvasBar.value = value; |
|||
} |
|||
updateColor(canvasBar.getValueColor()); |
|||
vm.value = formatValue(value); |
|||
checkValueSize(); |
|||
} |
|||
|
|||
function updateColor(color) { |
|||
var glowColor = tinycolor(color).brighten(30).toHexString(); |
|||
knobValue.css({'color': glowColor}); |
|||
var textShadow = `${color} 1px 1px 10px, ${glowColor} 1px 1px 10px`; |
|||
knobValue.css({'textShadow': textShadow}); |
|||
knobTopPointer.css({'backgroundColor': glowColor}); |
|||
var boxShadow = `inset 1px 0 2px #040404, 1px 1px 8px 2px ${glowColor}`; |
|||
knobTopPointer.css({'boxShadow': boxShadow}); |
|||
} |
|||
|
|||
function onValue(value) { |
|||
$scope.$applyAsync(() => { |
|||
vm.value = formatValue(value); |
|||
checkValueSize(); |
|||
rpcUpdateValue(value); |
|||
}); |
|||
} |
|||
|
|||
function onError(error) { |
|||
$scope.$applyAsync(() => { |
|||
vm.error = error; |
|||
setFontSize(knobError, vm.error, knobErrorContainer.height(), knobErrorContainer.width()); |
|||
}); |
|||
} |
|||
|
|||
function formatValue(value) { |
|||
return vm.ctx.utils.formatValue(value, vm.ctx.decimals, vm.ctx.units, true); |
|||
} |
|||
|
|||
function checkValueSize() { |
|||
var fontSize = knobValueContainer.height()/3.3; |
|||
var containerWidth = knobValueContainer.width(); |
|||
setFontSize(knobValue, vm.value, fontSize, containerWidth); |
|||
} |
|||
|
|||
function setFontSize(element, text, fontSize, maxWidth) { |
|||
var textWidth = measureTextWidth(text, fontSize); |
|||
while (textWidth > maxWidth) { |
|||
fontSize--; |
|||
textWidth = measureTextWidth(text, fontSize); |
|||
} |
|||
element.css({'fontSize': fontSize+'px', 'lineHeight': fontSize+'px'}); |
|||
} |
|||
|
|||
function measureTextWidth(text, fontSize) { |
|||
textMeasure.css({'fontSize': fontSize+'px', 'lineHeight': fontSize+'px'}); |
|||
textMeasure.text(text); |
|||
return textMeasure.width(); |
|||
} |
|||
|
|||
function rpcRequestValue() { |
|||
vm.error = ''; |
|||
vm.ctx.controlApi.sendTwoWayCommand(vm.getValueMethod, null, vm.requestTimeout).then( |
|||
(responseBody) => { |
|||
if (isNumber(responseBody)) { |
|||
var numValue = Number(responseBody).toFixed(vm.ctx.decimals); |
|||
setValue(numValue); |
|||
} else { |
|||
var errorText = `Unable to parse response: ${responseBody}`; |
|||
onError(errorText); |
|||
} |
|||
}, |
|||
() => { |
|||
var errorText = vm.ctx.defaultSubscription.rpcErrorText; |
|||
onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
|
|||
function rpcUpdateValue(value) { |
|||
if (vm.executingUpdateValue) { |
|||
vm.scheduledValue = value; |
|||
return; |
|||
} else { |
|||
vm.scheduledValue = null; |
|||
vm.rpcValue = value; |
|||
vm.executingUpdateValue = true; |
|||
} |
|||
vm.error = ''; |
|||
vm.ctx.controlApi.sendOneWayCommand(vm.setValueMethod, value, vm.requestTimeout).then( |
|||
() => { |
|||
vm.executingUpdateValue = false; |
|||
if (vm.scheduledValue != null && vm.scheduledValue != vm.rpcValue) { |
|||
rpcUpdateValue(vm.scheduledValue); |
|||
} |
|||
}, |
|||
() => { |
|||
vm.executingUpdateValue = false; |
|||
var errorText = vm.ctx.defaultSubscription.rpcErrorText; |
|||
onError(errorText); |
|||
} |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,157 @@ |
|||
/** |
|||
* Copyright © 2016-2017 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('./knob.svg'); |
|||
|
|||
$bars-margin-pct: percentage(0.033); |
|||
$background-margin-pct: percentage(0.05); |
|||
$value-container-margin-pct: percentage(0.35); |
|||
$error-height: percentage(0.05); |
|||
$title-height: percentage(0.066); |
|||
$title-container-margin-pct: percentage(0.2); |
|||
$title-container-margin-bottom-pct: percentage(0.05); |
|||
$minmax-height: percentage(0.04); |
|||
$minmax-container-margin-pct: percentage(0.18); |
|||
$minmax-container-margin-bottom-pct: percentage(0.12); |
|||
|
|||
$background-color: #e6e7e8; |
|||
|
|||
.tb-knob { |
|||
width:100%; |
|||
height:100%; |
|||
background: $background-color; |
|||
&.dark { |
|||
background: #000; |
|||
} |
|||
|
|||
.knob { |
|||
position: relative; |
|||
&[draggable] { |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
user-select: none; |
|||
} |
|||
#canvasBar { |
|||
position:absolute; |
|||
top:0; |
|||
left:0; |
|||
bottom: 0; |
|||
right: 0; |
|||
z-index: 2; |
|||
} |
|||
.canvas-background { |
|||
position:absolute; |
|||
top: $background-margin-pct; |
|||
left: $background-margin-pct; |
|||
bottom: $background-margin-pct; |
|||
right: $background-margin-pct; |
|||
border-radius: 50%; |
|||
background: #3f4346; |
|||
z-index:2; |
|||
} |
|||
.value-container { |
|||
position:absolute; |
|||
top: $value-container-margin-pct; |
|||
left: $value-container-margin-pct; |
|||
bottom: $value-container-margin-pct; |
|||
right: $value-container-margin-pct; |
|||
z-index:4; |
|||
.knob-value { |
|||
color: #fff; |
|||
font-weight: 500; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
.error-container { |
|||
position:absolute; |
|||
top: 1%; |
|||
left: 0; |
|||
right: 0; |
|||
z-index:4; |
|||
height: $error-height; |
|||
.knob-error { |
|||
color: #ff3315; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
.title-container { |
|||
position:absolute; |
|||
left: $title-container-margin-pct; |
|||
bottom: $title-container-margin-bottom-pct; |
|||
right: $title-container-margin-pct; |
|||
z-index:4; |
|||
height: $title-height; |
|||
.knob-title { |
|||
color: #757575; |
|||
font-weight: 500; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
.minmax-container { |
|||
position:absolute; |
|||
left: $minmax-container-margin-pct; |
|||
bottom: $minmax-container-margin-bottom-pct; |
|||
right: $minmax-container-margin-pct; |
|||
z-index:4; |
|||
height: $minmax-height; |
|||
.minmax-label { |
|||
color: #757575; |
|||
font-weight: 500; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
.top-pointer-container { |
|||
position:absolute; |
|||
top: $bars-margin-pct; |
|||
left: $bars-margin-pct; |
|||
bottom: $bars-margin-pct; |
|||
right: $bars-margin-pct; |
|||
z-index:3; |
|||
cursor:pointer !important; |
|||
.top-pointer { |
|||
content:''; |
|||
width:5%; |
|||
height:5%; |
|||
background-color:#b5b5b5; |
|||
position:absolute; |
|||
top:50%; |
|||
left:22%; |
|||
margin-top:-2.5%; |
|||
border-radius: 50%; |
|||
cursor:pointer !important; |
|||
box-shadow: 1px 0 2px #040404; |
|||
} |
|||
} |
|||
.top{ |
|||
position:absolute; |
|||
top: $bars-margin-pct; |
|||
left: $bars-margin-pct; |
|||
bottom: $bars-margin-pct; |
|||
right: $bars-margin-pct; |
|||
background:$knob-img no-repeat; |
|||
background-size: contain; |
|||
z-index:2; |
|||
cursor:pointer !important; |
|||
} |
|||
#text-measure { |
|||
position: absolute; |
|||
visibility: hidden; |
|||
height: auto; |
|||
width: auto; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,46 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2017 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" layout="column" ng-class="{'dark': vm.darkTheme}" ng-style="{'pointerEvents': vm.ctx.isEdit ? 'none' : 'all'}"> |
|||
<div id="knob-container" flex layout="column" layout-align="center center"> |
|||
<div class="knob"> |
|||
<div class="value-container" layout="row" layout-align="center center"> |
|||
<span class="knob-value">{{ vm.value }}</span> |
|||
</div> |
|||
<div class="canvas-background"></div> |
|||
<canvas id="canvasBar"></canvas> |
|||
<div class="top-pointer-container"> |
|||
<div class="top-pointer"></div> |
|||
</div> |
|||
<div class="top"></div> |
|||
<div class="error-container" ng-style="{'background': vm.error.length ? 'rgba(255,255,255,0.25)' : 'none'}" |
|||
layout="row" layout-align="center center"> |
|||
<span class="knob-error">{{ vm.error }}</span> |
|||
</div> |
|||
<div class="title-container" layout="row" layout-align="center center"> |
|||
<span class="knob-title">{{ vm.title }}</span> |
|||
</div> |
|||
<div class="minmax-container" layout="row" layout-align="start center"> |
|||
<span class="minmax-label">min</span> |
|||
<span flex></span> |
|||
<span class="minmax-label">max</span> |
|||
</div> |
|||
<div id="text-measure"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
Loading…
Reference in new issue