Branding

Prepare logos

First, you need to create or obtain the logo image you want to display on the dashboard. Ensure that the logo image is in a suitable format, such as a SVG (recommended) / PNG or JPG file and make sure your image is optimized & small in file size.

Ideally you should use 2 different versions of the same logo which will be used for light and dark mode. The light logo should have darker colors, while the dark logo should have lighter colors. This will ensure that the logo is visible and looks good in both light and dark themes.

Convert logos

Once you have prepared your logo image files, you need to convert these logos into byte arrays. Please use the below utility to easily convert your logo images into ready-to-use logo files for ESP-DASH Pro:

This conversion utility is provided as-is, without warranty and liability of any kind. Branding including logos and images, may be subject to copyright and trademark laws. Ensure you have the necessary rights or permissions to use any branding elements in your project.

Replace logo files inside ESP-DASH Pro library

After downloading the converted logo files, you need to replace the existing logo files in the ESP-DASH Pro library with your new logo files.

1. Extract the downloaded ZIP file containing the converted logo files.
2. Replace the existing logo.h and logo.cpp files in the ESP-DASH Pro library with the new files from the extracted ZIP.

Upload firmware

After making these changes, compile and upload the firmware with modified ESP-DASH Pro library to your device.

Review Changes

Once you have uploaded the firmware, open your ESP-DASH Pro dashboard again in a web browser to see the changes. The dashboard will automatically switch between light or dark logos based on the current theme.

To adjust the logo size, you can directly modify the DASH_LOGO_WIDTH and DASH_LOGO_HEIGHT values in the logo.h file and re-upload the firmware. Make sure to clear the browser cache again after making these changes.