Node-RED dashboard interfaces - mobile vs tablet

Dashboard
1

Ok, so I'm most likely using the wrong terminology.... I want to understand how to implement Node-RED in my home across multiple device types: Mobile vs Tablet.

I am building Node-RED dashboards to visualise my HA system and have already posted some questions:

I have Node-RED installed on my PC, but am ready to move to a Pi 4 4GB (most likely) to run Node-RED.

I then will have at least 1x touchscreen, with presumably a Pi 4 3GB, to run the dashboards and by the looks of it, 1x iPad Pro tablet as well.

So my question is about partitioning user interfaces.

The dashboards I am building are designed for large format touchscreens >12 inch, however I want to also build some smaller dashboards / views for mobile phones.... how do I do this?

Currently I only have one "environment" which I access through my local_host IP address

e.g. http://{ipaddress]:[port]/ui/#!

However I really want to have one set of dashboards for tablets and one set for mobile phones. I appreciate that this goes against the idea of auto-arranging that Node-RED employs, however I want bespoke visual solutions (interfaces) for mobile vs tablet.

How do I setup 2x environments, 1 for mobile and 1 for tablet?

I hope the answer isn’t 2x Pis, but if that's the way then I guess I'll live with it :slight_smile:

2

You can only have 1 actual Dashboard per instance of Node-RED. So you either have to run multiple instances of Node-RED or use other things to run your dashboards - such as uibuilder which lets you build anything and will easily let you build responsive web interfaces.

That is not Node-RED. It is the Dashboard which is only one way of producing data-driven web interfaces with Node-RED. It is the easiest but not the most versatile.

You could have 2 instances of Node-RED both with their own Dashboards. The 2nd instance could be just the Dashboard flows for example.

Or you can build your own web UI's to whatever spec you want by using something like uibuilder.

You could run 2 instances of Node-RED on a single Pi though unless you put them behind a reverse proxy, they will be exposed on different port numbers. Just note that if you also wanted to run a Linux desktop and browser for a touch screen + 2 instances of NR on 1 Pi, I think you might struggle. Without the touchscreen and desktop, you should be OK with any of the newer Pi's (not a zero though probably).

If you can live without Dashboard for one of the UI'a - maybe for your mobile interface - you could stick with a single instance of Node-RED with Dashboard for one UI and uibuilder for another (or many others actually if you ever wanted that).

3

You can build additional tabs/pages and then direct the shorcut/browser page directly to these pages instead of the default page.

So page 1 could be formatted for high res tables, page 2 for Pi

It obviously means more work for yourself in terms of having to maintain diferent views - but i can not see any reason why this would not work.

Craig

1 Like
4

Thank you, that's very helpful..

Everything is pointing me in the direction of using uibuilder rather than dashboards.
I'm thinking of the following:

1x Pi 4 4GB to run node-red with tablet and mobile interfaces

1x Pi 4 4GB sitting behind a tablet to access the tablet interfaces from the Node-Red Pi
1x iPad pro to access the tablet interfaces from the Node-Red Pi
2x Android phones to access the mobile interfaces from the Node-Red Pi

I will look into building everything using uibuilder from now on and if it works out, rebuild (again) my existing dashboards.

Do you think the above setup will work?

It may be heaving going on the single Node-Red Pi supporting 4x devices.... is there a better setup you can suggest given the outcome I am looking for?

I guess the first approach would be to split into 2x Node-Red Pis if I hit performance issues: 1x Mobile interfaces and 1x Tablet interfaces???

1 Like
5

When creating a dashboard with uibuilder, you will not run into performance issues (if built properly).

Note that node-red-dashboard is responsive, it should work on either device, with uibuilder you will need to program this yourself.

If you add all kinds of text, form, chart nodes from node-red-dashboard, performance can eventually become an issue as there is overhead in the clientside code. Especially chart nodes will consume memory/cpu if they are kept running while receiving new data.

uibuilder provides a communication interface to/from node-red, how you interact with it, you need to program yourself, but your requirements can easily be met (to provide interfaces for multiple devices).

1 Like
6

No, I often run multiple uibuilder instances on a single old Pi2 or Pi3 with lots of other things running. Performance will only start to suffer if you run too much on the Pi, run the Linux desktop on the Pi, have massive, complex flows (though some of mine are quite large) or try to send too much data too quickly.

