Timepicker

Recumbent Traveller

unread,

Oct 15, 2017, 3:54:27 PM10/15/17

to Node-RED UI

I'm trying to design a timepicker, see code below.

The UI works, but it does not return the picked time value.

Where's my mistake?

[{"id":"bdc44656.b6ba18","type":"template","z":"81867e0a.ab74f","name":"Set time","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<!DOCTYPE html>\n<html>\n<body>\n\n<form id=\"frm1\">\nSoll Zeit:\n <input type=\"time\" name=\"usr_time\" value=\"12:00\">\n</form>\n\n<button onclick=\"settime()\">Set time</button>\n\n<p id=\"newtime\"></p>\n\n<script>\nfunction settime() {\n var x = document.getElementById(\"frm1\");\n var text = \"\";\n var i;\n for (i = 0; i < x.length ;i++) {\n text += x.elements[i].value;\n }\n document.getElementById(\"newtime\").innerHTML = text;\n \n}\n</script>\n\n</body>\n</html>\n","output":"str","x":320,"y":840,"wires":[["33b61574.62b6ca"]]},{"id":"31ae916.1826b6e","type":"inject","z":"81867e0a.ab74f","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"x":142.73802947998047,"y":840.7142515182495,"wires":[["bdc44656.b6ba18"]]},{"id":"a96a5f0a.e91dc","type":"debug","z":"81867e0a.ab74f","name":"","active":true,"console":"false","complete":"true","x":690,"y":840,"wires":[]},{"id":"33b61574.62b6ca","type":"ui_template","z":"81867e0a.ab74f","group":"2831460e.824e4a","name":"Set Time","order":5,"width":"6","height":"3","format":"<div ng-bind-html=\"msg.payload | trusted\">div here</div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":500,"y":840,"wires":[["a96a5f0a.e91dc"]]},{"id":"2831460e.824e4a","type":"ui_group","z":"","name":"Mindbox (DIY Arduino)","tab":"14db2982.7f3606","order":2,"disp":true,"width":"6"},{"id":"14db2982.7f3606","type":"ui_tab","z":"","name":"Uhren","icon":"dashboard","order":2}]

steve rickus

unread,

Oct 16, 2017, 12:58:10 PM10/16/17

to Node-RED UI

Well, this was an interesting challenge...

I've replaced your template/ui_template nodes with a single ui_template node (so there is no input flow necessary). The content is:

<div>
    Soll Zeit:
    <input type="time" ng-model="usr_time">
    <button ng-click="settime()">Set time</button>
    <br>
    <p id="new_time">{{usr_time | date:'HH:mm'}}</p>
</div>

<script>
(function($scope) {
    var now = new Date();
    $scope.usr_time = new Date(1970, 0, 1, now.getHours(), now.getMinutes(), 0);

    $scope.settime = function() {
        var time = document.getElementById("new_time");
        $scope.send({payload: time.innerText});
    };
})(scope);
</script>

Turns out the time input element works with the angular model holding the time ONLY if the javascript date is the same as the date of the epoch -- who knew!

Changes in the dom or javascript variable are NOT automatically propagated back to the node-red server, but any dashboard ui (or html) element can send back data using the angular scope.send() function. So the script, which runs as the page is loaded, inits the usr_time model value to the current hour/minutes, and defines the settime() function in the dashboard scope. Changes to the time picker value are bound to the <p> element below the time input field, with the output formatted using the angular date filter set to show HH:mm. Finally, clicking the button invokes the settime() function, which sends whatever innerText value is inside that paragraph element. I hope this is what you are looking for...

--

Steve

Recumbent Traveller

unread,

Oct 19, 2017, 9:28:21 AM10/19/17

to Node-RED UI

Great, this works! It's surpsingly tricky, thank you for your help, without it it could'nt figure this out.

The timepicker interface seems not to run in all browsers, it works on chrome mobile, but on chrome desktop there is no value returned if time is set?

steve rickus

unread,

Oct 19, 2017, 10:21:35 AM10/19/17

to Node-RED UI

Well that is strange, since I developed it on my PC using Chrome desktop...

If you open the dev console (F12) are there any javascript or network errors?

David Caparrós

unread,

Dec 11, 2017, 9:00:54 AM12/11/17

to Node-RED UI

Another easy way to do it directly with the nodes from palette:

[{"id":"d6832c1b.5db28","type":"debug","z":"8f59d8bd.df0e58","name":"message","active":true,"console":"false","complete":"true","x":652,"y":85,"wires":[]},{"id":"53b12f43.f6c82","type":"ui_form","z":"8f59d8bd.df0e58","name":"","label":"test hora:minuto","group":"f097c0ea.736d1","order":0,"width":0,"height":0,"options":[{"label":"hora","value":"hora","type":"number","required":true},{"label":"minuto","value":"minuto","type":"number","required":true}],"formValue":{"hora":"","minuto":""},"payload":"","topic":"hora:minuto","x":158,"y":89,"wires":[["d34f4f3f.58c28","d6832c1b.5db28"]]},{"id":"d34f4f3f.58c28","type":"function","z":"8f59d8bd.df0e58","name":"","func":"msg.payload == (\"ontime\",hora,\":\",minuto);\nreturn msg;","outputs":1,"noerr":0,"x":374,"y":123,"wires":[["d6832c1b.5db28"]]},{"id":"f097c0ea.736d1","type":"ui_group","z":"","name":"test","tab":"d69b0458.8448a8","order":2,"disp":true,"width":"7"},{"id":"d69b0458.8448a8","type":"ui_tab","z":"","name":"test","icon":"dashboard","order":11}]

Regards

Reply all

Reply to author

Forward