Widget Guide

Every widget you can place on a Virtuino Cloud dashboard — what it does, the settings they all share, and the few options of each one that are worth knowing. 58 widgets in five groups.

No widget matches — try another word.

Unlock

Open the dashboard and unlock it with the button.

Add

Open the widget list, pick a group, and place the widget on the grid. Drag to move, drag a corner to resize.

Bind

Click the pencil, choose the field by its full name — e.g. kitchen/temperature — and set the options.

Lock

Lock the dashboard. Now the widgets work: displays update live, controls send values.

Settings every widget shares

Explained once here, and left out of the widget cards below.

Basics

Widget title
The name on the widget. Leave it empty and most widgets give the space to their content.
Field
The data the widget shows or writes, picked by its full name — the same name your board uses as its MQTT topic or HTTP field. A few widgets need none (Label, Frame, a clock, launchers).
Font Size (%)
Scales text and icons: 100 is normal, from 20 to 300. Instruments such as arcs and bars follow the widget size instead.
Hide Frame
Removes background, border and shadow so the widget blends into the dashboard.

Look

Icon
A Font Awesome class, e.g. fas fa-bolt or fas fa-temperature-half.
Image
Your own picture instead of the icon, from your image library. Status colors then show as a ring around it.
Layout / Style
Alternative designs of the same widget — try them, the preview updates as you choose.
Show Time / Time Ago / Last Update
Adds when the last value arrived, as a time or as "2 min ago".

Numbers & limits

Min / Max
The range that fills a bar, moves a needle or lights segments. Values outside it stop at the ends.
Decimals / Unit
How many decimals to show, and the text after the value (°C, %, bar…).
High / Low limit
Past a limit the value, bar or icon switches to that limit's color — an alarm you can see from across the room.
Zones 1–3
On gauges: up to three colored ranges along the scale, each up to its limit (e.g. green, amber, red). Fixed Color or Disable zones uses one color instead.

Sending values

ON / OFF · Press / Release
Exactly what a control writes to its field — any text: 1/0, ON/OFF, open/close. Your board must expect the same text.
Label:Value lists
Selectors take pairs such as Off:0,Low:1,High:2 — the label is shown, the value is sent.
Publish via MQTT
On: the value also reaches every board listening to the field. Off: it is only stored — useful as a dashboard setting that no board needs.
Require Confirmation
Asks "are you sure?" before sending.
Require Dashboard PIN
Asks for the PIN set in the dashboard settings — for shared screens and critical switches.

Tap actions & editable displays

Add a button to edit the value
On value displays: a small button lets the user type a new value for the field.
Automation actions
Value Display (Inline and Progress bar), Rotation, Secure Switch and Secure Push Button can run actions when tapped:
  • Send Value — write a fixed value
  • Increase / Decrease — step the value up or down
  • Select Page — jump to another dashboard page
  • Value Editor — a popup to type a value
  • Linear Slider — a popup slider
  • List Selector — a popup list of choices

Live color

Label and Frame
Bind them to a field and send a color such as #FF4500: the widget recolors at once. A board can paint a zone red on an alarm without any other widget.

Inputs / Displays 16

Show a field's latest value — numbers, lamps, gauges, text and pictures. They update live as data arrives.

Value Display (Inline)

simple_display

A one-row readout — title, value, unit and an icon — for slim rows and lists.

Layout
How title and value share the row: divider, icon-left, value-hero (big value) or icon-scale.
High / Low Limit
Above the high or below the low limit, the value switches to that limit's color.
Add a button to edit the value
Turns the display into an input: the user taps the button and types a new value.

Also supports tap actions.

Value Display (Progress bar)

progress_bar_display

The value with a horizontal bar that fills between a minimum and a maximum.

Limit Down / Limit Up
The empty and the full position of the bar.
Segmented Bar / Segments
Draws the bar as separate blocks instead of one smooth fill.
High / Low Alert
Bar and value turn to the alert color past these values.
Add a button to edit the value
Lets the user type a new value from the widget.

Also supports tap actions.

Value Display (Box)

value_display_box

A large centered value with an icon — the classic dashboard tile.

High / Low Limit
Past a limit the icon pulses and takes that limit's color.
Show Last Update
Adds the time of the last value under it.

LED (Box)

led

A round lamp that lights when the field has a specific value.

ON Value
The value that lights the LED, compared as text — 1, ON, true… Any other value shows it off.

LED (Inline)

inline_led

The same indicator as LED (Box), laid out in one row with title and time — good for status lists.

