Designtool für Schmutzfangmatten mit fabric.js

---

Der Wunsch nach einem neuen Designtool

Bei uns im Büro kam der Wunsch auf, wieder ein Online-Designtool für unsere Produkte den Kunden zur Verfügung zu stellen. Die Kunden sollten eigene Bilder hochladen und selbst Texte hinzufügen können.

Zusätzlich sollte es eine Vorauswahl geben, z.B. welche Mattengröße und Qualität sie möchten. Und ganz wichtig: Unser Spotfarbsystem für die Druckanlage sollte integriert werden, damit ich bei der späteren Druckdatenvorbereitung die Farbwerte 1:1 übernehmen kann.

Die Herausforderung mit fertigen Tools

In den letzten Jahren hatten wir immer wieder solche Tools – von sehr einfach bis höchst komplex mit Shopanbindung. Dieses Mal sollte es aber wieder etwas einfacher sein und komplett unabhängig von anderen Systemen.

Sprich, keine Einbindung in unser vorhandenes CMS und auch keine Shopanbindung. Das war irgendwie ein Problem, denn so ziemlich jedes "fertige" Designtool auf dem Markt kam mit einer Shopanbindung daher.

Also musste eine individuelle Lösung her. Da der Aufwand für mich zu hoch schien, ein neues System zu entwickeln, habe ich Angebote eingeholt. Aber was soll ich sagen? Die Preise waren mir zu hoch. Ich verstehe vollkommen, dass sie gerechtfertigt waren – der Aufwand für eine Agentur ist dann doch etwas größer.

Die Entdeckung von fabric.js und der Einsatz von KI

Meine Neugierde, selbst eine Lösung zu finden, war geweckt. Ich habe nach einer schnellen Lösung gesucht, die ich umsetzen konnte. Nach einiger Recherche fand ich die JavaScript-Bibliothek fabric.js. Anhand der dort gezeigten Demos hatte ich schnell einige Ideen, wie ich das implementieren könnte.

Nachdem ich die Dokumentation grob überflogen hatte, sah ich, dass dies ein eher komplexeres Projekt werden würde. Daher beschloss ich, es mit KI zu versuchen. Da ich schon seit geraumer Zeit damit experimentiere, war es toll, hier an einem konkreten Projekt arbeiten zu können und meine Skills in dem Bereich zu festigen. Ich wollte nicht sehr viel Zeit investieren, da das Projekt im Unternehmen nicht die höchste Priorität hatte.

Kurzerhand sammelte ich die relevanten Daten für fabric.js – unter anderem die Dokumentation und einige Beispielskripte. Damit fütterte ich die KI und erstellte spezifische Prompts, mit denen ich jetzt Stück für Stück das Tool entwickeln würde.

Naja, Stück für Stück – nach knapp drei Stunden war bereits ein erstes funktionierendes Grundgerüst fertig. Ich war selbst ein wenig überrascht, wie schnell ich vorankam. Ich musste nicht mehr selbst in der Bibliothek nach den Objekten und Eigenschaften suchen; ich ließ das die KI für mich erledigen und aufgrund dessen hatte ich sehr schnell eine logische Strutkur aufgebaut, anhand der ich weiter aufbauen und ausbauen konnte.

Die erste Version und positive Resonanz

Kurze Zeit später war dann schon eine voll funktionsfähige interne Version online, die ich im Unternehmen präsentierte. Das Ergebnis kam gut an, sodass ich motiviert war, das Projekt finalisieren zu wollen.

Die fertige Version, inklusive einiger zusätzlicher Feinheiten wie z. B. Mindestgröße der Schrift (damit Kunden keine winzigen Texte übermitteln konnten), eine Rotierfunktion, ein Ebenensystem, eine phpMailer-Funktion für die Datenweitergabe und die grafische Oberfläche inklusive eines umfangreichen Tests, war dann in einer Woche fertig.

Am meisten Zeit habe ich vermutlich bei der Integration von phpMailer liegen gelassen, da ich das System bestimmt seit gut zehn Jahren nicht mehr verwendet hatte und etliche Daten vom Designer weitergegeben werden mussten, was ich jetzt nicht ganz so einfach fand. Ebenfalls viel Zeit habe ich in das Design investiert, nicht weil es gefordert war, sondern weil ich mich darin verloren habe :D.

Ich habe hier auch öfter privat experimentiert, vor allem mit der Oberflächenstruktur, wo ich mich dann letztendlich für eine einfache Transparenz entschieden habe um die Florstruktur ein wenig simuliert zu haben. Und irgendwie mussten fast alle Icons eine erklärendes Popup haben.

Nicht jede Arbeitsstunde muss man zwingend festhalten, vor allem dann nicht wenn man sich selbst aufgrund von kleinsten Details verliert, das Projekt aber schon fertig wäre.

Ein zweites Tool in englischer Sprache konnte ich dann sehr schnell nachreichen.

Die Herausforderung mit dem CMS - iFrame Einbindung

Ein klein wenig ärgerlich war dann leider der Fakt, dass ich das System nicht ganz sauber in unser CMS bekam. Aber das war mir bereits im Vorfeld bewusst – es wäre halt noch das i-Tüpfelchen gewesen.

Um das Projekt endlich abschließen zu können, habe ich's per iFrame eingebunden. Aber auch da muss ich sagen, habe ich einen interessanten Weg über einen GitHub-Eintrag gefunden, wie man das etwas sauberer integrieren kann – vor allem hinsichtlich der sonstigen Problematik auf mobilen Endgeräten welche ich beim testen bemerkte. Das war auch ein Grund, warum mich der Designprozess etwas länger gefordert hat, da ich alles auf den mobilen Geräten sauber am Laufen haben wollte.

Das Original musste ich wie folgt ein wenig anpassen:

function resizeIframe() {
  	var iframe = document.getElementById('designer-frame');
  	if (iframe) {
  		iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
  	}
  }

  document.getElementById('designer-frame').onload = function() {
  	var iframe = document.getElementById('designer-frame');
  	resizeIframe();
  	var observer = new iframe.contentWindow.MutationObserver(function() {
  		resizeIframe();
  	});

  	observer.observe(iframe.contentWindow.document.body, {
  		childList: true,
  		subtree: true,
  		attributes: true,
  		characterData: true
  	});
  };

• Das Skript passt die Höhe des iFrames dynamisch an die Höhe des Inhalts an, sobald der iFrame geladen ist. Soweit so gut die Idee von Github.
• Außerdem wird jetzt durch die Anpassung die Höhe des iFrames automatisch angepasst, wenn sich der Inhalt innerhalb des iFrames ändert (z. B. durch dynamische Inhaltsänderungen oder Benutzeraktionen).
• Dies geschieht durch die Verwendung des MutationObserver, der Änderungen am iFrame überwacht und darauf reagiert.
  Insbesondere das war bei mobilen Geräten beim Testlauf ein Problem, da sich die Höhe aufgrund der unterschiedlichen Mattengrößen immer wieder verändert hat.

Fazit

Insgesamt war es eine spannende Erfahrung, mit fabric.js und der Unterstützung von KI ein solches Projekt umzusetzen. Es hat mir gezeigt, wie mächtig diese Tools sein können und wie viel man in kurzer Zeit erreichen kann.

Den Designer kannst du dir hier gerne anschauen – und vielleicht bestellst du ja auch was! :D