How to display interactive floorplans in dashboard 2?

Hi all,
trying to migrate to dashboard 2. Unfortunately, my current dashboard heavily relies on node-red-contrib-ui-svg. Based on bart butenaers statements, I am afraid there will be no reliable node-red-dashboard-2-ui-svg anytime soon.

uibuilder? While I am comfortable with creating AutoCAD floorplans and using svg files, I always get lost when trying to use HTML and CSS for anything beyond the most basic tasks.

I want to display a few floorplans and garden drawings within dashboard 2. Within these plans, I regularly update sensor data, illumination and irrigation status. Controlling some actors via the svg is also required.

HTML, CSS, and JS capabilities are limited. Can somebody please point me in the right direction?
Andreas

You've seen my example flow? It only shows turning on/off lamp icons but adapting to show other data shouldn't be too hard.

Hi @anka001,
To give you some indications...

After a series of pull requests to add basic features to the dashboard, my node-red-dashboard-2-ui-video node beta version is nearly ready (as D2 successor for the ui-mp4frag node so I can view live streams of my ip cams). Hope to announce it next week. Then I can finally migrate my own dashboard, and write a tutorial about securing Node-RED via Tailscale. And meanwhile I will slowly start again on the svg node. So I won't have full focus on it yet, but I will add new features and design changes in small releases.

3 Likes

Don't forget openHASP integration on your LCD screens :rofl: :rofl: :rofl:

1 Like

Hi,
I have seen your example when I was looking for a solution within dashboard (1). After some attempts I decided to go for node-red-contrib-ui-svg. I will give uibuilder a second try.

I am a little surprised to get only few answers. Are floorplans only rarely used within node-red-dashboard? Are node-red-contrib-ui-svg and uibuilder my only options?

I suspect that a lot of Node-RED users can't quite bring themselves to deal with the potential complexity of creating a suitable SVG, positioning overlay icons, etc. Frankly, I've not bothered either since in my actual abode, there aren't enough devices, rooms or users to make the effort worth-while. I further suspect that the people for whom this would be worth it may not share the results in the forum as they may be working in commercial environments. But those are just guesses.

I did the uibuilder example to help illustrate that doing this with uibuilder really isn't any harder than with Dashboard. :slight_smile: And it was a fun excercise. :nerd_face:

No, but they are the most mature and approachable. You could always build your own thing using http-in/http-response nodes. I can't say I'd recommend it though unless you are a masochist. :rofl:

D1 to D2 is a really big jump for node devs as it is a completely different underlying framework. However, the D2 devs have been doing a lot of hard work to make things usable and things are progressing quite quickly.

Indeed, this is one of the design criteria for UIBUILDER - namely that you don't need any frameworks and plain-old HTML/CSS is rapidly catching up with things that you HAD to use frameworks for a few years ago. So it is hopefully less likely that devs would need to re-engineer their contributions. They could simply write a Web Component if a widget is needed and that could be used in conjunction with UIBUILDER.

But, of course, you do get less hand-holding with UIBUILDER which can impact the speed to get started until you've done an example or two. The layout example I shared recently was built in an hour or 2 - mostly me asking ChatGPT how to use CSS Grid layouts better - the actual code is minimal.

No you can also create an interactive floorplan yourself via the dashboard's ui-template node. That node allows you to send output messages, and process input messages. Stuff that the ui-svg node all does behind the screens.

1 Like

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