FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser

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

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

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

Agenda
• Was ist SVG?

• Datenbank für Aufbau von Vorlagen

• Tipps für FileMaker Berechnungen

• Beispiele aus der Praxis

Ziel
• Potential von SVG aufzuzeigen, 
auch ohne Bibliotheken und JavaScript

Nützliche Vorkenntnisse für diesen Vortrag
• FileMaker Webviewer

• Grundkenntnisse in HTML, XML, CSS

• Aber keine JavaScript-Kenntnisse nötig!

Zum Nachlesen mit vielen Beispielen:
FMK 2016:  
Award-Winner Marcel Moré – The Power of SVG
Empfehlung

Was ist SVG?

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?

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?

Textcode, der im Browser oder Zielprogramm gerendert wird:
Was ist SVG?
Ausgabe im Browser oder Webviewer:

Auch Symbole bei den Tasteneinstellungen sind SVG:
Was ist SVG?

Beispiele für Applikationen, um komplexere Grafiken zu erstellen:
• Sketch

• Adobe Illustrator 
Was ist SVG?

Beispieldatenbank: 
Grundsätzlicher Aufbau  
mit Webviewer in FileMaker

Problemstellung aus der Praxis
(Druckerei)

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.

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

Ü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

Nach Tests wurde folgender Lösungsansatz gewählt:
• HTML und SVG Code wird mit FileMaker Scripts berechnet!

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)

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

• …

Austauschen von Bausteinen

Vergleich FM Ansatz / JavaScript

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

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

Interaktion

Praxisbeispiele

FileMaker Tipps

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

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

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

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

Fragen?

Vielen Dank für Ihr Interesse!

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

Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages

FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser

Similar a FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser (20)

Más de Verein FM Konferenz

Más de Verein FM Konferenz (20)

FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser