📝 How to Use This Tool

🔗 Check real-world example in ESPBird - Customizing the Bird Sprite section.

This tool allows you to convert binary data into pixel art and vice versa. Here's how to get started:

• Select a Grid Size: Choose between 8x8, 16x16, or 32x32 from the dropdown to define your canvas size.
• Generate Binary: Click this button to create a binary representation of the current pixel canvas.
• Render Binary: Paste a binary string (only 1s and 0s) into the textarea and click "Render Binary" to turn it into pixel art on the canvas.
• Editing: You can modify the binary directly to update the pixel art, or vice versa!

Each "1" in the binary input turns into a filled (black) pixel, and each "0" becomes an empty (white) one.

How to Use the Generated Ouput

🧪 Minimal Example: Rendering a Sprite on SSD1306 OLED

This example provides the bare essentials to draw a bitmap on an SSD1306 OLED using the Adafruit library. Here's how to adapt it for your use case:

🔧 Modify These Constants First

• 🖼️ #define SPRITE_SIZE 16
  ➤ Change this to match the grid size you selected in the tool.
• 🖨️ #define OLED_WIDTH 128 and #define OLED_HEIGHT 64
  ➤ Adjust these values according to the resolution of your OLED display.
• 🔌 I2C Pin Configuration:

  #define I2C_SDA 13
  #define I2C_SCL 12

  ➤ Set these to match the actual GPIO pins you're using for I2C.
• 🖍️ Paste the Tool Output Replace the contents of sprite_frame[] with the generated output from the tool, like this:

  static const unsigned char PROGMEM sprite_frame[] = {
      // Tool-generated data here
  };

• 🎯 Control Sprite Position Set the posX and posY variables to choose where the image is drawn on the screen:

  int posX = 0;
  int posY = 0;

Code Example

#include <Wire.h>
#include <Adafruit_SSD1306.h>

// GPIO pins
#define I2C_SDA 13
#define I2C_SCL 12

// OLED display settings
#define OLED_WIDTH 128 // OLED width,  in pixels
#define OLED_HEIGHT 64 // OLED height, in pixels
Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1);

// Image grid size
#define SRITE_SIZE 16

// Image position
int posX = 0;
int posY = 0;

static const unsigned char PROGMEM sprite_frame[] = {
    // Generated Tool Output
    B00000000, B00000000, 
    B00000000, B00000000, 
    B00000000, B00000000, 
    B00000011, B11100000, 
    B01000100, B00010001, 
    B00101001, B01001010, 
    B00011000, B00001100, 
    B00001010, B00101000, 
    B00001001, B11001000, 
    B00000100, B00010000, 
    B00000011, B11100000, 
    B00000000, B00000000, 
    B00000000, B00000000, 
    B00000000, B00000000, 
    B00000000, B00000000, 
    B00000000, B00000000
};

void setup() {
    Wire.begin(I2C_SDA, I2C_SCL);

    if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
        Serial.println(F("OLED Initialization Failed"));
        for (;;);
    }

    oled.clearDisplay();
    oled.setTextColor(WHITE);

    const unsigned char *sprite = sprite_frame;
    oled.drawBitmap(posX, posY, sprite, SRITE_SIZE, SRITE_SIZE, WHITE);
}

This setup should give you a working baseline to display your custom graphics on an OLED. Tweak the positioning, sprite size, or I2C pins as needed for your project.