Afficher une image stockée sur le disque sur le dashboard

node-red
dashboard
mini-tuto

#1

Le Widget Template (détaillé dans ce tutoriel) permet d’afficher du code HTML sur le Dashboard.

Suivez ce tutoriel pour découvrir comment ajouter un dashboard à vos projets Node-RED.

Ajoutez le plugin base64 depuis le gestionnaire de palette (présenté ici).

Le template HTML utilise le framework Angularjs supporté par Google pour fonctionner. Pour afficher une image, on va utiliser la directive Angularjs ng-scr. Elle accepte différent types de données.

Sous Node-RED, on charge l’image à afficher avec la fonction file qui permet de charger un fichier dans un buffer (single Buffer object). Puis on converti en base64 le buffer qui sera récupéré dans le template à l’aide de {{msg.payload}}

<div>
  <img ng-src="data:image/JPEG;base64,{{msg.payload}}"/>
</div>

Code du flow

[{"id":"27a63cf5.360a54","type":"file in","z":"b4d3c65d.bf2438","name":"load image to buffer","filename":"","format":"","sendError":false,"x":880,"y":160,"wires":[["6884689b.fd3688"]]},{"id":"abd5aed3.9566c","type":"ui_template","z":"b4d3c65d.bf2438","group":"51b73d9e.a69674","name":"","order":0,"width":"6","height":"6","format":"<div>\n  <img ng-src=\"data:image/JPEG;base64,{{msg.payload}}\"/>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1200,"y":160,"wires":[[]]},{"id":"6884689b.fd3688","type":"base64","z":"b4d3c65d.bf2438","name":"","x":1060,"y":160,"wires":[["abd5aed3.9566c"]]},{"id":"51b73d9e.a69674","type":"ui_group","z":"","name":"Last record ","tab":"6b8f2aea.21e4c4","disp":true,"width":"6"},{"id":"6b8f2aea.21e4c4","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]