Es gibt Momente in der FileMaker-Entwicklung, in denen man kurz inne hält und denkt: Das hätte ich nicht erwartet. Dieser Artikel handelt von so einem Moment.

Wir haben eine Funktion gebaut, die aus echten Produktmaßen; Länge, Winkel, Bezeichnung automatisch eine geometrische Draufsicht generiert. Kein Plugin. Keine externe Bibliothek. Keine Internetverbindung nötig. Alles passiert in einer einzigen FileMaker-Formel.

Die Ausgangssituation

Das Projekt: ein Handwerksbetrieb erfasst Produkte wie Balkone, Zäune und Geländer. Jedes Produkt besteht aus mehreren Bauteilen (Artikel), die jeweils eigene Maße und Winkel haben. Die Frage war:

„Könnte man das nicht irgendwie grafisch darstellen? So eine Art Draufsicht?"

Die Antwort war: Ja. Und zwar vollständig innerhalb von FileMaker.

Das Konzept: SVG aus Formeln

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format für Vektorgrafiken – und es lässt sich als reiner Text erzeugen. Ein FileMaker WebViewer zeigt HTML an. HTML kann SVG enthalten. Also: FileMaker-Formel erzeugt SVG-Code → WebViewer rendert ihn.

Das Besondere daran: der gesamte Code läuft lokal im WebViewer, der in FileMaker eingebettet ist. Keine Verbindung nach außen, kein Server, kein Internet. Das macht die Lösung robust für Umgebungen, in denen Internetzugang nicht garantiert ist – wie auf einer Baustelle, im Außendienst oder in abgesicherten Netzwerken.

Die Datenkette

T05_ANGEBOT
  → ProduktX (z.B. "Balkon Mustermann")
    → Artikel (sortiert nach t_sortierung)
      → _Grundriss (z_laenge, z_winkel, t_bezeichnung)

Jedes Bauteil hat:

• z_laenge – die Länge in mm
• z_winkel – die Richtung in Grad (0° = rechts, 90° = oben)
• t_bezeichnung – der Name des Bauteils

Ein berechnetes Feld _c_grundriss_zeile auf der Artikel-Tabelle packt diese Werte §-getrennt zusammen. Liste() über das entsprechende TO liefert alle Zeilen synchron in der richtigen Reihenfolge.

Die Formel – was passiert da eigentlich?

Die Formel wv_html_grundriss in T05_ANGEBOT läuft in vier Schritten:

Schritt 1: Koordinaten berechnen

Jedes Segment startet dort, wo das vorherige geendet hat. Der Endpunkt ergibt sich aus Trigonometrie:

x_neu = x_alt + laenge × Cos(winkel)
y_neu = y_alt − laenge × Sin(winkel)   // Y negiert: SVG-Y läuft nach unten

FileMaker kennt Sin(), Cos() und Pi als native Funktionen. Keine externen Bibliotheken nötig.

Schritt 2: Bounding Box ermitteln

Ein zweiter Solange-Loop findet Minimum und Maximum aller x- und y-Koordinaten. Daraus ergibt sich die tatsächliche Ausdehnung der Form.

Schritt 3: Skalierung berechnen

Die Form wird so skaliert, dass sie zu 85% in den verfügbaren Viewport passt – zentriert, proportional, unabhängig von der absoluten Größe der Maße.

Schritt 4: SVG aufbauen

Ein dritter Loop baut den eigentlichen SVG-Code:

• <polygon> für die goldene Füllfläche
• <polyline> für die echten Kanten (schließt sich nicht automatisch)
• <line stroke-dasharray> für die offene Seite (z.B. Gebäudewand) – gestrichelt grau
• <circle> für die Eckpunkte
• <text> für Bezeichnung, Länge und Winkel je Seite

Das Ergebnis: ein vollständiges data:text/html,... Dokument, das der WebViewer direkt anzeigt.

Dynamische Größe dank viewBox

