Igor Kulikov
9 years ago
committed by
GitHub
GitHub
6 changed files with 330 additions and 2 deletions
@ -0,0 +1,201 @@ |
|||||
|
/* |
||||
|
* 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 './led-indicator.scss'; |
||||
|
|
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import ledIndicatorTemplate from './led-indicator.tpl.html'; |
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
export default angular.module('thingsboard.widgets.rpc.ledIndicator', []) |
||||
|
.directive('tbLedIndicator', LedIndicator) |
||||
|
.name; |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function LedIndicator() { |
||||
|
return { |
||||
|
restrict: "E", |
||||
|
scope: true, |
||||
|
bindToController: { |
||||
|
ctx: '=' |
||||
|
}, |
||||
|
controller: LedIndicatorController, |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: ledIndicatorTemplate |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function LedIndicatorController($element, $scope, $timeout) { |
||||
|
let vm = this; |
||||
|
|
||||
|
vm.showTitle = false; |
||||
|
vm.value = false; |
||||
|
vm.error = ''; |
||||
|
|
||||
|
var led = angular.element('.led', $element), |
||||
|
ledContainer = angular.element('#led-container', $element), |
||||
|
textMeasure = angular.element('#text-measure', $element), |
||||
|
ledTitleContainer = angular.element('.title-container', $element), |
||||
|
ledTitle = angular.element('.led-title', $element), |
||||
|
ledErrorContainer = angular.element('.error-container', $element), |
||||
|
ledError = angular.element('.led-error', $element); |
||||
|
|
||||
|
$scope.$watch('vm.ctx', () => { |
||||
|
if (vm.ctx) { |
||||
|
init(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$scope.$on('$destroy', () => { |
||||
|
vm.destroyed = true; |
||||
|
if (vm.requestValueTimeoutHandle) { |
||||
|
$timeout.cancel(vm.requestValueTimeoutHandle); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
resize(); |
||||
|
|
||||
|
function init() { |
||||
|
|
||||
|
vm.title = angular.isDefined(vm.ctx.settings.title) ? vm.ctx.settings.title : ''; |
||||
|
vm.showTitle = vm.title && vm.title.length ? true : false; |
||||
|
|
||||
|
var origColor = angular.isDefined(vm.ctx.settings.ledColor) ? vm.ctx.settings.ledColor : 'green'; |
||||
|
|
||||
|
vm.ledColor = tinycolor(origColor).brighten(30).toHexString(); |
||||
|
vm.ledMiddleColor = tinycolor(origColor).toHexString(); |
||||
|
vm.disabledColor = tinycolor(origColor).darken(40).toHexString(); |
||||
|
vm.disabledMiddleColor = tinycolor(origColor).darken(60).toHexString(); |
||||
|
|
||||
|
vm.ctx.resize = resize; |
||||
|
$scope.$applyAsync(() => { |
||||
|
resize(); |
||||
|
}); |
||||
|
var initialValue = angular.isDefined(vm.ctx.settings.initialValue) ? vm.ctx.settings.initialValue : false; |
||||
|
setValue(initialValue, true); |
||||
|
|
||||
|
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.valuePollingInterval = 500; |
||||
|
if (vm.ctx.settings.valuePollingInterval) { |
||||
|
vm.valuePollingInterval = vm.ctx.settings.valuePollingInterval; |
||||
|
} |
||||
|
vm.getValueMethod = 'getValue'; |
||||
|
if (vm.ctx.settings.getValueMethod && vm.ctx.settings.getValueMethod.length) { |
||||
|
vm.getValueMethod = vm.ctx.settings.getValueMethod; |
||||
|
} |
||||
|
if (!rpcEnabled) { |
||||
|
onError('Target device is not set!'); |
||||
|
} else { |
||||
|
if (!vm.isSimulated) { |
||||
|
rpcRequestValue(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function resize() { |
||||
|
var width = ledContainer.width(); |
||||
|
var height = ledContainer.height(); |
||||
|
var size = Math.min(width, height); |
||||
|
|
||||
|
led.css({width: size, height: size}); |
||||
|
|
||||
|
if (vm.showTitle) { |
||||
|
setFontSize(ledTitle, vm.title, ledTitleContainer.height() * 2 / 3, ledTitleContainer.width()); |
||||
|
} |
||||
|
setFontSize(ledError, vm.error, ledErrorContainer.height(), ledErrorContainer.width()); |
||||
|
} |
||||
|
|
||||
|
function setValue(value, forceUpdate) { |
||||
|
if (vm.value != value || forceUpdate) { |
||||
|
vm.value = value; |
||||
|
updateColor(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function updateColor() { |
||||
|
var color = vm.value ? vm.ledColor : vm.disabledColor; |
||||
|
var middleColor = vm.value ? vm.ledMiddleColor : vm.disabledMiddleColor; |
||||
|
var boxShadow = `#000 0 -1px 6px 1px, inset ${middleColor} 0 -1px 8px, ${color} 0 3px 11px`; |
||||
|
led.css({'backgroundColor': color}); |
||||
|
led.css({'boxShadow': boxShadow}); |
||||
|
if (vm.value) { |
||||
|
led.removeClass( 'disabled' ); |
||||
|
} else { |
||||
|
led.addClass( 'disabled' ); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function onError(error) { |
||||
|
$scope.$applyAsync(() => { |
||||
|
vm.error = error; |
||||
|
setFontSize(ledError, vm.error, ledErrorContainer.height(), ledErrorContainer.width()); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
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() { |
||||
|
if (vm.destroyed) { |
||||
|
return; |
||||
|
} |
||||
|
vm.error = ''; |
||||
|
vm.ctx.controlApi.sendTwoWayCommand(vm.getValueMethod, null, vm.requestTimeout).then( |
||||
|
(responseBody) => { |
||||
|
var newValue = responseBody ? true : false; |
||||
|
setValue(newValue); |
||||
|
if (vm.requestValueTimeoutHandle) { |
||||
|
$timeout.cancel(vm.requestValueTimeoutHandle); |
||||
|
} |
||||
|
vm.requestValueTimeoutHandle = $timeout(rpcRequestValue, vm.valuePollingInterval); |
||||
|
}, |
||||
|
() => { |
||||
|
var errorText = vm.ctx.defaultSubscription.rpcErrorText; |
||||
|
onError(errorText); |
||||
|
if (vm.requestValueTimeoutHandle) { |
||||
|
$timeout.cancel(vm.requestValueTimeoutHandle); |
||||
|
} |
||||
|
vm.requestValueTimeoutHandle = $timeout(rpcRequestValue, vm.valuePollingInterval); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
/** |
||||
|
* 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 "~compass-sass-mixins/lib/compass"; |
||||
|
|
||||
|
$error-height: 14px; |
||||
|
|
||||
|
$background-color: #e6e7e8; |
||||
|
|
||||
|
.tb-led-indicator { |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
background: $background-color; |
||||
|
|
||||
|
.title-container { |
||||
|
.led-title { |
||||
|
color: #757575; |
||||
|
font-weight: 500; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-container { |
||||
|
position:absolute; |
||||
|
top: 1%; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index:4; |
||||
|
height: $error-height; |
||||
|
.led-error { |
||||
|
color: #ff3315; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
#text-measure { |
||||
|
position: absolute; |
||||
|
visibility: hidden; |
||||
|
height: auto; |
||||
|
width: auto; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
#led-container { |
||||
|
padding: 10px; |
||||
|
.led { |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
border-radius: 50%; |
||||
|
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25)); |
||||
|
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25)); |
||||
|
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25)); |
||||
|
background-image: -o-radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25)); |
||||
|
background-image: radial-gradient(50% 50%, circle closest-corner, transparent, rgba(0, 0, 0, 0.25)); |
||||
|
transition: background-color 0.5s, box-shadow 0.5s; |
||||
|
&.disabled { |
||||
|
background-image: -owg-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1)); |
||||
|
background-image: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1)); |
||||
|
background-image: -moz-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1)); |
||||
|
background-image: -o-radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1)); |
||||
|
background-image: radial-gradient(50% 50%, circle closest-corner, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1)); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,32 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-led-indicator" layout="column"> |
||||
|
<div flex="20" class="title-container" layout="row" layout-align="center center" ng-show="vm.showTitle"> |
||||
|
<span class="led-title">{{vm.title}}</span> |
||||
|
</div> |
||||
|
<div flex="{{vm.showTitle ? 80 : 100}}" |
||||
|
ng-style="{paddingTop: vm.showTitle ? '5px': '10px'}" id="led-container" layout="column" layout-align="center center"> |
||||
|
<div class="led"> |
||||
|
</div> |
||||
|
</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="led-error">{{ vm.error }}</span> |
||||
|
</div> |
||||
|
<div id="text-measure"></div> |
||||
|
</div> |
||||
Loading…
Reference in new issue