Hace no mucho me metí en otro charco: un desarrollo que requería la creación de un montón, pero un montón, de etiquetas con códigos QR distintos.
El desarrollo tiene que ver con la detestable pandemia que estamos sufriendo y la prevención de los contagios, pero eso es otra historia que quizás trate en otra entrada, el caso es que para ello necesitaba crear una ingente cantidad de QR distintos y lo de ir uno a uno generándolos mediante alguna página web era absolutamente inviable.
Resulta que como en el trabajo usamos FileMaker y este soporta JavaScript, pues esa podía ser la solución. Y lo fue. Así que por si a alguien le puede servir, ahí va.
Generación de QR con JQuery
Si queremos generar códigos QR en la web, hay algunos scripts en JQuery que realizan esta labor, y JQuery no deja de ser JavaScript, así que por ahí vamos bien. Podemos crear una página web con un plugin de JQuery que nos genere el código QR exclusivamente.
Hay varias opciones para ello, la siguiente en concreto es la que he probado y funciona bien:
https://larsjung.de/jquery-qrcode/
En esa página hay algunos ajustes de configuración y el código fuente está aquí:
https://github.com/lrsjng/jquery-qrcode
Nos descargamos el código y el archivo que necesitaremos está en la carpeta dist y será la versión comprimida: jquery_qrcode.min.js El funcionamiento es idéntico al archivo que acompaña, pero el otro lleva la estructura y comentarios para desarrollo. Además, he tenido algún problema con líneas HTML comentadas en FileMaker, aunque no puedo afirmar si es porque a FileMaker le sientan mal o por algún error mío.
También necesitamos JQuery, así que desde su web:
Nos podemos descargar la última versión, también la comprimida, la “min”. En el momento de escribir estas líneas es la jquery-3.5.1.min.js
Vamos a montar una página sencillita para ver cómo funciona. No hace falta ni tener instalado un servidor ni arrancarlo ni nada porque lo hace todo el navegador.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=Utf-8'>
<script type='text/javascript' src='jquery-3.5.1.min.js'></script>
<script type='text/javascript' src='jquery-qrcode.min.js'></script>
</head>
<body>
<div id='qrdiv'></div>
<script>
$('#qrdiv').qrcode({
render: 'div',
text: 'Lo que quieras poner'
});
</script>
</body>
</html>
Podemos llamar al archivo “qrfilemaker.html”, o darle el nombre que más os guste. Para que funcione tendremos que tener en la misma carpeta los dos archivos mencionados anteriormente y a los que hace referencia: jquery-3.5.1.min.js y jquery-qrcode.min.js
Si probamos este código, haciendo doble clic para que se abra con el navegador, veremos que nos generará tan sólo un código QR
Que al leerlo con el móvil nos dará “Lo que quieras poner”, que corresponde al texto de la línea 13.
Lo explicamos por encima porque es muy sencillo:
Primero cargamos los scripts necesarios (líneas 5 y 6):
-
-
- jquery-3.5.1.min.js
- jquery-qrcode.min.js
-
Luego creamos un div que contendrá el QR (línea 9)
Y ya directamente con JQuery le decimos que en el div nos cargue el resultado de la función “qrcode”. Lo que queremos que contenga el QR lo pasamos en la opción “text”.
El resto de opciones de qrcode las dejamos por defecto (según lo explicado en la web del autor del script) excepto render, que decimos que sea div. No sabría decir por qué, pero en pantalla y web las otras opciones funcionan estupendamente, igual que div, pero en FileMaker según el tamaño, canvas e image generaban códigos borrosos o ilegibles y con div salían todos perfectos.
El resto de las opciones, sobre todo tamaño y corrección de errores, ya son a gusto del consumidor, para ir probando y elegir la opción que mejor se nos ajuste a nuestros propósitos.
Bien, pues visto que funciona, vamos a trasladar esto a FileMaker.
Generando QR con FileMaker
FileMaker posee un “visualizador web”, así que la idea es meter ese código HTML dentro de Filemaker y mostrar la página en el visualizador, así en dicho visualizador nos aparecerá el código QR y luego ya en la presentación ponemos los textos que queramos y hacemos los ajustes de tamaño, etc.
Antes de empezar: ¡Ojo a las comillas!
Antes de copiar y pegar el código HTML hemos de asegurarnos de que hemos usado exclusivamente comillas simples, ya que vamos a intercalar campos y necesitaremos “encerrar” trozos del código con comillas dobles. Si hemos creado un código HTML con comillas dobles, tendremos que pasarlas todas a simples.
Vamos a comenzar creando cuatro sencillos campos. En dos de ellos almacenaremos los scripts, en un tercero lo que queramos que contenga el QR y el último será un campo de cálculo que contendrá el código HTML a mostrar. Al tajo:
Creación de campos
Los dos primeros campos van a ser de texto, para almacenar los scripts, y en ambos vamos a seleccionar “almacenamiento global”, ya que necesitamos que ambos campos, con sus scripts, estén presentes en cada registro de la tabla:
El campo que contendrá el contenido del QR será un campo de texto y el campo que contendrá el HTML, modificado, de la página que ha de generarlo va a ser un campo de cálculo con resultado texto:
Así es como quedarán los campos para este ejemplo, en el que prescindiremos de todas florituras ya que únicamente se trata de ver cómo funciona.
Para este ejemplo tomamos buena nota de los nombres que hemos dado a los campos, ya que hay que preparar el campo de cálculo. Aquí hemos puesto:
-
-
- jquerymin (texto, almacenamiento global)
- qrmin (texto, almacenamiento global)
- contenido (texto)
- codigoqr (cálculo, resultado texto)
-
Repasamos: los dos primeros contendrán los scripts, el tercero lo que queramos que aparezca y el cuarto es el de cálculo. Vamos con él.
Recordamos que tenemos el siguiente código HTML que hemos preparado antes:
Pues bien, para modificarlo usando los campos de FileMaker, tiene que quedar así:
Si lo vemos dentro de FileMaker:
Están subrayados en rojo los cambios donde van los campos que albergan los scripts y atención a las comillas: el texto lo tenemos que entrecomillar para luego con & unirlo a los campos. Y ojo también a las comillas simples de la opción “text” de la función qrcode. Podríamos eliminarlas de ahí, pero tendríamos que colocarlas en el campo de texto y me parece más cómodo hacerlo así.
Ponemos el código del campo para copiar y pegar:
"<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=Utf-8'>
<script>" & jquerymin & "</script>
<script>" & qrmin & "</script>
</head>
<body>
<div id='qrdiv'></div>
<script>
$('#qrdiv').qrcode({
render: 'div',
text: '" & contenido & "'
});
</script>
</body>
</html>"
Bueno, es hora de ir a visualizar y dotar de contenido a los campos que han de contener los scripts. Para ello, tomamos el primer script, jquery-3.5.1.min.js y lo abrimos en un editor de texto, como Sublime Text o similar:
Seleccionamos todo, copiamos y pegamos en el campo jquerymin
Con el otro campo, al que hemos llamado qrmin y que ha de contener el script jquery-qrcode.min, procederemos de igual modo.
El Visualizador Web
Una vez preparados los campos, tan sólo nos queda ir a Presentación y colocar el Visualizador Web, este será el que muestre el código QR:
Estando en Presentación, desde el menú Insertar seleccionamos Visualizador Web. Se nos abrirá la ventana de configuración en la que hemos de especificar una dirección web personalizada.
En la ventana que se abra, borraremos cualquier código que pudiera haber y con hacer doble clic en el campo codigoqr que hemos preparado quedará el contenido como el de la imagen:
Aceptamos, y en la pantalla de configuración desmarcamos todas las casillas. Debería de quedar así:
Y con eso ya tenemos todo listo. La pantalla Presentación mostrará un espartano aspecto como este:
Si ahora nos vamos a Visualizar e introducimos cualquier valor en el campo contenido nos generará un QR con el texto que hayamos puesto en el campo. Por ejemplo, si ponemos https://www.wampirius.com el resultado que tendremos será este:
Y ya está. Esta es la base para hacer nuestros propios códigos QR si disponemos de FileMaker, claro está, y si no, bueno, ya hemos visto cómo podemos hacerlos con JQuery.
A partir de aquí podemos, y tenemos, que jugar con las opciones para los tamaños, colores, etc, de modo que se puedan adaptar a etiquetas, carteles o lo que se necesite.
Un ejemplo práctico
Esta entrada no estaría completa sin un ejemplo práctico de funcionamiento, muy sencillo también.
Vamos a crear, a partir de lo que ya tenemos, unos códigos que van a tener una dirección web a la que le vamos a pasar una variable GET, que va a ser un número.
He colocado en el servidor una página, con JQuery Mobile, a la que va a apuntar el código QR y esa página nos dirá el número que hemos leído. Vamos al tajo:
Lo primero creamos un campo numérico, que vamos a llamar id, que introduzca automáticamente un número secuencial con incremento al crear un nuevo registro:
Ahora, cambiamos el campo contenido de texto a cálculo, con resultado texto, y ponemos la dirección web a la que queremos que apunte añadiendo el campo que acabamos de crear que será el que se pase como variable GET:
Como casi no se ve, el contenido es este:
"https://www.wampirius.com/wampiqr/qr.php?codqr=" & id
Vemos que apunta a la página que he creado para el ejemplo y le concatena el contenido del campo id que acabamos de crear.
Ahora, para más comodidad quitamos de la Presentación los campos de los scripts y el código, ya que no hace falta en absoluto que estén visibles, y creamos unos cuantos registros para probar:
Y podemos ver que, aunque parecidos, cada dirección genera su propio QR que puede ser leído
Y listo.
Vemos que hemos pasado una variable GET que en este caso es un número, pero podemos pasar las variables que queramos, o el contenido que queramos en la variable, esto ha sido sólo un mínimo ejemplo de lo que se puede hacer. Un punto de partida que espero sea de utilidad.
¡Hasta el próximo charco!