The Dashboard is where you actually build something with InstantIoT. It’s the editor, the inspector, the code generator, and the live control panel — all on one screen.
You reach the Dashboard by opening any project, in either mode. Whether the project lives on your phone (Direct Mode) or on a server (Server Mode), the Dashboard works the same way.
[image] Dashboard with several widgets arranged on the canvas, project name « Greenhouse » in the top bar
The shape of the screen
At the top, a top bar with the back arrow, the project name, and a row of action icons on the right. The icons that show up depend on which mode you’re in (see below).
Below that, a page tabs row if your project has more than one dashboard page.
The center is the canvas — a grid where your widgets live.
In edit mode, a floating toolbar appears at the bottom of the canvas with the building actions: Add widget, Multi-select, Duplicate, Delete, Refresh. The toolbar slides in when you enter edit mode, and tucks itself out of the way while you drag a widget so it doesn’t block your view.
[image] Dashboard layout annotated — top bar, page tabs, canvas, floating toolbar
Edit mode and Run mode
Two modes drive everything you do on the Dashboard.
Edit mode is for building. The canvas snaps to a grid, widgets show resize handles when selected, the floating toolbar appears at the bottom with the building actions. Tapping a widget selects it; it doesn’t react.
Run mode is for using. The grid disappears, the floating toolbar slides away, widgets become live and interactive. Tapping a button sends a command. Dragging a slider streams values. Charts update with whatever your device reports.
The Run toggle
You switch modes with a single icon in the top bar:
- ▶ Play (in edit mode) — tap to go live.
- ⏹ Stop in a red square (in run mode) — tap to come back to edit.
[image] Top bar showing the Play icon in edit mode and the red Stop icon in run mode
The red Stop is deliberately loud: while it’s there, your dashboard is communicating with your device in real time.
What’s in the top bar
The icons on the right of the top bar change with the mode.
Edit mode — five icons:
- Add page — the tabs icon; opens a dialog to create a new dashboard page.
- Code (
</>) — opens the Arduino Code sheet (see below). - Run (▶) — flips the dashboard to run mode.
- Connection — shows your device link’s current state; tap to open the Connection sheet.
- Help — replays the in-dashboard tour.
Run mode — three icons:
- Code (
</>) — same as edit mode; you can copy the sketch without leaving run mode. - Stop (⏹, red square) — flips back to edit mode.
- Connection — same as edit mode.
[image] Top bar in edit mode with all five icons annotated
[image] Top bar in run mode with the three icons annotated
Add a widget
In Edit mode, tap the + button in the toolbar. The Add widget picker opens.
[image] Widget picker open with iWidgets / Controllers / Displays tabs
The picker organizes the catalog into families:
- iWidgets — the full set, presented as a flat list.
- Controllers — buttons, sliders, switches, joysticks, direction pad, segmented switch. Things you tap, drag, or hold.
- Displays — LED, gauge, metric, levels, charts, text. Things that show what your device reports.
Tap a widget. It lands on the canvas with sensible defaults — a label, a default size, default colors. You’re free to change all of it.
You can add as many widgets as you want, mix and match across families, and arrange them however the project asks for.
Move and resize
In Edit mode, every widget on the canvas is draggable and resizable.
- Move — long-press a widget, then drag it to a new spot. The grid guides the placement; widgets snap into cells.
- Resize — tap a widget to select it, then pull the handles at the corners or edges. The grid enforces a minimum size per widget family (a button can shrink further than a chart) and a maximum that fits your screen.
[image] Widget selected on canvas with resize handles visible
Tap any empty cell on the canvas to deselect.
Configure a widget
Tap a widget twice (or tap once when it’s already selected) to open its Inspector — a settings sheet that slides in from the side or the bottom.
[image] Widget inspector open for a Simple Button, with Widget ID highlighted
Every widget has its own set of options. Across the catalog, you’ll find a consistent core:
- Widget ID — see below; this is the most important field.
- Header — show or hide a title above the widget, with custom text and alignment.
- Labels — what the widget shows (e.g. On / Off on a switch, the measurement unit on a gauge).
- Colors — backgrounds, text, accents per state.
- Advanced — family-specific knobs (debounce on buttons, range on sliders, segments on a level, animation toggles).
In Server Mode, the Inspector also has a Target device dropdown — which of your project’s devices this widget should communicate with. By default, widgets target the page’s default device (see Pages below).
Swipe down or tap outside to close the Inspector. Changes apply as you make them.
Widget IDs — the link to your sketch
Every widget has a Widget ID. It’s the bridge between the Dashboard and your Arduino sketch.
[image] Widget Inspector showing Widget ID field with « btn1 » and Copy button
When you write ISimpleButton("btn1") { ... } in your sketch, btn1 matches the Widget ID of the button on the Dashboard. The two are linked. Press the button on your phone, your sketch fires.
Pick stable, descriptive IDs — btn1 is fine while you prototype, but kitchen_light_toggle or fan_speed will be clearer when you come back to the project six months later.
The Inspector includes a Copy Widget ID button to drop the ID into your clipboard, ready to paste into your code.
IDs are unique per project. The app prevents collisions — duplicating a widget auto-generates a new unique ID.
Multi-select — act on several widgets at once
Tap Multi-select in the toolbar. The toolbar reshapes; tap individual widgets to add them to the selection. Each one gets a checkmark.
[image] Multi-select active with three widgets checked
The bulk actions appear as you select:
- Duplicate — copies every selected widget. Each copy gets a new auto-generated Widget ID.
- Delete — removes them all. A confirmation dialog asks before committing.
When you’re done, tap Exit multi-select (or Refresh in the toolbar to deselect everything and stay in Edit mode).
Pages — split your dashboard
A project can have a single dashboard page, or several. Pages let you split a dense setup into focused screens — Status / Controls / History, or Living Room / Bedroom / Garage.
[image] Page tabs row above the canvas with two pages « Status » and « Controls »
The page tabs row shows every page in the project. Tap a tab to switch.
To add a page, tap the + at the end of the row. A small dialog asks for a name. The new page lands as a fresh empty canvas, ready for you to add widgets.
Long-press a page tab to rename or delete it.
Default device per page (Server Mode)
In Server Mode, each page can have a default device. New widgets added to that page target the default device automatically — no need to pick the device in the Inspector for every widget.
[image] Page settings showing default device dropdown
Useful when one page is dedicated to one machine. Workshop > Lathe defaults to the lathe’s ESP, Workshop > Lights defaults to the lighting controller — and the widgets in each page already know their target.
Generate the Arduino code
Tap the code icon (</>) in the top bar. The Arduino Code sheet opens.
[image] Generated code sheet with full sketch visible and Copy code button
The sheet contains a complete Arduino sketch, generated from your dashboard. It’s organized in clear sections:
- Configuration — Wi-Fi network name and password (Direct Mode) or server address and token (Server Mode).
- Inputs — one block per Controller widget, with the matching
I…macro, declared at global scope, and a TODO marking where to put your code. - Outputs — references for each Display widget that you’ll update from your sketch.
setup()andloop()—instant.begin(...)andinstant.loop()already in place.
The Widget IDs you set in the Inspector are exactly the IDs in the generated code. The two stay in sync as long as you don’t rename them.
In Server Mode, when your project has multiple devices, the sheet shows a tab per device. Each tab generates the code specific to that device’s widgets only — flash one sketch per board, with only its own widgets.
Tap Copy code in the header. A toast confirms Copied!. Paste into the Arduino IDE, fill in the TODOs (Wi-Fi password, sensor reads, your business logic), upload to your board.
[image] Codegen sheet showing two device tabs in Server Mode, code visible
Run mode — interact with your device
When your device is flashed and connected, tap the Play icon in the top bar to flip the dashboard into run mode.
[image] Run mode active, finger pressing a Simple Button widget, LED widget showing as on
Buttons fire WHEN_PRESSED on press, WHEN_RELEASED on release. Sliders stream WHEN_VALUE_CHANGING continuously while you drag and WHEN_VALUE_CHANGED when you let go. Joysticks send X and Y. Display widgets — gauges, metrics, charts — update as your sketch pushes new values.
The grid is gone in Run mode. The floating toolbar is gone too. Widgets fill the cells they were configured for, and the canvas is purely interactive.
To go back to editing, tap the red Stop icon in the top bar.
The connection icon
The icon on the right of the top bar shows whether your phone is communicating with your device right now.
[image] Top bar with connection icon in three states: disconnected, connecting, connected (Greenhouse)
Three states:
- Disconnected — no link active.
- Connecting… — link being established.
- Connected (Greenhouse) — live link, with the device name.
In Direct Mode, tap the icon to open the Connection sheet (see Direct Mode > Connection) and pick a Wi-Fi network. In Server Mode, the connection state reflects the server link plus the target device’s online status.
If the connection drops mid-session, the icon flips back to disconnected and Run mode pauses for the affected widgets — buttons can’t fire, gauges don’t update — until the link comes back.
Going back
Tap the back arrow in the top bar. The app returns to the project list — Maker tab if you came from a Direct project, or the server’s Projects screen if you came from a Server project.
The Dashboard remembers its state. Reopening the project drops you back exactly where you left it: same page, same widget arrangement, same mode (Edit or Run).
Next
→ InstantIoT Library / Receive Command from App — Listen to your widgets in your sketch.
→ InstantIoT Library / Send Data to App — Push sensor values back to gauges, charts, displays.
→ iWidgets — The catalog, widget by widget.