☰ Menú

Artículo: Transferir una URL de un kiosco a otro dispositivo mediante un código QR

1- Transferir una URL de un Kiosco a otro dispositivo con un código QR

Este artículo describe cómo generar un código QR a partir de la página web que se muestra en el navegador mediante un script.

El código QR se puede usar, por ejemplo, para transferir la URL de la página web mostrada a un smartphone.

Nota: Este artículo solo funciona con SiteKiosk Online en máquinas clientes Windows y Android.

2- Configuración del proyecto

  1. Comience con una plantilla vacía y genere un navegador con un elemento de página web.
  2. Haga doble clic en el elemento de página web y agregue la URL de inicio: https://www.sitekiosk.es/
  3. Luego, cree un elemento de imagen junto al elemento de página web.

Imagen 1 – Nota: El elemento de imagen no debe superponerse con el elemento de página web; de lo contrario, no se mostrará.

3- Adaptar el elemento de imagen para la visualización del código QR

  1. Ahora, el elemento de imagen debe adaptarse para la visualización del código QR.
  2. Inicie el Modo Experto escribiendo &expert en la barra de direcciones URL y pulsando Intro para recargar el proyecto.

Agregue &expert al final de la URL SiteKiosk Online que se muestra en su navegador: https://www.sitekiosk-online.es/ projects/editor/assets/index…&expert

Imagen 2 – Activar el modo experto

3. Haga doble clic en la imagen para abrir el cuadro de diálogo de propiedades y pulse el botón «Editar como experto» en la esquina inferior izquierda.

  1. En el cuadro de diálogo de propiedades, añada la propiedad «qrCodeData» con el valor «https://www.sitekiosk.es/» y el tipo «auto».
  2. Pulse el botón «+» para añadir la propiedad.

Imagen 3 – Agregar propiedad: ShowQRCode

Vaya a la configuración avanzada src y agregue la configuración «fileName»: «» después de la entrada «fillColor»: «rgb(0,0,0)».

El resultado final será similar a este:

{
  "fillColor": "rgb(0,0,0)",
  "fileName": ""
{

7. Guarde la configuración.

4- Etiquetado de código QR

Seleccione la imagen para asignarle la etiqueta qrCodeImage en la barra de menú.

Imagen 4 – QRCodeImage

  1. Seleccione el elemento de la página web y asígnele la etiqueta browser en la barra de menú.
  2. Vaya a Configuración – Contenido – Scripts y pulse el botón Agregar.
  3. Asigne al script el nombre QRCodeUrlScript y agregue las siguientes líneas:

sitekiosk.content.onContentInserted(() => {
    const qrCodeImage = siteKiosk.content.getElementByTag("qrCodeImage");
    const browserElement = siteKiosk.content.getElementByTag("browser").getDomElement();
    browserElement.addEventListener("page-finished-loading", url => {
        qrCodeImage.setPropertyValue("qrCodeData", url.detail);
    });
});

Imagen 5 – Script de URL de código QR

5- Publicar

  1. Guarde y publique el proyecto.
  2. Tras modificar la URL en el elemento de la página web, el código QR que se muestra se ajustará automáticamente.