Hi
I have managed to get my ESP32-cam to upload to my RPI in a folder under html and web accessible.
Reference https://robotzero.one/posting-data-server-esp32
Each image is time stamped and I can view any specific one by hard coding a template and viewing in dashboard. I wonder is there any way I can view a list of available files and choose one to view.
thanks
John
You could use the node-red-contrib-fs-ops nodes. When installed, there is one called directory that will return an array of file names (filtered to *.jpg if need be).
From this, you could build a table of hyperlinks in ui_template or send it to ui_table for fancy formatting
Thanks for that, it gives me some direction to start "googling"
Unfortunately I have fallen at the first hurdle in that using the directory node with a path of "home/pi/Pictures" I get no output. I have tried several different folders that contain files and tried various syntax.
John
Try ~/pi/Pictures or /home/pi/Pictures
1 Like
Apologies, just me being stupid. I needed to debug as a "complete message object" to see the result.
So I use a button to trigger this listing. Then a function to somehow populate a dropdown box containing links to the files. Does that make sense? Also I have an issue with relative path. In template I put
img src="/home/pi/Pictures/xxxx.jpg" style="width:100%"
This produces no image. Does the image folder have to reside within the www/html domain?
thanks
Hi John,
Indeed your browser cannot access files locally on your Raspberry. Luckily...
So you need to publish your images in an accessible folder. Here is a good explanation how to do that.
NOTE: This solution uses the node-red-contrib-fs-ops nodes (install via pallet manager)
So - you can make a folder public as @BartButenaers says or you can make an end point to deliver files
This should get you started...
e.g...
The flow. NOITE: change the path and filter settings in the "Directory" node to /home/pi/Pictures directory and the filter to *.jpg
[{"id":"a64dda71.3761a8","type":"ui_template","z":"e360ac5b.0ab79","group":"bab313df.9c70e","name":"ui_temlplate - present download links on dashboard","order":0,"width":0,"height":0,"format":"<div ng-repeat=\"obj in msg.payload\">\n \n</div>\n\n\n<table border=\"1\">\n\t<tr ng-repeat=\"obj in msg.payload\">\n\t\t<td>{{obj.name}}</td>\n\t\t<td><a href='{{obj.url}}'>download</a></td>\n\t</tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":350,"y":460,"wires":[[]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"d161fbe3.369e78","type":"ui_ui_control","z":"e360ac5b.0ab79","name":"","events":"change","x":220,"y":400,"wires":[["77871cdc.8b5264"]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"77871cdc.8b5264","type":"fs-ops-dir","z":"e360ac5b.0ab79","name":"","path":"c:\\temp","pathType":"str","filter":"*.csv","filterType":"str","dir":"files","dirType":"msg","x":360,"y":400,"wires":[["7378c226.96aedc"]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"7378c226.96aedc","type":"function","z":"e360ac5b.0ab79","name":"","func":"var opts = []\nvar path = msg.payload;\nfor (let index = 0; index < msg.files.length; index++) {\n const element = msg.files[index];\n var opt = {\n url: \"/files/\" + element,\n name: element\n }\n opts.push(opt)\n}\nmsg.payload = opts;\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":400,"wires":[["a64dda71.3761a8"]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"bab313df.9c70e","type":"ui_group","z":"","name":"Data Export","tab":"a5270027.43aab","disp":true,"width":"12"},{"id":"a5270027.43aab","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1}]
1 Like
Thats fantastic. Thank you so much. I love node-red and especially love this forum where everyone seems to be so helpful and tolerant of beginners (unlike some other forums)
That worked perfectly, all I need to work out now is how to show souce image.
1 Like
Instead of (or as well as) making the download link, you could just as easily generate an img tag in that template
Something like
<img src="{{url}}" alt="{{name}}">
But be warned, this will get slow of there are many images or if they are large.
Also, you might wanna set a width and height on the img
I would probably limit the loop to 10 and have some kind of "next page" or a filter for each day's images.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
