Vertical Level

The vertical version of Horizontal Level. Same options, oriented vertically — better for tank visualizations, thermometer feels, anything where up-and-down reads more naturally.

[image] Vertical Level on canvas at 60 %, gradient bottom-to-top, value displayed at the top

What it does

Same model as Horizontal Level — three styles (Solid, Gradient, Segmented), value display options, threshold-based color zones, optional external pointer (Left or Right positions). The fill goes from bottom to top; the gradient (when chosen) runs from start color at the bottom to end color at the top.

When to use it

• Reservoir level — Range 0–100 cm, segmented style for a fuel-gauge look.
• Vertical thermometer — Range -10 to 50 °C, gradient blue → red.

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 Left or Right.

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 60 %, Gradient 40 %, Segmented 70 %

The bar fills from bottom to top. With Gradient style, the colors transition from start (bottom) to end (top), so the visible gradient at any fill level is anchored to the bar’s bottom.

In code

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

instant.vLevel("room_temp").setValue(readTemp());

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

[gif] Vertical Level on the dashboard rising and falling as the ESP32 reads a temperature 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 readTemp() {
  // Replace with your real sensor read (°C)
  return 18.0f + (random(0, 100) / 10.0f);
}

void pushTemp() {
  if (!instant.connected()) return;
  instant.vLevel("room_temp").setValue(readTemp());
}

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 readTemp() {
  // Replace with your real sensor read (°C)
  return 18.0f + (random(0, 100) / 10.0f);
}

void pushTemp() {
  if (!instant.connected()) return;
  instant.vLevel("room_temp").setValue(readTemp());
}

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.
• Indicator section only appears when Value position is Left or Right (opposite of Horizontal Level, which uses Top/Bottom).

Next

→ Horizontal Level — Same widget, oriented horizontally.

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

→ Bar Chart — For comparing several values side by side.