Segmented Switch

A horizontal or vertical row of options the user picks from — like a tab bar. Use it for 2 to 5 mutually exclusive states (Mode: Off / Auto / Manual; Speed: Low / Medium / High).

[image] Segmented Switch on canvas, 3 horizontal options, second selected (highlighted)

What it does

Segmented Switch shows a row (or column) of options. In Single mode, exactly one is selected at a time. In Multiple mode, any combination can be selected. You define the options as a list of text labels in the Inspector — add or remove segments freely (minimum 2).

When to use it

• Mode picker — 3 segments: Off / Auto / Manual. Use the index to switch your sketch’s behavior.
• Speed preset — 3 segments: Low / Medium / High → map to PWM duty cycles.

Properties

The Inspector opens as a bottom sheet with a Widget ID field at the top, then these sections in order.

Widget ID

1. Essential

2. Header

3. Options

A dynamic list of segments. Minimum 2, no hard maximum.

For each option slot:

Plus list-level actions:

4. Appearance

5. Behavior

6. Colors

States and behavior

[image] Two layouts side by side — Horizontal (Single mode) and Vertical (Multiple mode)

Per-segment states: Unselected / Selected / Disabled.

The selection mode changes which event your sketch receives:

• Single — WHEN_SELECTION_CHANGED(idx) fires with the new selected index.
• Multiple — WHEN_SEGMENT_SELECTED(idx) and WHEN_SEGMENT_DESELECTED(idx) fire on each change.

In code

The switch mirrors what the user picks on the dashboard. To react to it in your sketch (Single mode):

ISegmentedSwitch("mode") {
  WHEN_SELECTION_CHANGED(idx) {
    setBehavior(idx);
  }
};

That’s the minimum — one event block, the index idx is 0-based. For Multiple mode use WHEN_SEGMENT_SELECTED(idx) and WHEN_SEGMENT_DESELECTED(idx). See InstantIoT Library / Receive Command from App for details.

Working Arduino code example

A complete sketch you can flash. The Widget ID mode matches the one you set on your Segmented Switch in the app. The widget has 3 options: Off / Auto / Manual.

[gif] Segmented Switch on the dashboard switching between three behavior modes on the ESP32

Direct Mode

Your phone connects directly to the ESP32’s SoftAP — no router, no server. Best for prototyping and standalone setups.

#include <InstantIoTWiFiAP.hpp>

const char* AP_SSID = "InstantIoT-Greenhouse";
const char* AP_PASS = "12345678";

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);

void setOff()    { Serial.println("Mode: OFF");    }
void setAuto()   { Serial.println("Mode: AUTO");   }
void setManual() { Serial.println("Mode: MANUAL"); }

ISegmentedSwitch("mode") {
  WHEN_SELECTION_CHANGED(idx) {
    switch (idx) {
      case 0: setOff();    break;
      case 1: setAuto();   break;
      case 2: setManual(); break;
    }
  }
};

void setup() {
  Serial.begin(115200);
  instant.begin();
}

void loop() {
  instant.loop();
}

Server Mode

The ESP32 connects to your self-hosted InstantIoT Server over WiFi. Multiple devices, persistent state, history.

#include <InstantIoTWiFiServer.hpp>

const char*    WIFI_SSID     = "YOUR_WIFI_SSID";
const char*    WIFI_PASS     = "YOUR_WIFI_PASSWORD";
const char*    SERVER_IP     = "192.168.1.42";
const uint16_t SERVER_PORT   = 9001;
const char*    DEVICE_TOKEN  = "YOUR_DEVICE_TOKEN";

InstantIoTWiFiServer instant(SERVER_IP, SERVER_PORT, DEVICE_TOKEN);

void setOff()    { Serial.println("Mode: OFF");    }
void setAuto()   { Serial.println("Mode: AUTO");   }
void setManual() { Serial.println("Mode: MANUAL"); }

ISegmentedSwitch("mode") {
  WHEN_SELECTION_CHANGED(idx) {
    switch (idx) {
      case 0: setOff();    break;
      case 1: setAuto();   break;
      case 2: setManual(); break;
    }
  }
};

void setup() {
  Serial.begin(115200);
  instant.begin(WIFI_SSID, WIFI_PASS);
}

void loop() {
  instant.loop();
}

The widget code is identical — only the include and constructor change.

Notes

• Minimum is 2 segments — the Remove last option button hides at 2.
• Switching from Single to Multiple keeps the current selection but changes which WHEN_* blocks fire.

Next

→ Switch — Two states only, single toggle.

→ Direction Pad — When the choices are spatial directions.