Secciones Universitat Oberta de Catalunya Buscar
Universitat Oberta de Catalunya

Interacción terrestre

Asignatura: Diseño de interacción
Grado o Master de la asignatura: Grado Multimedia
Nombre del estudiante: Jose Fernández Marín
Consultor: Santiago Vilanova Ángeles
Profesor: Quelic Berga Carreras

Introducción

Al empezar el curso recibí un kit de sensores y un Arduino, no lo esperaba, no sabía en qué asignatura lo utilizaría. Unos meses más tarde, en la última práctica del curso de Diseño de Interacción, se nos pidió crear un diseño interactivo pequeño pero completo, entonces, decidí crear un visor de información interactivo y modular dirigido a diferentes tipos de usuarios.

Es un interactivo ajustable, ya que con unos pocos cambios se pueden añadir categorías de información que los usuarios pueden utilizar. Para esta práctica decidí crear dos categorías, una dirigida a un público infantil que muestra los distintos animales que viven en cada continente, y otra dirigida a un público más adulto que muestra en tiempo real los casos de COVID-19 por continentes y países.

Imagen 1. Interactivos disponibles.

Código

El diseño utiliza diferentes técnicas de interacción: mediante una bola del mundo se transmiten los inputs del usuario a Arduino, este se encarga de transmitir la señal a Processing, que recibe la señal y simula una pulsación de teclado, que JavaScript estará esperando en la web para que se lleve a cabo la interactividad.

Imagen 2. Flujo de técnicas.

Puesto que JavaScript es el encargado de realizar las acciones en función de la tecla pulsada, el diseño también funcionaría correctamente si solamente se dispone de un teclado. En el interactivo también se utilizan el ratón y un sistema de captación de datos online, que consiste en una API que devuelve información actualizada sobre el tema solicitado.

Etapas y retos

Idea

Durante el curso se nos animó varias veces a buscar proyectos de Arduino compartidos en la red. En una de las ocasiones encontré un proyecto que hacía reaccionar una página web en función de las señales enviadas por Arduino. Durante unos días estuve pensando hacia dónde podía dirigir la idea hasta que vi un proyecto que funcionaba como un visualizador de fotos, con un par de botones se seleccionaba el álbum de fotos y con un sensor de tipo encoder se pasaban las imágenes.

Tenía más o menos claro que quería hacer un visualizador de imágenes, pero me parecía un poco descafeinado el montaje que había visto y quería darle una pequeña vuelta más. Encerrado en casa (COVID-19) y sin mucho material a mi alrededor, encontré una pequeña bola del mundo y entonces lo vi claro, utilizaría la bola para hacer rotar el encoder y colocaría un botón por continente para hacer una especie de filtro para la visualización de imágenes.

Manualidades

Una vez tuve clara la idea, vino lo duro: las manualidades, no soy un manitas que digamos y eso que lo intento. Dediqué unas seis horas a soldar seis botones con el peor soldador que he tenido al alcance nunca, pero cuando lo tuve funcionando sentí un gran alivio.

Imagen 3. Manualidades.

Código

Una vez los botones y el encoder estaban en su posición ya solo quedaba escribir un poco de código. Empecé con Arduino, cuyo código es muy sencillo; la librería Encoder que se utiliza para leer los datos de este sensor simplifica mucho su utilización. El código prácticamente lo único que hace es indicar en qué pins se reciben los botones y en qué pines el encoder, después, en el loop del script siempre se lanzan dos funciones que comprueban si ha cambiado algún valor en los inputs. Si ha cambiado, se escribe por serial un determinado valor que Processing se encargará de recibir.

Imagen 4. Código Arduino.

En el ejemplo que me inspiró, Arduino era capaz de actuar como teclado mediante la librería Keyboard, no se utilizaba Processing. La razón es que hay determinados Arduino que tienen dicha capacidad, pero otros no. Lamentablemente, el mío, Arduino Uno, es uno de los que no es capaz de actuar como teclado, detalle que tardé en descubrir… No sabía cómo hacer que Arduino enviara pulsaciones de teclado a la web hasta que pensé en Processing, si existía alguna librería en Java para simular el teclado, solo tenía que comunicar Arduino con Processing. Encontré la librería Robot, investigué un poco cómo utilizarla y rápidamente tenía la bola del mundo enviando teclas. Processing simplemente se encarga de recibir por el puerto serial los datos de Arduino y teclea las letras necesarias.

Imagen 5. Código Processing.

Una vez tuve la bola del mundo escribiendo las teclas que quería, desarrollé la parte de la web. Primero solo hice la parte de las imágenes, no había menú inicial. Lo que más me costó fue la parte de recopilar diez imágenes de calidad y libres de derechos por cada uno de los continentes. Tuve que retocarlas una a una, añadir el nombre del animal y adaptar su calidad a la necesaria en una aplicación web, porque las imágenes tenían que moverse fluidamente. Por esta razón también cree una función en jQuery, la librería más famosa de JavaScript, que se encarga de precargar la imagen previa y posterior, lo que mejora la fluidez al moverse entre imágenes. jQuery también tiene la misión de leer la letra «pulsada» por la bola del mundo e ir moviendo el interactivo por el flujo marcado. Para cada uno de los interactivos existe un archivo .html con la estructura base para que posteriormente JavaScript sea capaz de manipular el DOM y rellenar cada espacio con la información necesaria en cada momento. A su vez, por cada uno de los interactivos también existe un archivo .js con la lógica necesaria para que jQuery entienda las pulsaciones de teclado y actúe de la forma deseada.

