hubionmac.com » html

Unterschriften-Erfassung via Web-Viewer in Filemaker

hubi — Tue, 24 Jan 2012 03:13:55 +0000

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
Unterschriftenerfassung in Filemaker Beispiel v.1.0
63.74 kB (5 hits)

AppleScript-Code zu HTML

hubi — Mon, 07 Feb 2011 20:51:39 +0000

Hm, ich dachte ich hätte das Ding schon mal hier gepostet, kann es aber selber nicht mehr finden. Die CodeBoxes die ich hier und z.B. im AppleScript-Forum einbaue, erstelle ich über ein Skript, welches (ganz abartig) GUI-Skripting und Text-Edit verwendet, um den entsprechenden HTML-Code zu generieren. Auf diese Weise geht es aber recht schnell.
Dabei sind 2 Vorkehrungen zu treffen:

1. damit GUI-Skripting überhaupt funktioniert

In den Systemeinstellungen und Bedienungshilfe diesen Haken setzen:

2. Textedit soll html Dateien mit Inline-CSS abspeichern und neue Dokument als Richtext anlegen

Funktionsweise

Das Skript schnappt sich den Inhalt der Zwischenablage, öffnet TextEdit, fügt die Zwischenablage dort ein, speichert die Datei als HTML ab (GUI-Skripting, also selber keine Tastatur-Eingabe oder ähnliches dabei tätigen!) und zieht sich aus dieser dann den HTML-Code, verfrachtet diesen in einen entsprechenden div-container…. der Quellcode landet anschließen in der Zwischenablage

try

tell application “TextEdit”

activate

make new document

set n to name of window 1

set nn to my checkname_with_pdf_suffix((n & “.html”) as text, path to desktop, false)

tell application “System Events”

tell process “TextEdit”

delay 0.25

keystroke “v” using command down

delay 0.5

keystroke “s” using command down

delay 0.5

keystroke “d” using command down

delay 0.5

– keystroke “Ohne Titel” using command down

– delay 1

click pop up button 1 of group 1 of group 1 of sheet 1 of window n

delay 0.25

key code 125

delay 0.25

keystroke return

if n ≠ nn then

set n to nn

delay 0.5

keystroke “a” using command down

delay 0.5

set the clipboard to nn

keystroke “v” using command down

end if

delay 1

keystroke return

delay 1

keystroke “w” using command down

end tell

tell application “Finder”

–set h to POSIX path of (selection as alias)

if n ends with “.html” then

set h to “/Users/hubi/Desktop/” & n

else

set h to “/Users/hubi/Desktop/” & n & “.html”

end if

end tell

if h ends with “.html” then

set t to do shell script “cat ” & quoted form of h

repeat with i from 1 to count of every paragraph of t

if paragraph i of t = “” then

set t to paragraphs (i + 1) through ((count of every paragraph of t) – 2) of t

exit repeat

end if

end repeat

set the clipboard to “

” & t & “

” as text

do shell script “rm ” & quoted form of h

display_message(“body-contents in clipboard”, 1)

end if

on error msg

error msg

end try

on checkname_with_pdf_suffix(n, D, looped)

tell application “Finder”

set thefiles to name of every item of (D as alias)

end tell

if thefiles contains n then

if looped = false then

set n to ((characters 1 through -6 of n) & ” 1″ & (characters -5 through -1 of n)) as text

checkname_with_pdf_suffix(n, D, true)

else

set tmp to (last word of ((characters 1 through -6 of n) as text) as integer)

set tmpcount to (count of characters of (tmp as text)) + 5

set tmp to tmp + 1

set n to ((characters 1 through (-1 * tmpcount) of n) & tmp & (characters -5 through -1 of n)) as text

checkname_with_pdf_suffix(n, D, true)

end if

else

return n

end if

end checkname_with_pdf_suffix

on display_message(msgTXT, msgTimeout)

tell application “System Events”

set isRunning to ¬

(count of (every process whose name is “GrowlHelperApp”)) > 0

end tell

if isRunning = true then

tell application “GrowlHelperApp”

– Make a list of all the notification types

– that this script will ever send:

set the allNotificationsList to ¬

{“Status”}

– Make a list of the notifications

– that will be enabled by default.

– Those not enabled by default can be enabled later

– in the ‘Applications’ tab of the growl prefpane.

set the enabledNotificationsList to ¬

{“Status”}

– Register our script with growl.

– You can optionally (as here) set a default icon

– for this script’s notifications.

register as application ¬

“Finder” all notifications allNotificationsList ¬

default notifications enabledNotificationsList ¬

icon of application “Finder”

– Send a Notification…

notify with name ¬

“Status” title ¬

“Status” description ¬

msgTXT application name ¬

“Finder”

return true

end tell

else

activate

display dialog msgTXT giving up after msgTimeout

end if

end display_message

Kleine dynamische Video-Seite

hubi — Sat, 05 Feb 2011 01:45:30 +0000

Ein Doppelklick und fertig ist die Webseite mit einer kleinen Auswahl von Video-Files… war mal eine fixe Idee… hier für’s Archiv

DOWNLOAD
Video_Site v.0.1
4.51 MB (77 hits)

HTML-Email Signatur für Mail (inkl. Animation)

hubi — Wed, 02 Feb 2011 12:37:55 +0000

Apple Mail bietet einem ja einige Gestaltungsmöglichkeiten was Email-Signaturen angeht. Man kann sogar Bilder (sein Logo) mit in die Signatur ziehen, nur werden dadurch die Emails recht groß und beinhalten stets die angehängte Bilddatei.
Eine andere Möglichkeit sind HTML-Email-Signature, die man über einen kleinen Trick (Pfusch) in Apple Mail als Signatur einbinden kann. So kann die Signatur einen Link zu dem Logo enthalten, der ggf. nachgeladen wird, wodurch die Email kleiner wird. Auch besondere Style-Sheets sind dann kein Problem mehr. In dem Beispiel nutze ich -webkit-animation. Damit lassen sich Objekte animieren (hüpfendes Logo) sofern der Browser bzw. das Framework, welches zum Anzeigen verwendet wird auf Webkit basiert (Apple Mail, Mail iPod Touch/iPhone/iPad)

Also Schritt für Schritt:

Man baut sich eine schöne html-Webseite mit seiner Wunsch-Signatur
und öffnet die HTML-Datei in Safari
Nun wechselt man in Mail und öffnet dort die Einstellungen, und erstellt sich für den jeweiligen Account eine neue Signatur (der Inhalt ist dabei vollkommen egal)
Jetzt Apple Mail beenden!
Wieder in Safari wechseln und die Webseite Speichern

und zwar in
```
~/Library/Mail/Signatures
```
und als Name den er neusten .webarchive-Datei. Das ist nämlich die gerade erstellte Signature von Mail. Um den Namen direkt einzutragen im Sichern-Diaglog einmal auf die entsprechende Datei in der Liste klicken, dann wird der Name übernommen
Tadaaa:

HTML Newsletter via Shell Script

hubi — Tue, 25 Jan 2011 00:17:19 +0000

Als ich diesen Beitrag im Apple Forum gelesen hatte, erinnerte ich mich an sendEmail. Damit lassen sich über das Terminal Emails verschicken, ohne dass man zuerst mail oder gar sendmail konfigurieren muss. Es ist ein sehr praktisches Perl-Skript, mit dem man u.a. auch Anhänge versenden kann. Das Besondere ist aber eine recht neue Funktion, mit der man dem Programm den Email-Inhalt komplett übergeben kann, also auch den Email-Header. Auf diese weise lassen sich wunderbar gemixte HTML/TXT Emails (also Newsletter) verschicken.
Um zu verstehen wie so eine Multipart Email aussieht und warum überhaupt, empfiehlt es sich das hier zu lesen. Am Ende speichert man halt so etwas in der Art:

From: Hubi Schulze Content-Type: multipart/alternative; boundary=SendEmail-2--315609391 Subject: TestMail 222 Date: Sun, 23 Jan 2011 22:46:10 +0100 To: to@domain.com Mime-Version: 1.0 --SendEmail-2--315609391 Content-Transfer-Encoding: 8bit Content-Type: text/plain; charset=UTF-8 This is your text --SendEmail-2--315609391 Content-Transfer-Encoding: 8bit Content-Type: text/html; charset=UTF-8 This is your text --SendEmail-2--315609391--

…als Text Datei ab und verschickt es mit dem Code hier via sendEmail (sendEmail und die Text-Datei liegen dabei auf dem Schreibtisch):

~/Desktop/sendEmail -f from@domain.com -t to@domain.com -s smtp.gmail.com:25 -xu gmailusername -xp gmailpassword -o tls=auto -o message-format=raw -o message-file=~/Desktop/mymail.txt

Schaut man sich den Quellcode (reine Datei) eine Email in Apple Mail an, kann man auch gut sehen, wie so eine Email-Datei aufgebaut ist. Apple Mail verschickt nämlich selber solche Multipart Emails, sobald die Nachricht Formtierungen enhält… Wie man via Apple-Mail einen einfachen HTML-Newsletter verschicken kann (inkl. Animationen die auch auf dem iPhone sichtbar sind) schreibe ich später mal.

