Custom 16x4 LCD Character Generator

This project provides a simple and effective way to design, simulate, and display custom characters on a standard 16x4 character LCD using an Arduino.

It consists of two main parts:

1. simulation.html: An interactive web-based simulator. You can visually design your 5x8 pixel characters on a 16x4 grid and instantly get the byte code required by the Arduino.
2. main.ino: An example Arduino sketch that demonstrates how to take the generated byte code, load it into the LCD's CG-RAM, and display your custom characters.

🚀 Features

• Visual Character Designer: A "what-you-see-is-what-you-get" (WYSIWYG) editor. Just open the .html file in any browser.
• 16x4 Grid Simulation: Lays out all 64 character slots of your display, allowing you to design multiple characters in context.
• Instant Byte Code Generation: As you click pixels, a "Binary Arrays" display updates in real-time, showing the exact code you need.
• Click-to-Copy: Simply click on any binary array in the simulator to copy the formatted code (e.g., {'B01110', ...}) to your clipboard.
• Animation-Ready: The Arduino's CG-RAM can store up to 8 custom characters at a time. This example shows how to load them, and you can extend this concept to create simple animations by updating the character definitions in real-time.

⚙️ How It Works: CG-RAM

Standard character LCDs (like those using the HD44780 controller) have a special memory area called Character Generator RAM (CG-RAM).

• This memory allows you to define and store up to 8 custom characters at any given time (mapped to memory slots 0-7).

• Each character is defined by a 5x8 pixel grid.

• The simulation.html file lets you design these 5x8 characters and translates your design into an array of 8 bytes. Each byte represents one of the 8 rows, and its 5 least significant bits represent the 5 pixels in that row.

• The main.ino sketch uses the lcd.createChar(slot, data) function to load your byte array (data) into a specific CG-RAM slot (0-7).

• You can then display your custom character by "writing" its slot number: lcd.write(byte(0)) prints the character from slot 0.

📖 How to Use This Project

Here is a step-by-step guide to creating and displaying your own custom symbol.

1. Prerequisites

• Arduino IDE
• An Arduino board (e.g., Arduino Uno, Nano, ESP32)
• A 16x4 Character LCD Display
• Breadboard and hook-up wires
• A 10k potentiometer (for LCD contrast)

2. Install the LCD Library

The main.ino sketch requires the LiquidCrystal library. This library comes pre-installed with the standard Arduino IDE, so you typically do not need to download it.

If for some reason you don't have it, you can install it through the IDE:

1. Open the Arduino IDE.
2. Go to Sketch > Include Library > Manage Libraries...
3. In the search bar, type LiquidCrystal.
4. Find the official library (usually "LiquidCrystal by Arduino, Adafruit") and click Install.

3. Step 1: Design Your Character (HTML Simulator)

1. Download the simulation.html file from this repository.
2. Open it in any modern web browser (like Chrome, Firefox, or Edge).
3. You will see a large 16x4 grid (representing the LCD) and a "Binary Arrays" grid at the bottom.
4. Each square in the main grid contains a 5-column by 8-row sub-grid.
5. Click on the small squares to toggle their state. The default (blue) state is '0', and the toggled (white) state is '1'.
6. As you click, the corresponding display in the "Binary Arrays" section will update live.

4. Step 2: Get the Byte Code

1. Once you are happy with your design in one of the 5x8 grids, find its corresponding [row, col] box in the "Binary Arrays" section.
2. Click that box. The formatted array (e.g., {B01010, B11111, ...}) will be automatically copied to your clipboard.

5. Step 3: Add the Code to main.ino

1. Open the main.ino sketch in your Arduino IDE.

2. Define a new byte array at the top of your file, similar to the batteryIcon and heartIcon examples.

3. Paste the code you copied from the simulator.

   byte myNewIcon[8] = { B01110, B11111, B10001, B10001, B10001, B10001, B11111, B00000 }
   

6. Step 4: Load and Display the Character

Inside the setup() function of main.ino:

1. Load the character: Use lcd.createChar() to assign your new icon to one of the 8 available slots (0-7).

   // Load your new icon into slot 2
   lcd.createChar(2, myNewIcon);

2. Display the character: Use lcd.setCursor(col, row) to move the cursor, then use lcd.write(byte(slot)) to print the character from the slot you just used.

   // Print your new icon at column 5 on line 3
   lcd.setCursor(5, 3);
   lcd.write(byte(2));

7. Step 5: Upload and Run

1. Wire your LCD to your Arduino. The main.ino sketch assumes the standard pinout: LiquidCrystal lcd(12, 11, 5, 4, 3, 2);
2. Upload the sketch to your Arduino board.
3. Adjust the potentiometer for contrast, and you should see your custom character on the display!

💡 Advanced Usage: Animation

You can create simple animations by repeatedly redefining the 8 custom characters in the loop() function.

For example, you could create 8 different "frames" of a running character. By loading these frames one after another into the same CG-RAM slot (e.g., slot 0) with a small delay() in between, any lcd.write(byte(0)) already on the screen will appear to animate.

🔧 Future Adaptability

The simulation.html file is currently built for a 16x4 display with 5x8 character grids. The JavaScript and CSS can be modified to support other display sizes (e.g., 20x4, 16x2) or even different character pixel dimensions (e.g., 8x8 for some graphical displays). This would require changes to the createGrid and generateBinaryArray functions.

📄 License

This project is open-source and available under the MIT License.