Image Card

The image card displays an image loaded from a URL. Use it for camera snapshots, QR codes, diagrams or status graphics.

ConstructorCopy Anchor Link

dash::ImageCard<T> card(dashboard, name, imageSize);

Template parameters:

dash::ImageCard image(dashboard, "Image");
dash::ImageCard imageXL(dashboard, "Image XL", dash::ImageSize::XL);

An overload without the dashboard argument creates the card without attaching it to a dashboard; attach it later with dashboard.add(card).

MethodsCopy Anchor Link

setValue()Copy Anchor Link

bool setValue(T url);

Sets the URL of the image to display. Returns true if the URL changed.

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

value()Copy Anchor Link

const T& value() const;

Returns the current URL. Call it only when hasValue() returns true.

setImageSize()Copy Anchor Link

bool setImageSize(dash::ImageSize size);

Sets the display size: dash::ImageSize::LG or dash::ImageSize::XL. Returns true if the size changed.

imageSize()Copy Anchor Link

dash::ImageSize imageSize() const;

Returns the current display size.

ExampleCopy Anchor Link

#include <Arduino.h>
#include <WiFi.h>              // ESP32; use the networking headers for your board
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <ESPDashPro.h>

AsyncWebServer server(80);
ESPDash dashboard(server);

dash::ImageCard image(dashboard, "Camera", dash::ImageSize::XL);

void setup() {
  // ... connect to Wi-Fi
  server.begin();

  image.setValue("https://example.com/snapshot.jpg");
  dashboard.sendUpdates();
}

void loop() {
  // ...
}

NotesCopy Anchor Link

• The browser loads the image directly from the URL. The URL must be reachable from the device viewing the dashboard, not only from the microcontroller.