Gestor de interfaces

En la búsqueda de un reto interesante de programación, empecé a buscar entre los distintos accesorios y módulos que tengo para los microcontroladores como Arduino. Encontré esta pantalla que no había tenído la oportunidad de utilizar hasta el momento. Es una pantalla táctil con un controlador ILI9341, similar a esta de aquí. Viene en formato shield para Arduino UNO. Esto quiere decir que encaja perfectamenete encima y se acopla utilizando todos sus pines.

¿Es un único dipositivo? No. Realmente son tres dispositivos independientes unidos.

  • Pantalla visualizadora.
  • Sensor táctil.
  • Lector de microSD.

La librería se llama XibScreen.

En la búsqueda de un reto interesante de programación, empecé a buscar entre los distintos accesorios y módulos que tengo para los microcontroladores como Arduino. Encontré esta pantalla que no había tenido la oportunidad de utilizar hasta el momento. Es una pantalla táctil con un controlador ILI9341, similar a esta de aquí. Viene en formato shield para Arduino UNO. Esto quiere decir que encaja perfectamente encima y se acopla utilizando todos sus pines.

¿Es un único dispositivo? No. Realmente son tres dispositivos independientes unidos:

  1. Pantalla visualizadora.
  2. Sensor táctil.
  3. Lector de microSD.

La librería creada se llama XibScreen.

En internet existen ya multitud de librerías para utilizar esta pantalla entera, pero eso no implicaría el reto que estoy buscando.

Así que primero debo definir cuál es el alcance de mi objetivo.

Quiero una librería que, con una cantidad de código lo más reducida posible, me permita gestionar la interfaz visual con distintas pantallas y automáticamente detecte dónde he tocado y qué elemento ha sido activado.

La tarjeta microSD no tengo intención de utilizarla por el momento.

La librería está dividida en unos cuatro componentes, cada uno con una responsabilidad. Uno representa la funcionalidad de los botones, otro las pantallas, otro lee el táctil y, por último, el gestor que agrupa lo anterior y lo pone a funcionar todo junto.

  • Los botones tienen implementado el patrón observer, ampliamente utilizado en este caso, y se le puede asignar funciones concretas a cada botón.
  • Las distintas pantallas están pensadas como si fueran distintas aplicaciones de un smartphone, pudiendo cambiar entre ellas.
  • El táctil está siempre leyendo para actuar lo más rápido posible.
  • El gestor interviene en todas y mezcla la funcionalidad para simular una especie de smartphone.
  • Como elemento adicional, se permite rotar la pantalla en cualquier momento a través de un botón.

Al ser un dispositivo limitado, se necesita programar teniendo en cuenta distintas optimizaciones. Aunque tampoco hace falta tener cada detalle de optimización desde el principio y obsesionarse, ya que en la mayoría de los casos nos damos cuenta durante el desarrollo. Es entonces cuando debemos decidir si realizar la optimización.

  • Para ahorrar RAM, solo se guardará la pantalla que se esté mostrando en ese momento; el resto no existirán. Cada vez que se cambie de pantalla, se borrará la actual y se insertará la nueva.
  • Una de las pantallas muestra un cuadro que se puede arrastrar. Existe una limitación con respecto al refresco de la pantalla, y es que este es muy lento. Entonces, al moverlo, si se pinta toda la pantalla, tarda como un segundo. La solución es que, al mover, primero se pinta el lugar inicial del objeto del color del fondo y, a continuación, se pinta el objeto en la siguiente posición. Esto aumenta muchísimo la fluidez y respuesta del movimiento, pasando de un segundo por refresco a milisegundos.

Tras haber realizado una base con esta librería, se puede poner en práctica. El código de ejemplo que viene incluido muestra distintas pantallas:

  • Menú con botones para ir a las otras dos pantallas.
  • Cuadro con movimiento al arrastrarlo.
  • Programa para pintar, con selección de color y tamaño de pincel.
  • Además, un menú inferior fijo permite ir al menú principal, cambiar entre los programas y rotar la pantalla.

Como explicación gráfica de todo lo expuesto, muestro el video demostrativo de la librería y el ejemplo en acción.


Comentarios

Una respuesta a «Gestor de interfaces»

  1. Avatar de Matías Pérez
    Matías Pérez

    Estaría bien un botón que encendiese o apagase un led, por ejemplo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *