Direction Pad

A discrete directional pad with four directions (Up / Down / Left / Right) and, on most styles, a center button. Use it for stepwise control — robot turns, menu navigation, snake-style movement.

[image] Direction Pad on canvas, Cross style, neutral state

What it does

Direction Pad reports per-button events. Each direction (and the center, when present) has its own press, release, and long-press events. Six visual styles ship out of the box: Cross, ABXY, Dual, PS, Arrow, Circle.

When to use it

• Robot directional control — Map Up/Down to forward/backward, Left/Right to turning, Center to stop.
• Menu navigation — Up/Down move a cursor, Left/Right cycle items, Center selects.

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. Appearance

4. Colors · Buttons

5. Colors · Details

6. Colors · Center button

Only when Style is Cross, Arrow, or Circle.

States and behavior

[image] Six styles side by side — Cross, ABXY, Dual, PS, Arrow, Circle

[image] Up button pressed (green), other buttons gray

Each button cycles through Normal → Pressed → Long-pressed → Normal. The Center button only exists in Cross, Arrow, and Circle styles; ABXY, Dual, and PS use only the four directions.

In code

The pad mirrors what the user does on the dashboard. To react to it in your sketch:

IDirectionPad("nav") {
  WHEN_PAD_PRESSED(btn) {
    if (btn == DPadButton::Up) moveForward();
  }
};

That’s the minimum — one event block reading the pressed button. You can add WHEN_PAD_RELEASED(btn) and WHEN_PAD_LONG_PRESSED(btn) if you need them. See InstantIoT Library / Receive Command from App for the full enum.

Working example

A complete sketch you can flash. The Widget ID nav matches the one you set on your Direction Pad in the app.

[gif] Direction Pad on the dashboard moving a robot — each direction triggers a motor command

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 moveForward()  { Serial.println("FORWARD");  }
void moveBackward() { Serial.println("BACKWARD"); }
void turnLeft()     { Serial.println("LEFT");     }
void turnRight()    { Serial.println("RIGHT");    }
void stopAll()      { Serial.println("STOP");     }

IDirectionPad("nav") {
  WHEN_PAD_PRESSED(btn) {
    switch (btn) {
      case DPadButton::Up:     moveForward();  break;
      case DPadButton::Down:   moveBackward(); break;
      case DPadButton::Left:   turnLeft();     break;
      case DPadButton::Right:  turnRight();    break;
      case DPadButton::Center: stopAll();      break;
      default: 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 moveForward()  { Serial.println("FORWARD");  }
void moveBackward() { Serial.println("BACKWARD"); }
void turnLeft()     { Serial.println("LEFT");     }
void turnRight()    { Serial.println("RIGHT");    }
void stopAll()      { Serial.println("STOP");     }

IDirectionPad("nav") {
  WHEN_PAD_PRESSED(btn) {
    switch (btn) {
      case DPadButton::Up:     moveForward();  break;
      case DPadButton::Down:   moveBackward(); break;
      case DPadButton::Left:   turnLeft();     break;
      case DPadButton::Right:  turnRight();    break;
      case DPadButton::Center: stopAll();      break;
      default: 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

• On styles with no center button (ABXY, Dual, PS), the Colors · Center button section is hidden.
• For analog two-axis input, use Joystick instead.

Next

→ Joystick — Continuous two-axis input.

→ Segmented Switch — When the choices aren’t directional.