Horizontal oval tank
Widget indicates the level of liquid in Horizontal oval tank.
Who it’s for
Anyone watching a lying tank with an oval cross-section — a truck-mounted fuel tank, a compact bulk vessel where a round tank would sit too high. The reader wants the contents against capacity in the shape the vehicle or skid actually carries.
What it does
The Horizontal oval tank widget draws a lying tank with an oval cross-section and fills it to the reported level, coloring both the vessel and the liquid by how full it is. A tank reporting 18 fills to just under a fifth of its height and turns red, because the reading is taken as a percentage by default and both colors are banded to change below 20%; above that threshold the vessel is dark blue and the liquid a lighter blue.
- The shape is the tank — the reading sits in the vessel’s own profile rather than in a generic bar, so a dashboard resembles the plant it describes.
- Volume readings are converted for you — the widget divides the reported quantity by the configured total volume, handling the unit conversion between litres, cubic metres, gallons, barrels and the rest.
- Low level is visible before it is read: the tank body and the liquid each carry their own color ranges, and both ship banded to turn red below 20%.
- Three layouts — a bare vessel, a percentage, or the absolute quantity — so the same widget serves a mimic diagram and a stock-level readout.
- The tank shape can come from an attribute rather than the settings, which lets one widget serve a fleet of differently shaped vessels from one configuration.
- A tooltip carries the level and the timestamp, so a stale reading is distinguishable from a stable one.
- An oval lying tank is widest across its middle, so the surface height and the volume behind it are related non-linearly — the drawing places the surface, and the reported number states the contents.
How to set up
Data keys
The Horizontal oval tank widget takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
| Any level key | The reported level the tank fills to | Timeseries | Numeric only. An attribute works equally well. Report either a percentage or an absolute quantity, and set Source units to match — the two are handled differently. |
Capacity and units
| Setting | Default | Effect |
|---|---|---|
| Shape | Horizontal Oval | The vessel drawn; can instead be read from an attribute |
| Layout | Percentage | Simple draws the vessel alone, Percentage prints a percentage, Absolute prints the quantity |
| Source units | % | What the device reports; anything other than a percentage is divided by the total volume |
| Widget units | % | What is printed on the card, from a constant or an attribute |
| Total volume | 500 | The capacity the reported quantity is measured against, from a constant or an attribute |
| Total volume units | L | The unit that capacity is expressed in |
Set Source units before anything else. Left at a percentage, the reported number is drawn as-is; set to a volume unit, it is converted against Total volume, so a capacity that is wrong or left at the default 500 produces a tank that fills convincingly to the wrong level.
How to customize
- To show the quantity rather than the percentage — set Layout to Absolute, or to Simple for a bare vessel on a mimic diagram.
- To drive the shape from the device — set the shape source to an attribute and name it, so one widget serves vessels of different geometry.
- To take capacity from the device — set Total volume to come from an attribute rather than a constant, which is what lets one widget cover a fleet of different sizes.
- To move the low-level threshold — edit the ranges on Liquid color and Tank color; both ship banded at 20% and both need changing for the warning to stay consistent.
- To print in a different unit from the one reported — set Widget units, which converts rather than relabels.
- To keep the value legible against the liquid — leave Value background overlay on and set its color, or turn it off where the contrast is already good.
- To change what the tooltip reports — turn Level or Date off, set the tooltip’s own units and decimals, and adjust its background color and blur.
- To match the dashboard’s palette — set the Value and Total volume fonts and colors, and the card background.
Tips
- Feed this shape a volume reading rather than a depth one. Oval tanks are chosen precisely because they are wider than they are tall, which makes the gap between depth and contents larger than it would be on a round tank of the same capacity.
- Change the tank color and the liquid color together whenever you move the warning threshold. They are configured separately and ship with matching 20% bands, so editing one leaves a tank whose body says one thing and whose contents say another.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.