Toggle Button Card

An interactive toggle button component that switches between two states (1 or 0), providing binary input functionality through a clickable interface on the 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.

💡

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() {
  ...
}