Image to C++ Code Generator - User Guide

This tool converts an image into C++ code that represents the pixel data. You can customize how the image is processed and generate code for use in embedded systems, displays, or other applications.

How to Use:

1. Upload an Image:
   • Click "Choose Image" to upload any image file (PNG, JPEG, etc.).
   • The image will appear in the preview area.
2. Adjust Settings:
   • Use the settings below to customize how the image is processed.
3. Generate Code:
   • The C++ code will automatically update as you change settings.
   • Copy the code or download it as a .h file.

Settings Explained:

1. Canvas Size

• Set the width and height of the output image in pixels.
• Example: 128x64 creates a 128-pixel wide and 64-pixel tall output.

2. Background Color

• Choose the background color for areas not covered by the image:
  • White: Fills empty areas with white.
  • Black: Fills empty areas with black.

3. Brightness Threshold

• Converts the image to black and white based on brightness:
  • Pixels darker than the threshold become black.
  • Pixels brighter than the threshold become white.
• Range: 0 (black) to 255 (white).

4. Invert Colors

• Toggle to swap black and white in the output image.

5. Scaling

• Control how the image fits into the canvas:
  • Original Size: Keeps the image at its original dimensions.
  • Fit to Canvas: Scales the image to fit within the canvas while maintaining aspect ratio.
  • Stretch: Scales the image to fill the canvas, ignoring aspect ratio.

6. Image Centering

• Center the image within the canvas:
  • Horizontal: Centers the image left-to-right.
  • Vertical: Centers the image top-to-bottom.

7. Output Format

• Choose how the pixel data is formatted:
  • C Array: Generates a C++ array (e.g., const uint8_t image_data[]).
  • Raw Bytes: Generates plain byte values.
  • Adafruit GFX Font: Creates a GFXbitmapFont formatted output. Used by a modified version of the Adafruit GFX library. GitHub project and example here.
    First ASCII character value is used only if a glyph identifier of length equal to 1 is not provided for each image. The value itself will be incremented by 1 for each glyph.

8. Draw Mode

• Choose how pixels are arranged in the output:
  • Horizontal: Pixels are stored row by row (left to right, top to bottom).
  • Vertical: Pixels are stored column by column (top to bottom, left to right).

Preview Area

• Displays how the image will look after applying all settings.
• Use this to fine-tune your parameters.

Output Code

• The generated C++ code appears in the text box.
• You can:
  • Copy to Clipboard: Click "Copy to Clipboard" to copy the code.
  • Download: Click "Download Code" to save the code as a .h file.

Example Use Case

If you're programming an LED matrix or OLED display:

1. Upload your logo or graphic.
2. Set the canvas size to match your display resolution (e.g., 128x64).
3. Adjust brightness and scaling to fit your needs.
4. Copy the generated code into your project.

Tips

• Use Fit to Canvas to automatically resize your image while keeping it proportional.
• Use Brightness Threshold to create clean black-and-white graphics for displays.
• Experiment with Invert Colors to see which version works best for your application.