Igor Kulikov
9 years ago
8 changed files with 359 additions and 6 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 tbShinyKnob from './shiny-knob.directive'; |
||||
|
|
||||
|
export default angular.module('thingsboard.widgets.rpc', [ |
||||
|
tbShinyKnob |
||||
|
]).name; |
||||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,198 @@ |
|||||
|
/* |
||||
|
* 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 './shiny-knob.scss'; |
||||
|
|
||||
|
import CanvasDigitalGauge from './../CanvasDigitalGauge'; |
||||
|
//import tinycolor from 'tinycolor2';
|
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import shinyKnobTemplate from './shiny-knob.tpl.html'; |
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
export default angular.module('thingsboard.widgets.rpc.shinyKnob', []) |
||||
|
.directive('tbShinyKnob', ShinyKnob) |
||||
|
.name; |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function ShinyKnob() { |
||||
|
return { |
||||
|
restrict: "E", |
||||
|
scope: true, |
||||
|
bindToController: { |
||||
|
ctx: '=' |
||||
|
}, |
||||
|
controller: ShinyKnobController, |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: shinyKnobTemplate |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function ShinyKnobController($element, $scope, $document) { |
||||
|
let vm = this; |
||||
|
|
||||
|
vm.value = 0; |
||||
|
|
||||
|
var snap = 0; |
||||
|
|
||||
|
var knob = angular.element('.knob', $element), |
||||
|
knobContainer = angular.element('#knob-container', $element), |
||||
|
knobTop = knob.find('.top'), |
||||
|
startDeg = -1, |
||||
|
currentDeg = 0, |
||||
|
rotation = 0, |
||||
|
lastDeg = 0; |
||||
|
|
||||
|
var canvasBarElement = angular.element('#canvasBar', $element); |
||||
|
|
||||
|
var levelColors = ['rgb(0, 128, 0)', 'rgb(251, 192, 45)', 'rgb(244, 67, 54)']; |
||||
|
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.darkTheme = vm.ctx.settings.theme == 'dark'; |
||||
|
|
||||
|
var canvasBarData = { |
||||
|
renderTo: canvasBarElement[0], |
||||
|
hideValue: true, |
||||
|
neonGlowBrightness: vm.darkTheme ? 40 : 0, |
||||
|
gaugeWidthScale: 0.5, |
||||
|
gaugeColor: vm.darkTheme ? 'rgb(23, 26, 28)' : 'rgba(0,0,0,0)', |
||||
|
levelColors: levelColors, |
||||
|
minValue: vm.minValue, |
||||
|
maxValue: vm.maxValue, |
||||
|
gaugeType: 'donut', |
||||
|
dashThickness: 1.5, |
||||
|
donutStartAngle: Math.PI, |
||||
|
animation: false, |
||||
|
animationDuration: 250, |
||||
|
animationRule: 'linear' |
||||
|
}; |
||||
|
|
||||
|
canvasBar = new CanvasDigitalGauge(canvasBarData).draw(); |
||||
|
|
||||
|
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) => { |
||||
|
|
||||
|
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(snap && tmp < snap){ |
||||
|
tmp = 0; |
||||
|
} |
||||
|
if(Math.abs(tmp - lastDeg) > 180){ |
||||
|
return false; |
||||
|
} |
||||
|
currentDeg = tmp; |
||||
|
lastDeg = tmp; |
||||
|
|
||||
|
knobTop.css('transform','rotate('+(currentDeg)+'deg)'); |
||||
|
turn(currentDeg/359); |
||||
|
}); |
||||
|
|
||||
|
$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); |
||||
|
} |
||||
|
|
||||
|
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}); |
||||
|
} |
||||
|
|
||||
|
function turn(ratio) { |
||||
|
var value = (vm.minValue + (vm.maxValue - vm.minValue)*ratio).toFixed(2); |
||||
|
if (canvasBar.value != value) { |
||||
|
canvasBar.value = value; |
||||
|
} |
||||
|
onValue(value); |
||||
|
} |
||||
|
|
||||
|
function setValue(value) { |
||||
|
var ratio = (value-vm.minValue) / (vm.maxValue - vm.minValue); |
||||
|
rotation = lastDeg = currentDeg = ratio*360; |
||||
|
knobTop.css('transform','rotate('+(currentDeg)+'deg)'); |
||||
|
if (canvasBar.value != value) { |
||||
|
canvasBar.value = value; |
||||
|
} |
||||
|
vm.value = value; |
||||
|
} |
||||
|
|
||||
|
function onValue(value) { |
||||
|
console.log(`onValue ${value}`); //eslint-disable-line
|
||||
|
$scope.$applyAsync(() => { |
||||
|
vm.value = value; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
/** |
||||
|
* 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.png'); |
||||
|
|
||||
|
$bars-margin-pct: percentage(0.2); |
||||
|
$shadow-size: 5; |
||||
|
$shadow-size-px: $shadow-size+px; |
||||
|
$shadow-offset-px: $shadow-size/2+px; |
||||
|
|
||||
|
.tb-shiny-knob { |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
&.dark { |
||||
|
background: #000;//$dark-bg-img #1f2129; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
.top{ |
||||
|
position:absolute; |
||||
|
top: calc(#{$bars-margin-pct} - #{$shadow-offset-px}); |
||||
|
left: $bars-margin-pct; |
||||
|
bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px}); |
||||
|
right: $bars-margin-pct; |
||||
|
background:$knob-img no-repeat; |
||||
|
background-size: contain; |
||||
|
z-index:10; |
||||
|
cursor:default !important; |
||||
|
&:after { |
||||
|
content:''; |
||||
|
width:10px; |
||||
|
height:10px; |
||||
|
background-color:#666; |
||||
|
position:absolute; |
||||
|
top:50%; |
||||
|
left:10px; |
||||
|
margin-top:-5px; |
||||
|
border-radius: 50%; |
||||
|
cursor:default !important; |
||||
|
box-shadow: 0 0 1px #5a5a5a inset; |
||||
|
} |
||||
|
} |
||||
|
.base{ |
||||
|
top: calc(#{$bars-margin-pct} - #{$shadow-offset-px}); |
||||
|
left: $bars-margin-pct; |
||||
|
bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px}); |
||||
|
right: $bars-margin-pct; |
||||
|
border-radius:50%; |
||||
|
box-shadow:0 $shadow-size-px 0 #4a5056,$shadow-size-px $shadow-size-px $shadow-size-px #000; |
||||
|
position:absolute; |
||||
|
z-index:1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-shiny-knob" layout="column" ng-class="{'dark': vm.darkTheme}"> |
||||
|
<div layout="row" layout-align="center start" class="md-padding"> |
||||
|
<span>{{ vm.value }}</span> |
||||
|
</div> |
||||
|
<div id="knob-container" flex layout="column" layout-align="center center"> |
||||
|
<div class="knob"> |
||||
|
<canvas id="canvasBar"></canvas> |
||||
|
<div class="top"></div> |
||||
|
<div class="base"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
Loading…
Reference in new issue