A partir de la versión 19.3.1 FileMaker introduce cambios importantes en el motor del visualizador web. Es preciso tener esto en cuenta a la hora de tratar con scripts de JavaScript

Conforme estaba preparando la entrada anterior, leer un código QR con FileMaker en una imagen de un campo contenedor, me iba haciendo la pregunta del encabezado. Sabía que tal como estaba preparado el archivo de FM no iba a ser posible, al menos la forma de pasar el valor de la variable de JS a FM era exclusiva de FM19, pero ¿se podría hacer?

Como ya llevaba un razonable estrujamiento de meninges, decidí aparcar la pregunta para otra ocasión y no demorar más la publicación de una entrada que, pese a que seguro que se puede hacer mejor, funcionaba y daba respuesta a una cuestión planteada. Ya nos divertiremos con eso en otra ocasión.

Pero la verdad es que servidor necesita de bien poco para meterse a chapotear en un charco, y ha bastado con recibir una consulta idéntica a la pregunta de inicio para intentar responderla y responderme. Así que, allá vamos:

Incompatibilidad de caracteres

Aún tengo instalado el FM18, y tal como intuía, el fichero de la entrada anterior carga perfectamente en él, pero el JS no funciona.

Sospechaba que el visualizador web de FM18, o mejor dicho de FM<19, no era capaz de procesar correctamente el JS incluido en el archivo, y por ahí van los tiros:

https://community.claris.com/en/s/article/Claris-FileMaker-Pro-19-3-1-Release-Notes

Las pruebas de la entrada anterior están hechas con el FM19 debidamente actualizado, concretamente muestra que estoy usando la versión 19.4.2.204 en Windows 10

En el enlace de Claris que precede a estas líneas podemos ver que las versiones anteriores a la 19.3.1 utilizan el motor de Internet Explorer. Pues bien, si resulta que el JavaScript que usamos utiliza el estándar ES6, lo más normal hoy, no funcionará con estas versiones de FileMaker:

https://www.w3schools.com/js/js_es6.asp

En este enlace anterior podemos ver que JS ES6 no está soportado por ninguna versión de Internet Exploter, ¡uy, perdón! “Explorer”.

JS ES5 Sí

https://www.w3schools.com/js/js_es5.asp

Con el estándar anterior de JS no debería haber problemas. En la tabla de compatibilidad vemos que aparece esta vez IE 9.0

Así que, llegados a este punto, habría dos opciones: o arremangarnos y reescribir el código JS utilizado, y sinceramente, antes me decantaría por uno de los doce trabajillos de Hércules, o buscar otra librería en JavaScript que se llevara bien con estas versiones de FileMaker, en la grata compañía del perro de Hades.

LazarSoft/jsqrcode

Una de las que tenía echado ya el ojo de antemano es esta:

https://github.com/LazarSoft/jsqrcode

Y había llegado a ella a través de este enlace:

https://ourcodeworld.com/articles/read/271/how-to-decode-a-qr-code-from-an-image-with-javascript

Ahí se explica muy claramente cómo leer un QR de una imagen con cuatro líneas de código y las librerías existentes en el enlace anterior de GitHub, además, pasando la imagen como una cadena en base64, justo lo que necesitamos.

Si no me decanté en un primer momento por esta serie de scripts es porque tienen ya una cierta antigüedad y en el apartado de cuestiones se presentan algunos problemas que no han sido resueltos. Sin embargo, tras probar alguna otra librería, esta es la única que he podido y sabido hacer funcionar en FM18

A mogollón

Para hacer funcionar esto en nuestro FM necesitaríamos crear 17 campos de texto globales, meter en ellos el contenido de cada uno de los scripts y cargarlos en el orden indicado:

Esto, aparte de ser una paliza, apareja que como cometamos el más mínimo error no nos va a funcionar, así que decidí simplificar las cosas, gracias a esta estupenda página:

https://www.toptal.com/developers/javascript-minifier/

Lo que he hecho ha sido copiar el código de cada uno de los scripts, “minificarlo” y después juntarlo todo en un único archivo JS en el orden indicado. El resultado se puede descargar del siguiente link:

qrall.zip

El archivo contiene el script qrall.js que es el que se ha creado según lo comentado. También contiene las fuentes y un html para comprobar el funcionamiento y que vamos a ver a continuación.

ourcodeworld.com

Comenzamos echando un vistazo al código que aparece en la mencionada web, la que nos ha puesto sobre la pista y que, recordamos, está aquí:

https://ourcodeworld.com/articles/read/271/how-to-decode-a-qr-code-from-an-image-with-javascript

El código funciona perfectamente y vemos que es muy simple: carga los scripts, pasa los datos de la imagen del QR en base64 y luego hay una función para decodificar el contenido de la imagen que se activa pulsando un botón.