ON Value
The value that lights the LED, compared as text.

Time & Date Processor

time_processor

Shows a clock, or turns a time value from your board into a readable date.

Input Mode
Local Time is a live clock and needs no data. Timestamp (millis), Seconds and Date format read the field and format it.
Display Format
From a full date and time (YYYY-MM-DD HH:mm:ss) down to just HH:mm.

Label

label

Text for headings and section titles, with an optional icon and divider. Needs no field.

Visual Style
plain, filled, outlined, card or badge.
Live color
Bind it to a field and send a color such as #FF4500 to recolor it at run time — see live color.

Status Label

status_label

Shows a word instead of a number — "Off", "Heating", "Warning" — chosen by rules you write.

Rules
Each rule is a condition and a text, e.g. == 0 → Off, > 80 → Warning. Checked top to bottom: the first match wins, so put the specific ones first. == and != also match text such as ON.
Default Text
Shown when no rule matches.

Frame

frame

A decorative border that groups other widgets. It always stays behind them, so you can place widgets inside it.

Line Thickness / Corner Radius (%)
Measured in % of the grid cell height, so the frame keeps its look at any size (0 = square corners, 50 = pill).
Border Position
outer draws the line at the widget edge; center in the middle of the outer cells.
Show Title
A title that breaks through the top line.
Live color
Send a color such as #FF4500 to recolor the frame — see live color.

Radial Gauge

radial_gauge

A circular arc that fills toward the value's position between min and max.

Low / High Threshold
The arc takes the low or high color past these values.
Thickness
Width of the arc.

Pro Gauge

pro_gauge

An analog dial with a needle, a tick scale and colored zones — the look of a real instrument.

Tick Every / Label Every (Ticks)
Spacing of the scale marks, and how many marks between numbers.
Zones 1–3
Up to three colored bands on the scale, each up to its limit — e.g. green, amber, red. Turn them off with Disable colored zones or use one Fixed Color.
Needle Style
Shape of the needle.

Vertical Gauge

vertical_line_gauge

A vertical bar with a tick scale — smooth fill or separate segments.

Use Segments / Segment Count
Draws the bar as a column of blocks.
Gradient Colors
Colors the bar from the Start through the Mid to the End color; Mid Point sets where the middle color sits.
Zones 1–3
Alternative to the gradient: fixed colors per range.
Show Marker
A pointer at the current value.

Horizontal Gauge

horizontal_line_gauge

The Vertical Gauge laid on its side, with the same options.

Gradient Colors / Zones
Either a color gradient along the bar, or up to three fixed-color ranges.

Rotation

rotation

A spinning icon whose speed follows the value — for fans, pumps and motors.

Min / Max Value
At Min the icon stands still, at Max it spins at full speed.
Low / High Alert
The icon changes color past these values.
Image
Your own picture spins instead of the icon.

Also supports tap actions and the edit button.

Segment Indicator

universal_segments

A staircase or battery-style meter that lights more bars as the value rises.

Min / Max Value
No bars at Min, all bars at Max.
Fair / Poor Threshold
Recolor the bars. It works both ways: low is bad (signal, battery — set Poor below Fair) or high is bad (load, noise — set Poor above Fair).

Image

image

A picture — a logo, a floor plan, a photo of the machine — that can also change with the field's value.

State images
Rows of condition and image, e.g. = 0 → closed door, = 1 → open door. The default image shows when no row matches.
Open URL on click
Makes the picture a link.
Fit
contain shows the whole picture, cover fills the widget and crops, fill stretches.

Outputs / Controls 11

Send a value to a field when the user taps, drags or picks — and show the field's real state.

Switch

switch

Tap to toggle — sends the ON or the OFF value, and shows the field's real state.

Style
Neon, Rocker, Flip, or Icon as switch (the icon itself is the button).
Layout
Box for a tile, Inline for a row with the title beside it.
ON / OFF Value
What is sent — see sending values.

Secure Switch

secure_switch

The same switch, but it can ask for confirmation or the dashboard PIN before sending.

Require Confirmation / Dashboard PIN
For anything that must not be switched by accident — a heater, a gate, a pump.

Also supports tap actions.

Push Button

simple_push_button

A momentary button: sends one value while pressed and another when released — like a doorbell.

Press / Release Value
Typically 1 while pressed and 0 on release. Your board acts on the change.

Secure Push Button

advanced_push_button

The same push button, but it can require the dashboard PIN first.

Require Dashboard PIN
The PIN set in the dashboard settings.

Also supports tap actions.

Rotary Selector

rotary_selector

