138
Marcel Moré The Power of SVG FileMaker Konferenz 2016 Salzburg www.filemaker-konferenz.com The Power of SVG Marcel Moré

FMK2016 - Marcel Moré - The Power of SVG

Embed Size (px)

Citation preview

Page 1: 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é

Page 2: FMK2016 - Marcel Moré - The Power of SVG

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

Page 3: FMK2016 - Marcel Moré - The Power of SVG

The Power of SVG

Page 4: FMK2016 - Marcel Moré - 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?

Page 5: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Worum geht es?

Page 6: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Was wäre wenn...

Page 7: FMK2016 - Marcel Moré - The Power of SVG

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

Page 8: FMK2016 - Marcel Moré - The Power of SVG

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

Page 9: FMK2016 - Marcel Moré - The Power of SVG

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

Page 10: FMK2016 - Marcel Moré - The Power of SVG

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

Page 11: FMK2016 - Marcel Moré - The Power of SVG

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

Page 12: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

...und es sollte gleichermaßen performant

auf «Desktop» und «Mobile» funktionieren

Page 13: FMK2016 - Marcel Moré - The Power of SVG

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!

Page 14: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

...bestimmt wäre das alles ziemlich kompliziert?

Page 15: FMK2016 - Marcel Moré - The Power of SVG

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?

Page 16: FMK2016 - Marcel Moré - The Power of SVG

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..

Page 17: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Lasst diese Vorstellung für einen Moment auf Euch wirken....

Page 18: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Was würdet Ihr damit anfangen?

Page 19: FMK2016 - Marcel Moré - The Power of SVG

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

Page 20: FMK2016 - Marcel Moré - The Power of SVG

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...

Page 21: FMK2016 - Marcel Moré - The Power of SVG

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

Page 22: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

SVG im Überblick

Page 23: FMK2016 - Marcel Moré - The Power of SVG

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

Page 24: FMK2016 - Marcel Moré - The Power of SVG

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

Page 25: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

SVG Dokument

<svg width="640" height="480">!

</svg>

Page 26: FMK2016 - Marcel Moré - The Power of 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

Page 27: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Grundelemente

• Rechteck

• Kreis

• Ellipse

• Linie

• Polygonzug

• Polygon

• Text

• Bild

Page 28: FMK2016 - Marcel Moré - The Power of SVG

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"  />

Page 29: FMK2016 - Marcel Moré - The Power of SVG

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" />

Page 30: FMK2016 - Marcel Moré - The Power of SVG

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

Page 31: FMK2016 - Marcel Moré - The Power of SVG

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

Page 32: FMK2016 - Marcel Moré - The Power of SVG

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/

Page 33: FMK2016 - Marcel Moré - The Power of SVG

<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

Page 34: FMK2016 - Marcel Moré - The Power of SVG

<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

Page 35: FMK2016 - Marcel Moré - The Power of SVG

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

Page 36: FMK2016 - Marcel Moré - The Power of SVG

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

Page 37: FMK2016 - Marcel Moré - The Power of SVG

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

Page 38: FMK2016 - Marcel Moré - The Power of SVG

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

Page 39: FMK2016 - Marcel Moré - The Power of SVG

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

Page 40: FMK2016 - Marcel Moré - The Power of SVG
Page 41: FMK2016 - Marcel Moré - The Power of 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:

Page 43: FMK2016 - Marcel Moré - The Power of SVG

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

Page 44: FMK2016 - Marcel Moré - The Power of SVG

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

Page 45: FMK2016 - Marcel Moré - The Power of SVG

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

Page 46: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

FileMaker + SVG

Page 47: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

FileMaker + SVG

