Branding

Prepare logo

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.

Convert logo to a byte array

To include the logo in your library, you’ll need to convert the image into a byte array.

1. Go to File2Raw utility ( I created this utility a few years back for the purpose of converting files into byte array for C++ applications ).
2. Select your logo.
3. Select “Gzip Compress” & “Use PROGMEM (Arduino)”.
4. Click “Convert”.

Modify logo.h

1. Open the logo.h file in your ESP-DASH library source code.

2. Locate the DASH_LOGO byte array declaration, which should look like this:

   extern const uint8_t DASH_LOGO[];

3. Replace the length of the DASH_LOGO array with your custom logo’s byte array length.

4. Locate the DASH_LOGO_MIME variable, which defines the MIME type of your logo image. By default, it is set to image/png. If your logo is in a different format (e.g., JPEG), update the DASH_LOGO_MIME variable to the appropriate MIME type.

5. Set DASH_LOGO_WIDTH & DASH_LOGO_HEIGHT according to your desired size which will be displayed on the webpage.

Modify logo.cpp

1. Open the logo.cpp file in your ESP-DASH Pro library source code.

2. Replace the contents of the DASH_LOGO array with your custom logo’s byte array generated in File2Raw utility.

Upload firmware

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