86 lines
2.8 KiB
Markdown
86 lines
2.8 KiB
Markdown
# Example Projects
|
|
|
|
This folder contains the preview images for the 8 example projects in the gallery.
|
|
|
|
## Available Examples
|
|
|
|
| ID | Title | Category | Difficulty | Components |
|
|
|----|-------|----------|------------|------------|
|
|
| `blink-led` | Blink LED | basics | beginner | Arduino Uno |
|
|
| `traffic-light` | Traffic Light | basics | beginner | 3 LEDs (R/Y/G) |
|
|
| `button-led` | Button Control | basics | beginner | Button + LED |
|
|
| `fade-led` | Fade LED (PWM) | basics | beginner | 1 LED |
|
|
| `serial-hello` | Serial Hello World | communication | beginner | Arduino Uno |
|
|
| `rgb-led` | RGB LED Colors | basics | intermediate | RGB LED |
|
|
| `simon-says` | Simon Says Game | games | advanced | 4 LEDs + 4 buttons |
|
|
| `lcd-hello` | LCD 20x4 Display | displays | intermediate | LCD 2004 |
|
|
|
|
Each example includes:
|
|
- Complete Arduino sketch code
|
|
- Component definitions with positions
|
|
- Wire connections with pin names and colors
|
|
|
|
The examples are defined in `frontend/src/data/examples.ts` and rendered in the `ExamplesGallery.tsx` gallery with category and difficulty filters.
|
|
|
|
## How to Create Screenshots
|
|
|
|
### Method 1: Manual Capture (Recommended)
|
|
|
|
1. Load the example in the editor (http://localhost:5173/examples)
|
|
2. Click the example to load it
|
|
3. Adjust the canvas zoom if needed
|
|
4. Use a screenshot tool to capture only the simulator area
|
|
5. Save the image with the corresponding name
|
|
|
|
### Method 2: Using DevTools
|
|
|
|
1. Open the example in the browser
|
|
2. Open DevTools (F12)
|
|
3. Go to the console and run:
|
|
```javascript
|
|
const canvas = document.querySelector('.canvas-content');
|
|
html2canvas(canvas).then(canvas => {
|
|
const link = document.createElement('a');
|
|
link.download = 'example-name.png';
|
|
link.href = canvas.toDataURL();
|
|
link.click();
|
|
});
|
|
```
|
|
|
|
## File Names
|
|
|
|
Files must follow the example ID:
|
|
|
|
- `blink-led.png` — Blink LED
|
|
- `traffic-light.png` — Traffic Light
|
|
- `button-led.png` — Button Control
|
|
- `fade-led.png` — Fade LED
|
|
- `serial-hello.png` — Serial Hello World
|
|
- `rgb-led.png` — RGB LED Colors
|
|
- `simon-says.png` — Simon Says Game
|
|
- `lcd-hello.png` — LCD 20x4 Display
|
|
|
|
## Recommended Dimensions
|
|
|
|
- **Width**: 800px
|
|
- **Height**: 500px
|
|
- **Format**: PNG with dark background (#1e1e1e)
|
|
|
|
## Current Placeholder
|
|
|
|
While no images are available, a placeholder is shown with:
|
|
- Category icon (large emoji)
|
|
- Number of components (cyan blue)
|
|
- Number of wires (yellow)
|
|
- Gradient background with dashed border
|
|
|
|
## Adding a New Example
|
|
|
|
1. Add the definition in `frontend/src/data/examples.ts` with:
|
|
- `id`, `title`, `description`, `category`, `difficulty`
|
|
- `code`: Complete Arduino sketch
|
|
- `components[]`: Type, position, properties
|
|
- `wires[]`: Connections with `startPinName`, `endPinName`, `color`
|
|
2. (Optional) Capture a screenshot and save it here as `{id}.png`
|
|
3. The example will automatically appear in the gallery with category and difficulty filtering
|