velxio/scripts/generate-example-screenshots.md

Generar Screenshots de Ejemplos

Debido a restricciones CORS del navegador, no podemos capturar el canvas automáticamente con toDataURL(). En su lugar, necesitamos screenshots manuales.

Método Rápido: Captura de Pantalla

1. Preparar el Navegador

cd frontend
npm run dev

Abre http://localhost:5173

2. Para Cada Ejemplo

1. Ve a http://localhost:5173/examples
2. Haz click en un ejemplo (ej: "Blink LED")
3. Espera a que se cargue en el editor
4. Ajusta el zoom del canvas si es necesario para que el circuito se vea bien centrado

3. Capturar Solo el Canvas

Windows (Win + Shift + S):

• Presiona Win + Shift + S
• Selecciona el área del simulador (panel derecho)
• La captura se guarda en el portapapeles

Guardar la imagen:

1. Abre Paint o cualquier editor
2. Pega (Ctrl + V)
3. Guarda como PNG en doc/examples/[nombre-ejemplo].png

4. Nombres de Archivo

Usa el ID del ejemplo:

• blink-led.png - Solo Arduino
• traffic-light.png - Arduino + 3 LEDs (rojo, amarillo, verde)
• button-control.png - Arduino + botón + LED
• fade-led.png - Arduino + LED azul
• serial-hello.png - Solo Arduino
• rgb-led.png - Arduino + LED RGB
• simon-says.png - Arduino + 4 LEDs + 4 botones

5. Actualizar el Código

Una vez tengas las imágenes, edita frontend/src/data/examples.ts:

{
  id: 'blink-led',
  title: 'Blink LED',
  description: 'Classic Arduino blink example - toggle an LED on and off',
  category: 'basics',
  difficulty: 'beginner',
  thumbnail: '/doc/examples/blink-led.png',  // ← Agregar esta línea
  code: `...`,
  // ... resto
}

Alternativa: Script Browser DevTools

Si prefieres algo más automatizado:

1. Abre el ejemplo en http://localhost:5173
2. Abre DevTools (F12)
3. Ve a la consola
4. Ejecuta:

// Tomar screenshot del canvas del simulador
const simulatorPanel = document.querySelector('.simulator-panel');
const rect = simulatorPanel.getBoundingClientRect();

// Usar la API de screenshot del navegador (Chrome/Edge)
chrome.tabs.captureVisibleTab(null, {format: 'png'}, function(dataUrl) {
  const link = document.createElement('a');
  link.download = 'example.png';
  link.href = dataUrl;
  link.click();
});

Nota: Este método requiere una extensión del navegador.

Dimensiones Recomendadas

• Ancho: 600-800px
• Alto: 400-600px
• Formato: PNG
• Fondo: El mismo del canvas (#1e1e1e)

Resultado Esperado

Cada tarjeta en /examples mostrará la screenshot real del circuito en lugar del placeholder genérico.

Limpieza (Opcional)

Una vez tengas las screenshots, puedes eliminar:

• frontend/src/utils/captureCanvasPreview.ts (ya no se necesita)
• frontend/src/utils/generateExamplePreview.tsx (SVG antiguo)