Para nuestros propósitos, ese botón nos estorba bastante, así que vamos a simplificar todavía más este código y vamos a hacer que funcione directamente al cargar la página, ya que nosotros no colocaremos los datos de la imagen en el código sino que los leeremos de un campo, o de dos esta vez, pero para probar, y ver que funciona el script que hemos preparado, vamos a seguir poniendo todo en el código:

Parece largo, pero si le quitamos los comentarios y el código de la imagen se queda en nada. Vemos que los cambios que hemos realizado son la fusión de todos los scripts en uno solo y que hemos modificado un poquito la función que ahora se lanza al acabar de cargar la página.

Este html está incluido en el zip, se llama «prueba.html» y funciona perfectamente. Se puede probar, que para eso está. Al ejecutarlo mostrará en pantalla «https://wampirius.com». Y, por si alguien piensa que hay truco, en el mismo archivo está comentada una página donde se puede copiar el contenido de la variable, pegarlo y mostrará el QR utilizado.

Bien, pues con esto ya funcionando, podemos ir preparando el campo de cálculo del archivo FileMaker que vamos a crear.

Bueno, aquí lo suyo sería preparar primero el FileMaker y luego preparar el contenido del campo de cálculo para el visualizador, pero ya que estamos con el código, por seguir este orden, vamos a centrarnos en el código apuntando los nombres que deberemos dar a los campos.

Hay una cosa que difiere de la anterior entrada, que aquí sí que hay que poner el tipo de imagen que estamos pasando, lo podemos ver que se indica al principio del contenido de la variable «imageURI». Vamos, por tanto, a necesitar un campo en FileMaker que nos devuelva el tipo de imagen, a ese campo lo llamaremos tipoimagen. Nos ocuparemos de él cuando creemos el archivo FM.

El resto de la variable imageURI lo compone el código en base64, así que eso vendrá de un campo que llamaremos qrbase64.

Por último, necesitaremos un campo de texto con almacenamiento global para contener el script en JS. A ese campo lo llamaremos como al script: qrall.

Y con estos datos ya podemos adaptar nuestro «prueba.html» a lo que será el contenido del campo de cálculo que servirá para mostrarse en el visualizador web:

Luego lo pondremos en formato copy&paste, de momento es sólo para hacernos una idea.

FileMaker

Sencillito, lo suficiente para probar.

Cinco campos:

- qrall: De texto con almacenamiento global para meter el script. Tendremos que copiar a este campo el texto del script qrall.js que se encuentra en el zip que se puede descargar un poco más arriba.
- qr: Contenedor donde arrastraremos las imágenes.
- qrbase64: De cálculo con resultado texto.
- tipoimagen: De cálculo con resultado texto para extraer la extensión de la imagen.
- resuelve: De cálculo con resultado texto que generará el código que habrá de interpretar el visualizador.

Contenido de los campos de cálculo

qrbase64: Este ya es conocido de entradas anteriores, el contenido del mismo es el siguiente:

Base64EncodeRFC ( 4848 ; qr )

tipoimagen: Es curioso, GetContainerAttribute puede darnos un montón de cosas… menos la extensión, manda narices. Bueno, pues la forma de sacarla por la que he optado es la siguiente: obtenemos el nombre completo del archivo del contenedor, sustituimos los puntos que pueda haber por espacios para, digamos, convertir el nombre en una frase y de dicha frase nos quedamos con la palabra de la derecha.

RightWords ( Substitute ( GetContainerAttribute ( qr ; "filename" ) ; "." ; " " ) ; 1 )

resuelve: Es el campo que ya hemos visto antes. El código para copiar y pegar es el siguiente:

"<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=Utf-8'>
<script>" & qrall & "</script>
</head>
<body>
<script>
var imageURI = 'data:image/" & tipoimagen & ";base64," & qrbase64 & "'; 
window.onload = function() {
qrcode.decode(imageURI);
qrcode.callback = function(decodedInformation){
var resultado = decodedInformation;
document.write(resultado);
};
}
</script>
</body>
</html>"

Visualizador web

Ya sólo queda, en presentación, instalar el visualizador web indicándole una dirección web personalizada, para la cual seleccionaremos el campo resuelve:

Y listo para su uso:

Dejo aquí el ejemplo por si alguien se lo quiere descargar:

QR_FM18

Resumiendo

Sí que es posible leer QR con versiones anteriores a FM19, pero el motor que usa el visualizador hace que no pueda entender expresiones del último estándar de JS, que ojo, no es que sea de anteayer, salió en junio de 2015.

Y repito, que los scripts que he usado aquí no son precisamente los mejores. Hay QR que no pueden leer, bien por tamaño, por densidad, por tipo… Por lo que estos scripts no deberían usarse para ningún desarrollo serio, sino exclusivamente como un punto de partida y experimentación.

Esto es sólo un ejemplo de que con FM < 19.3.1 sí que se pueden leer QR, aunque con ciertas limitaciones.

Hasta la próxima!

La imagen de portada está realizada a partir de una fotografía de Mabel Amber en Pixabay

¿Leer QR con versiones anteriores a FileMaker 19? Sí, pero…