2023

Dec

11

Av Rolf

QR-koden uppfanns i Japan 1994 och är mer aktuell idag än någonsin tidigare. För lite mer än 10 år sedan skrev jag om hur du får in QR-koder som bilder i FileMaker med scriptsteget Infoga från Url, dvs. hämtar QR-koden som en bild från en webbtjänst. Det finns idag en mängd webbtjänster för att generera QR-koder, förutom vår. Men hur genereras en QR-kod och sparas som en bild i FileMaker utan internet-åtkomst? (Jo, det finns datorer utan internet-åtkomst!)

Jag gjorde en liten exempeldatabas som kan generera QR-koder utan internet-åtkomst. Skriv in texten du önskar ska finnas i QR-koden och klicka på Skapa QR-kod. Du får en PNG-bild med QR-koden i ett container-fält. Exempeldatabasen ser ut så här:

Du laddar ner exempel-databasen här: QRkoder.fmp12

Web viewer och Javascript

Exemplet använder en web viewer och ett Javascript-bibliotek för att skapa QR-koden. Web viewern (webbvisaren) introducerades i FileMaker 8.5 och används på senare tid flitigt för att med hjälp av Javascript visa kalendrar, kanban-diagram mm. Det finns många exempel som följer med FileMaker, och ännu fler om du letar t.ex. på Claris Marketplace. Tänk på att web viewern inte fungerar i server-script.

En snabb googling hittar några hundra Javascript-bibliotek som alla kan generera QR-koder, de flesta s.k. open source. Bland de första i listan fanns vid söktillfället EasyQRCodeJS. Jag gillar när det är ”easy” så jag valde den. Dessutom finns en funktion som talar om när QR-koden är genererad vilket passar utmärkt, jag kan då spara QR-koden som en bild i ett container-fält i aktuell post i databasen.

Exempeldatabasen består av två tabeller, en tabell med endast en post där HTML- och Javascript-koden sparas i två olika fält och en tabell där jag kan skapa flera poster för att skapa olika QR-koder. I tabellen med HTML- och Javascript-kod har jag lagt fälten i olika flikar. Klicka på knappen HTML & JS upptill till höger för att se innehållet i HTML-tabellen.

Det finns ytterligare två fält i tabellen i två andra flikar. Jag återkommer till dessa lite längre ner.

I tabellen HTML finns ett fält som heter HTML. Det innehåller koden för webbsidan, egentligen endast en ”div”-tag (där QR-koden skapas) och Javascript-koden för att skapa en QR-kod. Javascript-koden exekveras direkt när webbsidan öppnas i webbvisaren.

I tabellen HTML finns också ett fält där jag klistrat in hela Javascript-biblioteket för EasyQRCodeJS. I HTML-koden har jag skrivit in en ”textkod” (<<EASYQRJS>>) som ska ersättas med hela koden för Javascript-biblioteket.

I fältet HTML i tabellen HTML har jag också lagt in en textkod (<<QRTEXT>>) som ska ersättas med den text som QR-koden ska bestå av.

När du klickar på knappen Skapa QR-kod startar ett script med två steg som först använder FileMaker-funktionen Substitute för att ersätta textkoderna och få en hel webbsida som sedan i nästa scriptsteg uppdateras i web viewern.

Beräkningen för att få webbsidan ser ut så här:

$html =
Substitute ( HTML::HTML; 
  ["<<QRTEXT>>"; QRkoder::Text];
  ["<<EASYQRJS>>"; HTML::JS_EasyQR]
)

Script-steget för att uppdatera webbvisaren ser ut så här:

Ställ in webbvisaren [Objektnamn: "qr"; URL: "data:text/html, " & $html

Web viewern finns till höger om den synliga layout-ytan. Den behöver alltså inte vara synlig. Det viktiga är att web viewern får ett namn, det anger du i Granskaren när web viewern är markerad. Jag har gett web viewern namnet ”qr”. Observera att du måste tillåta web viewern att anropa FileMaker med Javascript (kryssrutan längst ner i bilden nedan).

När web viewern uppdateras körs Javascriptet och QR-koden generas. När QR-koden är klar i web viewern använder jag Javascript-funktionen FileMaker.Performscript. Som parameter till FileMaker-scriptet skickas QR-koden som en PNG-bild i Base64-format. För att FileMaker ska hinna ladda in Javascript-objektet som behövs för att starta ett script i FileMaker har jag lagt in en paus i Javascript-koden på 0,3 sekunder (du kan behöva öka värdet om du inte får något resultat på din dator).

I FileMaker-scriptet som anropas, i exemplet döpt till ”Bild”, tas inledande tecken bort och resterande omvandlas till ett container-fält med funktionen Bas64Decode. På den tredje och sista raden i scriptet verkställs posten.

I knappen ”Skapa QR-kod med logo” har jag lagt in en funktion som finns i EasyQRCodeJS för att skapa en symbol i QR-kodens mitt. HTML-koden är utökad med en extra rad och symbolen hämtas från ett container-fält i tabellen HTML (se de två andra flikarna i HTML-tabellen).

Det finns en mängd andra funktioner i EasyQRCodeJS som du kan prova.

Du laddar ner exempel-databasen här: QRkoder.fmp12

Skriv en kommentar

Din epost-adress stannar hos oss.