Circle meter

A gauge arc from a start degree to an end degree. 0 is straight up and degrees go clockwise. The default runs from the lower left to the lower right.

Sample pin: V2

Set it up on the server

1. Sign in to the Box IO dashboard and open the project that uses this device key.
2. Turn on Edit.
3. In Edit, add Circle meter.
4. Set Virtual pin to 2.
5. Set Min and Max to the same range the sketch will send. The sample below is 0 to 200.
6. Set Start and End in degrees, from 0 to 360. 0 is straight up. 90 is the right, 180 is the bottom, and 270 is the left. The colored arc travels clockwise from Start to End.
7. Leave Start at 225 and End at 135 for a normal gauge: it begins at the lower left and ends at the lower right. Set both to the same number, or use 0 and 360, for a full circle.
8. Choose Color by. Percentage of max uses 0–100. Raw data values uses the number itself.
9. Use Add division and Remove under Color by. One division is a single color for the whole gauge. Fifteen is the most. With two or more, the number beside each color is the point where that color starts.
10. Save the layout, then open Live.
11. Flash the sketch below with the same device key, host, and port 5923. Keep BoxIO.run() in loop().

Properties

Sketch values are always strings, including numbers: BoxIO.setProperty(V2, "max", "200").

Formatting

• Start 225 and end 135 sweep clockwise across the top, from the lower left to the lower right. That is about 270 degrees of arc, with the gap at the bottom.
• The same start and end, or start 0 and end 360, draw a full circle. The fill still begins at Start.
• The dashboard holds 1 to 15 color divisions. One division paints the gauge in that color. Extra divisions change the color when the reading reaches each number.
• Sketch color stops are one string: at:#hex pieces joined by ;. No spaces are required. Example: 0:#2ee0c5;50:#f5b942;100:#ff5d73.
• With colorMode percentage and min 0 max 200, a reading of 100 is 50 percent, so the 50 stop is the one that applies.
• With colorMode values, a stop of 50 matches the raw reading 50, not 50 percent.
• The number in the middle is the raw reading. Whole numbers print as integers. Other numbers print with one decimal.

Sketch

Paste the device key over bx_paste_your_device_key_here. Wi-Fi boards include BoxIOEsp32.h. Ethernet boards use the same calls with an EthernetClient.

#define BOXIO_AUTH "bx_paste_your_device_key_here"
#define WIFI_SSID  "your-ssid"
#define WIFI_PASS  "your-password"
#define BOXIO_HOST "localhost"
#define BOXIO_PORT 5923

#include <BoxIOEsp32.h>

void setup() {
  BoxIO.begin(BOXIO_AUTH, WIFI_SSID, WIFI_PASS, BOXIO_HOST, BOXIO_PORT);
BoxIO.setProperty(V2, "label", "Circle Lab");
  BoxIO.setProperty(V2, "min", "0");
  BoxIO.setProperty(V2, "max", "200");
  BoxIO.setProperty(V2, "startDeg", "225");
  BoxIO.setProperty(V2, "endDeg", "135");
  BoxIO.setProperty(V2, "color", "#2ee0c5");
  BoxIO.setProperty(V2, "colorMode", "values");
  BoxIO.setProperty(V2, "colorStops", "0:#2ee0c5;50:#f5b942;100:#ff5d73");
  BoxIO.virtualWrite(V2, 72);
}

void loop() {
  BoxIO.run();
static uint32_t last = 0;
  if (millis() - last < 1000) return;
  last = millis();
  static int n = 0;
  n = (n + 3) % 180;
  BoxIO.virtualWrite(V2, n);
}

What you should see

The arc starts at the lower left and fills clockwise toward the lower right as the number climbs. The color changes when the reading passes a stop. A sketch setProperty for startDeg, endDeg, min, max, or colorStops replaces the dashboard value until you edit that field again.