Skip to main content

Construye una Pantalla HMI para Raspberry Pi usando Wio Terminal

En este wiki, te mostramos cómo usar el Wio Terminal como una pantalla USB HMI (Interfaz Hombre-Máquina) para Raspberry Pi, Nvidia Jetson Nano, BeagleBone e incluso Odyssey X86J4105. Esto convierte al Wio Terminal en una pantalla USB HMI mucho más poderosa para escenarios industriales.

Soporta múltiples Wio Terminals conectados al dispositivo anfitrión. En teoría, puedes conectar tantos como puertos USB tengas disponibles. En Raspberry Pi, se soportan hasta 4 Wio Terminals (4 puertos USB), funcionando como pantallas HMI en modo extendido o modo espejo.

Hardware Necesario​

Firmware para Wio Terminal​

Primero, sube un programa Arduino al Wio Terminal desde tu PC.

Existen dos ejemplos:

  1. Para mayor tasa de refresco de pantalla, sube el ejemplo NullFunctional.
  2. Para que el Wio Terminal funcione también como mouse USB, sube el ejemplo USBDisplayAndMouseControl.

Método uf2 para subir firmware​

Para facilitar, también proveemos archivos .uf2 listos para cargar:

Para entrar en modo bootloader, desliza el interruptor de encendido dos veces rápidamente. Aparecerá una unidad llamada Arduino en tu PC. Solo arrastra el archivo .uf2 descargado a esa unidad.

Firmware para el Dispositivo Anfitrión​

Configura el driver de pantalla en el dispositivo anfitrión (Raspberry Pi, Jetson Nano, Odyssey X86J4105, etc.):

Raspberry Pi​

  1. Actualiza paquetes:
sudo apt-get update
  1. Instala los paquetes necesarios:
sudo apt-get install raspberrypi-kernel-headers raspberrypi-kernel build-essential dkms
  1. Reinicia Raspberry Pi:
sudo reboot
  1. Clona el repositorio del driver:
cd ~
git clone https://github.com/Seeed-Studio/seeed-linux-usbdisp
  1. Compila e instala el driver:
cd ~/seeed-linux-usbdisp/drivers/linux-driver
make && sudo make install
sudo reboot
  1. Copia los archivos de configuración:
sudo cp ~/seeed-linux-usbdisp/drivers/linux-driver/xserver_conf/10-disp.conf /usr/share/X11/xorg.conf.d/

Nota: Existen diferentes configuraciones de pantalla disponibles. La configuración por defecto asocia un Wio Terminal a una pantalla.

  1. Reinicia el gestor de pantalla:
sudo service lightdm restart
  1. Configura la resolución:
sudo raspi-config

Navega a:

Display Options > Resolution

Selecciona una resolución diferente a la "default", por ejemplo:

DMT Mode 82 1920x1080 60Hz 16:9
  1. Apaga Raspberry Pi:
sudo poweroff

  1. Conecta el Wio Terminal a un puerto USB de Raspberry Pi.

  2. Enciende Raspberry Pi.

Ahora deberías ver el escritorio de Raspberry Pi en tu Wio Terminal. Si cargaste el firmware USBDisplayAndMouseControl, podrás usar los botones y el control de 5 vías para manejar el mouse del Raspberry Pi.

Nota: Esta versión del driver USB no soporta hot swapping.

Jetson Nano, Beaglebone y Odyssey X86​

Para Nvidia Jetson Nano y Odyssey X86J4105 (Ubuntu):

  1. Reinstala los headers del kernel:
sudo apt install --reinstall linux-headers-$(uname -r)
  1. Clona el driver:
cd ~
git clone https://github.com/Seeed-Studio/seeed-linux-usbdisp
  1. Compila e instala el driver:
cd ~/seeed-linux-usbdisp/drivers/linux-driver
make && sudo make install
sudo reboot
  1. Copia los archivos de configuración:
sudo cp ~/seeed-linux-usbdisp/drivers/linux-driver/xserver_conf/10-disp.conf /usr/share/X11/xorg.conf.d/
  1. Reinicia el gestor de pantalla:
sudo service lightdm restart
  1. Conecta el Wio Terminal al puerto USB del dispositivo.

Nota: Para Odyssey X86J4105 solo se ha probado en Ubuntu y Debian. Otros Linux pueden no funcionar.

Configuraciones de Pantalla​

Puedes conectar múltiples Wio Terminals al Raspberry Pi y configurar la distribución de pantallas editando el archivo 10-disp.conf. Proveemos varias configuraciones de expansión de pantalla para tu conveniencia.

Configuraciones de Pantalla Múltiple para Wio Terminal USB HMI

Configuración 1: Disposición 2x2​

# Distribución de 4 pantallas:
# patrón: 1  2
#         3  4

Archivo: 10-disp-1.conf (ubicado en seeed-linux-usbdisp/drivers/linux-driver/xserver_conf/)

Para usarlo, copia y renombra:

sudo cp ~/seeed-linux-usbdisp/drivers/linux-driver/xserver_conf/10-disp-1.conf /usr/share/X11/xorg.conf.d/10-disp.conf

Configuración 2: Disposición vertical y horizontal​

# Distribución de 4 pantallas:
# patrón: 1
#         2  3  4

Archivo: 10-disp-2.conf

Configuración 3: Disposición en línea horizontal​

# Distribución de 4 pantallas:
# patrón: 1  2  3  4

Archivo: 10-disp-3.conf

