velxio/WOKWI_LIBS.md

6.6 KiB

Wokwi Libraries Integration

Este proyecto utiliza los repositorios oficiales de Wokwi clonados localmente, lo que permite mantenerlos actualizados y compatibles con las últimas versiones.

Repositorios Clonados

📦 wokwi-elements

  • Ubicación: wokwi-libs/wokwi-elements/
  • Descripción: Web Components para elementos electrónicos (LEDs, resistencias, botones, etc.)
  • Repositorio: https://github.com/wokwi/wokwi-elements
  • Licencia: MIT
  • Versión actual: 1.9.2

🎮 avr8js

  • Ubicación: wokwi-libs/avr8js/
  • Descripción: Emulador de microcontroladores AVR8 (Arduino Uno, Mega, etc.) en JavaScript
  • Repositorio: https://github.com/wokwi/avr8js
  • Licencia: MIT
  • Versión actual: 0.21.0

🚀 rp2040js

  • Ubicación: wokwi-libs/rp2040js/
  • Descripción: Emulador de Raspberry Pi Pico (RP2040) en JavaScript
  • Repositorio: https://github.com/wokwi/rp2040js
  • Licencia: MIT
  • Uso: Futuro soporte para Raspberry Pi Pico

📝 wokwi-features

Configuración del Proyecto

Frontend (Vite)

El archivo vite.config.ts está configurado para usar los repositorios locales:

resolve: {
  alias: {
    'avr8js': path.resolve(__dirname, '../wokwi-libs/avr8js/dist/esm'),
    '@wokwi/elements': path.resolve(__dirname, '../wokwi-libs/wokwi-elements/dist/esm'),
  },
}

El archivo package.json referencia los paquetes locales:

{
  "dependencies": {
    "@wokwi/elements": "file:../wokwi-libs/wokwi-elements",
    "avr8js": "file:../wokwi-libs/avr8js"
  }
}

Actualizar las Librerías de Wokwi

Para mantener tu proyecto actualizado con las últimas versiones de Wokwi:

Opción 1: Actualizar todas las librerías (Recomendado)

cd e:\Hardware\wokwi_clon

# Script para actualizar todos los repositorios
./update-wokwi-libs.bat

Opción 2: Actualizar manualmente cada repositorio

cd e:\Hardware\wokwi_clon\wokwi-libs

# Actualizar wokwi-elements
cd wokwi-elements
git pull origin main
npm install
npm run build

# Actualizar avr8js
cd ../avr8js
git pull origin main
npm install
npm run build

# Actualizar rp2040js
cd ../rp2040js
git pull origin main
npm install
npm run build

Opción 3: Actualizar a una versión específica

cd e:\Hardware\wokwi_clon\wokwi-libs\wokwi-elements

# Ver versiones disponibles
git tag -l

# Cambiar a una versión específica
git checkout v1.9.2

# Recompilar
npm install
npm run build

Script de Actualización Automática

Se ha creado un script update-wokwi-libs.bat para facilitar las actualizaciones:

@echo off
echo ========================================
echo Actualizando Wokwi Libraries
echo ========================================
echo.

cd wokwi-libs

echo [1/3] Actualizando wokwi-elements...
cd wokwi-elements
git pull origin main
npm install
npm run build
cd ..

echo.
echo [2/3] Actualizando avr8js...
cd avr8js
git pull origin main
npm install
npm run build
cd ..

echo.
echo [3/3] Actualizando rp2040js...
cd rp2040js
git pull origin main
npm install
npm run build
cd ..

echo.
echo ========================================
echo Actualizacion completada!
echo ========================================
pause

Ventajas de Este Enfoque

Ventajas

  1. Actualización Fácil: Un simple git pull en cada repo te da las últimas mejoras
  2. Compatible con Wokwi: Si Wokwi agrega nuevos elementos o mejoras a avr8js, automáticamente estarán disponibles
  3. Control de Versiones: Puedes hacer checkout a versiones específicas si necesitas estabilidad
  4. Desarrollo: Puedes modificar el código fuente si necesitas hacer debugging o agregar features
  5. Sin Dependencia de npm: No dependes de que publiquen en npm

⚠️ Consideraciones

  1. Espacio en Disco: Los repositorios clonados ocupan más espacio (~200MB)
  2. Compilación: Debes compilar los repositorios después de actualizarlos
  3. Tiempo de Build: La primera instalación toma más tiempo

Componentes Wokwi Disponibles

Elementos Básicos

  • wokwi-led - LED de colores (red, green, blue, yellow, white, orange)
  • wokwi-resistor - Resistencia con código de colores
  • wokwi-pushbutton - Botón pulsador
  • wokwi-slide-switch - Interruptor deslizante
  • wokwi-potentiometer - Potenciómetro

Placas

  • wokwi-arduino-uno - Arduino Uno R3
  • wokwi-arduino-mega - Arduino Mega 2560
  • wokwi-arduino-nano - Arduino Nano
  • wokwi-pi-pico - Raspberry Pi Pico
  • wokwi-esp32-devkit-v1 - ESP32 DevKit v1

Pantallas

  • wokwi-lcd1602 - LCD 16x2 con I2C
  • wokwi-neopixel - LED RGB direccionable
  • wokwi-7segment - Display de 7 segmentos

Sensores

  • wokwi-dht22 - Sensor de temperatura y humedad
  • wokwi-hc-sr04 - Sensor ultrasónico de distancia
  • wokwi-pir-motion-sensor - Sensor de movimiento PIR
  • wokwi-photoresistor-sensor - Fotoresistor (LDR)

Otros

  • wokwi-servo - Servo motor
  • wokwi-membrane-keypad - Teclado matricial 4x4
  • wokwi-ir-receiver - Receptor infrarrojo
  • wokwi-ds1307 - Reloj de tiempo real (RTC)

Uso de los Componentes

Ejemplo: LED

import { LED } from './components/components-wokwi/LED';

<LED
  id="led1"
  x={300}
  y={200}
  color="red"
  value={true}  // LED encendido
/>

Ejemplo: Arduino Uno

import { ArduinoUno } from './components/components-wokwi/ArduinoUno';

<ArduinoUno
  x={50}
  y={50}
  led13={true}  // LED interno encendido
/>

Ejemplo: Botón

import { Pushbutton } from './components/components-wokwi/Pushbutton';

<Pushbutton
  x={400}
  y={300}
  color="red"
  onPress={() => console.log('Presionado!')}
  onRelease={() => console.log('Liberado!')}
/>

Troubleshooting

Error: "Module not found: @wokwi/elements"

Asegúrate de que los repositorios estén compilados:

cd wokwi-libs/wokwi-elements
npm install
npm run build

Error: "Cannot find module 'avr8js'"

Verifica que el alias en vite.config.ts esté correcto y que avr8js esté compilado.

Los componentes no se muestran

Asegúrate de importar @wokwi/elements en tus componentes:

import '@wokwi/elements';

Referencias