Dot-to-code

This project is a web-based graphical tool designed to help developers, students, and hardware enthusiasts create bitmap patterns for LCD and OLED displays. It bridges the gap between visual design and embedded programming by allowing users to draw pixel-based characters or images and instantly convert them into code compatible with microcontroller libraries such as U8g2 and Adafruit GFX.

With a clean interface, responsive layout, and engaging features like sound effects and drag-to-draw functionality, the tool offers a fun yet productive experience for prototyping and display interfacing projects.

Key Features:

Interactive Pixel Editor

• Users can define custom screen resolutions (e.g., 16×2 for LCD, 128×64 for OLED).

• A dynamic grid is generated where each pixel or dot can be toggled on or off.
  
  

Click-and-Drag Drawing

• Users can draw freely on the grid by clicking and dragging, speeding up the design process.

• Automatically detects whether the user is activating or clearing pixels.
  
  

Live Code Generation

• • Pixel data is converted into HEX byte arrays in real time.

  • The output is directly usable in Arduino and other microcontroller environments using:

    1. U8g2::drawBitmap()

    2. display.drawBitmap() from Adafruit GFX
       
       

Copy & Export

• Users can quickly copy the generated code to their clipboard.

• Character rows and positions are labeled clearly (e.g., Row: 1, Column: 3).

Mode Selection (Home Page)

• A central index.html page allows users to choose between LCD and OLED editors, offering flexibility for different use cases.
  
  

Use Cases:

• Designing custom characters for 16×2 LCD displays.

• Drawing icons and splash screens for OLED interfaces.

• Generating font sets or UI elements for embedded devices.

• Teaching students about how graphics and display memory work on microcontrollers.
  
  

Tech Stack:

• HTML, CSS, and JavaScript (fully client-side; no backend)

• Compatible with all modern browsers

• Sound support via HTML <audio> tag
  
  

Potential Future Enhancements:

• Import and convert black-and-white images.

• Export .h or .c files directly.

• Add support for different memory arrangements (e.g., horizontal vs vertical byte packing).

• Add grid zooming, undo/redo, and brush/eraser tools.