Branding
The portal serves its logo from the device itself, as a gzipped byte array in logo.h and logo.cpp. Replacing it is how you put your own product’s name at the top of the update page - no HTML or CSS involved.
The portal asks for one of two variants depending on the viewer’s colour scheme, so you supply a mark that reads on a dark background and one that reads on a light one:
| Route | Served as |
|---|---|
/ota/logo/dark | ELEGANTOTA_DARK_LOGO - shown in dark appearance |
/ota/logo/light | ELEGANTOTA_LIGHT_LOGO - shown in light appearance |
Replacing the logo
SVG is ideal - it stays sharp at any size and compresses far better than a bitmap - but a PNG or JPEG works too. None of this requires building the portal.
Prepare the logo
Create the image you want to display. Keep it small: it lives in flash and is sent to the browser on every visit. Draw a variant that reads on a dark background and one that reads on a light one.
Convert it to a byte array
- Go to the File2Raw utility.
- Select your logo.
- Tick Gzip Compress and Use PROGMEM (Arduino).
- Click Convert.
Do this once per variant if you want different light and dark artwork.
Modify logo.h
Open src/logo.h and update:
#define ELEGANTOTA_LOGO_GZIPPED 1 // 1 if you ticked Gzip Compress
#define ELEGANTOTA_LOGO_WIDTH 220 // display size in px
#define ELEGANTOTA_LOGO_HEIGHT 34 // display size in px
#define ELEGANTOTA_LIGHT_LOGO_MIME "image/svg+xml"
extern const uint8_t ELEGANTOTA_LIGHT_LOGO[2392]; // your array's length
#define ELEGANTOTA_DARK_LOGO_MIME "image/svg+xml"
extern const uint8_t ELEGANTOTA_DARK_LOGO[2390]; // your array's lengthSet the MIME type to match your file - image/png or image/jpeg if you did not use an SVG. Set the width and height to the proportions of your artwork; the portal draws the logo at exactly this size.
Modify logo.cpp
Open src/logo.cpp and replace the contents of ELEGANTOTA_LIGHT_LOGO and ELEGANTOTA_DARK_LOGO with the arrays File2Raw produced. The lengths declared in logo.h must match the arrays exactly.
Upload firmware
Compile and upload the firmware with the modified library.
Final words
Your logo now appears at the top of the portal, switching between variants as the viewer changes appearance.
Please note that 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.