Cards
You are reading the documentation for ESP-DASH v4.x.x, which is no longer the latest release. View the v5.x.x documentation.Color Picker Card
Let users select a color and receive it as a hex string on the ESP-DASH Pro v4 dashboard.
ESP-DASH Pro feature. This functionality is available only in the commercial edition of ESP-DASH.The color picker card lets the user select a color and returns it as a hex color string. Use it to set LED colors, display themes and similar parameters. For background on hex color notation, see HTML hex colors.
Constructor
Card colorPicker(&dashboard, COLOR_PICKER_CARD, "LED Color");Prop
Type
Callback
The callback fires when the user selects a color on the dashboard. hex is the hex string of the selected color.
Call update() with the received value and then dashboard.sendUpdates() inside the callback. Otherwise the dashboard does not register the input and the card remains in its waiting state.
colorPicker.attachCallback([&](const char* hex) {
Serial.println("Color: " + String(hex));
colorPicker.update(hex);
dashboard.sendUpdates();
});Methods
update()
Sets the selected color using a hex color string. Call dashboard.sendUpdates() afterwards to push the change to connected clients.
colorPicker.update(const char* value);
colorPicker.update(const String &value);Example
#include <Arduino.h>
#if defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#elif defined(ESP32)
#include <WiFi.h>
#include <AsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <ESPDash.h>
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
AsyncWebServer server(80);
ESPDash dashboard(&server);
Card colorPicker(&dashboard, COLOR_PICKER_CARD, "LED Color");
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.println("WiFi connection failed");
return;
}
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
colorPicker.attachCallback([&](const char* hex) {
Serial.println("Color: " + String(hex));
colorPicker.update(hex);
dashboard.sendUpdates();
});
server.begin();
}
void loop() {
// ...
}