Horizontal slider
A left-to-right slider. Dragging it in Live sends the number to the sketch when you release. The sketch can also publish a number to move the thumb.
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 Horizontal slider.
- Set Virtual pin to
8. - Set Min and Max, then press Enter or click away so the track updates. The sample range is 5 to 50.
- Set Color for the fill.
- Save the layout. In Live, drag the thumb and release. The number above the track is what gets sent.
- 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 |
|---|---|---|---|---|
min | Dashboard or sketch | Number, negatives allowed | 5 | Left or bottom end of the track. Press Enter or leave the field to apply it on the dashboard. |
max | Dashboard or sketch | Number, negatives allowed | 50 | Right or top end of the track. If max is less than min, the track swaps them. If they are equal, max becomes min + 1. |
color | Dashboard or sketch | #RRGGBB | #7aa2ff | Fill and thumb color. |
label | Dashboard or sketch | Plain text | Pump | Caption above the widget. On a round or oval button this is the caption, not the word on the button face. |
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 value sent to the sketch is the number as text, for example
27. Read it withparam.asInt()orparam.asFloat(). - Min and max from the sketch are strings:
BoxIO.setProperty(V8, "min", "5"). Negatives are allowed, such as-10. - A pin value outside the range is shown at the nearest end. Changing max from 50 to 90 lets a stored value of 80 sit on the track again.
- The sketch sends min and max again on the next boot, which replaces a range you typed until you edit it on the dashboard once more.
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(V8, "label", "H Slider");
BoxIO.setProperty(V8, "min", "5");
BoxIO.setProperty(V8, "max", "50");
BoxIO.setProperty(V8, "color", "#7aa2ff");
}
void loop() {
BoxIO.run();
}
BOX_WRITE(V8) {
int level = param.asInt();
Serial.println(level);
}
What you should see
The track runs from 5 to 50. Releasing the thumb prints that number. If the ends never change, the sketch is still publishing min and max.