Widget Guide

A complete reference for every dashboard widget in Virtuino Cloud — what each widget does, every style and layout it offers, and a full explanation of every configuration option. Use this guide to design clear, professional dashboards. To add a widget, unlock the dashboard, open the widget picker and choose one; to edit it later, unlock the dashboard and click its pencil.

Introduction & Common Concepts

Widgets are the building blocks of your dashboard. Each one either displays a field's value, controls a device by sending a value, or visualises / organises information. The options below appear across many widgets and are documented once here.

Using Icons

Many widgets have an Icon setting (Value Display, LED, Label, Switch, Push Button, Rotation, Rule, Scheduler, Chart Popup…). Virtuino Cloud uses the Font Awesome 6 free icon library. You enter an icon by its CSS class, which has two parts: a style prefix and the icon name.

// Format:  {style-prefix}  fa-{icon-name}
fas fa-bolt          // solid  bolt
far fa-bell          // regular (outline) bell
fab fa-bluetooth     // brand  bluetooth

Common icon examples

Below are ready-to-use classes grouped by typical use. Copy the text under each icon straight into the widget's Icon field.

Device & Field Binding

Every data-driven widget needs a Device and a Field. The widget shows the latest value stored for that field and updates live as new data arrives over HTTP or MQTT. Control widgets do the reverse — they publish the configured value to the field. Charts and the History Monitor read the field's historical records.

Value Display (Inline)

A compact one-row value display ideal for slim, full-width rows. Shows a title, the value with unit, and an optional separator icon. Three layouts arrange the title and value differently.

Value Display (Progress Bar)

Shows a value together with a horizontal progress bar that fills proportionally between min and max. The bar can be solid or segmented, with high/low alert colours for both value and bar.

Value Display (Box)

A centred card showing a large value with an optional icon, unit and timestamp. Title sits at the top, icon+value fill the middle (scaling with the widget height), and the time sits at the bottom.

LED (Box)

A realistic round indicator lamp that glows in the ON colour when the field equals an "on" value (1, on, true) and is dark otherwise. Title above, optional time below, lamp scales to fill the middle.

LED (Inline)

A horizontal LED: the lamp on the left, title and optional time stacked on the right. The lamp scales with the widget height. Same on/off logic as the LED (Box).

Time & Date Processor

Displays a clock or converts an incoming numeric timestamp into a formatted date/time. Useful for "last seen" clocks or converting device epoch values into a readable date.

Label

A flexible text label for headings, captions and section titles. It does not require a field, but if bound it can change colour when the field sends a hex value. Five visual styles, with control over icon, alignment, weight and dividers.

Frame

A decorative border used to visually group other widgets. It always sits behind the other widgets, so you can place value/control widgets inside it. Supports an optional title that breaks through the top border, an optional fill, and live colour via a hex value.

Radial Gauge

A circular arc gauge that fills proportionally between min and max, with the value in the centre. Three shapes and threshold colours for low/high ranges. The arc scales with the widget's height.

Pro Gauge (Needle)

A classic instrument-style gauge with a moving needle, tick marks, numeric scale and up to three coloured safety zones. Ideal for speed, pressure or temperature dials.

Vertical Gauge

A vertical bar/level gauge with a numeric scale, optional marker and either a continuous fill or discrete segments. Two layouts: Box (value beside the bar, centred) and Slim (value below). Colour can follow a gradient or three zones.

All settings below are shared with the Horizontal Gauge.

Horizontal Gauge

The horizontal counterpart of the Vertical Gauge — a left-to-right level bar with scale, marker, segments or gradient. It shares the exact same settings as the Vertical Gauge (above); only the orientation differs. Bar Height (px) here controls the bar's vertical thickness.

Rotation

An animated spinning icon whose rotation speed reflects the value (e.g. a fan's RPM). The icon and value change colour on low/high alerts. Two layouts: vertical (icon above value) or horizontal (icon beside value).

Segment Indicator

A row of bars (like a signal-strength meter) that fill based on the value. The bar colour changes through three quality bands (Normal / Fair / Poor) — ideal for signal, battery or quality indicators.

Tank

An industrial liquid-level tank with a scale, configurable shape, and low/high alert thresholds that recolour the liquid. Excellent for volume, level or fill indicators.

Live Location Map

Plots a live GPS position on an interactive map. The bound field should send a JSON object with latitude and longitude; the marker moves as new coordinates arrive.

{"lat": 37.98, "lng": 23.72}

Switch

A two-state toggle that sends an ON value or an OFF value. Four visual styles and two layouts; reflects the field's current state.

Secure Switch

Identical to the Switch but with safety options: it can require a confirmation dialog and/or the dashboard PIN before toggling. Use for critical relays (heaters, pumps, gates). It also supports Automation Actions fired on toggle.

Push Button

A momentary button: sends a "press" value while held/clicked and a "release" value afterwards. Ideal for door openers, horns, or momentary triggers. Four styles, two layouts.

Secure Push Button

A momentary button with PIN protection and Automation Actions. Same styling as the Push Button, plus a security gate before it fires.

Rotary Selector

A multi-position selector for discrete options (e.g. OFF / LOW / MED / HIGH). Each position has a label and a value sent when selected. Six visual styles cover dials, arcs, knobs and lists.

OFF:0, SPEED 1:1, SPEED 2:2, SPEED 3:3

Potentiometer

A rotary knob for continuous values within a range. Drag around the dial to set the value; it is sent on release. Three styles and an optional numeric scale.

Circular Slider

A circular knob/slider similar to the Potentiometer, with an adjustable instrument scale factor and security options. Drag the knob around the dial to set a value.

Horizontal Slider

A left-to-right slider for continuous values. Drag the handle to set a value; it is sent on release. Four styles including a segmented variant.

Vertical Slider

The vertical version of the Horizontal Slider — a bottom-to-top fader. It shares the exact same settings as the Horizontal Slider (above); only the orientation differs.

Advanced Chart

A full time-series chart drawn directly on the dashboard. Plots up to three series over a selectable time range, with aggregation, line/area styling and a configurable Y-axis. Series 1 uses the widget's main Device/Field; Series 2 and 3 are bound separately.

Chart Popup

A compact icon tile that opens the full chart in a modal window when tapped. It keeps the dashboard clean while still giving access to a detailed graph. It exposes the same chart settings as the Advanced Chart, plus an icon and icon colour for the tile.

Rule

A logic block that watches the bound field and, when a condition is met, writes a value to a target field (and optionally publishes via MQTT and shows an alert). The tile turns red with a bell badge when triggered. Tap it (locked dashboard) to view its log.

Scheduler

A time-based automation tile. Tap it (locked dashboard) to open the schedule editor, where you create events that send an ON or OFF value to the bound field at specific times/days. The tile shows how many events are active.

History Monitor

A launcher tile that opens a modal table of the field's recorded values over a chosen time range. From the table you can search, and edit or delete individual records — useful for cleaning up bad readings.

Stats Table

A compact multi-row table that shows several fields at once, each on its own line with a label, live value and (optionally) the last-update time. Each row is sized to one grid unit. Build the rows from the "Data Rows" manager in settings.

Need more help? See the HTTP API, MQTT setup or the Data Flow Guide — or contact support@virtuino.com.
Virtuino Cloud Platform — Widget Guide