Quick Start

This guide walks you through connecting to your first RadioKit device and controlling it from the app.

Prerequisites

• A RadioKit-compatible device (ESP32 with BLE/WiFi, or any board with Serial)
• The RadioKit Flutter app installed on your phone or desktop
• The RadioKit Arduino library flashed to your device

Step 1: Flash Your Device

Upload a RadioKit sketch to your microcontroller. The simplest example uses a button and slider:

#include <RadioKitLib.h>

RK_PushButton fire({.x=20, .y=50, .height=15, .icon="flame", .label="Fire"});
RK_Slider throttle({.x=100, .y=60, .height=12, .width=80, .label="Throttle"});
RK_LED status({.x=20, .y=20, .height=15, .label="Status"});

void setup() {
  Serial.begin(115200);
  RadioKit.config.name = "MyDevice";
  RadioKit.config.description = "First RadioKit Project";
  RadioKit.begin();
  RadioKit.startBLE("MyDevice");
}

void loop() {
  RadioKit.update();
  status.rk.color = fire.rk.state ? 0x00FF00 : 0xFF0000;
}

Step 2: Open the App and Pair

1. Open the RadioKit app
2. You land on the Models tab (home screen)
3. Tap + New device to open the Pair Bottom Sheet
4. Select the transport tab matching your device:

Transport	What to do
BLE	Wait for your device name to appear in the scan list. Tap to connect.
USB	Select the correct serial port and baud rate. Tap CONNECT.
WiFi	Enter the device IP address (e.g., 192.168.1.100) or wait for mDNS discovery.
Cloud	Select your account and relay host. Choose a device from the list.

Step 3: Authenticate (if required)

If your device has a password configured, an auth dialog appears automatically:

1. Enter the device password
2. Check “Remember password” to auto-connect next time
3. Tap AUTHENTICATE

Serial connections skip this step.

Step 4: Use the Controller

Once connected, you are taken to the Control Screen — a full-screen canvas with all your device’s widgets:

• Buttons — Tap to press, or toggle on/off
• Sliders — Drag to adjust values
• Knobs — Rotate with a circular gesture
• Joysticks — Drag the thumb in any direction
• LEDs — Show device state (color controlled from Arduino code)
• Text Displays — Show values sent from the device

The app bar shows connection status, signal strength (dBm), and latency (ms). Tap the disconnect icon to return to the Models tab.

Step 5: Explore the App

Reconnect Later

Your device is automatically saved as a paired model. On the Models tab, tap any paired model to reconnect — the app tries the last-used transport first.

Open Device Settings

On the Models tab, tap the settings icon (tune) on an active device card. This opens a bottom sheet with:

• INFO — Device details, transport info, chip information
• SETTINGS — Device configuration options
• FILESYSTEM — Browse and manage device files (if supported)
• FIRMWARE — OTA firmware update (if supported)

Try the Designer

Create your own UI layouts without writing Arduino code:

1. Go to the Designs tab
2. Tap + Create (or the palette icon in the app bar)
3. Add widgets from the widget picker (bottom-left FAB)
4. Configure properties in the Inspector panel
5. Export to Arduino code via the Code Viewer (bottom-right FAB)

See the Designer Manual for the full guide.

Use the Demo Mode

Try the app without hardware:

1. Go to System tab
2. Enable ENABLE_DEMO toggle
3. Go back to Models tab
4. Tap any demo (WIDGETS_DEMO, RC_CONTROLLER, IOT_DASHBOARD)

Step 6: Connect Multiple Devices

The app supports simultaneous connections to multiple devices. Each connected device gets its own card in the Active Links section and its own control screen. Use the + New device button to connect additional devices while others are active.

Next Steps

• Features — Complete feature reference
• Designer Manual — Visual UI designer guide
• Arduino Library — Hardware side documentation
• Widgets Reference — All available widget types