Gauge

A circular arc gauge with optional needle. Use it for measurements with a clear range — temperature, pressure, fuel, RPM.

[image] Gauge on canvas, value 65, needle pointing to ~65% of the arc, label « Temperature », unit « °C »

What it does

Gauge displays a number as the filled portion of a circular arc. You define the range (min and max), the unit, the label, and how many decimals to show. Your sketch updates the value with .setValue(). Optional needle and center dot make the arc read like a classic dial.

When to use it

• Temperature gauge — Range -10 to 50 °C, label Temperature, unit °C.
• Tank fill level — Range 0 to 100 %. Read distance from an HC-SR04 and convert to a fill percentage.

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

4. Format

5. Appearance

6. Colors · Arc

7. Colors · Needle

8. Colors · Text

States and behavior

[image] Three values side by side: 25 %, 50 %, 75 %

The arc fills from min to the current value. The needle (when shown) points to the current position. Out-of-range values are clamped to min or max.

In code

The widget mirrors what your sketch sends. To update its value:

instant.gauge("temp_gauge").setValue(readTemperature());

That single line is what shows up on the dashboard. Don’t put it directly in loop() — Arduino’s loop() runs thousands of times per second, which would flood the link. Use a timer to push at a sensible rate (200–1000 ms is plenty).

Available methods: .setValue(float), .setRange(float min, float max), .update(float value, float min, float max). See InstantIoT Library / Send Data to App.

Working Arduino code example

A complete sketch you can flash. The Widget ID temp_gauge matches the one you set on your Gauge in the app.

[gif] Gauge widget on the dashboard, needle moving smoothly as the ESP32 pushes new temperature values

Direct Mode

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

#include <InstantIoTWiFiAP.hpp>
#include <utils/InstantIoTTimer.hpp>

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

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);
InstantTimer timers;

float readTemperature() {
  // Replace with your real sensor read
  return 20.0f + (random(0, 100) / 10.0f);
}

void pushTemp() {
  if (!instant.connected()) return;
  instant.gauge("temp_gauge").setValue(readTemperature());
}

void setup() {
  instant.begin();
  timers.every(500, pushTemp);
}

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

Server Mode

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

#include <InstantIoTWiFiServer.hpp>
#include <utils/InstantIoTTimer.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);
InstantTimer timers;

float readTemperature() {
  // Replace with your real sensor read
  return 20.0f + (random(0, 100) / 10.0f);
}

void pushTemp() {
  if (!instant.connected()) return;
  instant.gauge("temp_gauge").setValue(readTemperature());
}

void setup() {
  instant.begin(WIFI_SSID, WIFI_PASS);
  timers.every(500, pushTemp);
}

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

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

Notes

• This is a Display — no Target Devices dropdown.
• For very fast-changing values, turn off Animate changes so the needle keeps up.

Next

→ Metric — When you don’t need an arc, just a big number.

→ Horizontal / Vertical Level — When the value is a fill (tank, battery, signal).

→ Advanced Chart — When you want history, not just the current value.