Felder ausfüllen — Vorschau aktualisiert sich live. SVG-basiert, druckbar und als JPG speicherbar.
Dieses Script ist ein spezialisiertes Web-Tool zur Erstellung von druckfertigen Filamentetiketten für den 3D-Druckbereich. Es basiert auf einer Kombination aus modernem HTML5, CSS3 und JavaScript und nutzt SVG (Scalable Vector Graphics) für eine hochauflösende, skalierbare Vorschau der Etiketten.
Die Benutzeroberfläche ist responsiv gestaltet und ermöglicht eine intuitive Eingabe aller relevanten Parameter wie Materialtyp, Farbname, Farbton (mit Farbwähler), Durchmesser, Netto- und Bruttogewicht, Drucktemperaturen, Artikelnummer (SKU) sowie Hersteller-Links und individuelle Hinweise. Jede Eingabe wird in Echtzeit in der Vorschau aktualisiert, was eine unmittelbare visuelle Kontrolle und Anpassung ermöglicht.
Zur Erweiterung der Funktionalität wird die bewährte JavaScript-Bibliothek qrcodejs eingebunden, die automatisch QR-Codes generiert. Diese QR-Codes verlinken entweder auf die Hersteller-URL oder auf die Artikelnummer, was eine einfache digitale Nachverfolgung und Informationsbereitstellung ermöglicht.
Der Export der Vorschau erfolgt als hochqualitatives JPG-Bild, das durch das Zeichnen des SVG-Inhalts und des QR-Codes auf ein HTML5-Canvas realisiert wird. Dabei werden alle visuellen Elemente inklusive Farbfeld und QR-Code korrekt zusammengesetzt. Zusätzlich ist eine optimierte Druckfunktion integriert, die ausschließlich die Vorschau für den Druck auswählt und alle anderen UI-Elemente ausblendet, um ein sauberes Druckergebnis zu gewährleisten.
Das Script ist so konzipiert, dass es auf verschiedenen Geräten und Bildschirmgrößen performant und optisch konsistent funktioniert. Die Verwendung von SVG garantiert eine verlustfreie Skalierung, während CSS-Medienabfragen für eine optimale Darstellung auf mobilen Geräten sorgen.
Insgesamt bietet dieses Tool eine technisch robuste, flexible und benutzerfreundliche Lösung für die professionelle Kennzeichnung von 3D-Druck-Filamenten, die sowohl für Entwickler als auch für Anwender mit Fokus auf Präzision und Effizienz konzipiert ist.