Image Card

This feature is only available in ESP-DASH Pro

The Image Card displays an image on your dashboard. Useful for QR codes, status indicators, or any visual info.

Initializer

To create an image card in ESP-DASH v5, use the dash::ImageCard class.


dash::ImageCard image(dashboard, "My Image Card");

Methods

`setImage(const char* url)`

Set the image URL to display.


image.setImage("/img/example.png");

Signature: void setImage(const char* url)
Parameters:
- const char* url — The image URL to display.
Returns: void

`image()`

Get the current image URL.


const char* url = image.image();

Signature: const char* image()
Parameters: None
Returns: const char* — The current image URL.

`setImageSize(dash::ImageSize size)`

Set the image size. Options are dash::ImageSize::LG (default) or dash::ImageSize::XL.


image.setImageSize(dash::ImageSize::XL);

Signature: void setImageSize(dash::ImageSize size)
Parameters:
- dash::ImageSize size — The image size to set.
Returns: void

`imageSize()`

Get the current image size.


dash::ImageSize size = image.imageSize();

Signature: dash::ImageSize imageSize()
Parameters: None
Returns: dash::ImageSize — The current image size.

Reference

Below is a reference code showing how to integrate this widget in a real project, including initialization, value updates, and callback usage.


// ...
 
dash::ImageCard image(dashboard, "My Image Card");
 
void setup() {
  // ...
 
  // Set image URL
  image.setImage("/img/example.png");
  // Optionally set image size
  image.setImageSize(dash::ImageSize::XL);
}
 
void loop() {
  // ...
}