CircuitJS – Elektronischer Schaltungssimulator im Browser

Habe schon öfter mal mit dem sehr netten Tool CircuitJS im Browser Schaltungen simuliert und wollte nun den nächsten Schritt wagen und CircuitJS auf meinem eigenen Server installieren um hier im Blog Schaltungen präsentieren zu können.

Basierend auf dem Open Source Repository https://github.com/sharpie7/circuitjs1 habe ich also ein Release von circuitjs1 erstellt. Das hat (fast) ohne Probleme wie im GitHub Repository beschrieben funktioniert. Fast deshalb, weil ich extra dafür noch das JDK 1.8 installieren musste da der GWT Compiler mit dem von mir genutzten AdoptOpenJDK 11 nicht funktioniert hat :(.

Das Deployment der HTML/CSS/JS und PHP Dateien unter https://circuitjs.jentsch.io/ hat dann ohne Probleme funktioniert.

  • Subdomain anlegen
  • Dateien kopieren
  • LetsEncrypt Zertifikate erstellen
  • Apache neu starten

Eine kleine Herausforderung war das noch das CORS Problem, da ich ja aus dem Browser heraus von https://circuitjs.jentsch.io/ auf https://www.jentsch.io/ zugreifen muss um Schaltungen, die ich unter https://www.jentsch.io/ veröffentlicht habe unter https://circuitjs.jentsch.io/ nutzen kann.
Um dies zu ermöglichen muss mein Server nun den Access-Control-Allow-Origin Header senden um dem Browser mitzuteilen, dass die Webseite https://circuitjs.jentsch.io/ auf https://www.jentsch.io/ zugreifen darf.
Dazu habe ich die Konfiguration jentsch.io.conf des Apache noch mal anpassen müssen. Folgende Zeile habe ich im <Directory> Block ergänzt.

Header set Access-Control-Allow-Origin "https://circuitjs.jentsch.io"

Damit wird die Access-Control-Allow-Origin Einstellung im Browser für https://circuitjs.jentsch.io/ so angepasst, dass der Zugriff auf https://www.jentsch.io/ erlaubt ist.

Hier also das Ergebnis

https://www.jentsch.io/wp-content/uploads/2022/01/high-current-switch-with-gpio.txt

Hinweis: Keine Angst, spielt ruhig ein wenig mit der Schaltung herum. Ihr könnt nichts kaputt machen. Nach jedem Refresh der Seite wird die ursprüngliche Schaltung wiederhergestellt.

Limitierungen

So toll es auch ist, simulierte Schaltungen hier im Browser live anzeigen lassen zu können, gibt es doch auch Schattenseiten. So habe ich mich in der Vergangenheit immer bemüht, die Beiträge so zu gestalten, dass sie auch auf dem Smartphone einigermaßen angezeigt werden können. Das ist hier nicht mehr so einfach möglich,