111 lines
3.6 KiB
JavaScript
111 lines
3.6 KiB
JavaScript
|
/*
|
||
|
|
* Copyright © 2016 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 Raphael from 'raphael';
|
||
|
|
import tinycolor from 'tinycolor2';
|
||
|
|
import $ from 'jquery';
|
||
|
|
|
||
|
|
/* eslint-disable angular/angularelement */
|
||
|
|
|
||
|
|
export default angular.module('thingsboard.directives.ledLight', [])
|
||
|
|
.directive('tbLedLight', LedLight).name;
|
||
|
|
|
||
|
|
/*@ngInject*/
|
||
|
|
function LedLight($compile) {
|
||
|
|
|
||
|
|
var linker = function (scope, element) {
|
||
|
|
scope.offOpacity = scope.offOpacity || "0.4";
|
||
|
|
scope.glowColor = tinycolor(scope.colorOn).lighten().toHexString();
|
||
|
|
|
||
|
|
scope.$watch('tbEnabled',function() {
|
||
|
|
scope.draw();
|
||
|
|
});
|
||
|
|
|
||
|
|
scope.$watch('size',function() {
|
||
|
|
scope.update();
|
||
|
|
});
|
||
|
|
|
||
|
|
scope.draw = function () {
|
||
|
|
if (scope.tbEnabled) {
|
||
|
|
scope.circleElement.attr("fill", scope.colorOn);
|
||
|
|
scope.circleElement.attr("stroke", scope.colorOn);
|
||
|
|
scope.circleElement.attr("opacity", "1");
|
||
|
|
|
||
|
|
if (scope.circleElement.theGlow) {
|
||
|
|
scope.circleElement.theGlow.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
scope.circleElement.theGlow = scope.circleElement.glow(
|
||
|
|
{
|
||
|
|
color: scope.glowColor,
|
||
|
|
width: scope.radius + scope.glowSize,
|
||
|
|
opacity: 0.8,
|
||
|
|
fill: true
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
if (scope.circleElement.theGlow) {
|
||
|
|
scope.circleElement.theGlow.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
/*scope.circleElement.theGlow = scope.circleElement.glow(
|
||
|
|
{
|
||
|
|
color: scope.glowColor,
|
||
|
|
width: scope.radius + scope.glowSize,
|
||
|
|
opacity: 0.4,
|
||
|
|
fill: true
|
||
|
|
});*/
|
||
|
|
|
||
|
|
scope.circleElement.attr("fill", scope.colorOff);
|
||
|
|
scope.circleElement.attr("stroke", scope.colorOff);
|
||
|
|
scope.circleElement.attr("opacity", scope.offOpacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
scope.update = function() {
|
||
|
|
scope.size = scope.size || 50;
|
||
|
|
scope.canvasSize = scope.size;
|
||
|
|
scope.radius = scope.canvasSize / 4;
|
||
|
|
scope.glowSize = scope.radius / 5;
|
||
|
|
|
||
|
|
var template = '<div id="canvas_container" style="width: ' + scope.size + 'px; height: ' + scope.size + 'px;"></div>';
|
||
|
|
element.html(template);
|
||
|
|
$compile(element.contents())(scope);
|
||
|
|
scope.paper = new Raphael($('#canvas_container', element)[0], scope.canvasSize, scope.canvasSize);
|
||
|
|
var center = scope.canvasSize / 2;
|
||
|
|
scope.circleElement = scope.paper.circle(center, center, scope.radius);
|
||
|
|
scope.draw();
|
||
|
|
}
|
||
|
|
|
||
|
|
scope.update();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return {
|
||
|
|
restrict: "E",
|
||
|
|
link: linker,
|
||
|
|
scope: {
|
||
|
|
size: '=?',
|
||
|
|
colorOn: '=',
|
||
|
|
colorOff: '=',
|
||
|
|
offOpacity: '=?',
|
||
|
|
//glowColor: '=',
|
||
|
|
tbEnabled: '='
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* eslint-enable angular/angularelement */
|