D-pad

Four arrows in a controller pad. Hold an arrow to write its pin. Let go to write the released value.

Sample pin: V1 up, V2 right, V3 down, V4 left

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 D-pad.
Set Up pin, Right pin, Down pin, and Left pin. Each arrow uses its own virtual pin. Adding a D-pad picks four free pins.
Set Value when pressed and Value when released. The usual pair is 1 while held and 0 when released.
Set Pressed color and Pad color if you want different colors than the defaults.
Save the layout, then open Live. Holding an arrow writes that pin. Releasing it writes the released value. Edit shows the pin number on each arm.
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").

Property	Where to set it	Format	Example	Effect
`pinUp`	Dashboard	Virtual pin 0 to 127	`1`	Pin written by the up arrow. The widget pin matches this one.
`pinRight`	Dashboard	Virtual pin 0 to 127	`2`	Pin written by the right arrow.
`pinDown`	Dashboard	Virtual pin 0 to 127	`3`	Pin written by the down arrow.
`pinLeft`	Dashboard	Virtual pin 0 to 127	`4`	Pin written by the left arrow.
`onValue`	Dashboard	Text sent while held	`1`	Written to that arrow’s pin on press.
`offValue`	Dashboard	Text sent when released	`0`	Written to that arrow’s pin when the pointer leaves the arrow.
`colorOn`	Dashboard	#RRGGBB	`#2ee0c5`	Color of an arrow while it is held, or while its pin matches the pressed value.
`colorOff`	Dashboard	#RRGGBB	`#314057`	Color of the pad and of arrows that are not held.
`label`	Dashboard or sketch	Plain text	`Pump`	Caption 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.
`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

Each direction is its own virtual pin. The sketch reads them with BOX_WRITE on that pin.
A press sends the pressed value. A release sends the released value. Letting go is a write, the same as a press.
If a pin is left empty, it steps off the up pin: right is up plus 1, down is up plus 2, and left is up plus 3, staying inside 0 to 127.

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);

}

void loop() {
  BoxIO.run();

}

BOX_WRITE(V1) {
  // Up. param.asStr() is 1 while held, 0 when released.
  Serial.print("up ");
  Serial.println(param.asStr());
}

BOX_WRITE(V2) {
  Serial.print("right ");
  Serial.println(param.asStr());
}

BOX_WRITE(V3) {
  Serial.print("down ");
  Serial.println(param.asStr());
}

BOX_WRITE(V4) {
  Serial.print("left ");
  Serial.println(param.asStr());
}

What you should see

Holding up writes 1 to V1. Releasing writes 0. The other three arrows do the same on their own pins. The held arrow lights with the pressed color.