PWDer/assets/icon_sources/README.md

PWDer icon drawing mechanism

PWDer stores its icons in program memory under a pwder_style::icon32 struct (see /include/icons.h). The struct contains following data:

.bitmap[3072] (uint8_t)

This is a byte array containing RGB data of the icon, pixel by pixel. 32 x 32 canvas * 3 bytes for each color = 3072 bytes.

.mask[1024]

This is a bool array containing a mask, telling the push_icon function whether the pixel should be drawn or not. It is useful when a transparent background has to be drawn.

• If the value is set to true, the pixel will be masked (will not be drawn).
• If the value is set to false, the pixel will not be masked (will be drawn).

Using your own icons

The requirement is that the icon size is 32 x 32 pixels.

1. Using your favorite raster graphic editing program, create a 24-bit 32 x 32 BMP file: the colored icon that will be displayed.

2. Create another, monochrome 32 x 32 BMP file: the mask that will hide the background or anything that should be transparent.

   • Fill masked area with white pixels and unmasked area with black pixels.

3. Write a script to convert the RGB BMP to C++ array:

   • Structure:

         /* Red byte */, /* Green byte */, /* Blue byte */, /* Red byte */, /* Green byte */, /* ... */
     

   • Example:

         0x00, 0x00, 0x80, 0xFF, 0xFF, 0xFF, /* ... */
     

4. Convert the mask BMP to C++ array, converting black pixels to false and white ones to true:

   • Example:

         true, true, false, false, false, true, false, /* ... */
     

(I will include the scripts here as well soon)

5. Replace data in icons.cpp

       const pwder_style::icon32 icon_name PROGMEM = {
           .bitmap = {
               0x00, 0x00, 0x80, 0xFF, 0xFF, 0xFF, /* ... */
           },
           .mask = {
               true, true, false, false, false, true, false, /* ... */
           },
       };
   

6. Recompile, and now you have a custom icon.