# Image from RPi to dashboard

**URL:** <https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876>\
**Category:** Dashboard\
**Created:** [12 February 2021 16:03 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876 "2021-02-12T16:03:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [12 February 2021 16:03 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/1 "2021-02-12T16:03:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [12 February 2021 17:51 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/2 "2021-02-12T17:51:15Z")

</div>

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](http://sye.dk/sfpg/)

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.  
 ![Screen Shot 02-12-21 at 05.32 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6db269a5f6dc750d819c317969934ab90b9a9cb2.jpeg)

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

```

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [12 February 2021 18:01 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/3 "2021-02-12T18:01:51Z")

</div>

Thanks @dynamicdave  
My ip for Pi is [Node-RED : 10.20.233.241](http://10.20.233.241:1880/) and location of file is /home/pi/Destop/A/fe01.jpg so what will be my payload for button?

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [12 February 2021 18:10 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/4 "2021-02-12T18:10:15Z")

</div>

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](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](http://sye.dk/sfpg/) as there is lots of information there.

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [12 February 2021 18:18 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/5 "2021-02-12T18:18:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [12 February 2021 18:19 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/6 "2021-02-12T18:19:31Z")

</div>

Have you got PHP running on your Pi ???

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [12 February 2021 19:00 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/7 "2021-02-12T19:00:59Z")

</div>

Not sure. let me check. thanks

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 February 2021 20:04 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/8 "2021-02-12T20:04:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [15 February 2021 13:07 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/9 "2021-02-15T13:07:11Z")

</div>

Sorry i don't get it.  
that's what my flow looks like till now, and it's not working for me.

```auto
[
    {
        "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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 February 2021 13:18 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/10 "2021-02-15T13:18:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [17 February 2021 12:18 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/11 "2021-02-17T12:18:51Z")

</div>

> [@zenofmud](#):
>
> can you enter that in a browser address bar and get a result?

I tried but cannot get any result

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 February 2021 12:26 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/12 "2021-02-17T12:26:09Z")

</div>

> [@zenofmud](#):
>
> 10.20.233.241/home/pi/Destop/Plant 1/fe01.jpg

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [17 February 2021 12:30 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/13 "2021-02-17T12:30:01Z")

</div>

> [@TotallyInformation](#):
>
> configure the static folder setting in settings.js

Thanks. I am new to this. I have no idea where to find settings.js

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 February 2021 12:32 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/14 "2021-02-17T12:32:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [17 February 2021 12:48 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/15 "2021-02-17T12:48:04Z")

</div>

Node Red is running on R Pi which is hocked up to my network.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [17 February 2021 12:57 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/16 "2021-02-17T12:57:40Z")

</div>

You have also misspelled `Desktop` you have `Destop`

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [18 February 2021 13:44 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/17 "2021-02-18T13:44:01Z")

</div>

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](https://discourse.nodered.org/t/how-to-enable-ability-to-input-local-image-files-in-to-node-red-dashboard/3085/2)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 February 2021 13:52 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/18 "2021-02-18T13:52:47Z")

</div>

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/`

---

<div class="post-metadata">

**Author:** ![HZB](https://avatars.discourse-cdn.com/v4/letter/h/77aa72/32.png) [@HZB](https://discourse.nodered.org/u/HZB)\
**Post date:** [18 February 2021 14:10 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/19 "2021-02-18T14:10:00Z")

</div>

> [@Steve-Mcl](#):
>
> Have you restarted node-red?

Yes

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1add5e922a8958c4a5840cbf2896f47d8ed96792.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [18 February 2021 15:02 UTC](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876/20 "2021-02-18T15:02:50Z")

</div>

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)

[Next page](https://discourse.nodered.org/t/image-from-rpi-to-dashboard/40876.md?page=2)