Skip to main content

Toggle Button

Button Card PreviewButton Card Preview

Button card adds a interactive toggle button to your dashboard. This provides you with a simple 1 or 0 input from your dashboard.

Initializer

/* 
Button Card
Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, BUTTON_CARD, "Test Button");

Callback

Button card requires a callback function which will be executed when we receive a input from our dashboard. In this example, we will use the attachCallback function and provide a lambda function with a boolean argument.

In the case of button card, the value sent by your dashboard will be opposite of your current value. For Example: If your button is set to 0, then clicking that button on dashboard will trigger this callback with 1.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
We provide our attachCallback with a lambda function to handle incomming data
`value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](int value){
Serial.println("[Card1] Button Callback Triggered: "+String((value == 1)?"true":"false"));
card1.update(value);
dashboard.sendUpdates();
});

Updater

card1.update(1);
card1.update(0);

Reference

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Button card initializer */
Card button(&dashboard, BUTTON_CARD, "Test Button");


void setup() {
...

/* Button card callback */
button.attachCallback([&](int value){
Serial.println("Button Callback Triggered: "+String((value == 1)?"true":"false"));
/* Button card updater - you need to update the button with latest value upon firing of callback */
button.update(value);
/* Send update to dashboard */
dashboard.sendUpdates();
});
}

void loop() {
...
}