Hello.
Is it possible to insert a widget such as a slider, but with numerical data entered without a slider?
Hi,
I guess it can be done by the html widget, at the documentation there is an example to modify a value, I guess after adapting to get the value from field it can be achieved what you want.
I share with you the documentation example → https://docs.thinger.io/features/dashboards#angularjs-directive-example-call-device-resource
Hope this helps,
Thanks for the answer.
This example will be better for my case but unfortunately it doesn’t work.
https://docs.thinger.io/features/dashboards#angularjs-directive-update-device-properties
Can someone give an example for one variable. What exactly do I have to fill in to make it work instead of a slider?
Hi, here I share an example how to write a device’s resource from a dashboard, I guess the issue is that the html widget does not recognize input resources to request the current value, a tweak that worked for me is to duplicate the same resource name as input and output.
Note that is not a good practice to send the input payload without all the values, I mean, if a resource has 3 values defined as input, always should be sent the 3 values even if it is just one that is modified.
This code takes the value from output resource and then send all the values to the input resource.
This is how it looks →
“a” and “b” are integers, “c” is a bool value, however this should work fine by any datatype, just be careful to be consistent between the device’s defined datatype and the html field’s allowed datatype.
This is how is the device’s resource defined
thing["Test"] = [](pson &in, pson &out)
{
if (in["a"].is_empty())
in["a"] = a;
else
{
a = in["a"];
}
if (in["b"].is_empty())
in["b"] = b;
else
{
b = in["b"];
}
if (in["c"].is_empty())
in["c"] = c;
else
{
c = in["c"];
}
out["a"] = a;
out["b"] = b;
out["c"] = c;
};
This is the deviceResourceWidget.js file →
angular.module('deviceResourceWidget', [])
.directive('deviceResourceWidget', function () {
return {
restrict: 'EA',
scope: {
source : "=",
value: "=",
ts: "="
},
templateUrl: function(){
let url = document.querySelector("script[src*='deviceResourceWidget.js']");
return url.src.replace('.js','.html');
},
controller: ["$scope", "DeviceResource", function($scope, DeviceResource){
// if we require to listen for value changes...
$scope.$watch('value', function(newValue, oldValue) {
$scope.value = newValue;
});
// watch for source changes to update our api endpoint
$scope.$watch('source', function(newVal) {
$scope.api = new DeviceResource({device: $scope.source.device.id, resource: $scope.source.device.resource, property: $scope.source.device.resource});
});
$scope.save = function(){
$scope.api.run($scope.source.device.resource, $scope.value).then(result => {
}).catch(error => {
});
};
}]
};
});
This is the deviceResourceWidget.html file →
<form class="form-validation m-t" ng-submit="save()">
<fieldset ng-disabled="api.state==api.status.RUNNING || !api.allowed()">
<div class="row wrapper-xs">
<label class="col-sm-12"><strong>Value A</strong></label>
<div class="col-sm-12">
<input type="number" class="form-control" placeholder="Value A" ng-model="value.a" min="0" max="1000" required>
</div>
</div>
<div class="row wrapper-xs">
<label class="col-sm-12"><strong>Value B</strong></label>
<div class="col-sm-12">
<input type="number" class="form-control" placeholder="Value B" ng-model="value.b" min="0" max="1000" required>
</div>
</div>
<div class="row wrapper-xs">
<label class="col-sm-12"><strong>Value C</strong></label>
<div class="col-sm-12">
<label class="i-switch bg-success m-t-xs">
<input type="checkbox" ng-model="value.c">
<i></i>
</label>
</div>
</div>
<div class="wrapper-xs">
<div class="alert alert-danger alert-dismissible m-b-sm" ng-if="api.state===api.status.ERROR">
<a href="" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong><i class="far fa-thumbs-down"></i> Ooops!</strong> Cannot process your request. Error {{api.code}} ({{api.message}})
</div>
<button class="btn btn-success btn-addon" type="submit" ><i><span ng-class="{'fa fa-check': api.state!=api.status.RUNNING, 'fa fa-spinner fa-pulse' : api.state==api.status.RUNNING}"></span></i>Update</button>
</div>
</fieldset>
</form>
This is how the widget should be configured →
The html widget tab
The display options tab
Hope this helps
Thank you very much for the explanation but my code is built on the variables thing[“Slider1”] << inputValue(Slider1);
I have no way to change the main code in the program.
The slider widget works fine but there is a problem with providing exact values with the slider. It would be best to do it by entering text.
Your description is great but unfortunately I can’t use it. When choosing “select resource” I don’t have the option to select these variables 
Any idea?
Thank you very much
Hi,
If you cannot modify the devices code, the way to modify the values the way you want is by the device’s api.
Hope this helps,