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

General
1

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?

2

Hi @rmatveev

Take a look at the node-red-dashboard set of nodes - https://flows.nodered.org/node/node-red-dashboard

1 Like
3

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.
4

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.

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.

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.

1 Like
5

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.

3 Likes
6

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

7

See the "Securing the Dashboard" section of its README: node-red-dashboard (node) - Node-RED

1 Like