The Power of SVG - Marcel Moré • Randnotizen

The Power of SVG
Marcel Moré
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Marcel Moré
Daten-Stylist
•
gibt seit 24 Jahren
FileMaker-Anwendungen
eine klare Kontur
•
hat den scharfen Blick fürs
visuelle Erscheinungsbild
•
frisiert Ihre Daten
mit Programmiersprachen
in 17 Colorationen
•
immer die passende
Grafik-Bibliothek für den
unverwechselbaren Look...
@mmore
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
The Power of SVG
The Power of SVG
Was Euch in den nächsten 90 Min erwartet:
•
•
•
•
Worum geht es?
Was ist SVG?
Was kann man damit machen?
Wie geht das in FileMaker?
Worum geht es?
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was wäre wenn...
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was wäre wenn...
...wir eine Möglichkeit
hätten, Script-gesteuert
Grafiken zu erstellen
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was wäre wenn...
...wir Daten direkt in
grafische Darstellungen
übersetzen könnten
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was wäre wenn...
...wir in der Lage wären,
mit der grafischen
Repräsentation
zu interagieren
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was wäre wenn...
...diese grafische Darstellung
sogar in der Lage wäre,
weitere scriptgesteuerte
Aktionen auszulösen
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Natürlich würden wir...
...uns wünschen, dass alles
plattformübergreifend
funktioniert:
auf Mac, Windows, iOS
und in Webdirect
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
...und es sollte
gleichermaßen performant
auf «Desktop» und «Mobile»
funktionieren
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
...am besten auch Auflösungsunabhängig, um keine unnötigen
Verrenkungen für unterschiedliche
Displaygrössen, Retina, etc.
aufwenden zu müssen!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
...bestimmt wäre das alles
ziemlich kompliziert?
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Aber, was wäre wenn...
...es so einfach wäre, dass
es jeder sofort in seinen
Lösungen einsetzen könnte?
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
...vielleicht sogar mit vorgefertigten
Lösungsbausteinen für verschiedene
Anwendungszwecke, die man einfach
nur zusammenstöpseln braucht..
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Lasst diese Vorstellung
für einen Moment
auf Euch wirken....
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was würdet Ihr
damit anfangen?
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
vielleicht...
• ausgefeilte Benutzeroberflächen bauen
• interaktive Diagramme erzeugen
• grafische Widgets erstellen
• Pläne, Modelle, Strukturen
visualisieren - direkt aus der
Datenanwendung heraus
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was wäre wenn...
...das alles keine Phantasie wäre –
sondern längst nutzbare Technik, die
wir nur aufgreifen brauchen, um die
tollsten Dinge damit in der Realität
umzusetzen...
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Willkommen bei SVG !!!
eine alte Technik neu übersetzt und
mundgerecht aufbereitet für den
Einsatz mit FileMaker
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG im Überblick
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was ist SVG?
• SVG = Scalable Vector Graphics (englisch für skalierbare
Vektorgrafik)
• SVG 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. Einige der gebräuchlichsten Webbrowser können
ohne nachträgliche Installation von Erweiterungen einen Großteil
des Sprachumfangs darstellen.
• Als XML-Dokument wird eine SVG in einer Baumstruktur aus
verschiedenen Elementen und diesen Elementen zugewiesenen
Attributen aufgebaut.
• Alle grafischen Elemente in SVG bauen auf einfachen
Grundelementen, so genannten grafischen Primitiven auf. Durch
Kombination mehrerer grafischer Primitive lassen sich komplexe
Objekte erzeugen.
Quelle: h(ps://de.wikipedia.org/wiki/Scalable_Vector_Graphics
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Was ist SVG?
• SVG = Scalable Vector Graphics (englisch für skalierbare
Vektorgrafik)
•
skalierbare Graﬁk
SVG ist die vom World Wide Web Consortium (W3C) empfohlene
r
se
ow
br
eb
W
im
Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken.
SVG, das auf XML basiert, wurde erstmals im September 2001
veröffentlicht. Einige der gebräuchlichsten Webbrowser können
ohne nachträgliche Installation von Erweiterungen einen Großteil
in Form einer
des Sprachumfangs darstellen.
chreibung
XML-‐Besaus
• Als XML-Dokument wird eine SVG in einer Baumstruktur
verschiedenen Elementen und diesen Elementen zugewiesenen
Attributen aufgebaut.
• Alle grafischen Elemente in SVG bauen auf einfachen
he
sc
aﬁ
gr
Grundelementen, so genannten grafischen Primitiven auf. Durch
te
enkomplexe
delem
Grun
Kombination mehrerer grafischer Primitive
lassen
sich
Objekte erzeugen.
Quelle: h(ps://de.wikipedia.org/wiki/Scalable_Vector_Graphics
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Dokument
<svg width="640" height="480">
!
</svg>
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Dokument
DEMO
FILE
<svg width="640" height="480"
!
xmlns="http://www.w3.org/2000/svg"
!
xmlns:svg="http://www.w3.org/2000/svg">
!
!
<rect x="25" y="25" width="200" height="200"
fill="yellow" stroke="blue" />
!
<circle cx="225" cy="125" r="75" fill="red" />
</svg>
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Grundelemente
• Rechteck
• Kreis
• Ellipse
• Linie
• Polygonzug
• Polygon
• Text
• Bild
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Grundelemente
• Rechteck
<rect x="25" y="25" width="200" height="200" />
• Kreis
<circle cx="125" cy="125" r="75" />
• Ellipse
<ellipse cx="125" cy="125" rx="100" ry="50" />
• Linie
<line x1="50" y1="50" x2="200" y2="200" />
• Polygonzug
<polyline points="50,150 50,200 200,200 200,100" />
• Polygon
<polygon points="50,150 50,200 200,200 200,100" />
• Text
<text x="50" y="50" font-size="50">Hello!</text>
• Bild
<image x="20" y="20" width="200" height="140"
!
xlink:href="image.png" />
<element parameter="wert" />
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Grundelemente
• Pfad
<path d="M 100 100 L 300 100 L 200 300 z" />
<path d="M100,800 C175,700 325,700 400,800" />
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Grundelemente
• Pfad
<path d="M 100 100 L 300 100 L 200 300 z" />
<path
Marcel Moré
The Power of SVG
M d="M100,800
L Z C Q A moveto
C175,700 325,700 400,800" />
lineto
closepath
curveto
curveto (quadraLc Bézier)
ellip;cal arc
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Attribute
• X,Y
• Höhe, Breite, Länge, Radius
• Füllfarbe
• Füllregeln
• Linienfarbe
• Liniendicke
• Linienregeln
• Farben
• Farbverläufe
• Muster
• Zeichensatz
• Schriftgröße
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
weitere Möglichkeiten
• Koordinatensysteme
• Gruppierungen
• Transformationen
• Maskierungen
• Transparenz
• Filter-Effekte
• Animation
• Interaktion
• Verlinkung
• Metadaten
h(ps://sarasoueidan.com/demos/interacLve-‐svg-‐coordinate-‐system/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
CSS Stile
<svg>
!
!
!
<circle cx="100" cy="125" r="25" />
<circle cx="200" cy="125" r="50" />
<circle cx="300" cy="125" r="75" />
</svg>
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
CSS Stile
DEMO
FILE
<svg>
!
!
!
<circle class="demo" cx="100" cy="125" r="25" />
<circle class="demo" cx="200" cy="125" r="50" />
<circle class="demo" cx="300" cy="125" r="75" />
</svg>
<style type="text/css">
!
.demo { fill: red; stroke: #000; stroke-width: 8px; }
</style>
h(ps://wiki.selStml.org/wiki/SVG/SVG_und_CSS
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG als Teil des DOM
•
Objekte über IDs / Klassen adressierbar
•
Zuweisung von CSS-Regeln
•
Verlinkungen <a xlink:href="">...</a>
•
Veränderung von Objekten per JavaScript
•
Objekte können genauso erzeugt und
manipuliert werden, wie jedes andere
HTML-Element
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG als WEB-Standard
•
allgemein gültiger WEB-Standard
•
semantische Auszeichnungen / Meta-Tags
•
ist für Suchmaschinen lesbar
•
normaler Content innerhalb des Browsers
(alle Plattformen)
•
direkt im FileMaker Webviewer darstellbar
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG-fähige Grafikprogramme
Adobe Illustrator
Inkscape
Sketch
www.adobe.com/Illustrator
inkscape.org
www.sketchapp.com
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Editoren im Web
svg-‐edit
github.com/SVG-‐Edit/svgedit
svg-‐edit.googlecode.com
Marcel Moré
The Power of SVG
Boxy SVG
boxy-‐svg.com
Method Draw
Vector Paint
github.com/duopixel/Method-‐Draw
editor.method.ac
vectorpaint.yaks.co.nz
Chrome Web Store
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Grafiken im WEB
• Google - erweiterte Bildersuche
http://www.google.de/advanced_image_search?hl=de
• SVG Cliparts
https://openclipart.org/
http://www.123rf.com/clipart-vector/
http://www.shutterstock.com/vectors?language=de
• SVG Icons
http://www.flaticon.com/
• SVG Maps
http://www.datamaps.eu/
https://www.amcharts.com/svg-maps/
http://wiki.openstreetmap.org/wiki/SVG
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Tools
• SVGO - SVG Optimizer
https://github.com/svg/svgo
• SVG OMG - GUI Version of SVGO
https://github.com/jakearchibald/svgomg
• SVG NOW for Adobe Illustrator
https://github.com/davidderaedt/SVG-NOW
• canvg - SVG to Canvas Converter
https://github.com/canvg/canvg
• cloudconvert: EPS to SVG Converter
https://cloudconvert.com/eps-to-svg
• font-blast - SVG Icon from Font Extractor
https://github.com/eugene1g/font-blast
• SVG to PNG Converter
http://draw-svg.appspot.com/drawsvg.html#svgPNG:
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Libs
• Snap SVG
http://snapsvg.io/
• Raphaël
http://raphaeljs.com/
• infoviz
http://infoviz.org/
• D3
https://d3js.org/
• Processing
http://processingjs.org/
• vivus
http://maxwellito.github.io/vivus/
• SpirographN
https://github.com/seedcode/SpirographN
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Hintergrundinfos
• Beschreibung des Standards
• SVG 1.1
http://www.w3.org/TR/SVG11/
• SVG 2
http://www.w3.org/TR/SVG2/
• SVG Primer
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
• SVG History
http://www.w3.org/Graphics/SVG/History
• The Fall and Rise of SVG
http://blog.siliconpublishing.com/2015/12/the-fall-and-rise-of-svg/
• Das SVG-Format (Inkscape, mit weiteren Links)
https://inkscape.org/de/entwickeln/das-svg-format/
• Buch: SVG Essentials (J. David Eisenberg, O'Reilly 2002)
https://books.google.de/books?id=shuDAgAAQBAJ
http://commons.oreilly.com/wiki/index.php/SVG_Essentials
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Links
• The Art Of The SVG Filter And Why It Is Awesome
https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
• SVG Tutorials
https://docs.webplatform.org/wiki/svg/tutorials
• Understanding SVG Coordinate Systems and Transformations
https://sarasoueidan.com/blog/svg-transformations/
• Clipping in CSS and SVG
https://sarasoueidan.com/blog/css-svg-clipping/
• How to use CSS and SVG clipping and masking techniques
https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/
• Techniques for Creating Textured Text
http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/
DEMO
FILE
• Styling Text With SVG Filters
https://www.codeschool.com/blog/2016/04/21/styling-text-with-svg-filters/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Links
• SVG Authoring Guide (Draft)
http://w3c.github.io/svgwg/specs/svg-authoring/
• Building better Interfaces with SVG
DEMO
FILE
http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
• The 37 Best Tools For Data Visualization
http://www.7wdata.be/article-general/the-37-best-tools-for-data-visualization/
• 30 Best Tools for Data Visualization
https://codegeekz.com/30-best-tools-for-data-visualization/
• The Graphical Web (SVG Konferenz)
http://2016.graphicalweb.org/
• Introduction to D3 (Vortrag Mitschnitt, inkl. SVG Einführung)
https://www.youtube.com/watch?v=8jvoTV54nXw
• Getting Started with D3.js (Vortrag Mitschnitt)
https://www.youtube.com/watch?v=EYmJEsReewo
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
FileMaker + SVG
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
FileMaker + SVG
SVG Icons in Bu(ons
seit Version 14
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Icons in Buttons
•
seit FileMaker Version 14
•
eigene SVG Icons nachladbar
h(ps://fmhelp.ﬁlemaker.com/docs/14/en/svg/
h(p://www.alchemyg.com/14-‐points-‐for-‐glyphindor/
h(ps://scalefm.com/2015/06/charmed-‐by-‐svg/
h(ps://www.dbservices.com/arLcles/ﬁlemaker-‐custom-‐bu(on-‐icons/
h(ps://ﬁlemakerexamples.co.uk/resources/svg-‐icon-‐pack/
h(p://www.indats.com/KnowledgeCenter/
h(p://thebrainbasket.com/?p=404
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Icon Libraries
h(p://www.iconshock.com/
h(p://www.ﬂaLcon.com/
h(ps://picons.me/
h(ps://icons8.com/
h(ps://nucleoapp.com/
h(ps://icomoon.io/
h(p://iconmonstr.com/
h(p://fontello.com/
h(ps://github.com/Xaviju/inkscape-‐
open-‐symbols
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
nice!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
nice! but...
... there is so much more!!!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
FileMaker + SVG
SVG Graﬁk im Webviewer
SVG Icons in Bu(ons
seit Version 8.5
seit Version 14
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
typische Szenarien
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Szenarien
•
User Interface
•
Gestaltungselemente
•
Auswertungen / Charts
•
interaktive Modelle
•
Pläne / Karten
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
warum SVG?
FileMaker kann das doch selber!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Widgets
DEMO
FILE
h(p://justgage.com/
jqxGauge
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
custimized GUI
DEMO
FILE
h(ps://sarasoueidan.com/tools/circulus/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Charts
Quelle: h(p://www.fusioncharts.com/charts/combinaLon-‐charts-‐dual-‐y/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Charts
Quelle: h(ps://www.amcharts.com/demos/stacked-‐bar-‐chart-‐with-‐negaLve-‐values/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Charts
Quelle: h(p://bl.ocks.org/mbostock/5944371
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Charts
Quelle: h(p://mbostock.github.io/protovis/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Charts
Quelle: h(ps://www.jasondavies.com/parallel-‐sets/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
interaktive Modelle
DEMO
FILE
Quelle: h(ps://commons.wikimedia.org/wiki/File:Human_body_front_and_side.svg
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Sitzplatz Belegungen
Quelle: h(ps://de.wikipedia.org/wiki/Theater_in_der_Josefstadt
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Raumpläne
TUTO
RIAL
Quelle: h(ps://www2.informaLk.uni-‐hamburg.de/fachschal/wiki/index.php/InformaLkum
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Gebäudepläne
5
Quelle: h(p://www.leuphana.de/services/lageplaene.html
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Karten
Marcel Moré
The Power of SVG
DEMO
FILE
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
You get the idea ...
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG in FileMaker
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Code erzeugen
•
SVG Code besteht aus Text
•
kann per Script-Befehl erzeugt werden
•
kann in Feldern und Variablen
per Formel berechnet werden
•
kann per JavaScript im Webviewer
generiert werden
•
kann von externer URL geladen werden
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Code manipulieren
•
SVG Objekte manipulieren in Bezug auf
•
•
•
•
•
Marcel Moré
The Power of SVG
Sichtbarkeit
Position, Größe
Stile, Farben
Effekte, Filter
Animationen
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
1. SVG Code erzeugen
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Wo liegt der Code?
• Webviewer
• eingebettet in HTML (optional)
• wird ausgeführt, sobald der Webviewer im Layout dargestellt wird
<html>
<body>
<svg>
<circle cx="100" cy="125" r="25" />
</svg>
</body>
</html>
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf
SVG-Dokument
<html>
<body>
<svg>
<circle cx="100" cy="125" r="25" />
</svg>
</body>
</html>
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf
SVG-Dokument
• Data URL kann auf
Variable verweisen
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf
SVG-Dokument
• Data URL kann auf
Variable verweisen
•
"data:text/html," & $$ SVG
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Wo liegt der Code?
• Warum ist es nützlich, den Code in einer Variable zu haben?
• Datenübergabe!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Datenübergabe
• Code liegt als Text in einer Variable vor
• Daten können als Platzhalter direkt in den Code eingebettet werden
• Austauschen ( $$ SVG; "<meinwert>"; "50" )
<html>
<body>
<svg>
<circle cx="100" cy="125" r="<meinwert>" />
</svg>
</body>
</html>
Marcel Moré
The Power of SVG
<html>
<body>
<svg>
<circle cx="100" cy="125" r="50" />
</svg>
</body>
</html>
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Code Berechnen
• Script-Schleife schreibt Text in eine Variable
• Daten werden aus Feld / Variable gelesen und in Text geschrieben
• Ergebnis verketten $$ SVG = $$ SVG & $neues Element
Variable setzen [ $Werte ; Wert: "80¶124¶230¶69¶85¶20¶34¶136¶80¶100¶44¶12" ]
Variable setzen [ $i ; Wert: 1 ]
Variable setzen [ $$SVG ; Wert: "<svg>" ]
Schleife (Anfang)
!
Variable setzen [ $$SVG ; Wert: $$SVG &
"<rect x=\"0\" y=\"" & ($i-1)*10 & "\"
width=\"" & LiesAlsZahl(ElementeMitte($Werte; $i; 1)) & "\" height=\"8\" />" ]
!
Variable setzen [ $i ; Wert: $i+1 ]
!
Verlasse Schleife wenn [ $i>ElementeAnzahl ( $Werte ) ]
Schleife (Ende)
Variable setzen [ $$SVG ; Wert: $$SVG & "</svg>" ]
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Code Berechnen
DEMO
FILE
• Script-Schleife schreibt Text in eine Variable
• Daten werden aus Feld / Variable gelesen und in Text geschrieben
• Ergebnis verketten $$ SVG = $$ SVG & $neues Element
<svg>
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
<rect x="0"
</svg>
Marcel Moré
The Power of SVG
x
y="0" width="80" height="8" />
y="10" width="124" height="8" />
y="20" width="230" height="8" />
y="30" width="69" height="8" />
y="40" width="85" height="8" />
y="50" width="20" height="8" />
y="60" width="34" height="8" />
y="70" width="136" height="8" />
y="80" width="80" height="8" />
y="90" width="100" height="8" />
y="100" width="44" height="8" />
y="110" width="12" height="8" />
y
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
2. Interaktion mit SVG
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
SVG Code manipulieren – Wie?
•
Code Templates mit Parametern befüllen
•
SVG Code dynamisch erzeugen
•
Inhalt im Webviewer neu laden (austauschen)
•
CSS Regeln (MouseOver)
•
JavaScript
(komplexere Manipulation & Interaktion)
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Interaktion mit SVG – Wozu?
•
Objekte ein-/ausblenden
•
Mouse-Over Effekte
•
Links zu FileMaker-Scripten
•
Links zu JavaScript-Funktionen
Marcel Moré
The Power of SVG
(hier wird's interessant !!!)
(z.B. Drag&Drop)
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Kommunikation mit dem WebViewer
•
Click auf SVG-Element soll ID an FileMaker
liefern und weitere Aktionen auslösen
•
HTML-Link mit FMP URL
•
MBS Plugin Funktion WebView.InstallCallback
h(p://blog.marcel-‐more.de/2015/10/08/the-‐power-‐of-‐javascript/
h(ps://blog.beezwax.net/2015/08/07/communicaLng-‐
with-‐a-‐web-‐viewer-‐in-‐ﬁlemaker/
h(p://www.mbsplugins.eu/WebViewInstallCallback.shtml
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Kommunikation per FMP URL
•
HTML-Link mit FMP URL erlaubt Script-Aufruf
in FileMaker mit Parameter-Übergabe:
•
<a href="fmp://$/
MeineDatenbankdatei
?script=MeineAktion
&param=MeineID">
<...>
</a>
h(p://www.twdesigns.com/fmp_url_protocol/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Kommunikation per FMP URL
•
HTML-Link mit FMP URL erlaubt Script-Aufruf
in FileMaker mit Parameter-Übergabe:
FMPURL-‐Protokoll
•
Net Adress: "$" = local ﬁle
<a href="fmp://$/
MeineDatenbankdatei Dateiname (Extension opLonal)
?script=MeineAktion Scriptname
Trenn-‐Zeichen
&param=MeineID"> Scriptparameter (Sonderzeichen müssen URL codiert werden!)
<...> HTML-‐Element,
das verlinkt werden soll
</a>
h(p://www.twdesigns.com/fmp_url_protocol/
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Kommunikation per FMP URL
•
HTML-Link mit FMP URL hat in SVG eine
angepasste Notation wegen XML-Namespace:
•
<a href="fmp://$/MeineDB?…">
<circle cx="100" cy="125" r="25" />
</a>
•
<a xlink:href="fmp://$/MeineDB?…">
<circle cx="100" cy="125" r="25" />
</a>
h(ps://www.w3.org/wiki/SVG_Links
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Demo
Marcel Moré
The Power of SVG
DEMO
FILE
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Download
•
•
Vortragsfolien
Demo-Dateien:
DEMO
FILE
SVG Menu.fmp12
SVG Text Eﬀects.fmp12
SVG Backgrounds.fmp12
SVG Demo.fmp12
•
•
SVG Balkendiagramm.fmp12
http://blog.marcel-more.de/
Konferenz-Server
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Beispiele
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Hardware Liste mit Raumplan-‐Ansicht
Hardware Liste mit Raumplan-‐Ansicht
Hardware Liste mit Raumplan-‐Ansicht
Hallenplan
für Lagerhalle
Lagerhalle Heatmap
Auswertung
Hallenplan
Regalgruppen
Hallenplan
Picking-‐Routen
h(p://blog.marcel-‐more.de/
2015/10/08/the-‐power-‐of-‐
javascript/
VOR-‐
TRAG
Visualisierung
Regal-‐Böden
FileMaker Eingabe
RedakLonssystem für
technische Zeichnungen
FileMaker Eingabe
RedakLonssystem für
technische Zeichnungen
FileMaker Eingabe
RedakLonssystem für
technische Zeichnungen
Shop Ausgabe
RedakLonssystem für
technische Zeichnungen
Shop Ausgabe
RedakLonssystem für
technische Zeichnungen
Shop Ausgabe
RedakLonssystem für
technische Zeichnungen
Shop Ausgabe
RedakLonssystem für
technische Zeichnungen
Beispiele
zeigen direkte Verknüpfung von
Datenanwendungen in FileMaker
mit grafischer Repräsentation als SVG
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
in 5 Schritten zum
interaktiven Raumplan
Marcel Moré
The Power of SVG
TUTO
RIAL
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
interaktiver Raumplan – so geht's
1.
Vorlage erstellen, z.B. in Adobe Illustrator
2.
ID's an den Objekten vergeben
3.
SVG Sourcecode bereinigen
4.
CSS Regeln für Hervorhebungen hinzufügen
5.
Template in FileMaker einbinden
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
1
1
Neue Ebene erstellen
Umrandungen als Overlay-‐Objekte anlegen
2
Name in Ebenen-‐Dialog eingeben = SVG Objekt-‐ID
3
3
3
überﬂüssigen Code enxernen!
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg ...
<html>
<body>
...
</svg>
</body>
</html>
HTML Tags hinzufügen
3
überﬂüssigen* Code enxernen!
<defs>
!
<rect id="SVGID_1_" width="1190.55" height="1683.78"/>
</defs>
<clipPath id="SVGID_2_">
!
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
!
<defs>
!
!
<rect id="SVGID_3_" y="0.001" width="1190.551"
height="1683.779"/>
!
</defs>
!
<clipPath id="SVGID_4_">
!
!
<use xlink:href="#SVGID_3_" overflow="visible"/>
!
</clipPath>
</g>
*einige Code-‐Teile funkLonieren im Webviewer nicht = leeres Fenster
4
hier steht die ID
class ergänzen
<rect
id="RAUM-1-1-4"
class="Selector"
x="207.661"
y="160.485"
fill-rule="evenodd"
clip-rule="evenodd"
fill="none"
stroke="#FF0000"
stroke-width="5"
stroke-miterlimit="10"
width="116.125"
height="144.178"
/>
4

<defs>
<style type="text/css">
<![CDATA[
SLl für SelekLon
alle RAUM-‐IDs unsichtbar machen
Raum-‐Umrandung für gewünschte ID
sichtbar machen
.Selector {
fill: red;
fill-opacity: 10%;
stroke-opacity: 70%;
}
*[id^='RAUM-'] {
!
visibility: hidden;
}
#RAUM-1-1-12 {
!
visibility: visible;
}
]]>
</style>
</defs>
5
HTML Template in einem Texxeld
#RAUM-<raum-id> {
!visibility: visible;
}
er für ID
Platzhalt
5
der SVG-‐Plan lebt im Webviewer
5
Raum-‐Umrandung für ID sichtbar machen:
#RAUM-<raum-id> {
! visibility: visible;
}
#RAUM-1-1-12 {
! visibility: visible;
}
5
Click in Portalreihe setzt neuen ID-‐Wert in Template ein
Wo liegen die
Herausforderungen?
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Herausforderungen
•
sich aufraffen, über den Tellerrand
der FileMaker-Welt zu schauen!
•
Einschränkungen bei der Implementierung
im Webviewer, optional Plugin erforderlich
•
komplexere Aufgaben erfordern JavaScript
•
die richtigen Bausteine finden
(Recherche: Vorlagen, Frameworks, Libs)
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Plattform-Unterstützung
FM Pro
FM Go
Webdirect
SVG anzeigen
✔
✔
✔
SVG Interaktion
✔
✔
–
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Plattform-Unterstützung
SVG anzeigen
SVG Interaktion
FM Pro
FM Go
Webdirect
✔
✔
✔
✔
–
✔
1) 2)
3)
1) FMP URL erst ab Version 13.0v2 sinnvoll anwendbar
http://isolutions-inc.com/2014/04/05/fmp-url-scheme-and-the-13-0v2-improvement/
http://www.twdesigns.com/fmp_url_protocol/
2) ältere Versionen v11 - v13 mit Hilfe von MBS-Plugin umsetzbar
https://www.mbsplugins.eu/WebViewInstallCallback.shtml
3) mehrere gleichzeitig installierte FMP Versionen für FMP URL problematisch
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Plattform-Unterstützung
SVG anzeigen
SVG Interaktion
FM Pro
FM Go
Webdirect
✔
✔
✔
✔
?
✔
1) 2)
1) FMP URL in Webdirect nicht mit Webviewer nutzbar
https://community.filemaker.com/thread/165366
2) umständlicher Hack bekannt, der aber nicht für UI nutzbar ist
http://pausepdx2014.wikispaces.com/Passing+URL+Parameters+to+WebDirect
http://www.soliantconsulting.com/blog/2015/01/extending-webdirect-url-parameters
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Plattform-Unterstützung
FM Pro
FM Go
Webdirect
SVG anzeigen
✔
✔
✔
SVG Interaktion
✔
✔
–
durchgängige pla{orm-‐
übergreifende Unterstützung derzeit nicht gegeben...
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
«Missing Link»
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Feature Request
•
Native Schnittstelle
zwischen FileMaker und Webviewer
•
Webviewer API
•
Script-Aufruf FileMaker –> JavaScript
•
Script-Aufruf JavaScript –> FileMaker
würde nahezu unbegrenzte Möglichkeiten für InterakLvität schaﬀen!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Feature Request
•
Native Schnittstelle
zwischen FileMaker und Webviewer
•
HTML Platzhalter für $Vars und FM::Felder
•
wie z.B. in 4D möglich
http://www.4d.com/docs/CMG/CMG02070.HTM
http://dddd.mettre.de/svgdynamics.shtml
würde TemplaLng für dynamischen SVG-‐Code stark vereinfachen!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
36
please vote !!
h(ps://community.ﬁlemaker.com/
ideas/2113
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Warum SVG
in FileMaker nutzen?
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Warum SVG in FileMaker
•
vektorbasierte Grafik, auflösungsunabhängig
(Screensizes, Retina)
•
Grafiken Script-gesteuert generieren
•
geht weit über das Repertoire
von FileMaker Bordmitteln hinaus
•
nahtlose Integration mit HTML, CSS, JavaScript
•
viele vorgefertigte Lösungsbausteine verfügbar
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Fazit
ist Standard
ist Mainstream
ist cool !!!
geht in FileMaker
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
FileMaker + WEB-‐Standards
= Dreamteam!
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com
Danke für
Euer Interesse
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages
Marcel Moré
The Power of SVG
FileMaker Konferenz 2016 Salzburg
www.filemaker-konferenz.com

Download Report