A multi-position knob: tap a position to send its value; the active one lights up.

Positions
A list of Label:Value pairs separated by commas, e.g. OFF:0,LOW:33,MED:66,HIGH:100.

Checkbox

checkbox

A single checkbox with a caption — sends the ON value when ticked and the OFF value when cleared.

Align
left-right puts the caption on the left edge and the box on the right edge — tidy in settings-style lists.

Radio Group

radio_group

Choose one of several values, as radio buttons or as a row of buttons.

Options
Label:Value pairs, e.g. Off:0,Low:1,High:2.
Style / Orientation
Radio or Buttons; vertical or horizontal.

Button Group (Tabs)

button_group

Connected buttons with icons, text or both — tap one to send its value; the active one stays highlighted. Ideal for modes (Off / Fan / Boost / Auto).

Items
For each button: a label, the value it sends and an icon.
Show
Icon, Text, or Icon + Text.

Potentiometer

potentiometer

A round knob you drag to pick a value; it is sent when you let go.

Step
The value moves in these increments — e.g. 0.5, 1, 5.
Labels Every N Units
Numbers around the dial.

Horizontal Slider

horizontal_slider

Drag along the track to pick a value; it is sent when you let go.

Step
The value moves in these increments.
Segment Count
Divides the track into marked sections.

Vertical Slider

vertical_slider

The same slider, standing upright — natural for levels and setpoints.

Step / Segment Count
As on the horizontal slider.

Charts & Special 7

History, maps, automations, schedules and board status.

Simple Chart

simple_chart

One field, one line, and a row of range buttons (15 min to 1 year) — a good chart with almost no setup.

Aggregation Function
Long ranges pack many readings into one point: Average for the trend (temperature, humidity), Maximum or Minimum for peaks and valleys, Sum for counters and totals.
Default Time Range
The range shown when the dashboard opens.

Advanced Chart

advanced_chart

A line or bar chart with up to three fields on the same time axis.

Series 2 / Series 3 Field
Extra fields drawn next to the widget's own field, each with its own color and label.
Aggregation Function
As on the Simple Chart.
Auto Y Axis / Y Min / Y Max
Let the axis follow the data, or fix it so charts stay comparable.
Custom H-Grid
Horizontal lines at values you choose, e.g. 20,25,30 for comfort limits.

Live Location Map

map_widget

A map with a marker that follows a position sent by your board — trackers, vehicles, boats.

Data format
Send a JSON value to the field: {"lat": 37.98, "lng": 23.72} (latitude/longitude also work).
Default Latitude / Longitude / Zoom
Where the map starts before the first position arrives.
Auto-center
Keeps the marker in the middle as it moves.

Rule

rule

A small automation on the dashboard: when the field meets a condition, it writes a value to another field.

Condition / Threshold
e.g. > 25 — checked on every new value.
Target Field / Action Value
What is written when the rule fires, e.g. 1 to boiler/fan. Publish via MQTT also sends it to the board.
Alert Message
Recorded in the dashboard notifications when it fires; the tile turns to its alert color.

Runs on the server, not in the browser — it works with the dashboard closed.

Device Status

device_status

Shows whether a board is online and alerts you when it drops off.

Device
Only boards ticked as Real device in My Virtuino World appear in the list.
Show user settings button
Lets the person using the dashboard set the alert title, message, delay, email and push.

Full explanation in Device Online/Offline Detection.

Scheduler

scheduler

Time-based ON/OFF for one field. Tap the tile to add events (time and days); it shows how many are active.

ON / OFF Value
What each scheduled event sends.
Publish (MQTT)
Also sends the value to the boards listening to the field. Leave it on for anything a board must act on.

Example: ON at 06:00 and OFF at 06:15 every day — a 15-minute watering each morning.

Stats Table

stat_table

Several fields in one compact table — label, live value, unit — each row flashing when it updates.

Data Rows
Add one row per field: choose the field, a label and a unit. The widget grows with the rows.

Launchers & Panels 2

Small tiles that open a full window — keep the dashboard clean and the detail one tap away.

Chart Popup

chart_popup

A small tile that opens a full chart in a window — detailed history without taking dashboard space.

Chart settings
The same as the Advanced Chart: up to three fields, range, aggregation, axis.

History Monitor

history_monitor

A tile that opens the stored values of its field in a table — to browse, search, correct or delete wrong readings, and export them.

Hydraulics & Flow 22

Pipes, fittings, valves, pumps and instruments to draw a live process diagram of a real installation.

