Tutorial de Node-RED: Cómo mostrar un reloj analógico en un Dashboard

¿Quieres controlar la hora mostrada por un reloj analógico en tu Tablero Node-RED?

En este post, vamos a descargar el nodo ui-clock de Node-RED para añadir un reloj analógico en nuestro Dashboard, utilizando la hora como timestamp desde el 01.01.1970

Node-red-contrib-ui-clock es un simple nodo que muestra un simple reloj analógico en el panel de control de Node-RED. 

Para descargarlo, abre Node-RED > Ve a la paleta Administrar > Ve a la pestaña Instalación > Escribe: node-red-contrib-ui-clock > Haz clic en Instalar.

Una vez descargado, deberías ver cómo el nodo del reloj aparece en la sección de nodos del tablero.

Si hacemos clic en la ayuda del nodo desde la pestaña Node-RED, esto es lo que obtenemos:

Como podemos ver, lo único que necesita como entrada es la marca de tiempo. Por lo tanto, añade un nodo de inyección al reloj con la marca de tiempo como el msg.payload, y conéctalo al nodo ui-clock. Edita el nodo de inyección y haz clic en "Inyectar nodo después de 0,1 segundos, entonces" y establece un intervalo cada 1 segundo, para que el tiempo cuente cada segundo.

Haciendo que funcione, se puede ver la hora mostrada, pero no la etiqueta con la hora digital, ya que únicamente muestra la hora analógica.

Para ello, vamos a añadir un código de función y soltarlo después del nodo inject con el siguiente código, para obtener la hora de la localidad:

var timestamp = msg.payload;
let time = new Date(timestamp).toLocaleTimeString();
return {
    payload: time
}

Una vez hecho esto, copia este flows.json de abajo, ve a Node-RED, haz clic en el menú > Importar > pega el flows.json. Haz clic en Hecho, y compara este ejemplo con el tuyo.

[{"id":"365e1c699342165e","type":"tab","label":"Industrial Shields","disabled":false,"info":""},{"id":"b9dee3a556739916","type":"ui_clock","z":"365e1c699342165e","name":"","group":"7db45a2e2009a112","order":6,"width":8,"height":6,"x":790,"y":160,"wires":[]},{"id":"e0972d3fd6d6c9a4","type":"inject","z":"365e1c699342165e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":350,"y":160,"wires":[["b9dee3a556739916","b1430528ef3895d0"]]},{"id":"b1430528ef3895d0","type":"function","z":"365e1c699342165e","name":"","func":"var timestamp = msg.payload;\nlet time = new Date(timestamp).toLocaleTimeString();\n\nreturn {\n payload: time\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":240,"wires":[["9393aeb7e03490ca"]]},{"id":"9393aeb7e03490ca","type":"ui_text","z":"365e1c699342165e","group":"7db45a2e2009a112","order":3,"width":3,"height":1,"name":"Digital time","label":"","format":"{{msg.payload}}","layout":"row-left","className":"digital_time","x":810,"y":240,"wires":[]},{"id":"a013259e744decff","type":"ui_template","z":"365e1c699342165e","group":"7db45a2e2009a112","name":"","order":1,"width":1,"height":1,"format":"<style>\n .digital_time{\n transform:scale(2);\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":60,"wires":[[]]},{"id":"bfdeaa237e99add1","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":2,"width":8,"height":1},{"id":"5d472d50a3ef3817","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":4,"width":6,"height":1},{"id":"0a03aba497cdb546","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":5,"width":5,"height":1},{"id":"2698058bfa1cfeac","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":7,"width":5,"height":1},{"id":"7d6401b5c15a2a14","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":8,"width":5,"height":1},{"id":"4fe4df3eb4e8afda","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":9,"width":5,"height":1},{"id":"a06a69a17e344fe3","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":10,"width":5,"height":1},{"id":"2c11e851365f3ea9","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":11,"width":5,"height":1},{"id":"1026abb479714a4e","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":12,"width":5,"height":1},{"id":"92f60d2fe1bb4005","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":13,"width":5,"height":1},{"id":"d2df5cf7b05a00b4","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":14,"width":5,"height":1},{"id":"7d62abf82d2d905e","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":15,"width":5,"height":1},{"id":"ce309ef719136da6","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":16,"width":5,"height":1},{"id":"164d9fb9792263ae","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":17,"width":5,"height":1},{"id":"7db45a2e2009a112","type":"ui_group","name":"","tab":"eb94216d.968598","order":1,"disp":true,"width":18,"collapse":false,"className":"clock"},{"id":"eb94216d.968598","type":"ui_tab","name":"Industrial Shields","icon":"","order":5,"disabled":false,"hidden":false}]