Fliesen Konfigurator

10 Räume, 627 Fliesen, 3 Verlegearten, 2 Fugenbreiten und 5 Fugenfarben luden zum spielerischen Entdecken und Durchsuchen des Produktumfanges ein.

Der Schweizer Baustoff- und Fliesenhändler HGC wollte seinen Kunden eine Möglichkeit bieten, sein umfangreiches Fliesensortiment zu durchsuchen und die Fliesen im Raum verlegt zu sehen. Wie schon in einem früheren Projekt für Bauwerk, zeichnete sich auch hier ab, dass nur wenige Menschen die Fähigkeit haben, visuell zu denken und sich anhand einer einzelnen Fliese vorstellen können, wie diese in einem Raum, an Wand oder Boden verlegt, aussieht. Daraufhin entwarfen wir einen interaktiven Fliesenkonfigurator der es ermöglichte, alle Produkte an Wand und Boden zu visualisieren. In den Ausstellungen und auf Messen konnte dieser Konfigurator in Präsentationssäulen genutzt werden. Des weiteren wurde der Konfigurator auch für das Internet, iPhone und iPad entwickelt.

Backend/Administrationssystem

Da sich das Sortiment laufend erweiterte, musste ein Administrationssystem geschaffen werden, das HGC die Möglichkeit bot, eigenständig und unkompliziert neue Artikel anzulegen. Um Redundanzen zu vermeiden und die riesige Datenmenge nicht doppelt pflegen zu müssen, haben wir das Administrationssystem an das bestehende ERP Warenwirtschaftssystem angebunden. Somit wurden alle Artikel, die im Warenwirtschaftssystem für den Export markiert wurden, mit all den mehrsprachigen Texten, den Preisen, den Lagerplätzen und den anderen Produktdetails automatisch ins Administrationssystem übernommen. Es musste nur mehr das Foto hinzugefügt werden.

Langsame Internetverbindungen und noch nicht ausgereifte Technologien für Echtzeitrendering auf allen Endgeräten führten uns zu der Entscheidung, alle Bilder vorab automatisiert zu rendern und dann optimiert für´s jeweilige Endgerät zur Verfügung zu stellen. Die Herausforderung dabei war es, die Unmenge an verschiedenen Kombinationen zu meistern.

Anlegen neuer Fliesen

Im Administrationssystem wurde ein neuer Artikel angelegt und mindestens ein Bild von der Fliese upgeloadet. Im Anschluss startete der Bildverarbeitungs- und Renderprozess: Um den gerenderten Boden-/Wandbelag möglichst echt darzustellen, war es notwendig, mehrere Fliesenmuster von einem Artikel zu haben. Da meist nur ein oder zwei Bilder zur Verfügung standen, wurden durch Spiegeln und Drehen des Originalbildes 8 Mutationen erzeugt. Aus diesen Einzelbildern wurden dann die einzelnen Texturen erzeugt und, auf der eigens dafür gebauten Renderfarm, gerendert. Nach Fertigstellung aller Einzelbilder wurde der Administrator darüber informiert und zur Kontrolle und Freigabe der erzeugten Bilder aufgefordert.

Die Karte zur Fliese

Der Konfigurator sollte noch mehr in die Ausstellung eingebunden werden und dem Kunden somit die Möglichkeit geboten werden, sehr schnell und einfach, eine Fliese, die ihm in der Ausstellung gefiel, am Konfigurator zu betrachten. Dafür wurden in der Ausstellung zu jeder Fliese A6 Karten, die die Details zur Fliese (Material, Rutschhemmung, Format, Preis und Lagerplatz) und einen DataMatrix Code aufgedruckt hatten, gelegt.

Zum leichten Auffinden der Fliese in der jeweiligen Ausstellung wurde für das Ausstellungspersonal auch der Lagerplatz auf der A6 Karte aufgedruckt. Da dieser Lagerplatz in jeder Ausstellung anders war, wurden alle Lagerplätze im Backend gespeichert. Wenn in der Ausstellung die Karten zu einer Fliese ausgingen, konnte das Ausstellungspersonal neue Karten, mit dem richtigen Lagerplatz und in der Sprache des Standortes, selbst nachdrucken.

Ausdruck der gewünschten Konfiguration

Wenn man Zuhause auf seinem PC (via Browser) oder in der Ausstellung an der Säule eine Konfiguration hatte, die einem gefiel, konnte man die Daten der aktuellen Anzeige ausdrucken. Auf dem A4 Zettel war dann ein Bild von dieser Konfiguration und zwei A6 Karten mit dem gewählten Wand- bzw. Bodenbelag.

Meine Arbeiten

• Frontend Development für Präsentationssäule, Web und iOS in 3 Sprachen
• Backend Development
  • Aufbau der Datenbank
  • Entwicklung des Administrationssystems für die Artikelverwaltung und den Kartenausdruck in PHP
  • Einbinden der Daten des ERP Systems
  • Entwicklung der Updateroutinen für die diversen Endgeräte
• Bildverarbeitungs- und Renderprozess
  • Automatisiertes Erzeugen der Fliesenmutationen und der Texturen mit PHP
  • Bau der Renderfarm (Hard- und Software)
  • Anbindung der Renderfarm ans Administrationssystem
• Hardware
  • Planung und Umsetzung der Säulen mit der Tischlerei
  • Entwicklung des Scanners in der Säule
  • Einbau der Hardware in die Säulen
  • Lieferung, Montage und Inbetriebnahme der Säulen
• Service und Troubleshooting beim Kunden