Rendering

Das rendering des Simulators erfolgt über eine SVG Grafik.

Vorteile gegenüber gerenderte Bilder:

• Skalierbar
• Über CSS zu stylen, dadurch u.a. Themes (hell, dunkel) möglich
• Interaktiv via direkte Unterstützung von Maus-Events
• einfach über Javascript zu modifizieren
• große Browser-Unterstützung

Hintergrund

Die eigentlich Simulator-Oberfläche kann über die normalen SVG Funktionalität und CSS nahezu beliebig gestaltet werden.

Hintergrundbilder, Muster oder ähnliches sind kein Problem.

Bitte hierzu die entsprechenden SVG Tutorials konsultieren, eine vollständige Erklärung würde hier den Rahmen sprengen.

Komponenten

Die enzelnen Komponenten haben jeweils eine eigene SVG-Datei für die Darstellung.
Diese können ebenso beliebig komplex gestaltet werden und über CSS gestaltet werden.

Einzige Einschränkung ist, dass das äußerste Element der SVG-Datei die id "root" haben muss.
Das Element sowie alle darin enthaltenen werden zur Darstellung verwendet.

Die id wird dann durch die jeweilige id der Komponente ersetzt und kann darüber dann auch angesprochen
und per Javascript modifierz werden. Z.B. durch weitere CSS-Klassen, direktes styling etc.

Des weiteren sollte beachtet werden, dass das Zentrum (der Koordinatenursprung) bei 0,0 liegt. D.h. ein 20 Einheiten breites Element geht von -10 bis +10.

Verkabelung

Die Verkabelung selbst ist eine SVG-Polygon-Line <polyline>, die Verbindungspunkte sind jeweils Kreise <circle>. Diese können ebenfalls per CSS umgestaltet werden.

Die Simulator-Engine vergibt hier z.B. die Klassen "low" oder "high" je nach Zustand. Die können per CSS geändert werden.

Weiter zu Interaktivität