Not, it will be fine as long as you aren't trying to update the interfaces on a millisecond basis. Typically I only update interfaces once a minute for home automation sensor outputs. You can do a lot more than that if you like but it rarely seems sensible in a home environment. Switches and similar controls happen ad-hoc of course without an issue.

One other thing to note. It is perfectly possible to build responsive interfaces that adapt nicely to different sized displays. The default libraries (VueJS and bootstrap-vue) that come with uibuilder make it pretty easy to build adaptive UI's so you might not actually need two different UI's.

Very, very unlikely you would need this complexity, especially with a 4GB Pi 4. You would have to be really loading up the Pi with tons of other services. Even my 512MB Pi2 runs some complex flows, Dashboard and several uibuilder instances along with MQTT, InfluxDB, Telegraf and Grafana. My 1GB Pi3 runs a similar stack and runs the Java-based Ubiquity Unifi Wi-Fi controller as well & that is a beast.

Yes, but the default libraries make this very simple. Very little, if any, additional code is required since the frameworks themselves are already responsive and adaptive and have sensible defaults.

That is true in that you need to deal with the incoming msg's in your front-end index.js file. The examples show how and the uibuilder library takes care of much of the complexity for you.

7

@TotallyInformation

Thank you again for a very helpful post.

I now understand what you mean by examples. I'll check the examples in the ui builder index.js file.

My first pi4 is arriving today so I'll soon find out how well it preforms... Can't wait!

1 Like
8

Hi Alex,

You can check the following flow:

[{"id":"8c300398.52e118","type":"ui_ui_control","z":"974b9800.8d90e","name":"","events":"connect","x":400,"y":140,"wires":[["ac6287de.071a08"]]},{"id":"fdf95903.209a7","type":"inject","z":"974b9800.8d90e","name":"Init UI","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"0.5","topic":"","payload":"","payloadType":"str","x":210,"y":140,"wires":[["8c300398.52e118"]]},{"id":"9eadabac.c50da8","type":"file","z":"974b9800.8d90e","name":"protocol website","filename":".node-red/dashboard-call.txt","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":1020,"y":240,"wires":[[]]},{"id":"22f3e873.ee4838","type":"function","z":"974b9800.8d90e","name":"protocol","func":"timenow = new Date().toLocaleString();\n\nmsg.payload = timenow+\": call from \"+msg.socketip+\" ID:\"+msg.socketid;\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":760,"y":240,"wires":[["9eadabac.c50da8"]]},{"id":"ac6287de.071a08","type":"switch","z":"974b9800.8d90e","name":"","property":"socketip","propertyType":"msg","rules":[{"t":"eq","v":"192.168.xx.yy","vt":"str"},{"t":"cont","v":"192.168.xx.","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":570,"y":140,"wires":[["469c463a.ed14c8"],["5ab185ed.4a744c"],["22f3e873.ee4838","a90f51ae.319bb8"]],"outputLabels":["","Intern","Extern"]},{"id":"f737c0cf.50762","type":"ui_ui_control","z":"974b9800.8d90e","name":"","events":"all","x":1040,"y":160,"wires":[[]]},{"id":"5ab185ed.4a744c","type":"change","z":"974b9800.8d90e","name":"internal","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"open\":[\"xxx_1\"],\"hide\":[\"xxx_2\",\"xxx_3\"],\"show\":[\"xxx_1\",\"xxx_2\",\"xxx_3\"]}}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":160,"wires":[["f737c0cf.50762"]]},{"id":"a90f51ae.319bb8","type":"change","z":"974b9800.8d90e","name":"external","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"open\":[\"xxx_1\"],\"show\":[\"xxx_2\"],\"hide\":[\"xxx_3\"]}}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":200,"wires":[["f737c0cf.50762"]]},{"id":"469c463a.ed14c8","type":"change","z":"974b9800.8d90e","name":"Tablet x","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"xxx_1\",\"xxx_2\"],\"hide\":[\"xxx_3\",\"xxx_4\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":120,"wires":[["f737c0cf.50762"]]}]

grafik
grafik1040Ă—176 17.3 KB

Change the IP addresses in the switch node and change the json code in the change nodes:

{"group":{"open":["xxx_1"],"show":["xxx_2"],"hide":["xxx_3"]}}

xxx is the name of the ui_group, the 1-4 are the names of the ui_tabs. Separate them with the underscore.

Now you can hide, show, open and/or collapse certain tabs matching the IP address of the PC, which connects to the dashboard via browser.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.