Skip to content

IoT and energy

Readings from equipment in the physical world, often laid out the way the equipment itself is.

3 products 21 captures

Products 3

The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it.

Observability · Infrastructure and FinOps · IoT and energy

A card grid people genuinely rearrange, on a wall tablet, which is where resizable layouts either work or quietly stop describing the house.

IoT and energy

A public SCADA demo running live simulated plant data, with a runtime toggle between simple and photorealistic pump and pipe rendering—the ISA-101 argument as a setting.

IoT and energy

Patterns seen in this domain 48

Captures

Newest first within each product.

Grafana

Grafana — Grafana SLO / SLO Overview, loading — The same SLO Overview as the other Grafana capture, 1.2 seconds after navigation. This is the whole loading state: the nav rail, and the words "Loading …" centred in an otherwise empty canvas. No skeleton, no panel frames, nothing occupying the space the twenty-eight rows are about to take. I tried to catch an intermediate frame and there isn't one—at 3.5 seconds the page is complete. It goes from nothing to everything, so the layout arrives all at once and anything a viewer had started reading moves. The entry asks for three things here and this delivers one. It is distinguishable from broken and from empty, because a spinner clearly means working. It does not occupy the final space. And whether it fails into an error state rather than spinning forever is not something a screenshot can answer, which is its own small argument for showing the shape of what is coming.

Grafana — Examples / Alert List — Seven alerts, and the durations are the story. "Browser market share > 50%" has been firing for 17 days, 15 hours and 12 minutes. Two more have been firing for over three days. An alert that has been true for two and a half weeks is not telling anyone anything—it has become part of the background, and the list it sits in is now a list you scroll past. The other thing worth reading is the names. Six alerts, six conventions: a full sentence, a metric identifier in snake case, a camel-case service name, a two-word phrase, and two that just say "Dynamic". Somebody arriving at this list at three in the morning cannot tell from the names what is broken or how badly, which is work the naming could have done for free.

Grafana — Demo / Annotations — The header on this dashboard says annotations "appear as vertical lines and icons on all graph panels—events visible at a glance", and the panel directly beneath it is the counter-example. Roughly fifty red dashed lines across twenty-four hours, evenly spaced, and the request-rate series behind them is genuinely hard to follow: the fence is denser than the data. Every one of those lines is a real event correctly recorded, and the tag filter in the top left is switched on, so this is the filtered view. That is the whole problem with automatic annotations—they are complete and they never stop arriving, and completeness at this cadence is indistinguishable from noise. The list panel at the bottom is what makes them usable again: the same events, four of them, timestamped and tagged, in a form you can read.

Grafana — Where The Cool Dashboards Live / Chicago L Trains — A live departures board for one platform, built out of stat panels against the CTA Train Tracker API, and it is the clearest wallboard in the gallery: four rows, type large enough to read across a concourse, no chrome inside the board and nothing to hover. The next train gets three times the height of the three behind it, which is the layout saying "start here" without a word of copy. The interesting problem is the colour. Pink, Green and Orange are the CTA's own line colours, inherited from the world outside the screen and already known to every rider—which is the best possible reason to use a palette. But the status chip beside them is also green when a train is on time, so on the second row "Cottage Grove" is green because it is the Green Line and "On Time" is green because it is on time, side by side, meaning two unrelated things.

Grafana — Examples / Dashboard Variables — Six selectors across the top and the page is unusually honest about what they cost. The middle panel says there is a hidden variable called bestfood, currently set to pizza, which has no control anywhere on screen—state affecting the page that a viewer cannot see or change. The overview panel says that setting Instance and then changing the Prometheus source will clear your selection, because the two variables are chained and the second one invalidates the first. Both of those are correct behaviour and both are the reason parameterised pages get distrusted. What the top row gets right is the display: Instance and CPU Usage Type show their selected values as chips with an × rather than as a count, so what is filtering the page is legible without opening anything.

Grafana — Examples / Gauge — Nine gauges, and the page makes Few's argument against them without meaning to. The panel at bottom left holds seven arcs reading 30.6, 30.8, 30.8, 30.9, 30.9, 31.0 and 31.3 GB. Seven squares, seven needles, to say that seven disks are all about the same. The same seven values as a bullet graph would be seven short bars in a fraction of the height, and the one that was different would be obvious rather than requiring you to read each label. What the gauges do carry is a bounded range where the endpoints mean something, which is the case the pattern survives: these are percentages and capacities, not rates. The panel beside them is where it stops working—three circular gauges at 40.8, 20 and 48.6 GB, all with a red arc, so a value and another value two and a half times larger get the same verdict.

Grafana — Examples / Geomap — Four maps of the same flight data, and the base map does more damage than any of the data settings. On the three dark panels the markers are small green dots on dark grey, which at this size is close to the contrast floor; on the satellite panel they are small green dots on terrain that is already green, brown and blue, and they effectively disappear. The base layer is supposed to be context and recede, and imagery is the loudest option available. The density layer along the bottom is the honest one: it stops pretending individual points resolve, and the clusters on both coasts read immediately. Its radius is doing a great deal of unlabelled work, though, and the blobs merge into clouds at a setting nobody can see. Three of the four panels also carry a legend that says "Layer 1", which is a legend occupying a corner and naming nothing.

