Horizontal Level

A horizontal bar that fills as the value grows. Use it for tank levels, signal strength, charge state — anything that lives on a 0-to-max axis.

[image] Horizontal Level on canvas at 70 %, gradient fill, value displayed in the center

What it does

Horizontal Level shows a number as a horizontal fill bar. Three styles — Solid, Gradient, Segmented — each with its own visual character. Optional value display, optional external pointer indicator (Top / Bottom positions), and optional threshold zones that change the bar color when the value crosses defined points.

When to use it

• Tank level — Range 0–100, unit %, thresholds at 20 % (red) and 80 % (green).
• Battery indicator — Range 0–100, segmented style with 10 segments.

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

5. Indicator

Only when Value position is Top or Bottom.

6. Colors · Bar

When Style is Solid or Segmented.

6 bis. Colors · Gradient

When Style is Gradient.

7. Colors · Bar (Gradient companion)

When Style is Gradient — second block.

8. Thresholds

A dynamic list of value-color pairs that color zones along the bar.

For each threshold:

Plus per-threshold action:

Plus list-level action:

States and behavior

[image] Three styles side by side — Solid 30 %, Gradient 70 %, Segmented 50 %

The bar fills from left to right. Out-of-range values are clamped to the bar’s edge. Thresholds apply visual color zones — useful to surface alarm levels without writing color logic in your sketch.

In code

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

instant.hLevel("water_tank").setValue(75.0);

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 water_tank matches the one you set on your Horizontal Level in the app.

[gif] Horizontal Level on the dashboard filling and emptying as the ESP32 reads an ultrasonic sensor

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 readUltrasonic() {
  // Replace with your real HC-SR04 read (cm)
  return 5.0f + (random(0, 250) / 10.0f);
}

void pushTank() {
  if (!instant.connected()) return;
  float distanceCm = readUltrasonic();
  float fillPct = map(distanceCm * 10, 300, 50, 0, 1000) / 10.0f;
  instant.hLevel("water_tank").setValue(constrain(fillPct, 0.0f, 100.0f));
}

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

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 readUltrasonic() {
  // Replace with your real HC-SR04 read (cm)
  return 5.0f + (random(0, 250) / 10.0f);
}

void pushTank() {
  if (!instant.connected()) return;
  float distanceCm = readUltrasonic();
  float fillPct = map(distanceCm * 10, 300, 50, 0, 1000) / 10.0f;
  instant.hLevel("water_tank").setValue(constrain(fillPct, 0.0f, 100.0f));
}

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

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.
• Indicator section only appears when Value position is Top or Bottom.
• Color sections change layout based on Style: Solid and Segmented share one Colors · Bar section; Gradient has Colors · Gradient + a separate Colors · Bar for background, border, text.

Next

→ Vertical Level — Same widget, oriented vertically.

→ Gauge — When the arc form fits better than a bar.

→ Advanced Chart — When you want the level’s history, not just the current state.