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:

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 data in the WebSerial Pro libraryCopy Anchor Link

Update the logo files in the src folder of the WebSerial Pro library:

1. In logo.cpp, replace the contents of WEBSERIAL_LIGHT_LOGO and WEBSERIAL_DARK_LOGO with the generated data.
2. In logo.h, update the array sizes in the extern declarations of WEBSERIAL_LIGHT_LOGO and WEBSERIAL_DARK_LOGO to match the new data.
3. In logo.h, set WEBSERIAL_LIGHT_LOGO_MIME and WEBSERIAL_DARK_LOGO_MIME to the MIME type of each image, for example "image/svg+xml" or "image/png".
4. Keep WEBSERIAL_LOGO_GZIPPED set to 1 when the data is gzip-compressed, or set it to 0 for uncompressed data.

#define WEBSERIAL_LOGO_GZIPPED      1
#define WEBSERIAL_LOGO_WIDTH        200u
#define WEBSERIAL_LOGO_HEIGHT       25u

#define WEBSERIAL_LIGHT_LOGO_MIME   "image/svg+xml"
extern const uint8_t WEBSERIAL_LIGHT_LOGO[1075];

#define WEBSERIAL_DARK_LOGO_MIME    "image/svg+xml"
extern const uint8_t WEBSERIAL_DARK_LOGO[1075];

Upload the firmwareCopy Anchor Link

Compile the sketch with the modified WebSerial Pro library and upload the firmware to your device.

Review the changesCopy Anchor Link

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

To adjust the logo size, change WEBSERIAL_LOGO_WIDTH and WEBSERIAL_LOGO_HEIGHT (in pixels) in logo.h and upload the firmware again. Clear the browser cache after each change.