Grafana — Examples / Histogram — This page accidentally contains the cleanest demonstration of the bucket problem I have found in a shipped product. The panel top right is the source series, a line oscillating between 24 and 32. Directly under it, the same series on automatic buckets: roughly twenty-four bars, and it is plainly bimodal, with one hump around 27 and a taller one at 30.4. To the left of that, labelled "Force timeseries into bucket size=3", is the identical data at a bucket width of three. Four bars. One hump. The second mode has not been smoothed or de-emphasised, it is simply gone, and nothing about the chart indicates that a decision was made. Neither panel is wrong. One of them answers "is this one population or two" and the other cannot, and the only difference between them is a number in a field.

Grafana — Examples / Logs Panel — The arrangement is the standard one and it is right: a stacked volume chart by log level across the top, then the raw stream underneath, so the shape of the traffic and the individual lines share one page. Two details are worth stopping on. Every line carries two timestamps in two timezones—the gutter reads 2026-09-10 18:36:58.435 in the browser's local time, and the JSON three characters later reads 2026-09-11T01:36:58.434956621Z in UTC. Same instant, seven hours apart, on the same row, and nothing labels either one. The second is the trace ID in the expanded panel at the bottom, which is the thing that makes a log line usable: it is the route from a line of text to the request it came from. Two of the three entries shown carry the identical trace ID, which is also the case deduplication exists for.

Grafana — Examples / Node graph panel — Seven services, and the panel is already too small to hold them. Three nodes are cut in half by the right edge and at least one more is somewhere past it, which is the force layout doing what force layouts do to a graph with more nodes than room. That is the hard part of this pattern and it is visible here at a scale of seven. Each node also carries four things at once: a number, a second number, and a ring split between a green arc and a red one. The legend names all four. A topology view where every node reports four measures is a view you read node by node, which is the opposite of what a map is for —one derived state per node is scannable in a second and drills into the rest. Here almost every ring is mostly red, so the channel that could have carried that state is saturated and distinguishes nothing.

Grafana — Examples / Polystat Visualization Showcase — The plugin's own description is the host map pattern stated plainly —"visualise hundreds of metric series as a grid of coloured polygons" and "spot anomalies across your entire fleet at a glance"—and the shapes gallery halfway down says all six shapes "apply the same threshold colouring; choose the one that fits your layout." The page then disproves its own claim. The hexagon panels tile with every neighbour sharing an edge, so three cells read as one block. The circle panels leave a gap between every pair, so three cells read as three things you have to compare one at a time. At six cells that difference is a preference. At three hundred it is the difference between a cluster you see and a cluster you assemble, which is why the shape is a structural choice rather than a styling one.

Grafana — Grafana SLO / SLO Overview — Twenty-eight objectives, each a row carrying a 28-day indicator, the budget remaining, and a sparkline. The budget column is where it comes apart. Four rows read −1900%, −1815%, −1093% and −463%. A budget is the amount of failure an objective permits, so it bottoms out at −100% and everything past that is the display reporting how wrong the target was rather than how broken the service is. Those four sit in the same column, in the same type, as a row reading 99.8%. Two rows above them an objective reports "No data" in the same red, which is a third thing again and looks like the second. Meanwhile eleven rows sit at exactly 100.0% with a full budget—objectives that cannot fire. The sparkline column is scaled per row, so one row's axis runs 0 to 200% and its neighbour's runs 96 to 100, and the shapes are not comparable down the page even though the layout invites exactly that.

Grafana — Examples / Stats, light theme — The same dashboard as the dark Stats capture, same data, same palette, one URL parameter apart. Put them side by side and the palette turns out to have been designed on charcoal. On the dark version the value colours carry because they are brighter than the ground—reds, oranges and greens against near-black. Here they have to carry by being darker than the ground instead, and the same hues arrive as pale pink and pale salmon. Look at the Color value panel: six numbers at 30-odd pixels, and 93.5, 88.7, 93.4, 81.6, 77.6 and 87.9 are all light pink on white. The column on the right is worse, because 63.8 GB lands on pale orange. Nothing about the theme switch is broken, and nothing was chosen for this ground. That's the whole argument for designing the dark case first and deriving the other one: the constrained case should set the lightness range, and here the unconstrained one did.

Grafana — Examples / Stats — A showcase rather than a working dashboard, which is what makes it useful: it is Grafana demonstrating every visual option the stat panel has, in one place, with nothing else competing. Two things are worth reading it for. The first is that across roughly sixty tiles here, not one carries a comparison. Every option on display is about how the number looks—background colour, value colour, orientation, text mode, grid packing—and none is about what the number should be measured against. The panel type that most needs a delta and a base is being shown off without either. The second is the colour. Every single tile on this page is coloured, and the "No text" panel is ninety-odd green rectangles carrying no label and no value at all, which is colour as the sole carrier of meaning at its purest. Both of those are reasonable for a catalogue of options and neither survives being copied onto a real page.

