Just designed an html widget to set a device property from some inputs.
Everything works fine but I just don’t know how to set those values.
I have tried and followed the example in the docs, but I’m quite new to JS so angular is quite complicated for me.
This is the js script inside the widget:
var submitButton = document.querySelector(".send");
submitButton.addEventListener("click", getUser, false);
function getUser(){
var start1Value = document.querySelector(".start1").value;
var end1Value = document.querySelector(".end1").value;
var start2Value = document.querySelector(".start2").value;
var end2Value = document.querySelector(".end2").value;
And this is the property I want to set those values:
I would follow the property update widget example and after validating it, continue by modifying the HTML to suit your needs.
It is actually pretty straight forward. The JS file wouldn’t need any modification and you can make the same changes you have right now in the HTML part by referencing your values with value.End1, value.End2, value.Start1 and value.Start2.
Otherwise your questions become JS specific and not so much Thinger.io
From the code you attached it doesn’t seem that it is doing anything in particular, the line var start1Value = document.querySelector(".start1").value; only retrieves the values from the HTML elements which have the class set to .start1 and sets it to the javascript variable start1Value, but I can’t see anything else.
Not sure if this is all its doing or you have further code, and if there is more, don’t be afraid to share it, we are all learning all the time.
My code is just a test for a widget of this kind.
The entire html looks like:
<html>
<head>
</head>
<body>
<div class="widg">
<div class="cont">
<p><b>Configure las franjas horarias deseadas:</b></p>
<p>Inicio de la franja horaria 1</p>
<input type="time" class="hour start1">
<p>Final de la franja horaria 1</p>
<input type="time" class="hour end1">
<p>Inicio de la franja horaria 2</p>
<input type="time" class="hour start2">
<p>Final de la franja horaria 2</p>
<input type="time" class="hour end2">
</div>
<div class="sendButton">
<input type="submit" class="send">
</div>
</div>
<script>
var submitButton = document.querySelector(".send");
submitButton.addEventListener("click", getUser, false);
function getUser(){
var start1Value = document.querySelector(".start1").value;
var end1Value = document.querySelector(".end1").value;
var start2Value = document.querySelector(".start2").value;
var end2Value = document.querySelector(".end2").value;
}
</script>
</body>
</html>
Only gets the input from the user and saves it in those variables.
It is not clear to me if I could just associate each value of the property with each one of those var objects and don’t use the angular directive.
Or if the directive is a must to interact with thinger.
I will be waiting for your response, but also will try with the docs example. By following:
It is actually pretty straight forward. The JS file wouldn’t need any modification and you can make the same changes you have right now in the HTML part by referencing your values with value.End1 , value.End2 , value.Start1 and value.Start2 .
I will share my results here if the tests are successful.
Either the angular directive or making the corresponding HTTP requests to get the values, and set them on modification. Much easier and secure with the directive. If a token is placed on a dashboard and the dashboard is made public, the token would be accessible to everyone.
Your code isn’t doing anything and much less working with Thinger resources, sorry
Let me know if you have issues with the property update widget.
