Web Kiosk: Cómo crear un Sistema con Pantalla Táctil basado en Chromium

Estaba buscando una plataforma que me permitiera reunir varias funcionalidades de control remoto en un único dispositivo/interfaz. Había probado varios "controles remotos universales", pero realmente ninguno de ellos me ofrecía la combinación perfecta de posibilidades que estaba buscando. Soy desarrollador Java de oficio, así que decidí crear una aplicación web basada en Java que me permitiera aglutinar los controles de todos mis sistemas de entretenimiento doméstico bajo una única interfaz. Escribiré otro artículo más adelante, pero por ahora debería funcionar con un navegador a modo de pantalla táctil que se inicia automáticamente al encenderse.

Figure 1 - Web Kiosk — Figura 1 - Web Kiosk

Hardware

Tras realizar algunas investigaciones, decidí optar por un dispositivo ODROID-C2. Este artículo sólo es aplicable a este tipo de dispositivos y no es compatible con una Raspberry Pi por multitud de diferencias entre ambos dispositivos. Sin embargo, la información de este artículo puede servirte a modo de guía para crear un sistema similar basado en Raspberry Pi. El software y las configuraciones detalladas en este artículo son muy específicas para los dispositivos ODROID de Hardkernel.

La lista de componentes de hardware se enumera a continuación. Se pueden obtener directamente de Hardkernel (http://goo.gl/rsyevF) o en uno de los muchos distribuidores (http://goo.gl/7MJduR). Los elementos que se muestran en las Figuras 2-4 son el hardware básico para el ODROID-C2

Figure 2 - ODROID-C2 — Figura 2 - ODROID-C2

Figure 3 - eMMC module with reader — Figura 3 - Módulo eMMC con lector

Figure 4 - Power supply — Figura 4 - Fuente de alimentación

Para su visualización, puedes usar una de las pantallas táctiles soportadas que se muestran en las Figuras 5-8.

Pantalla Multitáctil ODROID VU5 de 5" 800 × 480

Figure 5 - 5” VU5 display — Figura 5 - Pantalla de 5" VU5

Pantalla Multitáctil ODROID VU7 de 7" 800 × 480

Figure 6 - 7” VU7 display — Figura 6 - Pantalla VU7 de 7"

Pantalla Multitáctil ODROID VU7+ de 7" 1024×600

Figure 7 - 7” VU7 Plus display — Figura 7 - Pantalla VU7 Plus de 7"

Pantalla Multitáctil ODROID VU8 de 8" 1024×768

Figure 8 - 8” VU8C display — Figura 8 - Pantalla VU8C de 8"

Ten en cuenta que el ODROID VU8C requiere una fuente de alimentación de mayor capacidad 5V/4A

Hardware opcional

2 x Conector de alimentación 2,5 mm

Figure 9 - DC plug — Figura 9 - Conector DC

2 x Módulo 2 Bluetooth

Figure 10 - Bluetooth module — Figura 10 - Módulo Bluetooth

HiFi Shield Plus

Aunque he puesto el "Conector DC de 2.5mm" como opcional, a 1.25$, recomiendo comprar dos, ya que son casi imposibles de obtener de otro sitio. De esta forma, dependiendo de la demanda de tu proyecto final, puedes utilizar una mayor fuente de alimentación (una de 5V/4A, por ejemplo), y con un poco de soldadura cambiar a una clavija más grande en estos enchufes que usan clavijas más pequeñas.

Los módulos Bluetooth también son opcionales. Por defecto, el monitor VU7+ no tiene altavoces, por lo que si desear tener sonido necesitará usar uno de los DAC ODROID (como el HiFi Shield Plus mencionado) o usar Bluetooth para el sonido. Como son baratos, también recomiendo comprar dos en caso de que quiera usar uno para el audio y otro para la interfaz de control remoto, etc.

Una vez que te decidas por los componentes, revisa la página Wiki específica (http://goo.gl/6Kx2pf) para obtener detalles sobre cómo usar la pantalla que has elegido. Si necesita ayuda, visita los foros de Hardkernel en https://forum.odroid.com/index.php.

Software

La imagen de software cargada en el módulo eMMC de Hardkernel es excesiva para usarla en un sistema Kiosco, de modo que para este desarrollo usaremos la imagen Debian Stretch de @meveric; los detalles sobre la imagen los puedes encontrar en http://goo.gl/YW21Aa. Descarga el archivo de imagen C2.img.xz de 93MB desde http://goo.gl/W9qDmg o la copia desde http://goo.gl/B1bTDW.

A continuación, descarga una herramienta llamada Etcher (https://etcher.io/) que te permitirá escribir el archivo de imagen descargado anteriormente en el módulo eMMC. Para hacer esto, utiliza el adaptador de tarjeta SD a eMMC, insértalo dentro de un lector de tarjetas microSD y conecta el lector al ordenador en el cual ejecutas Etcher.

Cuando ejecutes Etcher, primero selecciona la imagen que descargaste y luego selecciona el lector de tarjetas microSD, después presionas Flash. Ten en cuenta que, al seleccionar una unidad en este paso, asegúrate de que sea tu lector de tarjetas microSD, de lo contrario, Etcher sobrescribirá la unidad y los datos no podrán recuperarse. Lee las instrucciones en la página de descargas de Etcher antes de intentar grabar imágenes en cualquier soporte

Además, en Microsoft Windows, cuando insertas el eMMC en un adaptador de tarjeta SD, pueden aparecer ventanas emergentes con la necesidad de formatear la unidad. Ignora estos cuadros de diálogo. Simplemente pulsa cancelar y cierre cualquier ventana. Lo mismo sucederá cuando Etcher empiece a trabajar y cuando termine. Simplemente cierra todos los cuadros de diálogo de Windows que aparezcan. Una vez que Etcher haya finalizado, puedes quitar el adaptador de la tarjeta eMMC2SD, extraer el módulo eMMC e insertarlo en la ranura situada en la parte inferior de tu ODROID.

Para este próximo paso, necesitarás usar un monitor HDMI, no la pantalla táctil seleccionada anteriormente. También necesitarás conectar un teclado al ODROID-C2. El sistema operativo por defecto está configurado para una pantalla de 1920 x 1080p x 60Hz, de modo que usar la pantalla táctil hará que el texto sea ilegible. Además, activa la conexión de red por cable en tu ODROID-C2.

Enciende el dispositivo. Verás una serie de líneas en el momento del arranque. La pantalla se pondrá en blanco, lo cual es normal ya que expande la imagen del software a todo el espacio del módulo eMMC. La pantalla se reanudará con el arranque y luego pasará a la pantalla de inicio de sesión.

Cuando llegues al aviso de inicio de sesión, introduce los datos de autentificación:

Username: root
 Password: odroid

Introduce los siguientes comandos, confirmando cualquier indicación en el camino:

$ sudo apt-get update && sudo apt-get dist-upgrade -y

Aproximadamente a la mitad, verás una advertencia sobre la recompilación del kernel. Simplemente selecciona la opción "OK" y presiona Intro.

Cuando el proceso haya finalizado, introduce los siguientes comandos:

$ sudo apt-get install net-tools -y && clear
$ ifconfig eth0

Este último comando te dará la dirección IP y la dirección MAC para tu ODROID-C2. Guarda esta información (en un archivo o en papel) para usarla en el futuro, ya que la dirección IP será necesaria en pasos posteriores, y la dirección MAC (precedida por la palabra "ether") puede ser necesaria si tu servidor DHCP cambia la IP en el futuro.

Ahora, con el ODROID-C2 aún conectado al monitor, ejecuta el siguiente comando:

$ sudo reboot

Esto reiniciará el ODROID-C2, mostrará los mensajes de inicio y finalmente se te mostrará el aviso inicio de sesión. Puede retirar el teclado del ODROID, ya que no será necesario desde este punto en adelante, pero mantén el monitor conectado al dispositivo hasta que se te indique que conectes la pantalla táctil.

Preparando de la pantalla táctil

Llegados a este punto, vamos a conectarnos al ODROID-C2 desde tu ordenador principal. Deberá estar familiarizado con una aplicación llamada SSH. Si no es así, busca en google "SSH" junto con su nombre de tu sistema operativo. Para Microsoft Windows, la aplicación más sencilla se llama PuTTY, y para OSX, existe un cliente SSH integrado en el propio sistema, al que se puede acceder desde el terminal. Una vez que haya ejecutado SSH, conéctate a la dirección IP que anotaste en el paso anterior.

Figure 12 - Touchscreen display — Figura 12 - Pantalla táctil

Una vez conectado, se te pedirá que inicies sesión con las mismas credenciales utilizadas anteriormente:

Username: root
Password: odroid

Introduce los siguientes comandos:

$ cd ~ && mkdir software && cd software
$ wget -O setup.sh https://raw.githubusercontent.com/ZacWolf/WebKiosk/master/setup.sh
$ chmod 700 ./setup.sh
$ ./setup.sh

Esto te solicitará una nueva contraseña. Luego, configura tu monitor. Una vez que la luz azul haya dejado de parpadear en el ODROID-C2, retira el cable de alimentación. Desenchufa el cable HDMI del monitor.

Figure 13 - Clear display — Figura 13 - Pantalla iluminada

Conecta el cable HDMI de la pantalla táctil al ODROID-C2 y el cable de alimentación. En la pantalla táctil debería aparecer el texto de inicio. Si el texto es ondulado o está degradado, revisa los pasos anteriores.

Figure 14 - Working display — Figura 14 - Pantalla de trabajo

Una vez que el ODROID esté completamente iniciado, deberías ver el mensaje de inicio de sesión en pantalla.

De vuelta a tu aplicación SSH, la conexión habrá finalizado cuando introdujiste el comando shutdown. Tendrás que reanudar la conexión. Cada cliente hace esto de forma diferente, pero en el peor de los casos cierra la ventana y abre una nueva sesión hacia la misma dirección IP que ingresaste antes.

Esta vez en el prompt de inicio de sesión, usa las siguientes credenciales:

Username: root
Password: {the password you set in the previous step}

Deberías ver una pantalla similar a la imagen de arriba. De vuelta a SSH, introduce el siguiente comando:

$ setupkiosk.sh

Esto te guiará a través del proceso de configuración. Te guiará en la configuración de tu idioma por defecto, teclado, zona horaria, nombre de host, NODM (responde Yes) y la configuración del sistema Kiosco. Finalmente, reiniciará automáticamente el ODROID-C2.

Después de reiniciar el ODROID-C2, la pantalla permanecerá en blanco durante aproximadamente un minuto y luego se mostrará en pantalla la página de inicio por defecto.

Solución de problemas

Tuve diversos resultados al intentar hacer funcionar el módulo ODROID WiFi 3, así que opté por la conexión ethernet por cable. Si no logras hacer funcionar el SSH, el ODROID-C2 está configurado para usar DHCP, de modo que lo más probable es que durante el reinicio, el ODROID-C2 cogiera una nueva dirección IP.

Puedes abordar esto de tres formas:

1) Intenta conectarse con el nombre de host que asignaste al ODROID durante la instalación. Si tiene suerte, tu router resolverá esta dirección por ti, pero no te garantizo que funcione.

2) Modificar el archivo /etc/network/interfaces para configurar una dirección IP estática (no recomendado).

3) Lo mejor es configurar una concesión estática en tu servidor DCHP. Lo más probable es que esto se haga en tu router WiFi y se denomine "alquiler estático" o "dirección reservada". Tendrás que buscar las instrucciones de tu router específico para saber cómo configurar esto, pero es la mejor manera, ya que no tendrá que preocuparse por introducir la información de DNS/subred en el archivo interfaces, ya que eso puede cambiar si actualiza tu router. etc.

Si esto sucede después de que esté ejecutándose el sistema Kiosco, puede que tenga que recurrir a la tercera opción, de modo que es mejor hacerlo de esta forma desde el principio.

Si decides cambiar los monitores, simplemente inicia sesión a través de SSH como usuario root e introduce el comando: