Download - FMK2016 - Marcel Moré - The Power of SVG
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
The Power of SVGMarcel Moré
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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
The Power of SVG
The Power of SVGWas Euch in den nächsten 90 Min erwartet:
• Worum geht es?
• Was ist SVG?
• Was kann man damit machen?
• Wie geht das in FileMaker?
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Worum geht es?
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Was wäre wenn...
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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 Salzburgwww.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 Salzburgwww.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 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
...und es sollte gleichermaßen performant
auf «Desktop» und «Mobile» funktionieren
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
...am besten auch Auflösungs-unabhä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 Salzburgwww.filemaker-konferenz.com
...bestimmt wäre das alles ziemlich kompliziert?
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
Lasst diese Vorstellung für einen Moment auf Euch wirken....
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Was würdet Ihr damit anfangen?
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
SVG im Überblick
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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
skalierbare Grafikim Webbrowser
grafische Grundelemente
in Form einerXML-‐Beschreibung
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Dokument
<svg width="640" height="480">!
</svg>
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Dokument
<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>
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Grundelemente
• Rechteck
• Kreis
• Ellipse
• Linie
• Polygonzug
• Polygon
• Text
• Bild
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Grundelemente
• Rechteck
• Kreis
• Ellipse
• Linie
• Polygonzug
• Polygon
• Text
• Bild
<rect x="25" y="25" width="200" height="200" />
<circle cx="125" cy="125" r="75" />
<ellipse cx="125" cy="125" rx="100" ry="50" />
<line x1="50" y1="50" x2="200" y2="200" />
<polyline points="50,150 50,200 200,200 200,100" />
<polygon points="50,150 50,200 200,200 200,100" />
<text x="50" y="50" font-size="50">Hello!</text>
<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 Salzburgwww.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 Salzburgwww.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" />M movetoL linetoZ closepathC curvetoQ curveto (quadraLc Bézier)
A ellip;cal arc
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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/
<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 Salzburgwww.filemaker-konferenz.com
CSS Stile
<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>
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
CSS Stile
h(ps://wiki.selStml.org/wiki/SVG/SVG_und_CSS
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
SVG-fähige Grafikprogramme
Adobe Illustratorwww.adobe.com/Illustrator
Inkscapeinkscape.org
Sketchwww.sketchapp.com
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Editoren im Web
Method Drawgithub.com/duopixel/Method-‐Draweditor.method.ac
Boxy SVGboxy-‐svg.com
svg-‐editgithub.com/SVG-‐Edit/svgeditsvg-‐edit.googlecode.com
Vector Paintvectorpaint.yaks.co.nzChrome Web Store
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Grafiken im WEB
• Google - erweiterte Bildersuchehttp://www.google.de/advanced_image_search?hl=de
• SVG Clipartshttps://openclipart.org/http://www.123rf.com/clipart-vector/http://www.shutterstock.com/vectors?language=de
• SVG Iconshttp://www.flaticon.com/
• SVG Mapshttp://www.datamaps.eu/https://www.amcharts.com/svg-maps/http://wiki.openstreetmap.org/wiki/SVG
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Tools
• SVGO - SVG Optimizerhttps://github.com/svg/svgo
• SVG OMG - GUI Version of SVGOhttps://github.com/jakearchibald/svgomg
• SVG NOW for Adobe Illustrator https://github.com/davidderaedt/SVG-NOW
• canvg - SVG to Canvas Converterhttps://github.com/canvg/canvg
• cloudconvert: EPS to SVG Converterhttps://cloudconvert.com/eps-to-svg
• font-blast - SVG Icon from Font Extractorhttps://github.com/eugene1g/font-blast
• SVG to PNG Converterhttp://draw-svg.appspot.com/drawsvg.html#svgPNG:
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Libs
• Snap SVGhttp://snapsvg.io/
• Raphaëlhttp://raphaeljs.com/
• infoviz http://infoviz.org/
• D3https://d3js.org/
• Processinghttp://processingjs.org/
• vivushttp://maxwellito.github.io/vivus/
• SpirographNhttps://github.com/seedcode/SpirographN
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Primerhttp://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
• SVG Historyhttp://www.w3.org/Graphics/SVG/History
• The Fall and Rise of SVGhttp://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=shuDAgAAQBAJhttp://commons.oreilly.com/wiki/index.php/SVG_Essentials
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Links
• The Art Of The SVG Filter And Why It Is Awesomehttps://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
• SVG Tutorialshttps://docs.webplatform.org/wiki/svg/tutorials
• Understanding SVG Coordinate Systems and Transformationshttps://sarasoueidan.com/blog/svg-transformations/
• Clipping in CSS and SVGhttps://sarasoueidan.com/blog/css-svg-clipping/
• How to use CSS and SVG clipping and masking techniqueshttps://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/
• Techniques for Creating Textured Texthttp://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/
• Styling Text With SVG Filtershttps://www.codeschool.com/blog/2016/04/21/styling-text-with-svg-filters/
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Links
• SVG Authoring Guide (Draft)http://w3c.github.io/svgwg/specs/svg-authoring/
• Building better Interfaces with SVGhttp://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
• The 37 Best Tools For Data Visualizationhttp://www.7wdata.be/article-general/the-37-best-tools-for-data-visualization/
• 30 Best Tools for Data Visualizationhttps://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
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
FileMaker + SVG
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
FileMaker + SVG
SVG Icons in Bu(onsseit Version 14
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Icons in Buttons
• seit FileMaker Version 14
• eigene SVG Icons nachladbar
h(ps://fmhelp.filemaker.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/filemaker-‐custom-‐bu(on-‐icons/
h(ps://filemakerexamples.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 Salzburgwww.filemaker-konferenz.com
SVG Icon Libraries
h(p://www.iconshock.com/
h(p://www.flaLcon.com/
h(ps://picons.me/
h(ps://icons8.com/
h(ps://nucleoapp.com/
h(ps://icomoon.io/
h(ps://github.com/Xaviju/inkscape-‐open-‐symbols
h(p://fontello.com/
h(p://iconmonstr.com/
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
nice!
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
nice! but...... there is so much more!!!
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
FileMaker + SVG
SVG Grafik im Webviewerseit Version 8.5
SVG Icons in Bu(onsseit Version 14
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
typische Szenarien
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Szenarien
• User Interface
• Gestaltungselemente
• Auswertungen / Charts
• interaktive Modelle
• Pläne / Karten
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
warum SVG?FileMaker kann das doch selber!
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Widgets
h(p://justgage.com/jqxGauge
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
custimized GUI
h(ps://sarasoueidan.com/tools/circulus/
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
SVG Charts
Quelle: h(p://bl.ocks.org/mbostock/5944371
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Charts
Quelle: h(p://mbostock.github.io/protovis/
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Charts
Quelle: h(ps://www.jasondavies.com/parallel-‐sets/
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
interaktive Modelle
Quelle: h(ps://commons.wikimedia.org/wiki/File:Human_body_front_and_side.svg
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
Raumpläne
Quelle: h(ps://www2.informaLk.uni-‐hamburg.de/fachschal/wiki/index.php/InformaLkum
TUTORIAL
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Gebäudepläne
Quelle: h(p://www.leuphana.de/services/lageplaene.html
5
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Karten DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
You get the idea ...
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG in FileMaker
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Code erzeugen
• SVG Code besteht aus Text
• kann per Script-Befehl erzeugt werden
• kann in Feldern und Variablenper Formel berechnet werden
• kann per JavaScript im Webviewergeneriert werden
• kann von externer URL geladen werden
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
SVG Code manipulieren
• SVG Objekte manipulieren in Bezug auf
• Sichtbarkeit
• Position, Größe
• Stile, Farben
• Effekte, Filter
• Animationen
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
1. SVG Code erzeugen
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.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 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
Wo liegt der Code?
• URL mit Verweis auf SVG-Dokument
• Data URL kann auf Variable verweisen
•
"data:text/html," & $$ SVG
• Warum ist es nützlich, den Code in einer Variable zu haben?
• Datenübergabe!
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Wo liegt der Code?
• Code liegt als Text in einer Variable vor
• Daten können als Platzhalter direkt in den Code eingebettet werden
• Austauschen ( $$ SVG; "<meinwert>"; "50" )
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Datenübergabe
<html><body>
<svg><circle cx="100" cy="125"
r="<meinwert>" /></svg>
</body></html>
<html><body>
<svg><circle cx="100" cy="125"
r="50" /></svg>
</body></html>
• Script-Schleife schreibt Text in eine Variable
• Daten werden aus Feld / Variable gelesen und in Text geschrieben
• Ergebnis verketten $$ SVG = $$ SVG & $neues Element
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Code Berechnen
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>" ]
• Script-Schleife schreibt Text in eine Variable
• Daten werden aus Feld / Variable gelesen und in Text geschrieben
• Ergebnis verketten $$ SVG = $$ SVG & $neues Element
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Code Berechnen
<svg><rect x="0" y="0" width="80" height="8" /><rect x="0" y="10" width="124" height="8" /><rect x="0" y="20" width="230" height="8" /><rect x="0" y="30" width="69" height="8" /><rect x="0" y="40" width="85" height="8" /><rect x="0" y="50" width="20" height="8" /><rect x="0" y="60" width="34" height="8" /><rect x="0" y="70" width="136" height="8" /><rect x="0" y="80" width="80" height="8" /><rect x="0" y="90" width="100" height="8" /><rect x="0" y="100" width="44" height="8" /><rect x="0" y="110" width="12" height="8" /></svg>
xy
DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
2. Interaktion mit SVG
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
Interaktion mit SVG – Wozu?
• Objekte ein-/ausblenden
• Mouse-Over Effekte
• Links zu FileMaker-Scripten (hier wird's interessant !!!)
• Links zu JavaScript-Funktionen (z.B. Drag&Drop)
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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-‐filemaker/
h(p://www.mbsplugins.eu/WebViewInstallCallback.shtml
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 ¶m=MeineID"> <...></a>
h(p://www.twdesigns.com/fmp_url_protocol/
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 ¶m=MeineID"> <...></a>
FMPURL-‐Protokoll Net Adress: "$" = local file
Dateiname (Extension opLonal)
Scriptname
Scriptparameter (Sonderzeichen müssen URL codiert werden!)
HTML-‐Element,das verlinkt werden soll
Trenn-‐Zeichen
h(p://www.twdesigns.com/fmp_url_protocol/
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
Demo DEMOFILE
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Download
• Vortragsfolien
• Demo-Dateien:
• http://blog.marcel-more.de/
• Konferenz-Server
SVG Demo.fmp12
DEMOFILE
SVG Menu.fmp12
SVG Text Effects.fmp12
SVG Backgrounds.fmp12
SVG Balkendiagramm.fmp12
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Beispiele
Hardware Liste mit Raumplan-‐Ansicht
Hardware Liste mit Raumplan-‐Ansicht
Hardware Liste mit Raumplan-‐Ansicht
Hallenplanfür Lagerhalle
Lagerhalle HeatmapAuswertung
HallenplanRegalgruppen
HallenplanPicking-‐Routen
h(p://blog.marcel-‐more.de/2015/10/08/the-‐power-‐of-‐javascript/
VOR-‐TRAG
Visualisierung Regal-‐Böden
RedakLonssystem für technische Zeichnungen
FileMaker Eingabe
RedakLonssystem für technische Zeichnungen
FileMaker Eingabe
FileMaker Eingabe
RedakLonssystem für technische Zeichnungen
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
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Beispielezeigen direkte Verknüpfung von
Datenanwendungen in FileMaker
mit grafischer Repräsentation als SVG
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
in 5 Schritten zum interaktiven Raumplan
TUTORIAL
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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
1
1
Neue Ebene erstellenUmrandungen als Overlay-‐Objekte anlegen
Name in Ebenen-‐Dialog eingeben = SVG Objekt-‐ID
2
3
3
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948) --><!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>
3
überflüssigen Code enxernen!
HTML Tags hinzufügen
<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>
3
überflüssigen* Code enxernen!
*einige Code-‐Teile funkLonieren im Webviewer nicht = leeres Fenster
<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
hier steht die ID
class ergänzen
<!-- CSS Stile für Raum-Selektion --> <defs> <style type="text/css"> <![CDATA[
.Selector { fill: red; fill-opacity: 10%; stroke-opacity: 70%; } *[id^='RAUM-'] { ! visibility: hidden; } #RAUM-1-1-12 { ! visibility: visible; } ]]> </style> </defs>
SLl für SelekLon
alle RAUM-‐IDs unsichtbar machen
Raum-‐Umrandung für gewünschte IDsichtbar machen
4
5
#RAUM-<raum-id> { !visibility: visible;}
HTML Template in einem Texxeld
Platzhalter für ID
5
der SVG-‐Plan lebt im Webviewer
5
#RAUM-<raum-id> { ! visibility: visible;}
#RAUM-1-1-12 { ! visibility: visible;}
Raum-‐Umrandung für ID sichtbar machen:
5
Click in Portalreihe setzt neuen ID-‐Wert in Template ein
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Wo liegen die Herausforderungen?
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Herausforderungen
• sich aufraffen, über den Tellerrandder FileMaker-Welt zu schauen!
• Einschränkungen bei der Implementierungim 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 Salzburgwww.filemaker-konferenz.com
Plattform-Unterstützung
FM Pro FM Go Webdirect
SVG anzeigen ✔ ✔ ✔
SVG Interaktion ✔ ✔ –
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Plattform-Unterstützung
FM Pro FM Go Webdirect
SVG anzeigen ✔ ✔ ✔
SVG Interaktion ✔ ✔ –1)3)
1) FMP URL erst ab Version 13.0v2 sinnvoll anwendbarhttp://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 umsetzbarhttps://www.mbsplugins.eu/WebViewInstallCallback.shtml
3) mehrere gleichzeitig installierte FMP Versionen für FMP URL problematisch
2)
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Plattform-Unterstützung
FM Pro FM Go Webdirect
SVG anzeigen ✔ ✔ ✔
SVG Interaktion ✔ ✔ ?
1) FMP URL in Webdirect nicht mit Webviewer nutzbarhttps://community.filemaker.com/thread/165366
2) umständlicher Hack bekannt, der aber nicht für UI nutzbar isthttp://pausepdx2014.wikispaces.com/Passing+URL+Parameters+to+WebDirecthttp://www.soliantconsulting.com/blog/2015/01/extending-webdirect-url-parameters
1) 2)
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
«Missing Link»
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Feature Request
• Native Schnittstellezwischen FileMaker und Webviewer
• Webviewer API
• Script-Aufruf FileMaker –> JavaScript
• Script-Aufruf JavaScript –> FileMaker
würde nahezu unbegrenzte Möglichkeiten für InterakLvität schaffen!
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Feature Request
• Native Schnittstellezwischen FileMaker und Webviewer
• HTML Platzhalter für $Vars und FM::Felder
• wie z.B. in 4D möglichhttp://www.4d.com/docs/CMG/CMG02070.HTMhttp://dddd.mettre.de/svgdynamics.shtml
würde TemplaLng für dynamischen
SVG-‐Code stark vereinfachen!
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
please vote !!
h(ps://community.filemaker.com/ideas/2113
36
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Warum SVGin FileMaker nutzen?
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.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 Salzburgwww.filemaker-konferenz.com
Fazit
ist Standard
ist Mainstream
ist cool !!!
geht in FileMaker
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
FileMaker + WEB-‐Standards= Dreamteam!
Danke fürEuer Interesse
Marcel Moré The Power of SVG
FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages