Actualización: La presente entrada ha quedado un tanto obsoleta. Dando una vuelta de tuerca al asunto, he publicado dos entradas para generar códigos QR perfectos al tamaño que queramos, bien por pantalla o bien impresos. No obstante, el procedimiento aquí seguido sigue siendo útil y más simple, pudiendo considerarlo una introducción al tema.
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!
Nota: Tal como se indica al principio, el procedimiento para crear QR está actualizado en las siguientes entradas:
Revisado: Códigos QR con Filemaker. Parte II: Tamaño de impresión
Hola!
El articulo es francamente bueno, explicado en cristiano, felicitaciones.
Hay poco material de este tipo relacionado con Filemaker y menos en nuestro idioma.
No se si el ‘curso’ sigue activo o si teneis tiempo, pero tenia una consulta, es posible realizar el proceso inverso? me explico:
La idea es (hablando de Filemaker) leer o escanear el codigo siendo este una imagen insertada en un campo contenedor y obtener el resultado en un campo de texto.
Esta funcion esta disponible en Filemaker como un paso de guion pero solo para dispositivos Iphone o Ipad ejecutando Go.
Tambien hay alguna web online que tiene la opcion (https://www.codigos-qr.com/lector-qr-online/), pero no consigo encontrar la forma de aplicarlo en Filemaker.
Esto seria util para una vez generados los codigos poder leerlos insertando la imagen del mismo en un campo, sin necesidad de dispositivos especiales, y ‘cerrar’ de esta manera el proceso.
Bueno gracias de nuevo y perdonar el ‘toston’.
Un saludo
Edito para re-responderte: Sí, se puede y ya lo tengo (Oooolé 😉 )
Mañana mismo si me da tiempo preparo una entrada explicando cómo.
Más saludos!
Carlos.
——————————
Hola Marcos.
Lo primero, gracias por las felicitaciones y perdona el retraso en contestarte.
Es interesante… Y no es ningún tostón, al contrario.
Le voy a echar un ojo, que me ha picado la curiosidad. Aunque no comprendo muy bien el objetivo. Si es para introducir datos en FileMaker, por ejemplo para un programa de inventario o control de entregas, sería más fácil y directo con un lector 2D. Pero vaya, que es una opinión viciada porque estoy liao justamente con algo así.
Entiendo que lo que quieres es cargar una foto y leer lo que pone… Le echo un ojo, a ver qué sale 😉
Un cordial saludo.
Carlos
Hola Carlos,
Muchas gracias por el interes y por el desarrollo, por supuesto. No he tenido tiempo para verlo antes, caramba.
Efectivamente es para introducir los datos en Filemaker, pero sin tener que depender de ningun dispositivo especial, ni estar pendiente de la conexion, la cobertura o la ubicacion.
La idea es cargar la imagen del codigo en el contenedor desde una presentacion muy ligera publicada en webdirect y que el servidor haga el resto. De esta manera cualquier movil o tablet te hace las veces de lector.
No se si me explico bien pero creo que los beneficios son multiples, asi que gracias de nuevo por la solucion.
En cuanto pueda voy a implementarlo en nuestra solucion de control de stock y comento el resultado.
Saludos,
Marcos
Hola Marcos
No se merecen, ha sido un placer y espero que te sea útil.
Eso sí, espero que estés con FM19. Acabo de hacer unas cuantas pruebas con FM18, para ver si en una versión anterior a la 19 al menos podía ver el resultado en el visualizador, y no he conseguido nada, falla al llamar a la librería. Sospecho que es alguna incompatibilidad de “algo” en versiones anteriores a la 19, pero no sé el qué… aún.
La parte buena es que he aprovechado para simplificar un poco el código del campo de cálculo, quitando las funciones y eliminando líneas y variables. Está publicado en el post.
Suerte con la aplicación. Ya me dirás. Espero que vaya todo bien y a la primera 😉
Un cordial saludo.
Carlos.
Hola! Gracias, hago algo mal… pero de todas formas volveré a preguntarte cuando tenga claro como va a funcionar pq creo que me estoy adelantando..
Un saludo y repito mil gracias! 🙂
Muchas gracias Wampirius ! Voy a ver si recabo información de Hacienda sobre cómo quieren realmente recibir las facturas. Tengo tiempo (se pondrá en marcha el 2022) y no quiero marearte.
Tengo el FM v17 y sí, creo que ha cambiado la versión de uno de lo scripts.
Un saludo y estamos en contacto.
Hola.
Nada, no se merecen 😉 A ver qué te dicen, pero si tienes problemas por aquí andaré.
En efecto jQuery se ha actualizado. Tendría que probar si con la versión actual, la 3.6.0, hay algún problema, lo haré en cuanto pueda. No obstante, la versión que estoy usando es la 3.5.1 (la versión min, siempre la min que si no con las otras y sus comentarios FM se atraganta) y no da problemas, por si es eso y quieres ir a lo seguro, puedes descargarla de aquí: https://code.jquery.com/jquery/
La librería de Lars Jung no ha cambiado, sigue siendo la misma versión.
Y en cuanto al FileMaker, yo estoy usando el 18, confío en que no sea un problema de versiones de FM, que eso ya no es gratis, pero lo desconozco.
Suerte y un cordial saludo.
Hola! Esta muy bien explicado y lo he trasladado paso por paso a Filemaker pero no me funciona, supongo que tiene que ver con los scripts, no estoy muy ducha con esto pero me va hacer falta pq estoy desarrollando una base de datos y Hacienda va a exigir un código QR en cada factura que se emita.
Donde puedo haber metido la pata? te agradecería si se te ocurre algo.
Muchas gracias.
Hola Judith
Es difícil saberlo sin más datos ¿Qué versión de FileMaker estás usando? Es posible que si es una versión no muy reciente no soporte JavaScript. No obstante revisaré la entrada por si han cambiado las versiones de los scripts y haya algún problema en eso.
Si quieres, mándame un correo a [email protected] y lo miramos con más detalle.
Un cordial saludo.
Wampirius, solo me queda que felicitarte. Chapó
Me quito el sombrero. Está explicado como debe ser. Perfecto
Un saludo
¡Oye, pero qué gusto da leer comentarios como el tuyo! XD
No, en serio, muchas gracias por tus palabras. Me alegro que te haya gustado la entrada 🙂
Un cordial saludo.