Webdev: Webkit Transition Beispiel

hubi — Mon, 31 May 2010 02:52:21 +0000

Ich wollte für eine kleine Web-Anwendung die ich gerade schreibe einen Effekt nutzen, den ich auf der Seite von The Wonderfactory gesehen habe. Dort kann man auf der Seite die Schlagzeilen durchblättern, was vermutlich mit der selben Technik umgesetzt wurde, die die auch für die HTML-5 Ausgabe der Sports-Illustrated genutzt haben.
Ich bin nicht so ein Freund von aufgeblähten JavaScript-Bibliotheken (zu aufgebläht für meine Seite) und diesen setTimeout-Pfusch den man nutzt, um etwas Bewegung in eine Seite zu bringen. Deshalb und weil die Seite die ich gerade schreibe wohl hauptsächlich von Webkit-Browsern angesteuert werden dürfte, habe ich mir so eine Wisch-Effekt-Box mit dem ein bissle JavaScript und etwas mehr CSS zusammengebaut. Unterm Strich können diese Webkit-Transition-Effekte einiges an JavaScript-Code überflüssig machen und die Seite läuft damit auch problemlos auf dem iPhone =)
Und die Animation soll angeblich auch von der Hardware beschleunigt werden.
Link zur Demo Seite

Paint mit HTML

hubi — Sun, 21 Feb 2010 22:12:59 +0000

Mal sehen, was sich sonst noch dazu finden wird =)
html_paint1

Hubi’s HTML Gallerie

hubi — Sun, 13 Dec 2009 04:12:53 +0000

Das Skript befindet sich zwar noch in der Entwicklung, aber …mal sehen, was noch kommt =)

Was tut das Skript:

Man wählt zunächst einzelne Bilder oder Ordner die Bilder (oder auch UnterOrdner) mit Bildern enthalten (Drag&Drop auf das Skript)aus. Jeweils im Verzeichnis der Bilder wird eine _Gallery.html Datei mit Thumbnails der Bilder erzeugt. Das besondere daran ist:

dass die Thumbnails als Inline-Grafik in der html-Datei gespeichert sind, und so keine Datei-Wirrwar entsteht.

Zudem werden beim “rüberfahren” mit der Maus (kein JavaScript sonder pures CSS) noch Infos wie Dateiname, Größe und Auflösung angezeigt…

und dann wird das ganze auch noch nicht in einer Tabelle, sondern in einem div-Konstrukt angezeigt, und passt sich somit von “Natur aus” dynamisch an die Größe des Browser-Fenster an =)

Beim Aufruf über einen Server verringern sich die einzelnen Verbindungen, es wird einfach eine HTML-Datei geladen, nicht eine HTML-Datei + x-Thumnail-Dateien—- > Unterm Strich müsste es schneller laufen

Beispiel-HTML-Gallerie

(Nur die Thumbnails, ohne Verlinkung zu den Originalen…)
_gallery

Download

(Version 1.1)
17.12.2008 – Jetzt kann das Skript auch PDFs in der Galerie Darstellen, immer die 1. Seite und in der Info wird auch die Anzahl der Seite angegeben =)
DOWNLOAD
Hubi's HTML Gallerie v.1.1
40.49 KB (201 hits)
(Version 1.0)
DOWNLOAD
Hubi's HTML Gallerie v.1.0
37.11 KB (172 hits)

Base64 Encoding via Drag&Drop

hubi — Tue, 10 Mar 2009 23:46:17 +0000

Ich programmiere in letzter Zeit immer mal wieder Webseiten, die lokal ausgeführt werden sollen. Dabei möchte ich nach Möglichkeit die Anzahl der Dateien auf eine einzige beschränken und binde deshalb Bilder direkt in den HTML-Code ein. Hiefür müssen die Dinger base64-kodiert werden. Mehr zu dem Thema hier (das funktioniert wohl mit FireFox und Safari, der IE tut es wohl nicht immer).

Auf jeden Fall habe ich mir ein kleines AppleScript Droplet gebaut, mit dem ich mit den Base64 Code direkt in die Zwischenablage kopieren kann, indem ich einfach das Bild auf das Skript ziehe…

Code zum markieren einmal anklicken

on open these

if (count of these) = 1 then

repeat with this in these

tell application “Finder” to set this_x to POSIX path of this

do shell script “cat “ & quoted form of this_x & “|openssl enc -base64 | pbcopy”

end repeat

else

error “Only one please!”

end if

end open

und hier natürlich ein kleines Beispiel Inline-Grafiken