Anwendungsbeispiele

SVG Pointer Koordinaten-Transformation Demo

DOMPoint Matrix Transformation auf skalierten SVG Vektorgrafiken

SVG Vektorgrafik kann sehr gut zur grafischen Umsetzung auch komplexerer dynamischer Vue Components eingesetzt werden. Bei der interaktiven Steuerung über pointer Events (mouse, touch) muss aber ein ggf. skaliertes lokales Koordinatensystem in einem SVG Element berücksichtigt werden.

WebSocket Sensor Map Demo

Diese Demo zeigt den bidirektionalen Datenaustausch zwischen clients über einen gemeinsamen Server in Echtzeit via WebSocket. Im Gegensatz zu klassischen pull Anwendungen, erfolgt die Aktualisierung jedes clients auch von Seiten des Servers (push), sobald dort von anderer Stelle Änderungen eingehen.

Dynamic Vue SVG Demo

Vue components im SVG / CSS Kontext.

Diese Demo zeigt anhand einer spielerischen Prozessvisualisierung, wie Vue components ihre gebundenen Daten mittels SVG auch grafisch aufwändiger visualisieren können.

Onepager Parallax Demo

Parallax für Desktop und mobile Endgeräte - auch iOS Safari

Der typische CSS Trick zur Umsetzung eines vereinfachten Parallax Seitenlayout greift leider nicht unter iOS / iPadOS Safari, da dieser Browser background-attachment:fixed immer noch nicht unterstützt.

Die hier gezeigte Lösung funktioniert auch auf den gängigen mobilen Endgeräten weitgehend ruckelfrei und bietet zudem durch eine Sekundäranimation einen verstärkten Parallax-Effekt beim Scrollen der Seite.

Datenaggregation Demo

Diese Demo zeigt, wie eine große Menge von Messdaten effizient zur Darstellung eines Diagramms gefiltert und geladen werden kann.

Die serverseitige Datenbasis ist eine SQLite Datenbankdatei mit ca. 175.000 Datensätzen aus einem realen Website-Log (Hits eines Kalendertages).

PWA Pizza-Shop Demo

Progressive Web Apps (PWA) sind schon länger ein Thema. Kernfeatures sollen Notifications und Web Push sein. Diese Demo-App zeigt am Beispiel eines fiktiven Pizza-Bestelldienstes, wie Nachrichten und Daten über Web Push zwischen unterschiedlichen Endgeräten zeitnah, bidirektional und anonym ausgetauscht werden können.

Zugleich ist dies auch ein Beispiel für eine voll mobiltaugliche UX mit responsivem Layout unter Verwendung von Vue 3.