Branding

Prepare the logosCopy Anchor Link

Create or obtain the logo you want to display. Use SVG (recommended), PNG or JPG, and optimize the image to keep the file size small.

Prepare two versions of the logo, one for each theme. The light-theme logo should use darker colors and the dark-theme logo lighter colors, so that the logo remains legible in both themes.

Convert the logosCopy Anchor Link

Convert both logo images into byte arrays. The converter below generates ready-to-use logo.h and logo.cpp files with gzip-compressed data:

To convert the images manually instead, use the File2Raw utility, as described in the logo.cpp file of the ESP-DASH Pro library:

1. Open File2Raw and upload the image file.
2. Select Gzip Compress and Use PROGMEM (Arduino).
3. Click Convert and copy the generated data.

Repeat the procedure for the light-theme and the dark-theme logo.

Replace the logo files in the ESP-DASH Pro libraryCopy Anchor Link

If you used the converter, replace logo.h and logo.cpp in the src folder of the ESP-DASH Pro library with the downloaded files. If you converted the images manually, update the existing files:

1. In logo.cpp, replace the contents of DASH_LOGO_LIGHT and DASH_LOGO_DARK with the generated data.
2. In logo.h, update the array sizes in the extern declarations of DASH_LOGO_LIGHT and DASH_LOGO_DARK to match the new data.
3. In logo.h, set DASH_LOGO_LIGHT_MIME and DASH_LOGO_DARK_MIME to the MIME type of each image, for example "image/svg+xml" or "image/png".
4. Keep DASH_LOGO_GZIPPED set to 1 when the data is gzip-compressed.

#define DASH_LOGO_LIGHT_MIME        "image/svg+xml"
#define DASH_LOGO_DARK_MIME         "image/svg+xml"
#define DASH_LOGO_GZIPPED     1
#define DASH_LOGO_WIDTH       158
#define DASH_LOGO_HEIGHT      32

extern const uint8_t DASH_LOGO_LIGHT[1983];

extern const uint8_t DASH_LOGO_DARK[1961];

Upload the firmwareCopy Anchor Link

Compile the sketch with the modified ESP-DASH Pro library and upload the firmware to your device.

Review the changesCopy Anchor Link

Open the dashboard in a browser. The dashboard switches between the light and dark logos according to the active theme.

To adjust the logo size, change DASH_LOGO_WIDTH and DASH_LOGO_HEIGHT in logo.h and upload the firmware again. Clear the browser cache after each change.