# Is it possible to make a separate user's visualisation panel?

**URL:** https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012
**Category:** General
**Created:** [22 October 2019 13:51 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012 "2019-10-22T13:51:56Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![rmatveev](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rmatveev](https://discourse.nodered.org/u/rmatveev)
#### Post date: [22 October 2019 13:51 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/1 "2019-10-22T13:51:56Z")

</div>

I'm trying to make a simple controller based on Raspberry Pi 3B+. I need the controller to display simple visualisation via web-page (web-based control panel) and communicate with a Modbus device via UART.

I think that I will need

- an "admin panel" accessed with a password with flows editor to configure the system and
- a separate panel accesed by anyone to control the object.

I can not find anything like this in Node Red. Is it possible?

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [22 October 2019 13:54 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/2 "2019-10-22T13:54:37Z")

</div>

Hi @rmatveev

Take a look at the `node-red-dashboard` set of nodes - [https://flows.nodered.org/node/node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard)

---

<div class="post-metadata">

### Author: ![rmatveev](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rmatveev](https://discourse.nodered.org/u/rmatveev)
#### Post date: [22 October 2019 20:18 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/3 "2019-10-22T20:18:35Z")

</div>

Thank you, @knolleary!  
That was almost exactly what I was needed,  
For this moment I still missed three things:

1. position UI elements at orbitraty place of the screen
2. put orbitrary image on the background
3. make UI accessable authorized only.

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [22 October 2019 20:21 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/4 "2019-10-22T20:21:22Z")

</div>

> [@rmatveev](#):
>
> position UI elements at orbitraty place of the screen

One of the trade-offs NR-Dashboard makes is the layout is grid based and doesn't allow things to be arbitrarily placed on screen.

> [@rmatveev](#):
>
> put orbitrary image on the background

If you search this forum for dashboard background images you'll find a number of threads that explain how to do it. In short - use some suitable CSS in a `ui_template` node.

> [@rmatveev](#):
>
> make UI accessable authorized only.

This is one of the limitations of NR-dashboard: it only comes with Basic Authentication support for a single user.

If you want more flexibility, but at the cost of building more of the UI for yourself, then take a look at the uibuilder set of nodes.

---

<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: [22 October 2019 20:45 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/5 "2019-10-22T20:45:14Z")

</div>

If those 3 things are super important to you and if you can live without the hand-holding that Dashboard gives you, you might want to try out uibuilder. This gives you the ability to work with any front-end framework (VueJS as default but change that to whatever you like) and manages websocket comms. It also lets you edit your front-end code and manage additional front-end libraries.

Authorised access isn't well documented in uibuilder right now unfortunately, it is high on the list of things to do. But all of the components are there to make it happen.

ui element placement will be entirely under your control. Though the default setup gives you VueJS, bootstrap-vue and bootstrap which makes it really easy to create something nice looking without needing to be a designer or write loads of code.

---

<div class="post-metadata">

### Author: ![rmatveev](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rmatveev](https://discourse.nodered.org/u/rmatveev)
#### Post date: [22 October 2019 20:57 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/6 "2019-10-22T20:57:31Z")

</div>

@knolleary, Thank you!  
You saying that simple authorization for one user is possible. Could you point me into the proper further right reading?

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [22 October 2019 20:58 UTC](https://discourse.nodered.org/t/is-it-possible-to-make-a-separate-users-visualisation-panel/17012/7 "2019-10-22T20:58:15Z")

</div>

> [@rmatveev](#):
>
> Could you point me into the proper further right reading?

See the "Securing the Dashboard" section of its README: [node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/node-red-dashboard)
