Create a Custom Interactive dashboard using SVG | Hacker News Reader

Create a Custom Interactive dashboard using SVG

0xmm.in

86 pointspkt0x5323 comments

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.

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.

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

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

Thanks! I'm not a web dev, so I'm not familiar with what that console can do or how easy that is. Sounds like fun.

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

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.

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.

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.

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

here's a quick demo video showing this in action: https://www.youtube.com/watch?v=tg_W86tk_EM

Would be nice to have a demo on the page that lets you change the SVG interactively with radio buttons

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

Thanks for the suggestions I will modify the demo

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!

:-) 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)

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.

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.

Create a Custom Interactive Infrastructure Dashboards using SVG

Reply on news.ycombinator.com