Wokwi — Simulateur interactif

Exploration de l'écosystème Wokwi : embed, éléments visuels, et stratégie d'intégration.

Architecture : deux outils complémentaires

MontageViewer (custom)

✅ Contrôle total du step-by-step pédagogique
✅ Highlighting des trous connectés
✅ Fonctionne 100% offline
✅ Style intégré au design Electro-Lab
❌ Pas de simulation de circuit
❌ Breadboard custom (pas Wokwi natif)

Wokwi Embed (iframe)

✅ Simulation interactive complète
✅ Breadboard native + composants alignés
✅ Code Arduino modifiable en live
✅ Résultat visuel (LEDs s'allument, etc.)
❌ Nécessite internet
❌ Dépendance au service Wokwi

Stratégie recommandée : Utiliser le MontageViewer pour les guides pas-à-pas dans les chapitres, puis proposer un « Essaie toi-même » avec un embed Wokwi pour expérimenter.

Démo : Simulateur Wokwi embarqué

Ces simulations tournent directement dans le navigateur via un iframe vers wokwi.com. Clique sur ▶ Start pour lancer la simulation.

Trois LEDs clignotent à des intervalles différents. Simulation complète avec code Arduino.

Bac à sable : projet vierge

Un Arduino UNO vierge prêt à être câblé. Idéal pour l'atelier « Essaie toi-même ».

Format diagram.json de Wokwi

Le simulateur Wokwi utilise un format JSON déclaratif pour définir les circuits. Notre MontageViewer s'en inspire mais avec un DSL adapté à la pédagogie (steps, highlighting).

Éléments @wokwi/elements disponibles

Le package @wokwi/elements fournit des web components SVG. Ce sont des rendus visuels sans simulation — pas de breadboard dans ce package.