Configuración 4: Modo espejo (clonación de pantalla)​

# Clonación de 4 pantallas idénticas

Archivo: 10-disp-4.conf

Ejemplo PyQtGraph para GUI en Wio Terminal

Puedes crear interfaces gráficas fácilmente con PyQtGraph y desplegarlas en las pantallas conectadas.

Instalación de dependencias​

sudo apt update
sudo apt install python3 python3-distutils python3-pyqt5 python3-pip python3-numpy -y
sudo pip3 install pyqtgraph

Configurar variable de entorno para seleccionar pantalla​

Ejemplo para pantalla 1:

export QT_QPA_PLATFORM=linuxfb:fb=/dev/fb1

Para pantalla 2 usa fb2, para pantalla 3 fb3, etc.

Verifica con:

echo $QT_QPA_PLATFORM

Código de ejemplo PyQtGraph​

Guarda el siguiente código en test.py y ejecútalo para probar:

# -*- coding: utf-8 -*-
import pyqtgraph as pg
from pyqtgraph.Qt import QtCore, QtGui
import numpy as np

pg.setConfigOptions(imageAxisOrder='row-major')

pg.mkQApp()
win = pg.GraphicsLayoutWidget()
win.setWindowTitle('pyqtgraph example: Image Analysis')

p1 = win.addPlot(title="")
img = pg.ImageItem()
p1.addItem(img)

roi = pg.ROI([-8, 14], [6, 5])
roi.addScaleHandle([0.5, 1], [0.5, 0.5])
roi.addScaleHandle([0, 0.5], [0.5, 0.5])
p1.addItem(roi)
roi.setZValue(10)

iso = pg.IsocurveItem(level=0.8, pen='g')
iso.setParentItem(img)
iso.setZValue(5)

hist = pg.HistogramLUTItem()
hist.setImageItem(img)
win.addItem(hist)

isoLine = pg.InfiniteLine(angle=0, movable=True, pen='g')
hist.vb.addItem(isoLine)
hist.vb.setMouseEnabled(y=False)
isoLine.setValue(0.8)
isoLine.setZValue(1000)

win.nextRow()
p2 = win.addPlot(colspan=2)
p2.setMaximumHeight(250)
win.resize(800, 800)
win.show()

data = np.random.normal(size=(200, 100))
data[20:80, 20:80] += 2.
data = pg.gaussianFilter(data, (3, 3))
data += np.random.normal(size=(200, 100)) * 0.1
img.setImage(data)
hist.setLevels(data.min(), data.max())

iso.setData(pg.gaussianFilter(data, (2, 2)))

img.scale(0.2, 0.2)
img.translate(-50, 0)

p1.autoRange()

def updatePlot():
    selected = roi.getArrayRegion(data, img)
    p2.plot(selected.mean(axis=0), clear=True)

roi.sigRegionChanged.connect(updatePlot)
updatePlot()

def updateIsocurve():
    iso.setLevel(isoLine.value())

isoLine.sigDragged.connect(updateIsocurve)

def imageHoverEvent(event):
    if event.isExit():
        p1.setTitle("")
        return
    pos = event.pos()
    i, j = pos.y(), pos.x()
    i = int(np.clip(i, 0, data.shape[0] - 1))
    j = int(np.clip(j, 0, data.shape[1] - 1))
    val = data[i, j]
    ppos = img.mapToParent(pos)
    x, y = ppos.x(), ppos.y()
    p1.setTitle(f"pos: ({x:.1f}, {y:.1f})  pixel: ({i}, {j})  value: {val}")

img.hoverEvent = imageHoverEvent

if __name__ == '__main__':
    import sys
    if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'):
        QtGui.QApplication.instance().exec_()

1. Ejecutarel script Python:​

python3 test.py

2. Posible problema con el mouse y PyQtGraph​

  • Puede que experimentes que el mouse se "crashea" o se comporta erráticamente al ejecutar el script PyQtGraph en el escritorio del Raspberry Pi.

  • Solución rápida: Deshabilita el escritorio gráfico para evitar conflictos.

3. Cómo deshabilitar el escritorio gráfico​

Ejecuta:

sudo raspi-config

En el menú que aparece:

  • Ve a: Boot Options

  • Luego a: Desktop / CLI

  • Selecciona: Console Autologin

Esto hará que el sistema arranque en modo consola, sin interfaz gráfica que pueda interferir.

4. Ventajas al usar modo consola​

  • El script PyQtGraph puede correr directo en el framebuffer /dev/fb1 (la pantalla del Wio Terminal) sin que haya interferencia del entorno gráfico.

  • Así el gráfico se muestra perfectamente sin problemas con mouse o interfaz.

5. Múltiples pantallas PyQtGraph​

Puedes lanzar distintos scripts PyQtGraph en cada Wio Terminal conectado (cada uno mapeado a /dev/fb1, /dev/fb2, /dev/fb3, etc.) y tener interfaces independientes.

Ejemplo para lanzar en segunda pantalla:

export QT_QPA_PLATFORM=linuxfb:fb=/dev/fb2
python3 test_segunda_pantalla.py

Recursos adicionales​

Preguntas frecuentes​

Q: Al conectar el Wio Terminal, la pantalla queda blanca. A: Vuelve a compilar e instalar el driver USB display en Raspberry Pi:

cd ~/seeed-linux-usbdisp/drivers/linux-driver
make && sudo make install
sudo reboot
Loading Comments...