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
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.
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
That's cool! This resonates a lot with what I'm up to. I'm using SVGs as UI pieces and wiring them to composable logic blocks so to make things interactive without having to write code.
/!\ Self-promo
I'm working on Breadboard[0]. Here an interactive demo[1] – no signup required –.
[0] https://breadboards.io/
[1] https://app.breadboards.io/demo
The flicker is problematic from a UX standpoint, it makes it harder to notice any changes. I like the approach but think that you are better off using CSS and changing the class of the port in order to change its fill color, which would also allow you to animate the transition between state changes.
would animation libraries also work on SVG properties? Including colours.
You don’t even need a library, CSS has animation inbuilt.
Would be nice to have a demo on the page that lets you change the SVG interactively with radio buttons
Thanks for the suggestions I will modify the demo
One may attach JavaScript onClick action Listeners to any SVG named object (see attributes menu in inkscape.) For security reasons, this trick only works on live web server pages, and can't be run off the local file systems in most browsers.
While I would never allow uploading SVG formats to a public server... a vector format is great for line art style interface. =3
In interesting implementation of this is the Grafana Flow plugin: https://grafana.com/grafana/plugins/andrewbmchugh-flow-panel...
This lets you do pretty much the same thing in the post above, but have the colors tied to Grafana metrics. It's been great to make very intuitive dashboards, especially building dependency graphs and annotating them with live data.
> In interesting implementation of this is the Grafana Flow plugin: https://grafana.com/grafana/plugins/andrewbmchugh-flow-panel...
Woah, been using Grafana for a long time, always wished for something like that, wasn't aware of that plugin! Thanks a lot for sharing.
That 3rd example looks really useful for debugging purposes!
The real win here is ditching overengineered tools like Grafana for a use case-specific solution—though I wonder how they’ll handle more complex state logic (like nested device dependencies) as the dashboard scales.
oh this is amazing. I'm using https://boxy-svg.com/ for SVGs generated by Claude, and then edit and update it myself. SVG is very powerful.
This is quite genius. Instead of wasting time with responsive design, grid and flex layout complexities, this solutions gets the job done.
That’s how I would have approached it in Flash back in the days when 800x600 was all you had to worry about.
:-) i was expecting charts/tables etc. from dashboard but was pleasantly surprised to see the box. I recently created tool for creating dashboard and i never thought anyone would want dashboard like that :-) (my tool doesn't support this kind of dashboard either)
Create a Custom Interactive Infrastructure Dashboards using SVG