Overview
An iWidget is an element you place on your dashboard that either lets you control your device or shows you something it reports.
There are two families. Controllers communicate with your device when you tap them — buttons, sliders, switches, joysticks. Displays show what your device pushes back — gauges, levels, charts, text. Mix and match: a typical dashboard has a few of each.
Every widget is identified by a Widget ID you assign in the Inspector. The ID is the bridge to your Arduino sketch — see below.
[image] Widget picker open from the dashboard, sticky section headers Controllers and Displays, all 17 widgets visible
Controllers
The 9 input-side widgets — your phone communicates with your device.
- Simple Button — Press, release, long-press, toggle.
- Advanced Button — Button with icon and three styles.
- Direction Pad — 4-or-5-direction discrete input with several layouts.
- Emergency Button — Safety-critical stop with multiple styles and trigger filters.
- Horizontal Slider — Continuous value, horizontal.
- Vertical Slider — Continuous value, vertical.
- Joystick — Two-axis analog input, sticky or free.
- Switch — On/off toggle in three visual styles.
- Segmented Switch — Pick one (or several) from a row of options.
[image] Controllers section of the picker, all 9 preview tiles
Displays
The 8 output-side widgets — your device pushes data your phone shows.
- Metric — Big-number card with rich styling and an optional secondary value.
- Text — Free text with font, decoration, and container options.
- LED — Glowing indicator with brightness, halo, and rays.
- Gauge — Circular arc with optional needle.
- Advanced Chart — Multi-series chart with oscilloscope and time-series modes.
- Bar Chart — N named bars with custom colors.
- Horizontal Level — Horizontal fill bar (solid, gradient, segmented).
- Vertical Level — Vertical fill bar (solid, gradient, segmented).
[image] Displays section of the picker, all 8 preview tiles
How widgets connect to your sketch
Every widget gets a Widget ID — a name you set in the Inspector (btn1, temp_gauge, fan_speed). In your sketch, you reference that ID with the matching I<Widget> macro at global scope:
ISimpleButton("btn1") {
WHEN_PRESSED { digitalWrite(LED_PIN, HIGH); }
}
For Displays, you reference your widget directly and call a method on it. You typically push values on a schedule (every few hundred milliseconds), not on every loop tick:
instant.gauge("temp_gauge").setValue(readTemperature());
The full DSL — every WHEN_* block, every method, the recommended scheduling pattern, board-by-board notes — lives in the InstantIoT Library section.
How to add a widget
In the dashboard’s edit mode, tap the + button in the floating toolbar. The picker opens. Tap a widget — it lands on the canvas with sensible defaults. Tap it once more to open its Inspector and customize.
[image] Populated dashboard mixing Controllers and Displays — project Workshop, 5–6 widgets visible
Next
→ Browse the Controllers and Displays widget by widget.
→ Building dashboards — How the canvas, edit mode, and Inspector work.
→ Dashboard / Generate the Arduino code — How the widget IDs become code.