Building a process diagram

  1. Lay out the line. Place pipes, elbows, tees and crosses edge to edge on the grid. Use the same Pipe Size on pieces that meet, so the walls line up.
  2. Bind each piece to a field. Pipes, pumps and meters follow a number (flow, speed). Fittings, valves and actuators follow a condition.
  3. Dock the instruments. Valves and the Coupling (Axis Mount) have a collar on top. Put a handwheel, lever, motor, coil, gauge or sensor in the cell directly above it and it sits on the collar.
  4. Add the overlays. The Agitator and the Liquid Stream are transparent: place them over a tank or at the end of a pipe.

Condition — an operator and a value compared with the field: > 0 means "flowing whenever the value is above zero", == 1 means "open when the board sends 1". While the condition is true the piece shows its flow, open or running color; otherwise its idle color.

Tank

tank

A vessel whose liquid level follows the value — in 11 shapes, from a plain box to a barrel, a flask or a cone.

Min / Max Value
Empty and full.
Scale Ticks
Marks on the side at values you list, e.g. 25,50,75.
Low / High Alert
The liquid takes the alert color past these values.
Show Value
Turn it off to free the bottom row for a pipe or a stream.

Pipe (Horizontal)

pipe_h

A pipe section with animated flow; the speed follows the value.

Min / Max Value
No flow at Min, full speed at Max.
Flow Direction
Which way the liquid moves.
Show Flow Bubbles
Turn off for solids (grain, pellets).

Pipe (Vertical)

pipe_v

The same pipe, vertical.

Min / Max Value / Flow Direction
As on the horizontal pipe.

Coupling

fitting_coupling

Joins two pipe sections, horizontal or vertical; stretches edge to edge.

Condition
Shows the flow color while it is true — see conditions.

Elbow

fitting_elbow

A 90° bend, in four orientations.

Rotation
Which two sides it connects.

Tee

fitting_tee

A straight run with a side branch.

Branch Direction
Which side the branch leaves from.

Cross

fitting_cross

A four-way junction.

Reducer

fitting_reducer

Joins a pipe of one size to a pipe of another.

From Size / To Size
The two pipe sizes it connects.

Valve (2-Way)

valve_2way

An inline valve that shows open or closed. Its collar on top takes a handwheel, lever, motor or coil.

Condition
When true the valve shows open (open color), otherwise closed.

Valve (3-Way)

valve_3way

A three-port valve that shows which way it routes the flow.

Straight / Divert / All Open
One condition per state; the highest matching state wins, and with none matching the valve shows closed.

Coupling (Axis Mount)

fitting_coupling_axis

A coupling with a mounting axis on top — the place to dock an instrument (gauge, sensor, motor) over the pipe.

Pump

fitting_pump

A centrifugal pump whose impeller spins while it runs; inline, or elbow (suction from the side, discharge upward).

Running Condition
When true the impeller turns and the pump takes the running color.
Layout
Inline or Elbow.

Check Valve

fitting_checkvalve

A one-way valve; the arrow shows the only direction flow can take.

Flow Condition
When true it shows the flow color.

Flow Meter

fitting_flowmeter

An inline meter whose needle follows the value.

Min / Max Value / Unit Label
The scale of the dial.

Handwheel

mech_handwheel

A manual handwheel docked on a valve or axis coupling; shows open or closed from its field.

Condition
Open while true.

Lever

mech_lever

A manual lever docked on a valve or axis coupling; shows open or closed.

Condition
Open while true.

Motor

mech_motor

A small electric actuator that spins while running, docked on a valve or axis coupling.

Condition
Running while true.

Coil (Solenoid)

mech_coil

A solenoid that glows when energized, docked on a valve or axis coupling.

Condition
Energized while true.

Analog Gauge

mech_gauge

A small dial for pressure, temperature, level or flow, docked on a valve or axis coupling; the needle follows the value.

Min / Max Value / Unit Label
The scale of the dial.

Sensor / Monitor

mech_sensor

A generic instrument docked on the line — an icon, or a short tag such as PT or TT.

Tag
Up to 3 characters; shown when no icon is set.
Alert Condition
Takes the alert color while true.

Agitator

mech_agitator

A mixer impeller that spins while running. It is transparent — place it over a Tank.

Min / Max Value
Stopped at Min, full speed at Max.

Liquid Stream (Outflow)

flow_stream

Liquid pouring out of a pipe end — for example into a tank below. Transparent; place it where the pipe ends.

Min / Max Value
A trickle at Min, a full stream at Max.
Direction
Which way it pours: down, up, left or right.