Skip to content

Commit ea9c6a3

Browse files
CodeRandomMCCodeRandomMC
committed
Enhance Pixel2CPP with improved metadata, UI updates, and keyboard shortcuts
Updated index.html with enhanced meta tags for SEO and branding. Incremented package version to 1.2.0 and added repository and homepage details. Enhanced README with updated links and important usage notes. Improved Pixel2CPP UI with a new header design, sidebar tabs for settings and tools, and added keyboard shortcuts for better user experience. Updated PixelCanvas to support customizable background colors and simplified grid rendering logic. Refactored CSS for better styling consistency and added accessibility features.
1 parent e1c7c0f commit ea9c6a3

File tree

14 files changed

+1252
-321
lines changed

14 files changed

+1252
-321
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 CodeRandom
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
Pixel2CPP is a browser-based pixel art editor designed for Arduino and embedded display development. Draw your sprites, icons, and graphics, then export them as optimized C++ arrays ready to use with popular display libraries like Adafruit_GFX.
99

10-
🎮 **[Try it live](https://your-domain.com)** | 📖 **[Documentation](#usage-guide)** | 🐛 **[Report Issues](https://github.com/your-username/pixel-to-cpp/issues)**
10+
🎮 **[Try it live](https://coderandom.com/pixel-to-cpp)** | 📖 **[Documentation](#usage-guide)** | 🐛 **[Report Issues](https://github.com/CodeRandomMC/pixel-to-cpp/issues)**
1111

12-
![Pixel2CPP Screenshot](screenshot.png)
12+
![Pixel2CPP Screenshot](https://raw.githubusercontent.com/CodeRandomMC/pixel-to-cpp/main/screenshot.png)
1313

1414
## ✨ Key Features
1515

@@ -24,7 +24,7 @@ Pixel2CPP is a browser-based pixel art editor designed for Arduino and embedded
2424
## 🚀 Quick Start
2525

2626
### Using the Online Version (Recommended)
27-
1. Open [Pixel2CPP](https://your-domain.com) in your browser
27+
1. Open [Pixel2CPP](https://coderandom.com/pixel-to-cpp) in your browser
2828
2. Set your canvas size to match your display
2929
3. Choose your export format (see [Supported Formats](#supported-formats))
3030
4. Start drawing your pixel art
@@ -34,7 +34,7 @@ Pixel2CPP is a browser-based pixel art editor designed for Arduino and embedded
3434
### Running Locally
3535
```bash
3636
# Clone the repository
37-
git clone https://github.com/your-username/pixel-to-cpp.git
37+
git clone https://github.com/CodeRandomMC/pixel-to-cpp.git
3838
cd pixel-to-cpp
3939

4040
# Install dependencies
@@ -277,17 +277,26 @@ The tests validate:
277277
278278
Found a bug or have a feature request? We'd love to hear from you!
279279
280-
- 🐛 **Report bugs**: [Open an issue](https://github.com/your-username/pixel-to-cpp/issues)
281-
- 💡 **Request features**: [Start a discussion](https://github.com/your-username/pixel-to-cpp/discussions)
280+
- 🐛 **Report bugs**: [Open an issue](https://github.com/CodeRandomMC/pixel-to-cpp/issues)
281+
- 💡 **Request features**: [Start a discussion](https://github.com/CodeRandomMC/pixel-to-cpp/discussions)
282282
- 🔧 **Submit pull requests**: Fork, branch, and PR
283283
- 📖 **Improve docs**: Help make this guide even better
284284
285285
## 📄 License
286286
287287
MIT License - see [LICENSE](LICENSE) file for details.
288288
289+
**⚠️ Important Notice:** This software is provided **free of charge** for educational and personal use. While the MIT License allows commercial use, we strongly discourage selling or commercializing this software. This tool was created to help the Arduino and embedded development community, not for profit.
290+
291+
**Please respect the spirit of open source:**
292+
- ✅ Use freely for learning and personal projects
293+
- ✅ Modify and improve for your own needs
294+
- ✅ Share improvements with the community
295+
- ❌ Do not sell this software or charge for its use
296+
- ❌ Do not redistribute for commercial gain
297+
289298
Made with ❤️ by **CodeRandom** for the Arduino and embedded community.
290299
291300
---
292301
293-
**Need help?** Check out our [examples](examples/) directory or join the [community discussions](https://github.com/your-username/pixel-to-cpp/discussions).
302+
**Need help?** Check out our [examples](https://github.com/CodeRandomMC/pixel-to-cpp/tree/main/examples) directory or join the [community discussions](https://github.com/CodeRandomMC/pixel-to-cpp/discussions).

‎examples/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Pixel2CPP Examples
2+
3+
This directory contains example Arduino sketches and code snippets demonstrating how to use sprites and graphics generated with Pixel2CPP.
4+
5+
## Examples
6+
7+
### Basic Examples
8+
- `ssd1306_basic/` - Basic sprite display on SSD1306 OLED
9+
- `st7735_basic/` - Basic sprite display on ST7735 TFT
10+
- `ili9341_basic/` - Basic sprite display on ILI9341 TFT
11+
12+
### Advanced Examples
13+
- `sprite_animation/` - Animated sprites with multiple frames
14+
- `transparent_sprites/` - Using alpha channel for transparency
15+
- `sprite_masks/` - Using 1-bit alpha maps for masking
16+
17+
## Getting Started
18+
19+
1. Generate your sprite using Pixel2CPP
20+
2. Copy the generated `.h` file to the appropriate example directory
21+
3. Update the example code to use your sprite name
22+
4. Upload to your Arduino board
23+
24+
## Display Libraries Used
25+
26+
- **Adafruit_GFX** - Core graphics library
27+
- **Adafruit_SSD1306** - For OLED displays
28+
- **Adafruit_ST7735** - For ST7735 TFT displays
29+
- **Adafruit_ILI9341** - For ILI9341 TFT displays
30+
31+
## Contributing
32+
33+
Feel free to add your own examples! Please follow the existing directory structure and include a README for each example.

‎examples/ssd1306_basic/README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# SSD1306 Basic Example
2+
3+
This example demonstrates how to display a sprite generated with Pixel2CPP on an SSD1306 OLED display.
4+
5+
## Hardware Requirements
6+
7+
- Arduino Uno, Nano, or Pro Mini
8+
- SSD1306 OLED Display (128x64 or 128x32)
9+
- I2C connection (SDA, SCL pins)
10+
11+
## Wiring
12+
13+
Connect your SSD1306 OLED display to your Arduino:
14+
15+
| OLED Display | Arduino |
16+
|--------------|---------|
17+
| VCC | 3.3V |
18+
| GND | GND |
19+
| SDA | A4 |
20+
| SCL | A5 |
21+
22+
## Libraries Required
23+
24+
Install these libraries through the Arduino Library Manager:
25+
26+
1. **Adafruit GFX Library**
27+
2. **Adafruit SSD1306**
28+
29+
## Setup Instructions
30+
31+
1. **Generate your sprite** using Pixel2CPP:
32+
- Set canvas size to match your display (128x64 or 128x32)
33+
- Choose "1-bit Horizontal" or "1-bit Vertical" format
34+
- Draw your sprite
35+
- Export as "Arduino Code" or "Plain Bytes"
36+
37+
2. **Copy the generated file**:
38+
- Copy the generated `.h` file to this directory
39+
- Rename it to `my_sprite.h` or update the include statement in the sketch
40+
41+
3. **Update the sketch**:
42+
- If you used a different filename, update the `#include "my_sprite.h"` line
43+
- Update the sprite variable names if needed (e.g., `my_sprite_bits`, `my_sprite_w`, `my_sprite_h`)
44+
45+
4. **Upload to Arduino**:
46+
- Connect your Arduino
47+
- Select the correct board and port
48+
- Upload the sketch
49+
50+
## Expected Output
51+
52+
The sprite should appear centered on the OLED display. Open the Serial Monitor (9600 baud) to see status messages.
53+
54+
## Troubleshooting
55+
56+
- **Display not working**: Check wiring and I2C address (default is 0x3C)
57+
- **Wrong sprite size**: Make sure your sprite dimensions match the display
58+
- **Garbled display**: Verify you're using the correct format (1-bit for SSD1306)
59+
- **Memory errors**: Reduce sprite size or use more efficient packing
60+
61+
## Customization
62+
63+
- Change the display position by modifying the `x` and `y` variables
64+
- Add multiple sprites by including additional sprite files
65+
- Create animations by changing sprite position in the `loop()` function

‎examples/ssd1306_basic/my_sprite.h‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Sample sprite generated with Pixel2CPP
3+
*
4+
* This is an example of what a generated sprite file looks like.
5+
* Replace this with your actual sprite generated from Pixel2CPP.
6+
*/
7+
8+
#ifndef MY_SPRITE_H
9+
#define MY_SPRITE_H
10+
11+
// Sprite dimensions
12+
const uint8_t my_sprite_w = 32;
13+
const uint8_t my_sprite_h = 32;
14+
15+
// Sprite data (1-bit monochrome, horizontal packing)
16+
const uint8_t my_sprite_bits[] PROGMEM = {
17+
0xFF, 0xFF, 0xFF, 0xFF, // Row 0
18+
0xFF, 0x81, 0x81, 0xFF, // Row 1
19+
0xFF, 0x81, 0x81, 0xFF, // Row 2
20+
0xFF, 0x81, 0x81, 0xFF, // Row 3
21+
0xFF, 0x81, 0x81, 0xFF, // Row 4
22+
0xFF, 0x81, 0x81, 0xFF, // Row 5
23+
0xFF, 0x81, 0x81, 0xFF, // Row 6
24+
0xFF, 0x81, 0x81, 0xFF, // Row 7
25+
0xFF, 0x81, 0x81, 0xFF, // Row 8
26+
0xFF, 0x81, 0x81, 0xFF, // Row 9
27+
0xFF, 0x81, 0x81, 0xFF, // Row 10
28+
0xFF, 0x81, 0x81, 0xFF, // Row 11
29+
0xFF, 0x81, 0x81, 0xFF, // Row 12
30+
0xFF, 0x81, 0x81, 0xFF, // Row 13
31+
0xFF, 0x81, 0x81, 0xFF, // Row 14
32+
0xFF, 0x81, 0x81, 0xFF, // Row 15
33+
0xFF, 0x81, 0x81, 0xFF, // Row 16
34+
0xFF, 0x81, 0x81, 0xFF, // Row 17
35+
0xFF, 0x81, 0x81, 0xFF, // Row 18
36+
0xFF, 0x81, 0x81, 0xFF, // Row 19
37+
0xFF, 0x81, 0x81, 0xFF, // Row 20
38+
0xFF, 0x81, 0x81, 0xFF, // Row 21
39+
0xFF, 0x81, 0x81, 0xFF, // Row 22
40+
0xFF, 0x81, 0x81, 0xFF, // Row 23
41+
0xFF, 0x81, 0x81, 0xFF, // Row 24
42+
0xFF, 0x81, 0x81, 0xFF, // Row 25
43+
0xFF, 0x81, 0x81, 0xFF, // Row 26
44+
0xFF, 0x81, 0x81, 0xFF, // Row 27
45+
0xFF, 0x81, 0x81, 0xFF, // Row 28
46+
0xFF, 0x81, 0x81, 0xFF, // Row 29
47+
0xFF, 0x81, 0x81, 0xFF, // Row 30
48+
0xFF, 0xFF, 0xFF, 0xFF // Row 31
49+
};
50+
51+
#endif // MY_SPRITE_H

‎examples/ssd1306_basic/ssd1306_basic.ino‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
* Pixel2CPP - SSD1306 Basic Example
3+
*
4+
* This example demonstrates how to display a sprite generated with Pixel2CPP
5+
* on an SSD1306 OLED display.
6+
*
7+
* Hardware:
8+
* - Arduino Uno/Nano/Pro Mini
9+
* - SSD1306 OLED Display (128x64 or 128x32)
10+
* - I2C connection (SDA, SCL)
11+
*
12+
* Libraries Required:
13+
* - Adafruit_GFX
14+
* - Adafruit_SSD1306
15+
*
16+
* Instructions:
17+
* 1. Generate your sprite using Pixel2CPP
18+
* 2. Copy the generated .h file to this directory
19+
* 3. Update the #include statement below to use your sprite file
20+
* 4. Update the sprite name variables to match your sprite
21+
*/
22+
23+
#include <Adafruit_GFX.h>
24+
#include <Adafruit_SSD1306.h>
25+
#include "my_sprite.h" // Replace with your generated sprite file
26+
27+
#define SCREEN_WIDTH 128
28+
#define SCREEN_HEIGHT 64
29+
#define OLED_RESET -1
30+
#define SCREEN_ADDRESS 0x3C
31+
32+
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
33+
34+
void setup() {
35+
Serial.begin(9600);
36+
37+
// Initialize the OLED display
38+
if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
39+
Serial.println(F("SSD1306 allocation failed"));
40+
for(;;); // Don't proceed, loop forever
41+
}
42+
43+
Serial.println(F("SSD1306 initialized successfully"));
44+
45+
// Clear the display
46+
display.clearDisplay();
47+
48+
// Draw your sprite at the center of the screen
49+
int16_t x = (SCREEN_WIDTH - my_sprite_w) / 2;
50+
int16_t y = (SCREEN_HEIGHT - my_sprite_h) / 2;
51+
52+
display.drawBitmap(x, y, my_sprite_bits, my_sprite_w, my_sprite_h, WHITE);
53+
54+
// Update the display
55+
display.display();
56+
57+
Serial.println(F("Sprite displayed successfully"));
58+
}
59+
60+
void loop() {
61+
// The sprite is displayed once and stays on screen
62+
// Add any additional functionality here
63+
delay(1000);
64+
}

‎index.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
<!doctype html>
2+
<!--
3+
Pixel2CPP - Create pixel art and export Arduino-ready C++ code instantly
4+
5+
MIT License
6+
Copyright (c) 2025 CodeRandom
7+
8+
This software is provided free of charge for educational and personal use.
9+
Commercial use and redistribution must comply with the MIT License terms.
10+
-->
211
<html lang="en">
312
<head>
413
<meta charset="UTF-8" />
514
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
615
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Pixel2CPP - Pixel Editor to C++</title>
16+
<meta name="description" content="Pixel2CPP - Create pixel art and export Arduino-ready C++ code instantly. Made by CodeRandom." />
17+
<meta name="keywords" content="pixel art, arduino, c++, embedded, graphics, code generator" />
18+
<meta name="author" content="CodeRandom" />
19+
<title>Pixel2CPP - Pixel Art to C++ Code Generator | Made by CodeRandom</title>
820
<script src="https://cdn.tailwindcss.com"></script>
921
</head>
1022
<body>

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
{
22
"name": "pixel-to-cpp",
33
"private": true,
4-
"version": "0.0.0",
4+
"version": "1.2.0",
55
"type": "module",
6+
"description": "Create pixel art and export Arduino-ready C++ code instantly",
7+
"author": "CodeRandom",
8+
"license": "MIT",
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/CodeRandomMC/pixel-to-cpp.git"
12+
},
13+
"homepage": "https://coderandom.com/pixel-to-cpp",
614
"scripts": {
715
"dev": "vite",
816
"build": "vite build",

0 commit comments

Comments
 (0)