Color Picker Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

With color picker card, you have an option to take an color input from user. This is particularly useful if you want to have an input for LED color, display color etc. Color picker card will return an hex string of color selected by user.

A bit more info on hex color values if you are not familiar with it: W3Schools Article

Initializer

/* 
  Color Picker Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, COLOR_PICKER_CARD, "Color Picker");

Callback

Color picker card requires a callback function which will be called when we receive a input from our dashboard. In our setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument. Whenever a user selects a color, this callback will be triggered with hex value of color.

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 and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  Example Value: mon,tue,wed,thu,fri,sat,sun
*/
card1.attachCallback([&](const char* hex){
  Serial.println("[Card1] Color Picker Triggered: "+String(hex));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater

You can also update the value inside color picker card using the same hex formula.

card1.update(const char* value);

card1.update(String value);

Reference

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

...

/* Color picker card initializer */
Card colorpicker(&dashboard, COLOR_PICKER_CARD, "Color Picker 1");


void setup() {
  ...

  /* Color picker callback */
  colorpicker.attachCallback([&](const char* hex){
    Serial.println("Color picker callback triggered: "+String(hex));
    /* Color picker card updater - you need to update the color picker with latest value upon firing of callback */
    colorpicker.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}