Demo-Anwendungsbeispiele

Endroid/QrCode SvgWriterCompact

QR-Code Writer Class zum Rendern optimierter SVG Vektorgrafiken

Das modul Endroid/QrCode liefert flexibel und performant gültiges SVG Markup. Leider zeigen sich bei Einbindung im Browser, wie auch in diversen Grafikprogrammen, unschöne Darstellungsmängel. Die neue SvgWriterCompact class implementiert das Writer Interface und behebt diese Mängel. Zudem wird die Dateigröße des resultierenden SVG drastisch reduziert.

Device Log Report Demo

Visualisierung von Geräte-Messdaten

Diese Demo zeigt beispielhaft die statistische Auswertung und grafische Darstellungen von Messdaten einer Heizungsanlage. Ein Schwerpunkt ist die intrinsisch voll responsive Umsetzung der SVG-Liniendiagramme, die sich ohne Zuhilfenahme von Javascript Observern dynamisch an beliebige Layoutbreiten anpassen und somit auch im mobilen Bereich noch eine sinnvolle Darstellung der Charts bei gleichbleibender Höhe der Y-Achsen ermöglichen.

Data Handling Demo

CSV-Import, Datenbearbeitung, Reportgenerierung und CSV-Export

Diese Demo zeigt beispielhaft typische Bestandteile einer datenzentrierten Administrationsanwendung. Grundlage ist eine CSV-Datei mit ca. 5.200 Artikel-Datensätzen. Die CSV-Datei wird in eine sqlite-Datenbank importiert und somit die Datensätze zur schnellen Auflistung und Änderung verfügbar gemacht. Neue Datensätze können nach gleichen Schema erstellt und der Datenbestand ganz oder teilweise wieder nach CSV exportiert werden. Zusätzlich können Reports mit grafischen SVG-Charts dynamisch aus den Daten generiert werden. Die Benutzeroberfläche ist voll responsive und in wichtigen Teilen in Richtung accessibility optimiert.

Vue Dynamic Data Forms Demo

Daten, die Formulare erzeugen, die Daten erzeugen

Diese Demo zeigt ein allgemeines Dateneingabemodul ähnlich einer Excel Tabelle, mit dem ein Redakteur möglichst zeitsparend und fehlerreduziert die Rohdaten einpflegen kann. Vue.js eignet sich hervorragend zur dynamischen Datenbindung von variablen Formulareingabeelementen an variable, hierarchisch strukturierte Model-Properties zur Laufzeit.

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.

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.