3.0 KiB

Raw Blame History

Example Projects

Esta carpeta contiene las imágenes de preview para los 8 proyectos de ejemplo de la galería.

Ejemplos Disponibles

ID	Título	Categoría	Dificultad	Componentes
`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

Cada ejemplo incluye:

Código Arduino completo
Definiciones de componentes con posiciones
Conexiones de cables con pines y colores

Los ejemplos se definen en frontend/src/data/examples.ts y se renderizan en la galería ExamplesGallery.tsx con filtros por categoría y dificultad.

Cómo Crear Screenshots

Método 1: Captura Manual (Recomendado)

Carga el ejemplo en el editor (http://localhost:5173/examples)
Haz click en el ejemplo para cargarlo
Ajusta el zoom del canvas si es necesario
Usa una herramienta de captura de pantalla para capturar solo el área del simulador
Guarda la imagen con el nombre correspondiente

Método 2: Usando DevTools

Abre el ejemplo en el navegador
Abre DevTools (F12)
Ve a la consola y ejecuta:

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();
});

Nombres de Archivos

Los archivos deben seguir el ID del ejemplo:

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

Dimensiones Recomendadas

Ancho: 800px
Alto: 500px
Formato: PNG con fondo oscuro (#1e1e1e)

Placeholder Actual

Mientras no haya imágenes, se muestra un placeholder con:

Icono de la categoría (emoji grande)
Número de componentes (azul cian)
Número de cables (amarillo)
Fondo degradado con borde punteado

Agregar un Nuevo Ejemplo

Agregar la definición en frontend/src/data/examples.ts con:
- id, title, description, category, difficulty
- code: Sketch Arduino completo
- components[]: Tipo, posición, propiedades
- wires[]: Conexiones con startPinName, endPinName, color
(Opcional) Capturar screenshot y guardarlo aquí como {id}.png
El ejemplo aparecerá automáticamente en la galería con filtrado por categoría y dificultad

3.0 KiB Raw Blame History