SVG  Icons  in  Bu(onsseit  Version  14

Page 48: FMK2016 - Marcel Moré - The Power of SVG

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

Page 49: FMK2016 - Marcel Moré - The Power of SVG

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/

Page 50: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

nice!

Page 51: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

nice! but......  there  is  so  much  more!!!

Page 52: FMK2016 - Marcel Moré - The Power of SVG

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

Page 53: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

typische Szenarien

Page 54: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Szenarien

• User Interface

• Gestaltungselemente

• Auswertungen / Charts

• interaktive Modelle

• Pläne / Karten

Page 55: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

warum SVG?FileMaker kann das doch selber!

Page 56: FMK2016 - Marcel Moré - The Power of SVG
Page 57: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Widgets

h(p://justgage.com/jqxGauge

DEMOFILE

Page 58: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

custimized GUI

h(ps://sarasoueidan.com/tools/circulus/

DEMOFILE

Page 59: FMK2016 - Marcel Moré - The Power of SVG

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/

Page 61: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

SVG Charts

Quelle:  h(p://bl.ocks.org/mbostock/5944371

Page 63: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

SVG Charts

Quelle:  h(ps://www.jasondavies.com/parallel-­‐sets/

Page 64: FMK2016 - Marcel Moré - The Power of SVG

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

Page 65: FMK2016 - Marcel Moré - The Power of SVG

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

Page 66: FMK2016 - Marcel Moré - The Power of SVG

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

Page 68: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Karten DEMOFILE

Page 69: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

You get the idea ...

Page 70: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

SVG in FileMaker

Page 71: FMK2016 - Marcel Moré - The Power of SVG

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

Page 72: FMK2016 - Marcel Moré - The Power of SVG

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

Page 73: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

1. SVG Code erzeugen

Page 74: FMK2016 - Marcel Moré - The Power of SVG

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>

Page 75: FMK2016 - Marcel Moré - The Power of SVG

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>

Page 76: FMK2016 - Marcel Moré - The Power of SVG

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

Page 77: FMK2016 - Marcel Moré - The Power of SVG

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

Page 78: FMK2016 - Marcel Moré - The Power of 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?

Page 79: FMK2016 - Marcel Moré - The Power of SVG

• 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>

Page 80: FMK2016 - Marcel Moré - The Power of 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

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>" ]

Page 81: FMK2016 - Marcel Moré - The Power of 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

Page 82: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

2. Interaktion mit SVG

Page 83: FMK2016 - Marcel Moré - The Power of 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)

Page 84: FMK2016 - Marcel Moré - The Power of SVG

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)

Page 85: FMK2016 - Marcel Moré - The Power of SVG

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

Page 86: FMK2016 - Marcel Moré - The Power of SVG

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 &param=MeineID"> <...></a>

h(p://www.twdesigns.com/fmp_url_protocol/

Page 87: FMK2016 - Marcel Moré - The Power of SVG

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 &param=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/

Page 88: FMK2016 - Marcel Moré - The Power of SVG

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

Page 89: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Demo DEMOFILE

Page 91: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Beispiele

Page 92: FMK2016 - Marcel Moré - The Power of SVG

Hardware  Liste  mit  Raumplan-­‐Ansicht

Page 93: FMK2016 - Marcel Moré - The Power of SVG

Hardware  Liste  mit  Raumplan-­‐Ansicht

Page 94: FMK2016 - Marcel Moré - The Power of SVG

Hardware  Liste  mit  Raumplan-­‐Ansicht

Page 95: FMK2016 - Marcel Moré - The Power of SVG

Hallenplanfür  Lagerhalle

Page 96: FMK2016 - Marcel Moré - The Power of SVG

Lagerhalle  HeatmapAuswertung

Page 97: FMK2016 - Marcel Moré - The Power of SVG

HallenplanRegalgruppen

Page 99: FMK2016 - Marcel Moré - The Power of SVG

 Visualisierung  Regal-­‐Böden

Page 100: FMK2016 - Marcel Moré - The Power of SVG

 RedakLonssystem  für  technische  Zeichnungen

FileMaker  Eingabe

Page 101: FMK2016 - Marcel Moré - The Power of SVG

 RedakLonssystem  für  technische  Zeichnungen

FileMaker  Eingabe

Page 102: FMK2016 - Marcel Moré - The Power of SVG

FileMaker  Eingabe

 RedakLonssystem  für  technische  Zeichnungen

Page 103: FMK2016 - Marcel Moré - The Power of SVG

 RedakLonssystem  für  technische  Zeichnungen

Shop  Ausgabe

Page 104: FMK2016 - Marcel Moré - The Power of SVG

 RedakLonssystem  für  technische  Zeichnungen

Shop  Ausgabe

Page 105: FMK2016 - Marcel Moré - The Power of SVG

 RedakLonssystem  für  technische  Zeichnungen

Shop  Ausgabe

Page 106: FMK2016 - Marcel Moré - The Power of SVG

 RedakLonssystem  für  technische  Zeichnungen

Shop  Ausgabe

Page 107: FMK2016 - Marcel Moré - The Power of SVG

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

Page 108: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

in 5 Schritten zum interaktiven Raumplan

TUTORIAL

Page 109: FMK2016 - Marcel Moré - The Power of SVG

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

Page 110: FMK2016 - Marcel Moré - The Power of SVG

1

Page 111: FMK2016 - Marcel Moré - The Power of SVG

1

Neue  Ebene  erstellenUmrandungen  als  Overlay-­‐Objekte  anlegen

Page 112: FMK2016 - Marcel Moré - The Power of SVG

Name  in  Ebenen-­‐Dialog  eingeben  =  SVG  Objekt-­‐ID

2

Page 113: FMK2016 - Marcel Moré - The Power of SVG

3

Page 114: FMK2016 - Marcel Moré - The Power of SVG

3

Page 115: FMK2016 - Marcel Moré - The Power of SVG

<?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

Page 116: FMK2016 - Marcel Moré - The Power of SVG

<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

Page 117: FMK2016 - Marcel Moré - The Power of SVG

<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

Page 118: FMK2016 - Marcel Moré - The Power of SVG

<!-- 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

Page 119: FMK2016 - Marcel Moré - The Power of SVG

5

#RAUM-<raum-id> { !visibility: visible;}

HTML  Template  in  einem  Texxeld

Platzhalter  für  ID

Page 120: FMK2016 - Marcel Moré - The Power of SVG

5

der  SVG-­‐Plan  lebt  im  Webviewer

Page 121: FMK2016 - Marcel Moré - The Power of SVG

5

#RAUM-<raum-id> { ! visibility: visible;}

#RAUM-1-1-12 { ! visibility: visible;}

Raum-­‐Umrandung  für  ID  sichtbar  machen:

Page 122: FMK2016 - Marcel Moré - The Power of SVG

5

Click  in  Portalreihe  setzt  neuen  ID-­‐Wert  in  Template  ein

Page 123: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Wo liegen die Herausforderungen?

Page 124: FMK2016 - Marcel Moré - The Power of SVG

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)

Page 125: FMK2016 - Marcel Moré - The Power of SVG

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 ✔ ✔ –

Page 126: FMK2016 - Marcel Moré - The Power of SVG

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)

Page 127: FMK2016 - Marcel Moré - The Power of SVG

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)

Page 128: FMK2016 - Marcel Moré - The Power of SVG

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...

Page 129: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

«Missing Link»

Page 130: FMK2016 - Marcel Moré - The Power of SVG

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!

Page 131: FMK2016 - Marcel Moré - The Power of SVG

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!

Page 132: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

please  vote  !!

h(ps://community.filemaker.com/ideas/2113

36

Page 133: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Warum SVGin FileMaker nutzen?

Page 134: FMK2016 - Marcel Moré - The Power of SVG

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

Page 135: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Fazit

ist  Standard

ist  Mainstream

ist  cool  !!!

geht  in  FileMaker

Page 136: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

FileMaker  +  WEB-­‐Standards=  Dreamteam!

Page 137: FMK2016 - Marcel Moré - The Power of SVG

Danke  fürEuer  Interesse

Page 138: FMK2016 - Marcel Moré - The Power of SVG

Marcel Moré The Power of SVG

FileMaker Konferenz 2016 Salzburgwww.filemaker-konferenz.com

Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages