FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Ein Vortrag von Robert Kaiser
FileMaker und SVG-Grafiken

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Robert Kaiser – karo.at
Robert Kaiser
• zertifizierter FileMaker Entwickler (10 bis 19)
• Claris Partner
• Werbegrafiker seit 1993
• FileMaker Entwicklung seit 1996
• Autor für FileMaker Magazin
• Sprecher auf der FileMaker Konferenz
2012, 2013, 2016, 2017

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Robert Kaiser – karo.at
karo productions
• individuelle Lösungen auf der Basis von
FileMaker Pro/Go/WebDirect
• DTP-Workflow-Optimierung
• Schulungen (Adobe InDesign, Photoshop, u.a.)
• FMM Award 2014, Beste FileMaker Lösung

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Agenda
• Was ist SVG?
• Datenbank für Aufbau von Vorlagen
• Tipps für FileMaker Berechnungen
• Beispiele aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Ziel
• Potential von SVG aufzuzeigen,
auch ohne Bibliotheken und JavaScript

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Nützliche Vorkenntnisse für diesen Vortrag
• FileMaker Webviewer
• Grundkenntnisse in HTML, XML, CSS
• Aber keine JavaScript-Kenntnisse nötig!

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Zum Nachlesen mit vielen Beispielen:
FMK 2016:
Award-Winner Marcel Moré – The Power of SVG
Empfehlung

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Was ist SVG?

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Definition laut Wikipedia:
„Scalable Vector Graphics (kurz auch SVG, englisch für skalierbare
Vektorgrafik) ist die vom World Wide Web Consortium (W3C) empfohlene
Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. SVG,
das auf XML basiert, wurde erstmals im September 2001 veröffentlicht.
Praktisch alle relevanten Webbrowser können einen Großteil des
Sprachumfangs darstellen.“
Was ist SVG?

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Das bedeutet:
• Ist schon lange Web-Standard
-> Läuft somit auch mit alter Browser Engine
• Ist Vektorgrafik, somit skalierbar
-> im Gegensatz zu Pixel-Bildformaten wie JPEG oder PNG
• Basiert auf XML, also Text
-> können wir mit FileMaker Textfunktionen erzeugen oder manipulieren
Was ist SVG?

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Textcode, der im Browser oder Zielprogramm gerendert wird:
Was ist SVG?
Ausgabe im Browser oder Webviewer:

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Auch Symbole bei den Tasteneinstellungen sind SVG:
Was ist SVG?

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Beispiele für Applikationen, um komplexere Grafiken zu erstellen:
• Sketch
• Adobe Illustrator
Was ist SVG?

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Beispieldatenbank:
Grundsätzlicher Aufbau
mit Webviewer in FileMaker

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Problemstellung aus der Praxis
(Druckerei)

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Erster Einsatz von SVG:
• Relaunch Maschinen-Belegungsplan:
Alte Lösung noch mit FileMaker-Plugin, die nicht gut funktioniert hat,
bzw. schwer zu pflegen war.
• Neue Lösung:
Umgesetzt noch mit 8 Webviewer, daneben FileMaker-Buttons,
Portale, …
Guter Einstieg, war aber weder elegant noch flexibel.
Problemstellung aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Neue Vorgabe: Erweiterte Integration in Tagesplan:
• Belegungspläne, die darstellen, welche Mitarbeiter auf welcher
Maschine an welcher Produktion arbeiten soll
• war weder mit Portalen, Wiederholfelder, oder Tastenleisten gut zu
realisieren
• Nicht nur zur Ansicht, sondern soll auch Planungstool werden ->
Interaktion muss möglich sein
• Aus Erfahrung wird Funktionalität laufend erweitert bzw. angepasst
Problemstellung aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Überlegung für Relaunch
• Weiter auf SVG setzen?
• Bestärkt durch Anregungen im Vortrag Marcel Moré auf der FMK 2016
Tolle Beispiele von Grafiken (Bibliotheken)
• Ernüchterung
Die benötigten Beispiele und Bibliotheken haben
unter Windows FM17 nicht funktioniert
• Entwicklung in JavaScript?
keine ausreichenden JavaScript Kenntnisse
Problemstellung aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Nach Tests wurde folgender Lösungsansatz gewählt:
• HTML und SVG Code wird mit FileMaker Scripts berechnet!
Problemstellung aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Grundsätzlich Aufbau:
• Ein Webviewer, HTML Seite mit einer SVG Grafik wird ausgegeben
• Über verschiedene Bausteine wird die SVG Grafik mit FileMaker
Bordmittel befüllt (Platzhalter für Positionen, Stile und Inhalte
austauschen)
• Formatierung mit CSS, lokale Formatierung soll möglich sein
(z.B. Farben)
Problemstellung aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Für die unterschiedlichen Objekte gibt es je eine Vorlage:
• Baustein Text (Beschriftungen)
• Baustein Fläche (für Hintergründe)
• Baustein Linie (für Darstellung Zeitachsen)
• Baustein Text + Fläche
• Baustein Text + Fläche mit URL
• …
Problemstellung aus der Praxis

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Beispieldatenbank:
Austauschen von Bausteinen

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Vergleich FM Ansatz / JavaScript

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Code-Berechnung mit FileMaker Bordmittel:
• Datensammlung und Gliederung in FM
• Berechnung der Ausgabe (Positionen, Anzeigen) in FM
Vorteile
• Business Logik in FM
-> Debuggen und Wartung in FileMaker Script!
• es müssen keine Bibliotheken geladen oder gewartet werden
• Funktioniert auch mit älteren FileMaker Clients
Nachteile
• Klick, bzw. Statusänderung (Objekt selektiert)
-> erneutes Rendern des ganzen Webviewers
Vergleich FM Ansatz / JavaScript

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Code-Berechnung in JavaScript:
• Datensammlung und Gliederung in FM
• Berechnung der Ausgabe (Positionen, Anzeigen) in JS
Vorteile
• „Business Logik“ in JS (was passiert bei Klick,
welche Daten werden übergeben, etc)
-> Allerdings debuggen und Wartung in JavaScript!
• Datenaktualisierung (ab FM19) möglich -> Logik in JS
• Drag & Drop, Animationen etc. möglich
Nachteile
• eventuell JS-Bibliotheken laden und pflegen
• Kompatibilität zu älteren FileMaker Clients
Vergleich FM Ansatz / JavaScript

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Beispieldatenbank:
Interaktion

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Praxisbeispiele

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
FileMaker Tipps

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Speicherort der Code-Snippets (Bausteine)
• Vermeiden von global gespeicherten Feldern (für Serverlösungen,
Ausnahme ist Zwischenspeichern der geladenen Einstellungen)
• Entweder direkt in Variablen ablegen oder vor ersten Ausgabe des
Webviewers aus Tabelle laden
• Ziel ist einfache Wartbarkeit des Codes und der Snippets
FileMaker Tipps

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Webviewer Code berechnen (bei sehr viel Text)
• Verwende den Scriptschritt "Berechneten Wert einfügen"
(ist schneller als Variable setzen mit Listenfunktion)
• Austauschen-Funktionen: Reihenfolge beachten (zuerst Platzhalter mit
wenig Text ersetzen, z.B. CSS oder Hintergrundfarben, am Ende den
größten Baustein)
• Kompromiss finden zwischen optimierten Code
(wenige Scriptschritte) und Wartbarkeit / Lesbarkeit
FileMaker Tipps

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Daten für Webviewer
• Strategie für Datenselektion bzw. Zwischenspeicherung überlegen
• Eventuell Daten bereits als JSON Objekt bereithalten, falls die Ausgabe
oder Manipulation später doch über JavaScript erfolgt
Achtung bei mehreren bzw. großen JSON Objekten:
Es liegt immer nur ein JSON Objekt optimiert im Speicher vor!
FileMaker Tipps

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Datenänderung
• Beachten beim Zurückschreiben, dass die Daten nach dem
Renderzeitpunkt vielleicht geändert wurden.
Sondertasten
• Nicht alle Sondertasten funktionieren auf beiden Plattformen
(macOS: keine control-Taste; Windows: keine Shift-Taste)
(keine Alt-Taste und Citrix)
Trigger OnLayoutTastenDruck
• Unter Windows darf Fokus nicht im Webviewer sein, damit Tastendruck
Trigger ordnungsgemäß funktionieren
FileMaker Tipps

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Fragen?

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Vielen Dank für Ihr Interesse!

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Weiterführende Links
Vortrag FMK 2016:
• Marcel Moré - The Power of SVG
https://blog.marcel-more.de/2016/10/14/the-power-of-svg/
Mehr über SVG
• SVG Definition Wikipedia
https://de.wikipedia.org/wiki/Scalable_Vector_Graphics
• Selfhtml
https://wiki.selfhtml.org/wiki/SVG
Hilfsmittel für Grafik-Erstellung
• Sketch
https://www.sketch.com

FileMaker Konferenz | Hamburg | 22.-24. Juni 2022
FileMaker und SVG-Grafiken | Robert Kaiser, www.karo.at
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages