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.
:-) 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)
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.
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
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.
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.
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 –.
11 comments
[ 4.1 ms ] story [ 36.8 ms ] threadThat’s how I would have approached it in Flash back in the days when 800x600 was all you had to worry about.
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
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.
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.
/!\ 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