Imagen 6. Código Processing.

Extra API

La idea inicial estaba terminada, pero con tiempo libre por delante decidí añadir una segunda sección de información que se nutriese de datos de Internet. Conozco bien cómo funcionan las API y decidí tocar el tema que me estaba obligando a quedarme en casa, un visor de datos de la maldita COVID-19. Utilizando dos API gratuitas, una de datos actualizados de la enfermedad (https://covid19api.com/), otra de banderas de los países (https://www.countryflags.io/) y la librería cUrl de PHP para hacer peticiones HTTP cree rápidamente una nueva sección del interactivo.

Imagen 7. Interactivo COVID-19.

Arduino

  • Arduino Uno.
  • Encoder.
  • Botón (x6).
  • Condensador cerámico 100 nF (x2).
  • Resistencia 220 Ω (x6).
Imagen 8. Circuito Arduino.

Web

Elementos plataforma web:

Para la plataforma web he utilizado un servidor local de Apache donde se utiliza HTML, CSS3, PHP, JavaScript y librerías como cUrl, jQuery o Font Awesome. Al acceder al host local se muestra el menú para seleccionar qué interactivo se quiere utilizar. El interactivo es más atractivo si se muestra a pantalla completa (F11), así que una vez preparado y con Processing escuchando a Arduino ya se puede empezar a interactuar con el diseño.

La parte web del interactivo es accesible en InfoEarth y reacciona a las siguientes teclas:

  • Z – Asia.
  • X – Europa.
  • C – América del Norte.
  • V – América del Sur.
  • B – África.
  • N – Oceanía.
  • A – Foto anterior.
  • S – Foto siguiente.
  • ESC – Volver al menú inicial.

Diagrama de flujo

Este es el principal flujo del diseño, sin embargo, hay que tener en cuenta que hay momentos en los que se puede hacer alguna conexión con una fuente externa de datos (API), y que en los pasos posteriores a la captura de la tecla por parte de JavaScript hay pasos que no se muestran en el flujo y que utilizan librerías, como cUrl con PHP o como jQuery con JavaScript, que reaccionan a los sensores de entrada que acciona el usuario.

Imagen 9. Diagrama de flujo.

Conclusiones

La realización de esta práctica me ha despertado más curiosidad todavía por todo este mundo de la interactividad y, aun siendo consciente de que se necesita mucha creatividad e imaginación, creo que se pueden conseguir infinidad de cosas, desde un interactivo muy útil a un interactivo muy espectacular.

Si tuviese que volver a realizar la práctica y pudiese salir de casa a por material, seguro que elegiría una bola del mundo con un tamaño mucho más grande con la que fuese mucho más sencillo trabajar, un soldador nuevo y de calidad, así como un cableado más largo que me permitiese no tener que hacer tres empalmes por continente…

La valoración que hago de este proyecto es positiva, ya que he conseguido crear un interactivo atractivo sobre todo para los pequeños de la casa, ha sido un proceso largo pero muy divertido, en el que he aprendido muchas cosas que me serán muy útiles en el futuro.

Enlaces relacionados

No aparecen en el cuerpo del artículo:

Documentación

Bibliografía

Arduino. s. f. «Arduino Reference». Arduino. Accedido 29 de abril de 2020. https://www.arduino.cc/reference/en/language/functions/usb/keyboard/.

atharva12. s. f. «Make Arduino Uno Work Like Leonardo: 5 Steps – Instructables». Instructables.com. Accedido 29 de abril de 2020. https://www.instructables.com/id/Make-arduino-uno-work-like-leonardo/.

Bos, Wes. s. f. «JavaScript Event KeyCodes». Keycode.info. Accedido 29 de abril de 2020. http://keycode.info/.

Coronavirus COVID19 API. 2020. «Coronavirus COVID19 API». Postman. 2020. https://documenter.getpostman.com/view/10808728/SzS8rjbc?version=latest.

Llamas, Luis. 2019. «Cómo emular un teclado o un ratón con Arduino». Luisllamas.es. 31 de enero de 2019. https://www.luisllamas.es/como-emular-un-teclado-o-un-raton-con-arduino/.

Maduell i García, Eloi y Vilanova Ángeles, Santiago. 2012. Diseño de interacción. Editado por SL Eureca Media. Barcelona: FUOC. http://www.playmodes.com.

Toolsqa.com. s. f. «What is Robot Class in Java and How to use Robot Class in Automation?» Toolsqa.com. Accedido 29 de abril de 2020. https://www.toolsqa.com/selenium-webdriver/robot-class/.

Derechos de autor

  • Las dos API son gratuitas.
  • Librería Encoder libre de derechos.
  • Processing/Java. Librería Robot y Serial libres de derechos.
  • Librería cUrl libre de derechos.
  • Librería jQuery libre de derechos.
  • Los iconos utilizados los he obtenido de thenounproject.com
  • Imágenes. Todos los recursos provienen de pexels.com, página web con imágenes libres de derechos o de las imágenes en los álbumes libres de derechos de commons.wikimedia.org. 

Cita recomendada: FERNÁNDEZ MARÍN, JOSE. Interacción terreste. Mosaic [en línea], septiembre 2020, no. 185. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n185.2031

Deja un comentario