Grafana — Examples / State timeline and Status history — The most useful thing on this page is an accident of layout: the third panel down the left column draws three series as state bands, and the panel directly underneath draws the identical query as an ordinary time series. Same data, stacked one above the other. The line chart is three tangled traces oscillating between 57 and 64, and reading it means picking a series, tracing it, and thresholding it in your head. The state timeline above has already done that and shows the conclusion, and the blue stretches—below fifty—are findable without being looked for. That is the whole argument for the encoding, and Grafana has put the before and after in adjacent panels. Worth noticing too that every coloured region here carries its word inside it. LOW, HIGH, NORMAL, CRITICAL, True, False. Colour is never the only carrier on this page.

Grafana — Examples / Table — Seven tables demonstrating what a cell can hold, and the range is the point: a threshold colour on the whole cell, a continuous gradient down a column, an image, a bar rendered inside the cell, a pill, and a markdown block carrying three metrics at once. Two of them stop working at this size. The bar gauge column on the right is squeezed to a sliver about six pixels wide, so the encoding that was supposed to make magnitude visible carries nothing, and the catch-phrase column beside it truncates mid-word with no way to see the rest. The bottom-left table is the one to look at hardest. It is sorted, it has column headers you can click, and the pager under it reads page 1 of 72. Any sort applied there is a sort of the page unless the query re-runs, and nothing on screen tells you which of those is happening.

Grafana — Grafana Heatmaps — Grafana's own teaching dashboard for the heatmap panel, and it teaches well because it holds the data constant and varies exactly one thing. The top-left panel is the source series. The eight heatmaps are all those same numbers under different y-bucket scales: linear, log2, log10, each with and without a split, two of them clamped to a 700-15k range. Read across the grid and the argument makes itself. The linear version crushes almost everything into a band near the bottom of the axis; the log versions spread the same distribution across the full height and the dense region moves. Same data, different readings, and nothing on any single panel tells you which bucketing you're looking at except the title someone remembered to write.

Grafana — Linux node / fleet overview — Captured while Play's demo data source was returning nothing, which makes this a better example of empty and error states than of the fleet overview it is meant to be. Three things are worth noticing. The top-left tile is red and reads "No metrics received - Check configuration", which is an actual diagnosis and the best thing on the page. The tile beside it exists to report when data last arrived, and it says "No data", so the freshness indicator has no freshness to report and doesn't say why. And every chart below says "No data" while the network panel says "No errors". A viewer scanning this page cannot tell from the words alone whether the network is clean or whether it is as unknown as everything else, which is the exact confusion the empty-state pattern exists to prevent.

Home Assistant

Home Assistant — Demo dashboard at phone width — The same dashboard as the desktop capture at 390 pixels. It is a reflow rather than a designed phone page, and for this content that is defensible—a list of things with states doesn't need width the way a chart does, sections stay intact, nothing is dropped, and the slider becomes a much better touch target than it was with a mouse. What doesn't survive is the order. On desktop the sections sit in three columns and each column reads down: Welcome, Energy, Outdoor on the left. On the phone they come out row by row instead, so Energy falls from second in its column to fourth on the page and Kitchen climbs from the far right to third. Nothing about the desktop layout expressed which of those mattered more, so the reflow had nothing to preserve and picked an order from the source. The rail is the other casualty and goes exactly where these always go, into a hamburger.

Home Assistant — Demo dashboard — The grouping axis here is physical space—Living room, Kitchen, Study, Outdoor—which nothing else in this gallery uses, and it works for the same reason process mimics work: the viewer already holds the model. The thing worth stealing is the state labelling. Every entity says its state in words: Open · 100%, Off, Closed, Playing, Up-to-date, Unplugged. The amber tint on an icon repeats what the word already said rather than replacing it, so the page is readable with no colour at all. That isn't accessibility diligence so much as an audience constraint—you cannot train a household on a colour key the way you can train an on-call rota, so the words have to carry. Each section header also doubles as a summary: Living room reports 22.8°C and 57% humidity beside its own name, and Study reports "In a meeting". And this is a control surface as much as a display—the Spotlights card is a slider you drag, the thermostats have plus and minus.

Ignition

Ignition — Water Treatment / Overview — A real process mimic with live simulated plant data, and it settles two arguments from the entry. The first: the layout is topologically faithful and geometrically loose. Raw water pumps at the left, flash mixers, seven basins, nine filters, tanks, high service pumps, clearwell—the flow reads left to right because that is the process order, not because that is where the equipment stands. The second is where it departs from ISA-101, and the departure is deliberate. Green here means running. Every basin, every flocculator, every filter that is working is green, so most of the screen is coloured and the two stopped filters are the grey ones. That inverts the high-performance HMI rule—colour reserved for abnormal—and spends the budget on the ninety percent case. It is still readable, because the abnormal state is the absence of a colour everything else has, but it only works while "stopped" is rare. The pipe colours are a third channel again, encoding which fluid is in them rather than any state at all.