I have few imagines that i have to display on the dashboard. I am running node red in Raspberry Pi for that dashboard. I saved the images in the Pi. Now the problem is how to set up media node so that i can display images from my Pi. Or is there any other way?
Here's something that's quick and easy to implement. It's actually the backend of my home security system that takes pictures and does an FTP transfer to a directory on my RPi server. For example, the camera on the 'House Drive' sends the images to a directory named 'camera1', 'Garage Drive' to 'camera2' etc..
The clever bit of this is a PHP script that lives in each directory, which catalogs whatever it finds in each directory. You'll need PHP to be running on your server/Raspberry Pi (loads of info on the web for this).
The PHP script can be found here... Single File PHP Gallery 4.7.1
When you press a 'button', in the Node-RED flow below, it targets the contents of the chosen directory to an iFrame. You can setup Single File PHP Gallery to show thumbnails and when you click them they expand to their normal size.
Obviously you will have to adjust the 'paths' to suit your system.
[{"id":"5e743b91.8bc9c4","type":"ui_template","z":"c683dd35.e6ffb8","group":"932c923f.40f4e8","name":"","order":0,"width":"14","height":"12","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":2880,"y":740,"wires":[[]]},{"id":"c762e056.90f64","type":"template","z":"c683dd35.e6ffb8","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe width=\"100%\" height=\"100%\" src=\"{{{payload}}}\"></iframe>","output":"str","x":2660,"y":740,"wires":[["5e743b91.8bc9c4"]]},{"id":"f117b75.a56b448","type":"ui_button","z":"c683dd35.e6ffb8","name":"","group":"9184c687.df8098","order":3,"width":"0","height":"0","passthru":true,"label":"Rear garden","tooltip":"","color":"","bgcolor":"","icon":"","payload":"http://192.168.1.156/camera3/index.php","payloadType":"str","topic":"","x":2450,"y":680,"wires":[["c762e056.90f64"]]},{"id":"794f74a1.9109a4","type":"ui_button","z":"c683dd35.e6ffb8","name":"","group":"9184c687.df8098","order":1,"width":"0","height":"0","passthru":true,"label":"House drive","tooltip":"","color":"","bgcolor":"","icon":"","payload":"http://192.168.1.156/camera1/index.php","payloadType":"str","topic":"","x":2450,"y":760,"wires":[["c762e056.90f64"]]},{"id":"b5e71c7f.ed0678","type":"ui_button","z":"c683dd35.e6ffb8","name":"","group":"9184c687.df8098","order":2,"width":"0","height":"0","passthru":true,"label":"Garage drive","tooltip":"","color":"","bgcolor":"","icon":"","payload":"http://192.168.1.156/camera2/index.php","payloadType":"str","topic":"","x":2450,"y":720,"wires":[["c762e056.90f64"]]},{"id":"95a11db4.d4dbc8","type":"comment","z":"c683dd35.e6ffb8","name":"Populate dashboard from website (FTP images)","info":"","x":2780,"y":680,"wires":[]},{"id":"1137a922.3d5b27","type":"ui_button","z":"c683dd35.e6ffb8","name":"","group":"9184c687.df8098","order":4,"width":"0","height":"0","passthru":true,"label":"Patio area","tooltip":"","color":"","bgcolor":"","icon":"","payload":"http://192.168.1.156/camera4/index.php","payloadType":"str","topic":"","x":2450,"y":800,"wires":[["c762e056.90f64"]]},{"id":"932c923f.40f4e8","type":"ui_group","name":"Camera images on NAS-156 server","tab":"9b0f987f.9d6e48","order":1,"disp":true,"width":"14","collapse":false},{"id":"9184c687.df8098","type":"ui_group","name":"Camera source","tab":"9b0f987f.9d6e48","order":5,"disp":true,"width":"4","collapse":false},{"id":"9b0f987f.9d6e48","type":"ui_tab","name":"SMART Home - security","icon":"record_voice_over","order":1}]
Thanks @dynamicdave
My ip for Pi is Node-RED : 10.20.233.241 and location of file is /home/pi/Destop/A/fe01.jpg so what will be my payload for button?
I've setup PHP to serve 'stuff' from /var/www/html on my Pi so this works for me.
http://192.168.1.156/camera1/index.php
All the jpegs are in the directory /var/www/html/camera1
Have a look on Single File PHP Gallery 4.7.1 as there is lots of information there.
Not working for me. I am trying 10.20.233.241/home/pi/Destop/Plant 1/fe01.jpg as my Pi is not on internet.
Have you got PHP running on your Pi ???
Not sure. let me check. thanks
Urm, did I miss something? Why use PHP when you already have a data-driven dynamic web server in the form of Node-RED?
If you already have the images on the Pi, all you need to do is to make the image folder available to Node-RED's static folder (configured in settings.js). You can use a filing system node if you need an index to the files.
You can even use soft links if you need the images in 1 folder in a section of the filing system you don't want to otherwise share.
2 Likes
Sorry i don't get it.
that's what my flow looks like till now, and it's not working for me.
[
{
"id": "223008ca.27d5f8",
"type": "ui_template",
"z": "935db92.1ef9548",
"group": "219d8573.b713ea",
"name": "",
"order": 4,
"width": 5,
"height": 7,
"format": "",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"x": 1140,
"y": 180,
"wires": [
[]
]
},
{
"id": "22efe504.4f277a",
"type": "template",
"z": "935db92.1ef9548",
"name": "",
"field": "template",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<iframe width=\"100%\" height=\"100%\" src=\"{{{payload}}}\"></iframe>",
"output": "str",
"x": 1000,
"y": 180,
"wires": [
[
"223008ca.27d5f8"
]
]
},
{
"id": "7366f2e7.fed79c",
"type": "ui_button",
"z": "935db92.1ef9548",
"name": "",
"group": "219d8573.b713ea",
"order": 12,
"width": 0,
"height": 0,
"passthru": true,
"label": "",
"tooltip": "",
"color": "",
"bgcolor": "",
"icon": "",
"payload": "10.20.233.241/home/pi/Destop/Plant 1/fe01.jpg",
"payloadType": "str",
"topic": "",
"x": 870,
"y": 180,
"wires": [
[
"22efe504.4f277a"
]
]
},
{
"id": "3670d971.36064e",
"type": "inject",
"z": "935db92.1ef9548",
"name": "",
"topic": "",
"payload": "true",
"payloadType": "bool",
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"x": 730,
"y": 180,
"wires": [
[
"7366f2e7.fed79c"
]
]
},
{
"id": "219d8573.b713ea",
"type": "ui_group",
"z": "",
"name": "FE - 01",
"tab": "520d4e1.6420bb",
"order": 2,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "520d4e1.6420bb",
"type": "ui_tab",
"z": "",
"name": "FORKLIFTS",
"icon": "dashboard",
"order": 2,
"disabled": false,
"hidden": false
}
]
Please let me know how can i make it work. Thanks
You using 10.20.233.241/home/pi/Destop/Plant 1/fe01.jpg... do you really want a space in the Plant 1?
can you enter that in a browser address bar and get a result?
I tried but cannot get any result
Is not a valid URL - well it kind of is technically - but it won't work because it has mixed up the idea of a filing system folder name with a URL.
As I've already said, all you need to do is configure the static folder setting in settings.js, restart Node-RED and put your images in the folder you configured. Then you can access them as
http://10.20.233.241:1880/fe01.jpg
You can use soft-links if you want to keep the images in one place but still make them available to Node-RED and want to keep the static folder in your userDir.
Thanks. I am new to this. I have no idea where to find settings.js
Have you looked in your userDir folder?
~/.node-red on Linux or Windows PowerShell
%USERPROFILE%/.node-red in the Windows command prompt.
The Node-RED documentation website has all the details.
Node Red is running on R Pi which is hocked up to my network.
You have also misspelled Desktop you have Destop
1 Like
As it was mentioned in another thread, I uncommented these 2 lines in settings.js file
//httpAdminRoot: '/admin',
//httpStatic: '/home/node-red-static/',
Then, httpStatic: '/home/pi/.node-red/A', as i copied the folder containing images there. But still no luck. Am I doing anything wrong? I am stuck at that point.
Here's the link of thread i am following: How to enable ability to input local image files in to node red dashboard - Dashboard - Node-RED Forum
Have you restarted node-red?
Have you tried using a browser like this http://_PI_IP_:1800/_path_to_image to check it is working?
↑ where _PI_IP_ is your PI IP address and _path_to_image_ is the relative path to a image you have in /home/pi/.node-red/A/
Once again/ do you really have a folder called Plant 1? ie with a blank in the name? Try changing the blank to an underscore in the address and in the folder name (i.e. rename the folder)
