# House blueprint with graphic interactions dashboard
**URL:** https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906
**Category:** Dashboard
**Created:** [6 September 2018 10:58 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906 "2018-09-06T10:58:22Z")
**Posts on this page:** 13
**Page:** 2
### Author:  [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)
#### Post date: [11 September 2018 16:00 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/21 "2018-09-11T16:00:24Z")
Thank you All
I will check it
---
### Author:  [@martinschki](https://discourse.nodered.org/u/martinschki)
#### Post date: [5 November 2018 17:25 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/22 "2018-11-05T17:25:29Z")
Hello!
I was excited to see an instruction on how to do this but I don't run a proxy server on my Raspberry installation.
How else could I serve a picture file like it is described in that blog post without ngyx?
Thanks!!
---
### Author:  [@dustinw](https://discourse.nodered.org/u/dustinw)
#### Post date: [5 November 2018 18:00 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/23 "2018-11-05T18:00:50Z")
You can have Node-Red serve static content (i.e. rather than relying on Nginx or something like that). In your settings.js file set the httpStatic directory and put the picture file in that directory.
Note: You have to also set "httpAdminRoot" to use that feature. See the config page for more details: [https://nodered.org/docs/configuration#runtime-configuration](https://nodered.org/docs/configuration#runtime-configuration)
---
### Author:  [@martinschki](https://discourse.nodered.org/u/martinschki)
#### Post date: [5 November 2018 20:40 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/24 "2018-11-05T20:40:58Z")
If I read this correctly, I have to move the editor and UI path away from root to do that.
Is there another way around? To have the static content at e.g. [http://ip-address/content/](http://ip-address/content/)
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [5 November 2018 20:55 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/25 "2018-11-05T20:55:33Z")
> [@martinschki](#):
>
> If I read this correctly, I have to move the editor and UI path away from root to do that.
> Is there another way around? To have the static content at e.g. [http://ip-address/content/](http://ip-address/content/)
Here are the relevant settings:
```javascript
// By default, the Node-RED UI is available at http://localhost:1880/
// The following property can be used to specify a different root path.
// If set to false, this is disabled.
httpAdminRoot: '/red',
// Some nodes, such as HTTP In, can be used to listen for incoming http requests.
// By default, these are served relative to '/'. The following property
// can be used to specify a different root path. If set to false, this is
// disabled.
//httpNodeRoot: '/red-nodes',
// The following property can be used in place of 'httpAdminRoot' and 'httpNodeRoot',
// to apply the same root to both parts.
//httpRoot: '/',
// When httpAdminRoot is used to move the UI to a different root path, the
// following property can be used to identify a directory of static content
// that should be served at http://localhost:1880/.
httpStatic: path.join('.', 'public'),
```
I always move the admin interface to somewhere more convenient - `/red` in this example. Which leaves the root URL free. But you can do it the other way around by changing `httpNodeRoot` instead of (or indeed as well as) `httpAdminRoot`.
---
### Author:  [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [5 November 2018 21:09 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/26 "2018-11-05T21:09:10Z")
> [@martinschki](#):
>
> Is there another way around? To have the static content at e.g. [http://ip-address/content/](http://ip-address/content/)
Not really, since it could collide with all the other internal node-red urls. As Julian mentioned, if you move the httpAdminRoot and set the Static directory, then you can create a "content" directory underneath the public (or static) folder. The resulting url for accessing the image will be something like `http://ip-address/content/myimage.jpg`
---
### Author:  [@martinschki](https://discourse.nodered.org/u/martinschki)
#### Post date: [5 November 2018 21:10 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/27 "2018-11-05T21:10:09Z")
ok, that's clear to me
but where do I put static files if I want to access e.g. image.png from http://:1880/stat\_content/image.png ?
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [5 November 2018 21:14 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/28 "2018-11-05T21:14:30Z")
> [@martinschki](#):
>
> where do I put static files if I want to access
The `httpStatic` setting identifies the directory you should put your content.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [5 November 2018 21:17 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/29 "2018-11-05T21:17:10Z")
> [@martinschki](#):
>
> where do I put static files if I want to access
> [@TotallyInformation](#):
>
> httpStatic: path.join('.', 'public'),
I always put mine in the same place for convenience. The above means that you need a folder `~/.node-red/public` (assuming you have a standard installation).
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [5 November 2018 21:18 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/30 "2018-11-05T21:18:19Z")
...but when accessing it via a URL, don't include the name of the static folder in the URL.
Eg, if your static folder containing your images is `.node-red/public` then access it via `http://:1880/image.png`
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [5 November 2018 21:23 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/31 "2018-11-05T21:23:09Z")
> [@Paul-Reed](#):
>
> don't include the name of the static folder in the URL
Unless, you have changed `httpNodeRoot`
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [16 November 2019 00:01 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/32 "2019-11-16T00:01:39Z")
Just got a '_Nice Share_' notification from Discourse, for the link that I posted somewhere in this discussion...
**But** for anybody that wants to create his house blueprint with graphic interactions dashboard, please have a look at our recent [node-red-contrib-ui-svg](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063) node. That will be much easier compared to using Leaflet ...
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [16 November 2019 22:15 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/33 "2019-11-16T22:15:18Z")
Or see the recent discussion thread on using uibuilder with svg 😉
Incidentally, there are now many ways to create SVG files. Even Microsoft Office.
Always good to have options.
[Previous page](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906.md?page=1)