[concrete_head]

I did this for an entire cities water supply network. SCADA systems UIs are a decade or more behind the modern web, not to mention slow loading and expensive. I took a reticulation diagram and marked all the flow meters, pressure transducers, pumps, reservoir level sensors and even river flow meters just like you said using ids for each element. The data is essentially pulled from a sql query every minute and pushed out through json including any active alarms.

This lets as many users view it as necessary and loads instantly. Has pan and zoom so yiu can capture everything on a page. Fully customisable, used draw.io for the diagram. Professional automation guys jaws dropped when i told them it took a few days to build and didnt require some ridiculous software license

[andrewrn]

This vaguely reminds me of when I briefly worked at an oil company as a drafter. All their P&ID's are drawn in AutoCAD .dwg files, which isn't searchable at all or intelligible to the computer. AutoCAD sucks and has a stranglehold on these older "systems" drawings (as opposed to individual mechanical parts). Also, each company has its own different drawing spec and you need to have a lot of domain knowledge to understand a drawing. I had this grand idea that I didn't follow through with of JSON-defined "drawings" that could then be rendered to svg. Maybe a graph data structure would be better to represent the data. This would make them searchable, and LLM-ready so you could ask natural language questions of an entire refinery or pipeline or water treatment plant or chemical plant.

Not quite the same as its not real-time SCADA, but still interesting. It seems like there is big opportunity here for someone who can crack it.

[noman-land]

I love hearing stories like this. Hard not to love all the open web tech we can all use for free. Good reminder just how revolutionary it can be.

[phkahler]

How do you validate that each elements status is working? That there are no typos or copy/paste errors lurking in there? I guess you can inject test data after the sql query and verify the right elements change.

[concrete_head]

You can use the browser console to inject any value to any element to verify expected behaviour.

There are also patterns in the water network so issues reveal themselves pretty quick then easy to fix. E.g. pumps on=green, off=grey, fault=red. Easy to spot an element that is misconfigured especially when you look at it all day.

You can also hover over an element and it reveals its tagname in a tooltip which helps. And the script has an error log for things such as if there are any tagnames in the query it can't find a drawing element for or if it failed to set some value

[s1110]

I'd like to learn more about this system! Also, what's on the backend side? How do you collect data from the sensors? Check out my river meteo-station: https://imgur.com/a/agk-RRovIkg

[concrete_head]

Its a typical utilities SCADA system most cities operate.

Much like your setup their are sensors fitted to various infrastructure connected to PLC's connected to licensed uhf radio modems back to a base station (with a few hops through repeaters or microwave backhaul) into a PC running some kind of IO server which handles all the polling and collects the data into a database and SCADA software (Aveva).

Its a weird mashup of hardware and protocols (dnp3, modbus, serial) plus some data coming in through IoT devices over http and all sorts of bits.

All i built was a python script that runs the query (we are talking 200 bits of data) every minite and dumps it into a JSON file. Then there is a caddy server which serves the json, SVG (1.5mb uncompressed) and a vanilla html/javascript (300 ish lines of code, AI helped get started) page that displays it.

Its not open to public, nor is it a replacement for SCADA (SCADA has many many more objects plus the ability to control and send out alarms). There are many more people wanting 'view only' access than the city has pricey SCADA licenses for, so if fills this gap for free. Sorry i can't share more, i moved on from that job.