New SCADA ui nodes

[smithtek]

Hi all,

We’ve finally got there.

Over the last while we’ve been building our new cloud platform, 3DM.space, and one of the parts we’ve spent a ridiculous amount of time on is the SCADA/UI side of things.

Getting data into Node-RED is usually the easy bit these days. Making the finished SCADA screen actually look good, however, can still take hours or days — and sometimes you finish it, stand back and think... meh.

That frustration is what led us to build 3DM SCADA Canvas.

The idea is simple:

• Add a background image
• Drag and position your widgets onto the canvas
• Select the data type
• Configure how you want it to look
• Repeat

It gives you a much more visual way of building a SCADA interface compared with the traditional dashboard-style layout.

We originally built the Canvas widget for 3DM.space, but Node-RED has played such a big part in what we do at Smithtek that we wanted to make an offline version available to the wider community as well.

smithtek-3dm-scada-canvas

smithtek-3dm-scada-canvas (node) - Node-RED)

You can install it on your own Node-RED server and run the SCADA locally.

There’s still plenty we want to add, so feedback, ideas and the inevitable bug reports are very welcome.

Hopefully some of you find it useful.

[dynamicdave]

Looks very interesting and useful.
Note: The View/Install link doesn't work.

[smithtek]

Cheers Dave.
Link is fixed

[TotallyInformation]

Looks impressive, many thanks for sharing with the community. It is great to see companies who've benefitted from Node-RED giving back to the the community.

[smithtek]

Hey Julian.

Well, in fact, many thanks to you also!, over the last 10 years you have helped more than one can count.

We stand on the shoulder of giants..............

[dynamicdave]

Just had an opportunity to try out 3DM canvas. Seems very intuitive and easy to use. I haven't got any SCADA devices/inputs so will feed some of my MQTT readings in to the canvas.

Bart produced a similar canvas creation package 3+ years ago based on SVG.

node-red-contrib-ui-svg

I used it to create a CPU monitoring dashboard. When I have time I'll rework the flow to use 3DM.

Thanks for sharing with the community.

[smithtek]

Hey Dave.
Super simple to use mate, Json in, the editor will pick up keys automatically.
Equally control buttons & widgets will output a key/value to use elsewhere.

Enjoy

[dynamicdave]

Well that was easy - thanks for the heads-up on using JSON in the keys.

I have four sensors around the house/loft/garage/greenhouse that report T/H/P each with a unique nodeID. So all I had to do was rearrange the msg.payload so it was prepended with nodeID then feed it into your 3DM widget and select the corresponding keys. Really easy.

Here are some screenshots of my first attempt at a simple dashboard <15 minutes of effort.

If anyone is interested, here's the JS in the function node.

const p = msg.payload;

if (
    typeof p.temperature !== "number" ||
    typeof p.humidity !== "number" ||
    typeof p.pressure !== "number"
) {
    return null;
}

const nodeID = p.nodeID || "node99";

const now = new Date();
const timestamp =
    String(now.getHours()).padStart(2, "0") + ":" +
    String(now.getMinutes()).padStart(2, "0");

msg.payload = {
    [nodeID]: {
        timestamp: timestamp,
        location: p.location || "",
        temperature: p.temperature,
        humidity: p.humidity,
        pressure: p.pressure
    }
};

return msg;

One comment - would be nice if size (width, height) of say a Table could be set in the right-hand menu rather than dragging the corners of the box around manually so they "look" the same size.

Note: I left the lights on in my house so I could take a good background photo (ha, ha - I wish)

Note: I couldn't get any of the examples to Import into my version of Node-RED (v3.1.0)

msg : string[201]
"Error loading library entry 'smithtek-3dm-scada-canvas/home-energy': Error: ENOENT: no such file or directory, open '/home/pi/.node-red/node_modules/smithtek-3dm-scada-canvas/examples/home-energy.json'"

I'll try creating the folder manually later (when I have some free-time) and also try installing a fresh version of 3DM on one of my RPi(es) running Node-RED v5.

Note: Just found the "page" feature - really nice - as creating multiple pages is a breeze.

[krambriw]

Wow, did the 3DM package also upgrade your house & garden

[TotallyInformation]

@dynamicdave

Bart produced a similar canvas creation package 3+ years ago based on SVG.

Not to de-rail this thread but just a reminder that I reproduced Bart's great work but using UIBUILDER as well. Examples are in the forum, the flows site and in Node-RED itself.

Obviously though, this is far more polished and complete.

[mudwalker]

@dynamicdave Where did you get that house from? Can't seem to find it in the node.

[dynamicdave]

Did a Google search for 'home automation' images, found a suitable photo, adjusted the brightness and contrast then used it for the background. Here it is if you want to make use of it..

[mudwalker]

Thanks Dave, looks like a variation of their image so 'ass'ummed' it was somewhere in the Node. (The inverted commas are for me!!)

[dynamicdave]

I couldn't get the supplied 'Examples' to load, so had to find my own background image.

PS: You're right 'mine' and 'their' images do look very similar. Pure coincidence.

PPS: I can see a lot of uses for 3DM in my various flows - just need the time to implement them.

[mudwalker]

Yes, style and everything is similar, I wonder if AI is involved!! Just had a quick charwith ChatGPT and it seems eager to assist!!

Had trouble trying to load the images, but the file extension seemed to change from .layout to .json (NR 5.0.7, but about to upgrade, nodejs24 on Ubuntu 24.04)

[jbudd]

@dynamicdave

Did a Google search for 'home automation' images, found a suitable photo

I thought it might be Frank Lloyd Wright but his work is much softer and more organic (!)

It's widely abused on the Web, but it might be [Home in Merrick Way - RealHomes Modern) Edit - No it isn't!

Wherever, I think it illustrates the folly of rgb lights

[gerry]

@dynamicdave, you said you couldn't get examples to load, I don't even see any examples to load in my import thingie

[dynamicdave]

Go to the menu drop-down (three horizontal bars) - top-right of window and follow these steps...

At the moment none of the examples will load in my setup.

[gerry]

I got the steps, there's nothing in there labeled smithtek or whatever

[dynamicdave]

Did you stop and then restart Node-RED (after installing the node using Manage Palette) ?
This is what the bottom part of my palette manager looks like...