Tank
A liquid-level tank with a fill indicator — the level shown as the thing it is.
Reach for it when you need:
- Tank and silo levels on a process mimic
Component name: Tank · Category: Display
In the palette: Liquid level tank with fill indicator
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
level | number | 75 | — |
variant | enum | 2d | Flat 2D rounded-rect tank, a shaded 3D cylinder, or a 2D circle. Options: 2d · 3d · circle. |
borderRadius | number | 8 | Corner radius of the 2D tank body (2D variant only). |
min | number | 0 | — |
max | number | 100 | — |
unit | string | % | — |
fillColor | color | hsl(199 89% 48%) | — |
strokeColor | color | var(--widget-label) | — |
levelColor | color | var(--widget-value) | — |
levelSize | number | 18 | — |
decimals | number | 0 | Fraction digits shown. 1.0.4 |
enableScale | boolean | true | — |
scaleCount | number | 5 | Number of scale markings |
scaleColor | color | var(--widget-scale) | — |
label | string | Tank | — |
enableLabel | boolean | true | — |
labelColor | color | var(--widget-label) | — |
labelSize | number | 11 | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
On a P&ID mimic, pair it with vessel symbols and orthogonal pipe runs from the drawing tools.
By default a numeric readout shows whole numbers. decimals (0–6) is what gets the fraction back: a tag reading 23.998 displays as 24 until you ask for more, and Math.round is not a formatting choice — it is a loss of data with no way to recover it from the screen. Every numeric widget formats through the same helper, so two widgets bound to the same tag cannot disagree about how many digits it has.