Unterschriften-Erfassung via Web-Viewer in Filemaker

Ein Bekannter von mir wollte sich eine Filemaker-Datenbank aufbauen, mit der Mitarbeiter papierlos den Empfang von Paketen quittieren können sollten und das mittels Wacom-Tablet und Filemaker.

Ich habe Filemaker nie so wirklich gemocht, auch wenn es sicherlich eine Berechtigung hat, nur das Face-Lifting ist einfach mehr als überfällig. Wirkliche Neuerungen hat es meiner Erfahrung nicht gegeben und reine Web-Anwendungen sind nicht nur schöner, schneller, günstiger, leichter anzupassen, nein sie laufen sogar von Natur aus im Netz.

Der erste Ansatz

Nun ist die Erfassung einer Unterschrift weder in Filemaker noch über einen Webbrowser eine alltägliche Sache, doch auch nicht unmöglich.
In Filemaker direkt geht so etwas wohl gar nicht und ein extra Programm fernab der Datenbank für die Erfassung zu nutzen, ist etwas unpraktisch und würde den Nutzer aus der Anwendung reissen. Ich wurde aber nach einer kurzen Suche recht schnell fündig und fand hier ein super Beispiel, wie man via JavaScript und mit einem Canvas-Objekt ein kleines Zeichen-Programm erstellen kann.

Jetzt hat man die Unterschrift, wie aber speichern?

Der nächste Frage war nun nur noch, wie die so erfasste Unterschriften in der Datenbank gespeichert werden könnte. Meine erste Idee war, einen Webserver laufen zu lassen, per JavaScript das Unterschriften-Canvas in ein Bild zu wandeln (siehe hier) und diese Daten dann via POST auf den Server zu laden, dann auf einen Link umzuleiten, der auf dem Mac wiederum ein AppleScript startet (wie hier beschrieben), welches dann das Image vom Server lädt und in die Datenbank importiert… ziemlich quer und kompliziert gedacht, zudem auch recht aufwendig, da ein Webserver laufen muss, der abgesichert werden müsste.

So geht’s auch ohne Webserver

Später kam mir eine etwas pflegeleichtere Lösung in den Sinn, es wird ein Screenshot der Unterschrift angefertigt und entsprechend importiert. Das Problem hierbei ist zunächst das screencaputure-Tool von Apple, welches ohne Interaktion mit dem Nutzer nur einen kompletten Screenshot und nicht nur einen Ausschnitt des Bildschirms speichern kann. Aber aus diesem Bild kann man ja den Bereich nachträglich ausschneiden, nur leider nicht via sips oder image-events (ist eigentlich das gleiche wie sips nur als AppleScript-Anwendung). In diesen Standard-Anwendungen kann man nur Ränder entfernen und von der Mitte ausgehend ausschneiden. Deshalb musste nun doch ein Tool ran, welches das via Shellscript im Hintergrund erledigen kann und so bin ich auf das “CoreImageTool” gestoßen, welches eine Art Shell-Schnittstelle zum Core-Image Fragework bereitstellt. Weitere Infos dazu findet ihr hier. Das ist zwar immer noch nicht perfekt, ersparte mir aber für mich komplizierte Verrenkungen in Phyton, was vermutlich aber eine entsprechende Alternative sein könnte.

Am Ende

Die fertige Lösung sieht also so aus:
In der Datenbank ist ein Webview eingebunden, der eine Lokale HTML-Datei anzeigt, die ein Canvas-Element enthält. In diesem WebView wird die Unterschrift geleistet und anschließend startet ein Knopf im Filemaker-Layout ein Skript, welches einen Screenshot anfertigt und via CoreImageTool die Unterschrift daraus ausschneidet (die Berechnung der Koordinaten des Webviews ist etwas tricky, ist aber im Beispiel-Skript entsprechend kommentiert). Anschließend übernimmt wieder Filemaker und importiert die Ausgeschnittene Unterschrift in ein Container-Feld innerhalb der Filemaker-Datenbank.
Um das ganze direkt in einem Beispiel zu verdeutlichen…

Video mit Erläuterung

Youtube Link

Funktionsbeispiel aus dem Video

[Download not found]

Leave a Reply