Box IO

Self-hosted IoT for Arduino and ESP32.

Vertical line

A vertical stroke on the page. Change its color and its width. Drag the box to change how tall it is.

Sample pin: none

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 Vertical line.
  4. Set Color to the stroke color.
  5. Set Width to the thickness in pixels, from 1 to 64. A new line is 8 pixels.
  6. Drag the corner to make the line taller or shorter. The box width does not change the stroke. Width does.
  7. Background starts transparent, so only the stroke shows. Pick another background if you want a fill behind it.
  8. Save the layout. The line is drawn by the dashboard. It does not use a virtual pin.
  9. 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").

PropertyWhere to set itFormatExampleEffect
colorDashboard#RRGGBB#e8eef8Stroke color.
lineWidthDashboardWhole number 1 to 648Thickness of the stroke in pixels.
backgroundDashboard#RRGGBB or the word transparenttransparentFill of the widget box. Transparent leaves only the stroke.
labelDashboard or sketchPlain textPumpCaption above the widget, taken from the label saved on that widget. A sketch setProperty for label does not rename it. On a round or oval button this is the caption, not the word on the button face.
hideLabelDashboardOn or offcheckedHides the caption. Button face text, meter numbers, and label text stay visible.
fontSizeDashboardWhole number 8 to 160, or blank for automatic size28Text size in pixels inside the widget.
opacityDashboard10% to 100%70%Lets an overlapping widget show through. 100% is solid.

Formatting

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);
// A vertical line is drawn on the dashboard.
  // Set its color and width in Edit. The sketch does not drive it.
}

void loop() {
  BoxIO.run();

}

What you should see

A vertical stroke in the color and width you set. Changing Width makes it thicker or thinner. Dragging the box makes it taller or shorter.