DocsDisplay widget
Gauge
A Gauge shows a reading on a dial, so you can see at a glance how close it is to the limit: pressure, speed, tank level. Eight styles, with optional colour zones.
Device → dashboard8 stylesColor Zones1 Telemetry Point
Try it
Turn the sensor knob on the board and watch the dial follow. Try the styles, and turn on Use Color Zones to colour the dial by how high the value is.
SimulationLIVE
Dashboard
This is the real widget from the dashboard.
Your device
Sensor knob (0–10 bar)
The board measures and writes the Telemetry Point.
Gauge Configuration
Color Zones
Widget Color
Show
Zones or your own colourWith Use Color Zones on, the dial is green below half of the range, orange up to 80 % and red above. To pick your own colour, turn Color Zones off first; the settings window reminds you.
How to add and set up
- Open the dashboard in edit modeOpen the device and turn on editing.
- Add a GaugePress + on the right edge of the canvas and pick Gauge. Drag it into place.
- Open its settingsClick the gear icon on the widget. The window title shows the widget's name.
- Link a Telemetry PointUnder Linked Telemetry Points, pick the point your device writes and set its MIN, MAX and UNITS.
- Pick a styleChoose a Gauge Configuration style and decide on Use Color Zones. Save, then press DONE.
Settings
| Setting | What it does |
|---|---|
| Widget Name | The title shown on the widget. |
| Label Color | Colour of the title. |
| Linked Telemetry Points | The Telemetry Point (TP0, TP1…) the widget uses. Your device code uses the same point. |
| Gauge style | Full Circle · Semicircular Arc · Needle Style · Tick Ring · Segments · Scale Arc · Dot Ring · Sector Dial. Try all eight in the simulation above. Tick Ring, Segments, Scale Arc, Dot Ring and Sector Dial need Starter or above. |
| Use Color Zones | Colours the dial green, orange and red as the value rises. Needs Starter or above. |
| Telemetry Point settings | The linked point carries the DATA TYPE (integer or double), UNITS, MIN, MAX, DECIMALS and DEFAULT the widget uses. |
| Widget Color | Colour of the dial when Color Zones is off. |
| Hide widget Name / Telemetry Point / Widget Border | Hide the title, the TP badge or the outline around the tile. |
What it reads
The dial runs from the Telemetry Point's MIN to MAX; MIN and MAX are printed under it. This example uses 0 to 10 bar.
<50%
GreenBelow half of the range
<80%
OrangeGetting close
80%+
RedNear the limit
Send data from your device
A Gauge shows the number your board writes with SME.publish(). The examples use TP0.
C++ · Arduino
float bar = analogRead(A0) * 10.0 / 1023; // 0 to 10 bar SME.publish(TP0, bar);
unsigned long lastSend = 0;
void loop()
{
SME.run();
if (millis() - lastSend >= 2000) { // every 2 seconds
lastSend = millis();
SME.publish(TP0, analogRead(A0));
}
}#define DASHBOARD_ID "PROJ-XXXXXXXX"
#define DEVICE_TOKEN "SME-XXXX-XXXX-XXXX"
#define FIRMWARE_VERSION "1.0.0"
#define WIFI_SSID "your_wifi"
#define WIFI_PASS "your_pass"
#include <SMEIoT.h>
unsigned long lastSend = 0;
void setup()
{
Serial.begin(115200);
SME.begin(DASHBOARD_ID, DEVICE_TOKEN, FIRMWARE_VERSION,
WIFI_SSID, WIFI_PASS);
}
void loop()
{
SME.run(); // keeps the link alive
if (millis() - lastSend >= 2000) { // every 2 seconds
lastSend = millis();
float bar = analogRead(A0) * 10.0 / 1023; // 0 to 10 bar
SME.publish(TP0, bar); // Gauge on TP0
}
}Send when something changesDon't publish on every pass of
loop(). Send when the value changes, or on a timer, for example every one or two seconds.These are snippets. Your sketch also needs #include <SMEIoT.h>, SME.begin(...) in setup() and SME.run() in loop(). The full sketch tab shows a complete example; see the SDK quick start for more.
Related widgets
Was this page helpful?