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

Discussions autour de la programmation d'objets connectés avec Node-RED. Guides et astuces de programmation
Avatar de l’utilisateur
admin
Site Admin
Messages : 23
Inscription : Mar Juil 04, 2017 4:04 pm

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

Message par admin » Jeu Juil 13, 2017 8:45 am

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}}

Code : Tout sélectionner

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

Code : Tout sélectionner

[{"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"}]

aurelieo
Messages : 1
Inscription : Jeu Fév 01, 2018 9:54 am

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

Message par aurelieo » Jeu Fév 01, 2018 9:59 am

Bonjour,

Pour un projet étudiant nous utilisons Node Red et souhaitons afficher une image. Votre tutoriel nous est très utile mais nous ne parvenons pas à ajouter le Node permettant de charger une image sur un buffer. Pouvez vous nous donner le nom exact du Node pour l'importer sur le dashboard.

Merci d'avance,

Aurélie

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 0 invité