@elgarfo I do not know how to do with HTML 5. however I made a two-way widget with the angular slider.
Steps:
create HTML template with sensor variable id
create dummy javascript to supply buildings
add custom css and js files.
add custom controller
add dependency module in angular (workaround, I do not find a way to include new modules into the controller creation)
HTML template:
<div ng-controller="myCustomWidgetController" ng-init="sVariable.id=${sId};loadVariable();">
<rzslider rz-slider-model="sVariable.value" rz-slider-options="slider.options"></rzslider>
</div>
Dummy JavaScript:
// dummy script
CSS and JS file:
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.0/rzslider.min.css
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.0/rzslider.min.js
Custom controller:
myControllerModule.controller('myCustomWidgetController', function($scope, SensorsFactory){
$scope.sVariable = {
id: null,
value:null
};
$scope.loadVariable = function(){
SensorsFactory.getVariable({id:$scope.sVariable.id}, function(response){
if(response.value != undefined){
$scope.sVariable.value = parseInt(response.value);
}
});
}
$scope.slider = {
options: {
floor: 0,
ceil: 100,
step: 1,
minLimit: 0,
maxLimit: 90,
onEnd: function() {
$scope.sendPayload($scope.sVariable);
},
}
};
// send payload
$scope.sendPayload = function(sVariable){
SensorsFactory.updateVariable(sVariable, function(){
//update Success
},function(error){
displayRestError.display(error);
});
};
});
Workaround, add a module on the app level
File: mycontroller/www/app.js
rzModule
Widget in dashboard