Statt einer festen Pixelgröße verwendet der SVG-Tag ein viewBox-Attribut mit width="100%" und height="100%". Das bedeutet: der WebViewer kann auf dem Layout beliebig groß gestaltet werden – die Grafik skaliert automatisch mit, ohne dass die Formel angepasst werden muss.

<svg viewBox="0 0 560 560" width="100%" height="100%"
     preserveAspectRatio="xMidYMid meet">

Ein Beispiel: der Balkon

Ein typischer Balkon mit vier Bauteilen:

Die Formel berechnet daraus automatisch die Trapezform von oben. Die Wand (Seite 4, die nicht wirklich existiert) erscheint als gestrichelte graue Linie.

Warum das offline funktioniert

Andere Visualisierungslösungen setzen oft auf JavaScript-Bibliotheken wie D3.js, Chart.js oder Google Charts – alle brauchen eine Internetverbindung oder müssen lokal gespeichert werden. Unsere Lösung verwendet ausschließlich:

• SVG – in jedem Browser nativ verfügbar
• HTML/CSS – ebenfalls nativ
• FileMaker-Formeln – laufen vollständig auf dem Client

Das ergibt eine Lösung, die ohne jede externe Abhängigkeit auskommt. Sie läuft auf dem MacBook im Zug, auf dem iPad auf der Baustelle, im firmeneigenen Netzwerk ohne Internetzugang.

Ausblick: 3D ist denkbar

Die aktuelle Lösung zeigt eine 2D-Draufsicht (Bird’s Eye View). Der logische nächste Schritt wäre eine isometrische oder perspektivische 3D-Darstellung.

Das ist prinzipiell möglich und zwar ebenfalls ohne externe Bibliotheken:

Kurzfristig: Isometrie (2,5D) Durch eine mathematische Transformation der x/y-Koordinaten lässt sich eine isometrische Ansicht erzeugen – der klassische „schräg von oben"-Look aus Spielen wie SimCity. Dafür reichen einfache Multiplikationen mit festen Faktoren, die SVG-Polygone werden nur anders verzerrt dargestellt.

Mittelfristig: WebGL im WebViewer FileMakers WebViewer basiert auf einer vollwertigen Browser-Engine. Das bedeutet: WebGL ist verfügbar. Bibliotheken wie Three.js könnten lokal in die FileMaker-Datei eingebettet werden (als Base64 im data:-URL oder als lokale Datei) und würden dann echte 3D-Objekte rendern , rotierbar, zoombar, mit Licht und Schatten.

Aus z_laenge, z_breite, z_hoehe und z_winkel lässt sich damit theoretisch ein vollständiges 3D-Modell des Produkts aufbauen – direkt aus den Maßen, die der Handwerker ohnehin erfasst.

Fazit

Was als experimentelle Idee begann – „kann FileMaker eigentlich Geometrie zeichnen?" – hat sich zu einer produktiv einsetzbaren Funktion entwickelt. Die Kombination aus FileMakers nativen Rechenfunktionen (Sin, Cos, Pi), dem Solange-Loop und dem WebViewer als Rendering-Engine ist mächtiger als man zunächst denkt.

Die wichtigsten Erkenntnisse:

1. Dezimaltrennzeichen beachten: In deutschen FileMaker-Installationen müssen Dezimalzahlen mit Komma geschrieben werden (0,85). Besser: ganzzahlige Brüche verwenden (85 / 100).
2. Min() / Max() nicht mit lokalen Variablen: Diese Funktionen sind Aggregat-Funktionen. Für Variablenvergleiche immer Wenn() verwenden.
3. Koordinaten runden: Runden(x; 0) vor dem Speichern in Strings vermeidet Komma-Konflikte beim späteren Splitten.
4. viewBox statt fester Größe: Macht den WebViewer flexibel ohne Formelanpassung.

Der Grundriss ist jetzt live. Die dritte Dimension wartet.

Geschrieben im Rahmen – FileMaker-Datenbankentwicklung für Handwerksbetriebe.