Round button
A round on/off button. The caption is the label. The word on the face is textOn or textOff. A click sends the on or off value to the sketch.
Set it up on the server
- Sign in to the Box IO dashboard and open the project that uses this device key.
- Turn on Edit.
- In Edit, add Round button.
- Set Virtual pin to
6. - Label is the caption above the button. On text and Off text are the words on the face.
- Set Value sent when on and Value sent when off. The sample uses
goand0. - Set the two background colors and the two text colors.
- Save the layout, then open Live and click the button.
- Flash the sketch below with the same device key, host, and port
5923. KeepBoxIO.run()inloop().
Properties
Sketch values are always strings, including numbers: BoxIO.setProperty(V2, "max", "200").
| Property | Where to set it | Format | Example | Effect |
|---|---|---|---|---|
label | Dashboard or sketch | Plain text | Round | Caption above the button. This is not the word drawn on the face. |
textOn | Dashboard or sketch | Plain text | Go | Word on the face while the pin equals the on value. |
textOff | Dashboard or sketch | Plain text | Idle | Word on the face while the pin equals the off value. |
onValue | Dashboard or sketch | Exact text the pin must match | go | Clicking the button while it is off sends this string to the device. |
offValue | Dashboard or sketch | Exact text the pin must match | 0 | Clicking the button while it is on sends this string. Default is 0. |
sendValue | Dashboard or sketch | Same text as onValue | go | Older name for the on value. If onValue is empty, sendValue is used. |
colorOn | Dashboard or sketch | #RRGGBB | #2ee0c5 | Face background when on. |
colorOff | Dashboard or sketch | #RRGGBB | #314057 | Face background when off. |
textColorOn | Dashboard or sketch | #RRGGBB | #071018 | Face text color when on. |
textColorOff | Dashboard or sketch | #RRGGBB | #e8eef8 | Face text color when off. |
hideLabel | Dashboard | On or off | checked | Hides the caption. Button face text, meter numbers, and label text stay visible. |
fontSize | Dashboard | Whole number 8 to 160, or blank for automatic size | 28 | Text size in pixels inside the widget. |
opacity | Dashboard | 10% to 100% | 70% | Lets an overlapping widget show through. 100% is solid. |
Formatting
- The face is on only when the pin text equals onValue. It is off when the pin text equals offValue. If it equals neither, empty,
0,false,off, andnoare off, and any other text is on. - A sketch
setPropertyfor label, textOn, or textOff replaces what you typed until you edit that same field on the dashboard. The dashboard edit holds until the sketch sends that property again. - Do not put the caption in textOn. Label and face text are separate.
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 "boxio.krmsproducts.net"
#define BOXIO_PORT 5923
#include <BoxIOEsp32.h>
void setup() {
BoxIO.begin(BOXIO_AUTH, WIFI_SSID, WIFI_PASS, BOXIO_HOST, BOXIO_PORT);
BoxIO.setProperty(V6, "label", "Round");
BoxIO.setProperty(V6, "textOn", "Go");
BoxIO.setProperty(V6, "textOff", "Idle");
BoxIO.setProperty(V6, "onValue", "go");
BoxIO.setProperty(V6, "offValue", "0");
BoxIO.setProperty(V6, "sendValue", "go");
BoxIO.setProperty(V6, "colorOn", "#2ee0c5");
BoxIO.setProperty(V6, "colorOff", "#314057");
BoxIO.setProperty(V6, "textColorOn", "#071018");
BoxIO.setProperty(V6, "textColorOff", "#e8eef8");
}
void loop() {
BoxIO.run();
}
BOX_WRITE(V6) {
if (String(param.asStr()) == "go") {
digitalWrite(2, HIGH);
} else {
digitalWrite(2, LOW);
}
}
What you should see
The caption reads Round. The face reads Go while the pin is go, and Idle while the pin is 0. Clicking sends go or 0 to BOX_WRITE(V6). If the face always says Go, the sketch is still sending textOn on boot.