Color Picker Card
Let users pick a color in the browser and receive it on the device as a hex string.
ESP-DASH Pro feature. This functionality is available only in the commercial edition of ESP-DASH.The color picker card opens the browser's native color picker and sends the selected color to the device as a hex string such as #ff0000. Use it to control RGB LEDs, light strips or any color setting.
Constructor
dash::ColorPickerCard(ESPDash& dashboard, const char* name);Prop
Type
The value type is always dash::string; the card takes no template parameters.
dash::ColorPickerCard colorPicker(dashboard, "Color Picker");An overload without the dashboard argument creates the card without attaching it to a dashboard; attach it later with dashboard.add(card).
Callback
void onChange(std::function<void(const std::optional<dash::string>& value)> callback);The callback fires when the user picks a color. Changes are debounced in the browser, so dragging across the picker produces one event after the user pauses for about 300 ms. value holds the color as a 7-character hex string (#rrggbb). Call setOptionalValue() (or setValue()) and dashboard.sendUpdates() inside the callback to store the color and keep the dashboard in sync.
colorPicker.onChange([](const std::optional<dash::string>& value) {
Serial.printf("Color: %s\n", value.value_or("").c_str());
colorPicker.setOptionalValue(value);
dashboard.sendUpdates();
});Methods
setValue()
bool setValue(dash::string value);Sets the current color. Use a hex string in the form #rrggbb. Returns true if the value changed.
colorPicker.setValue("#ff0000");setOptionalValue()
bool setOptionalValue(std::optional<dash::string> value);Sets the color from an optional value, as received in the callback. An empty optional clears the value. Returns true if the value changed.
value()
const dash::string& value() const;Returns the current color. Check hasValue() first if the color may not have been set yet.
Example
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <ESPDashPro.h>
AsyncWebServer server(80);
ESPDash dashboard(server);
dash::ColorPickerCard colorPicker(dashboard, "LED Color");
void setup() {
Serial.begin(115200);
// ... connect to WiFi
colorPicker.setValue("#2563eb");
colorPicker.onChange([](const std::optional<dash::string>& value) {
if (value.has_value()) {
// Convert "#rrggbb" to a 24-bit integer
uint32_t rgb = strtoul(value.value().c_str() + 1, nullptr, 16);
uint8_t r = (rgb >> 16) & 0xFF;
uint8_t g = (rgb >> 8) & 0xFF;
uint8_t b = rgb & 0xFF;
Serial.printf("R=%u G=%u B=%u\n", r, g, b);
}
colorPicker.setOptionalValue(value);
dashboard.sendUpdates();
});
server.begin();
}
void loop() {
// ...
}