Universidad Autónoma Metropolitana Unidad Azcapotzalco División de Ciencias Básicas e Ingeniería Licenciatura en Ingeniería en Computación Proyecto Tecnológico Desarrollo de los programas de control y configuración para una pantalla informativa mediante conexión remota en una LAN Armando Molina Rincón 2173000454 al2173000454@azc.uam.mx Javier Hernández Meneses 2173037522 al2173037522@azc.uam.mx Trimestre 2022 Invierno 27 de junio de 2022 Miguel Magos Rivera Categoría: Titular Departamento de Electrónica José Antonio Lara Chávez Categoría: Asistente Departamento de Electrónica Nosotros, Dr. Miguel Magos Rivera y Ing. José Antonio Lara Chávez, declaramos que aprobamos el contenido del presente reporte de Proyecto de Integración y damos nuestra autorización para su publicación en la Biblioteca Digital, así como en el Repositorio Institucional de UAM Azcapotzalco. Dr. Miguel Magos Rivera Ing. José Antonio Lara Chávez Nosotros, Armando Molina Rincón y Javier Hernández Meneses, damos nuestra autorización a la Coordinación de Servicios de Información de la Universidad Autónoma Metropolitana, Unidad Azcapotzalco, para publicar el presente documento en la Biblioteca Digital, así como en el Repositorio Institucional de la UAM Azcapotzalco. Armando Molina Rincón Javier Hernández Meneses 3 “Confía en el tiempo que suele dar dulces salidas a muchas amargas dificultades” Miguel de Cervantes Saavedra “La persistencia es muy importante. No debes de renunciar al menos que te veas obligado a renunciar” Elon Musk “Comienza haciendo lo que es necesario, después lo que es posible, y de repente estarás haciendo lo imposible” San Francisco de Asís “Tu tiempo es limitado. No lo desperdicies viendo el sueño de otra persona” Steve Jobs 4 Resumen En el presente documento se describe el desarrollo de los programas para desplegar imágenes en una pantalla informativa de módulos LED RGB, así como el diseño y construcción de una interfaz gráfica para crear una lista de configuración y enviarla a la pantalla. En el primer capítulo se hace una breve introducción a los temas relacionados con este trabajo como: las computadoras de placa simple, interfaces gráficas y pantallas informativas. También se presentan los objetivos del proyecto. En el segundo capítulo se mencionan los conceptos necesarios para el desarrollo técnico del proyecto. Se introduce al lector a temas como: módulos LED, computadoras de placa simple, lenguajes de programación de alto nivel, Interfaz Gráfica de Usuario (GUI) y capas de desarrollo. Además de presentar un ejemplo de cómo crear una ventana con el lenguaje de programación Python utilizando las librerías PIL y Tkinter. En el tercer capítulo se presenta de forma general el sistema desarrollado, se explica el funcionamiento de cada ventana, así como los efectos disponibles para el despliegue de imágenes en la pantalla. Finalmente, se describen brevemente los bloques que componen el proyecto, los cuales son: Interfaz Gráfica de Usuario (GUI), Control de la pantalla y Traslado de información. En el cuarto capítulo se presenta el bloque de Interfaz Gráfica de Usuario (GUI) en donde se describe detalladamente el proceso de construcción de cada ventana, así como el código de las funciones encargadas de la lógica de la GUI. En el capítulo cinco se describe el desarrollo de los programas para desplegar imágenes en la pantalla informativa. Los cuales corresponden a los códigos de las animaciones de entrada, además del programa encargado de ejecutar cada uno de los efectos. En el capítulo seis se describe de manera detalla el desarrollo de los programas escritos para el traslado de información por medio de una Red de Área Local (LAN). Los cuales corresponden al cliente y al servidor. 5 Índice Capítulo 1. Introducción ....................................................................................................... 14 1.1 Introducción ................................................................................................................ 14 1.2 Antecedentes ............................................................................................................... 17 1.3 Justificación ................................................................................................................ 24 1.4 Objetivos ..................................................................................................................... 24 Capítulo 2. Marco Teórico.................................................................................................... 25 2.1 Pantallas Informativas LED RGB .............................................................................. 25 2.2 Computadoras de placa simple ................................................................................... 27 2.3 Lenguajes de programación ........................................................................................ 35 2.4 Interfaz Gráfica de Usuario (GUI).............................................................................. 37 2.5 Librerías para Interfaces Gráficas de Usuario con Python ......................................... 39 2.6 GRID .......................................................................................................................... 40 2.7 Ejemplo de creación de una ventana con Tkinter ....................................................... 40 Capítulo 3. Descripción General del Sistema. ...................................................................... 48 3.1 Descripción de ventanas ............................................................................................. 48 3.2 Despliegue de imágenes ............................................................................................. 54 3.3 Descripción de bloques del sistema ............................................................................ 56 Capítulo 4. Bloque: Interfaz Gráfica de Usuario .................................................................. 60 4.1 Lista de configuración ................................................................................................ 60 4.2 Proceso de creación de las ventanas ........................................................................... 61 4.3 Ventana de Bienvenida ............................................................................................... 63 4.4 Ventana de Opciones .................................................................................................. 72 4.5 Ventana de Configuración .......................................................................................... 77 4.6 Ventana de Resumen .................................................................................................. 94 4.7 Ventana de Visualización ......................................................................................... 109 4.8 Ventana de Configuración Resumen ........................................................................ 127 4.9 Ventana de Visualización Resumen ......................................................................... 144 Capítulo 5. Bloque: Control de Pantalla. ............................................................................ 161 5.1 Efecto Instantáneo .................................................................................................... 161 5.2 Efecto de Derecha a Izquierda .................................................................................. 163 5.3 Efecto de Arriba a Abajo .......................................................................................... 166 5.4 Efecto de Abajo a Arriba .......................................................................................... 169 6 5.5 Efecto Aleatorio ........................................................................................................ 172 5.6 Programa de control.................................................................................................. 176 Capítulo 6. Bloque: Traslado de Información .................................................................... 179 6.1 Cliente ....................................................................................................................... 179 6.2 Servidor .................................................................................................................... 182 Capítulo 7. Resultados ........................................................................................................ 186 Capítulo 8. Conclusiones .................................................................................................... 199 Bibliografía ......................................................................................................................... 201 Anexos ................................................................................................................................ 203 Anexo 1. Diagrama de ventanas ..................................................................................... 203 Anexo 2. Código de la Interfaz Gráfica de Usuario (GUI) ............................................ 204 Anexo 3. Códigos de efectos de desplegado y programa de control .............................. 243 Anexo 4. Código del servidor LAN ............................................................................... 250 7 Índice de Figuras Figura 1. Pantalla LED Informativa. ................................................................................. 14 Figura 2. Sistema ANDON ................................................................................................ 15 Figura 3. Computadora de Placa Simple ........................................................................... 15 Figura 4. Pantalla LED ...................................................................................................... 16 Figura 5. Diagrama del sistema ......................................................................................... 17 Figura 6. Módulo RN-XV.................................................................................................. 18 Figura 7. Interfaz para controlar el brazo robótico ............................................................ 18 Figura 8. Robotis Darwin-OP ............................................................................................ 19 Figura 9. Interfaz para controlar un LED RGB ................................................................. 20 Figura 10. Pantalla LED desplegando texto..................................................................... 21 Figura 11. Interfaz Gráfica para transmitir imágenes por puerto serial ........................... 22 Figura 12. Pantalla informativa de la empresa “Letreros Programables” ........................ 23 Figura 13. Sistema ANDON (Prodasis Group) ................................................................ 23 Figura 14. Monitores de productividad LED ................................................................... 24 Figura 15. Espectro de colores visibles para el ser humano ............................................ 25 Figura 16. Terminales de un LED RGB .......................................................................... 25 Figura 17. LEDs RGB ...................................................................................................... 26 Figura 18. Módulo LED ................................................................................................... 26 Figura 19. Pantalla Informativa LED ............................................................................... 27 Figura 20. Logo Arduino ................................................................................................. 28 Figura 21. Arduino UNO R3 ........................................................................................... 29 Figura 22. Placa Intel Galileo .......................................................................................... 30 Figura 23. Placa Intel Galileo .......................................................................................... 30 Figura 24. Logo Raspberry Pi .......................................................................................... 31 Figura 25. Raspberry Pi 1 Model A ................................................................................. 31 Figura 26. Raspberry Pi OS ............................................................................................. 32 Figura 27. Raspberry Pi 1 Model A y Model B ............................................................... 33 Figura 28. Raspberry Pi 3 Model A+ y Model B ............................................................. 34 Figura 29. Raspberry Pi 4 Model B ................................................................................. 34 Figura 30. Ejemplo de lenguaje máquina......................................................................... 35 Figura 31. Traducción de código en lenguaje ensamblador a lenguaje máquina ............ 36 Figura 32. Logo de Python ............................................................................................... 37 8 Figura 33. Interfaz Gráfica de Usuario BeOS .................................................................. 38 Figura 34. Sistema Operativo con Interfaz Gráfica de Usuario Mac Aqua. .................... 38 Figura 35. Frontend y Backend ........................................................................................ 39 Figura 36. Logos de las librerías Pillow, Tkinter y Pygame ............................................ 39 Figura 37. Ejemplo de GRID ........................................................................................... 40 Figura 38. Ventana creada con Tkinter ............................................................................ 40 Figura 39. Ventana en blanco .......................................................................................... 42 Figura 40. Imagen del elemento 2 .................................................................................... 43 Figura 41. Imagen del elemento 3 .................................................................................... 44 Figura 42. Imagen del elemento 4 .................................................................................... 44 Figura 43. Imagen del elemento 5 .................................................................................... 45 Figura 44. Imagen del elemento 6 .................................................................................... 46 Figura 45. Imagen del elemento 7 .................................................................................... 46 Figura 46. Imagen del elemento 8 .................................................................................... 47 Figura 47. Diagrama de navegación entre ventanas de la interfaz................................... 48 Figura 48. Ventana de Bienvenida ................................................................................... 49 Figura 49. Ventana de Opciones ...................................................................................... 50 Figura 50. Ventana para Crear una Configuración .......................................................... 51 Figura 51. Ventana de Visualización ............................................................................... 51 Figura 52. Ventana de Resumen ...................................................................................... 52 Figura 53. Ventana para Editar una Configuración ......................................................... 53 Figura 54. Ventana de Visualización de Configuración .................................................. 53 Figura 55. Efecto Instantáneo .......................................................................................... 54 Figura 56. Efecto De Derecha a Izquierda ....................................................................... 55 Figura 57. Efecto De Arriba a Abajo ............................................................................... 55 Figura 58. Efecto De Abajo a Arriba ............................................................................... 56 Figura 59. Efecto Aleatorio .............................................................................................. 56 Figura 60. Diagrama de bloques del sistema ................................................................... 57 Figura 61. Estructura de archivos .................................................................................... 58 Figura 62. Diagrama de Pines .......................................................................................... 59 Figura 63. Elementos de la ventana de Bienvenida ......................................................... 63 Figura 64. Ventana en blanco .......................................................................................... 65 Figura 65. Logo UAM Azcapotzalco ............................................................................... 66 9 Figura 66. Título del sistema ........................................................................................... 67 Figura 67. Logo CBI ........................................................................................................ 67 Figura 68. Imagen de fondo ............................................................................................. 68 Figura 69. Botón Ayuda ................................................................................................... 69 Figura 70. Botón Continuar ............................................................................................. 70 Figura 71. Botón Salir ...................................................................................................... 71 Figura 72. Elementos de la ventana de Opciones ............................................................ 72 Figura 73. Elementos de la ventana de Configuración .................................................... 77 Figura 74. Segmentos resaltados de la ventana de Configuración. .................................. 86 Figura 75. Elementos de la ventana de Resumen ............................................................ 94 Figura 76. Elementos de la ventana Visualización ........................................................ 109 Figura 77. Ventana en blanco ........................................................................................ 112 Figura 78. Logo UAM Azcapotzalco ............................................................................. 113 Figura 79. Título de la ventana Visualización ............................................................... 113 Figura 80. Elementos de la ventana de Configuración Resumen .................................. 127 Figura 81. Segmentos resaltados de la ventana de Configuración Resumen ................. 135 Figura 82. Elementos de la ventana de Visualización Resumen.................................... 144 Figura 83. Botón Enviar configuración.......................................................................... 179 Figura 84. Ventana de Bienvenida ................................................................................. 186 Figura 85. Ventana de Opciones .................................................................................... 187 Figura 86. Ventana de Configuración con campos llenos ............................................. 187 Figura 87. Alerta de campos vacíos en la ventana de Configuración ............................ 188 Figura 88. Ejemplo de ventana de Configuración con campos llenos ........................... 188 Figura 89. Ventana de Visualización antes de iniciar el efecto ..................................... 189 Figura 90. Ventana de visualización durante el efecto .................................................. 189 Figura 91. Ventana de Visualización al finalizar el efecto ............................................ 190 Figura 92. Ejemplo de ventana de Resumen .................................................................. 190 Figura 93. Selección de una imagen para editar ............................................................ 191 Figura 94. Cambios guardados ...................................................................................... 192 Figura 95. Ventana de Resumen actualizada ................................................................. 192 Figura 96. Ejemplo de ventana de Visualización de Configuración .............................. 193 Figura 97. Ventana de Resumen .................................................................................... 193 Figura 98. Alerta de configuración no guardada............................................................ 194 10 Figura 99. Selección de ruta para guardar una configuración........................................ 194 Figura 100. Configuración enviada correctamente ...................................................... 195 Figura 101. Ejemplo de cargar configuración .............................................................. 196 Figura 102. Efecto Instantáneo ..................................................................................... 196 Figura 103. Efecto De Derecha a Izquierda ................................................................. 197 Figura 104. Efecto De Arriba a Abajo ......................................................................... 197 Figura 105. Efecto De Abajo a Arriba ......................................................................... 197 Figura 106. Efecto Aleatorio ........................................................................................ 198 11 Índice de Diagramas de Flujo. Diagrama de Flujo 1. Proceso de creación de la ventana .................................................. 42 Diagrama de Flujo 2. Diagrama de flujo de creación de ventanas .................................... 62 Diagrama de Flujo 3. Proceso de creación de la ventana de Bienvenida .......................... 64 Diagrama de Flujo 4. Procedimiento para crear un botón con imagen. ............................. 70 Diagrama de Flujo 5. Proceso de creación de la ventana de Opciones.............................. 73 Diagrama de Flujo 6. Función “abrir_archivo” ................................................................. 76 Diagrama de Flujo 7. Proceso de creación de ventana de Configuración. ........................ 79 Diagrama de Flujo 8. Función para seleccionar la imagen que desea agregarse a la configuración 87 Diagrama de Flujo 9. Función para agregar una imagen y sus parámetros de desplegado a la lista de configuración ........................................................................................................ 91 Diagrama de Flujo 10. Función para llamar a la ventana de visualización con la imagen y efecto de desplegado 93 Diagrama de Flujo 11. Proceso de creación de ventana de Resumen ................................ 96 Diagrama de Flujo 12. Función para generar tabla de Resumen ..................................... 102 Diagrama de Flujo 13. Función para obtener el nombre una imagen a partir de la ruta del archivo 104 Diagrama de Flujo 14. Función para guardar un archivo de configuración .................... 108 Diagrama de Flujo 15. Proceso de creación de la ventana de Visualización ................... 111 Diagrama de Flujo 16. Función para mostrar los elementos de la ventana de Visualización 118 Diagrama de Flujo 17. Lógica del efecto de Derecha a Izquierda ................................... 121 Diagrama de Flujo 18. Lógica del efecto de Arriba a Abajo ........................................... 123 Diagrama de Flujo 19. Lógica del efecto Aleatorio ......................................................... 126 Diagrama de Flujo 20. Proceso de creación de ventana de Configuración Resumen...... 129 Diagrama de Flujo 21. Función para seleccionar la imagen que desea agregarse a la configuración 137 Diagrama de Flujo 22. Función para modificar los parámetros de un elemento de la lista 141 Diagrama de Flujo 23. Función para llamar a la ventana de visualización con la imagen y efecto de desplegado 143 Diagrama de Flujo 24. Proceso de creación de la ventana de Visualización Resumen ... 146 Diagrama de Flujo 25. Función para mostrar los elementos de la ventana de Visualización Resumen 152 12 Diagrama de Flujo 26. Lógica del efecto de Derecha a Izquierda ................................... 155 Diagrama de Flujo 27. Lógica del efecto de Arriba a Abajo ........................................... 157 Diagrama de Flujo 28. Lógica del efecto Aleatorio ......................................................... 160 Diagrama de Flujo 29. Lógica del efecto Instantáneo ..................................................... 163 Diagrama de Flujo 30. Lógica del efecto de Derecha a Izquierda ................................... 165 Diagrama de Flujo 31. Lógica del efecto de Arriba a Abajo ........................................... 168 Diagrama de Flujo 32. Lógica del efecto de Abajo a Arriba ........................................... 171 Diagrama de Flujo 33. Lógica del efecto Aleatorio ......................................................... 175 Diagrama de Flujo 34. Lógica para comprimir un directorio en un archivo ZIP ............ 181 Diagrama de Flujo 35. Lógica de la función para recibir un archivo .............................. 184 13 Índice de Tablas. Tabla 1. Elementos de la ventana de Ejemplo.................................................................. 41 Tabla 2. Elementos de la ventana de Bienvenida ............................................................. 64 Tabla 3. Elementos de la ventana de Opciones ................................................................ 72 Tabla 4. Elementos de la ventana de Configuración ........................................................ 78 Tabla 5. Elementos de la ventana de Resumen ................................................................ 95 Tabla 6. Elementos de la ventana Visualización ............................................................ 110 Tabla 7. Elementos de la ventana de Configuración ...................................................... 128 Tabla 8. Elementos de la ventana Visualización ............................................................ 145 14 Capítulo 1. Introducción 1.1 Introducción Los sistemas de información basados en pantallas de LED son ampliamente utilizados tanto en ámbitos de la vida cotidiana como en la industria. Estos dispositivos se encuentran en establecimientos como anuncios publicitarios y en las vías públicas como medios de difusión de información. Un caso muy común en el ámbito industrial son las pantallas que se utilizan dentro de las empresas para tener un mejor control de los procesos. Estas pantallas suelen ser muy sencillas, muestran solo información básica empleando únicamente texto y valores numéricos para informar a trabajadores y supervisores acerca del estado del proceso y de sus posibles errores. Las pantallas LED son usadas en esta área de la industria para complementar los sistemas llamados ANDON. En la Figura 1 se muestra un ejemplo de una pantalla LED informativa. Figura 1. Pantalla LED Informativa. Los sistemas ANDON son una herramienta de control visual, son usados para mejorar los sistemas de producción haciendo más fácil la identificación de problemas, gracias a esto, es posible aumentar la eficiencia de los procesos [1]. La función principal de los sistemas ANDON consiste en avisar de cualquier inconveniente que pueda aparecer desde el mismo momento que se manifiesta. Una vez que el sistema da la señal de alarma, los responsables pueden corregir el error de manera inmediata e, introduciendo las medidas necesarias, evitar que vuelva a repetirse. A grandes rasgos, los sistemas ANDON son ayudas visuales que resaltan el lugar donde es necesario intervenir [2]. En la Figura 2 se muestra un sistema ANDON. 15 Figura 2. Sistema ANDON Inicialmente, los sistemas ANDON se componían de focos de colores que indicaban errores, con el paso del tiempo se implementaron mejoras para mostrar mensajes más específicos. Con ayuda de pantallas LED se formaron sistemas más completos, que son utilizados en la industria para mostrar información sobre la operación de los procesos. Algunos ejemplos de su empleo en aplicaciones industriales son: como contadores en líneas de ensamble, para brindar indicaciones a las personas acerca de cómo llevar a cabo un proceso, alertar acerca de una falla durante un proceso, entre muchos otros. Para obtener un mejor funcionamiento y comunicación entre una pantalla LED y un sistema ANDON es necesario contar con un dispositivo que se encargue de estas tareas, uno de los más empleados para esta labor son las computadoras de placa simple, ya que, debido a su tamaño, son comúnmente utilizadas para el desarrollo de sistemas embebidos como lo son los sistemas ANDON. Este tipo de sistemas no requieren de una gran capacidad de cómputo, y prácticamente no dependen de alguna interacción con el usuario. Estas placas cuentan únicamente con los circuitos necesarios para su funcionamiento, también tienen puertos de Entrada y Salida (E/S) que los usuarios pueden utilizar para comunicarse con otros dispositivos. Usualmente pueden ser programadas con lenguajes de alto nivel como C++ y Python. En la Figura 3 se muestra un ejemplo de computadora de placa simple Arduino. Figura 3. Computadora de Placa Simple 16 Como se mencionó anteriormente, los sistemas ANDON requieren de poca interacción con el usuario, sin embargo, hoy en día la mayoría de estos dispositivos y computadoras en general utilizan una Interfaz Gráfica de Usuario para facilitar la interacción entre el usuario y un sistema. La creación de las Interfaces Gráficas de Usuario contempla diversos factores de los usuarios para que las interfaces sean usables y generen una experiencia positiva al interactuar con el sistema [3]. Las soluciones de diseño centradas en el usuario tienen como objetivo que el desarrollo de elementos de software se realice teniendo en cuenta las necesidades, capacidades y problemas de los usuarios y el contexto de uso de las herramientas computacionales. El uso de las pantallas informativas dentro del ámbito industrial es cada vez es más común, por lo que es importante que en las escuelas de educación superior en las que se imparten carreras de ingeniería se cuente con este tipo de tecnología. Por lo anterior, en el Área de Control de Procesos del Departamento de Electrónica se propuso el diseño y construcción una pantalla informativa basada en módulos LED RGB para aplicaciones de monitoreo de procesos industriales. En trabajos anteriores se realizó la construcción física de la pantalla, además se efectuaron pruebas simples de su operación. En la Figura 4 se muestra la pantalla LED construida en el Área de Control de Procesos. Figura 4. Pantalla LED Para el desarrollo del proyecto que se describe en este documento se diseñó y construyó una interfaz gráfica que permite al usuario crear una configuración de imágenes y animaciones de entrada que pueden enviarse mediante una Red de Área Local (LAN) a la pantalla LED RGB para que las muestre. La interfaz, además permite previsualizar el contenido mediante una ventana que simula los efectos. Utilizando el lenguaje de programación Python, se escribieron los códigos que controlan los módulos LED de la pantalla informativa para desplegar imágenes. En la Figura 5 se muestra un diagrama con el flujo de información del sistema desarrollado. 17 Figura 5. Diagrama del sistema 1.2 Antecedentes Existen distintos trabajos realizados anteriormente, relacionados con el que aquí se describe, tanto estudiantes como empresas han desarrollado proyectos con el fin de controlar un sistema utilizando una Interfaz Gráfica de Usuario. Algunos de ellos se presentan a continuación. Manipulación de un brazo robótico a través de una interfaz para teléfono móvil [4]. En el año 2014, Marco Antonio Bucio Martínez, alumno de Ingeniería en Computación, de la Universidad Autónoma Metropolitana unidad Azcapotzalco (UAM-A), realizó el proyecto “Manipulación de un brazo robótico a través de una interfaz para teléfono móvil”. Para este proyecto se diseñó un sistema embebido que tuviera la capacidad de conectarse a la red de internet mediante un punto de acceso Wi-Fi con el objetivo de intercambiar datos con un teléfono celular, de manera que este funciona como un control remoto. El dispositivo que se incorporó en el sistema es un microprocesador fabricado por Atmel, específicamente el modelo AT89C51 con una CPU de 8 bits, el cual es capaz de recibir instrucciones enviadas por el teléfono celular. La información recibida interpretada para manipular los motores del brazo robótico. Además, se añadió un módulo de comunicación por vía inalámbrica Wi-Fi el cual fue el RN-XV que utiliza el protocolo TCP/IP. En la Figura 6 se muestra el módulo RN-XV. 18 Figura 6. Módulo RN-XV Para controlar el sistema desde el teléfono celular, se realizó una aplicación para dispositivos móviles con Sistema Operativo Android en versiones 4.0.4 o anteriores. Esta aplicación se desarrolló en el lenguaje de programación de alto nivel Java en el Entorno de Desarrollo Integrado (IDE) Eclipse, con ayuda de las herramientas y el plug-in Android Development Tools. Una vez iniciada la aplicación se deben ingresar la dirección IP y el puerto de comunicación donde el microcontrolador inicia un servidor TCP para establecer la conexión y controlar el brazo robótico. El brazo fue el modelo K-682 de la marca Steren, el cual tiene cinco grados de libertad, incluyendo un movimiento de apertura y cierre de una tenaza. En la Figura 7 se muestra una de las pantallas de la interfaz gráfica donde se puede controlar el brazo robótico. Figura 7. Interfaz para controlar el brazo robótico 19 Programación del robot Robotis Darwin-Op con Python [5]. En el año 2014, Leyva Hernández Luis Alberto, alumno de Ingeniería en Computación, de la Universidad Autónoma Metropolitana unidad Azcapotzalco (UAM-A), realizó el proyecto tecnológico “Programación del robot Robotis Darwin-Op con Python”. En el Departamento de Electrónica de la Universidad Autónoma Metropolitana Azcapotzalco (UAM-A) cuenta con un robot Robotis Darwin-OP, el cual, hasta antes del desarrollo de este proyecto, solamente podía ser programado en el lenguaje de programación C++. La complejidad de las bibliotecas implementadas en este lenguaje dificultaba el uso del robot, por lo que se diseñó e implementó una API en el lenguaje de alto nivel Python con el objetivo de simplificar la manipulación del robot. En la Figura 8 se muestra el robot Robotis Darwin-OP. Figura 8. Robotis Darwin-OP El API desarrollado funciona como el medio por el cual el usuario puede guiar al robot enviándole instrucciones, de esta manera se puede programar para realizar distintas tareas complejas. Además de simplificar el proceso de programación, permite adaptar los distintos programas que lo controlan de manera interactiva, de forma que sea más sencillo implementar nuevas características al robot. 20 Energía y Processing: LED RGB Control Interface [6]. En el año 2013, Viridiana Ramírez Ordoñez, alumna de Ingeniería Electrónica, de la Universidad Autónoma Metropolitana unidad Azcapotzalco (UAM-A), realizó un proyecto para la empresa AG Electrónica S.A. de C.V., el cual consistió en controlar un LED RGB por medio de una interfaz la cual se elaboró con Processing y Energía. Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en el lenguaje Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Energía es una plataforma de creación de prototipos electrónicos de código abierto basado en Processing. Junto LaunchPad se puede utilizar para el desarrollo de objetos interactivos, con la posibilidad de complementar con interruptores, sensores, motores, luces y otras interfaces de salida. Con el entorno de Processing se desarrolló la interfaz que permite controlar el color de un LED RGB, modificando distintos parámetros como la intensidad de luz y la combinación de los tres colores básicos: Rojo, Verde y Azul. El control de este LED se realiza mediante el envío de datos por un puerto serial. En la Figura 9 se muestra la interfaz del sistema para controlar un LED RGB. Figura 9. Interfaz para controlar un LED RGB La selección de colores dentro de la interfaz se almacena en variables que posteriormente se envían por el puerto serial hacia los pines de la de placa simple LaunchPad. 21 Diseño y control electrónico de una matriz de LEDs RGB para la proyección de imágenes y texto alfanumérico [7]. En 2019, Martín Alberto Vázquez Castrejon, alumno de la Universidad Autónoma del Estado de Morelos (UAEM) diseñó y construyó una matriz de 30 filas y 33 columnas de LEDs RGB, la cual es capaz de proyectar imágenes y texto alfanumérico. Los LEDs que componen la matriz cuentan con un controlador WS2812B y un microcontrolador que funciona como interfaz de control. Se creó una placa de desarrollo la cual incluye un microcontrolador de 32 bits para la interfaz de control de los LEDs. Se desarrollaron programas que indican la lógica de los algoritmos para la transmisión de datos de los pixeles y control de los LEDs de la matriz y de esta manera es posible proyectar imágenes y texto alfanumérico. En la Figura 10 se muestra texto sobre la pantalla LED. Figura 10. Pantalla LED desplegando texto Para la implementación de la Interfaz Gráfica de Usuario (GUI) se utilizó el software MATLAB, debido a que cuenta con la herramienta GUIDE, que facilita el diseño y desarrollo de interfaces interactivas. Este entorno permite arrastrar componentes al área de diseño de la GUI y solo es necesario programar las instrucciones que debe realizar cada elemento. Para proyectar una imagen a la pantalla, el usuario puede seleccionarla desde la interfaz y esta realiza la tarea de redimensionarla a 30x33 pixeles. Una vez finalizado este 22 proceso, se envía la información por puerto serial a la matriz para mostrarla. En la Figura 11 se muestra la interfaz gráfica para la transmisión de imágenes por puerto serial. Figura 11. Interfaz Gráfica para transmitir imágenes por puerto serial Pantalla LED programable full color p5 (exterior) 1 cara [8]. La empresa Letreros Programables es una entidad fabricante y distribuidora de pantallas programables. Estas pantallas se construyen con los módulos LED para adaptarse a las medidas solicitadas por los clientes. Estos productos pueden mostrar texto, imágenes en formatos como JPG, BMP, GIF, entre otros, además de videos en formato MPG, MPEG, MPV, AVI, entre otros. Cuentan con una resolución de 40,000 pixeles por metro cuadrado, utilizando LEDs SMD2727 que cuentan con una capa protección contra agua y polvo. Además, son de alta luminosidad y tienen una distancia óptima de visualización de 10 a 15 metros, por lo que estas pantallas son ideales para usarse en exteriores como anuncios publicitarios. Los usuarios pueden configurar el desplegado de imágenes y textos con diversos efectos, mediante un programa proporcionado por la empresa. La forma de transferir la información a la pantalla es por medio de una memoria USB y opcionalmente a través de Wi-Fi. En la Figura 12 se muestra una imagen de una de las pantallas de la empresa “Letreros Programables”. 23 Figura 12. Pantalla informativa de la empresa “Letreros Programables” Prodasis Group Prodasis es una compañía de Tecnología de la Información (IT) que se especializa en manufactura y procesos productivos. Se desarrolla dentro de la industria trabajando con planeadores de producción, gerentes de planta, operadores y personal de manufactura. Uno de sus principales productos dentro del área de procesos son los sistemas ANDON LED. Los cuales son muy útiles para aumentar la productividad y eficiencia dentro de las plantas de manufactura. Los sistemas ANDON de Prodasis Group cuentan con características técnicas que los hacen robustos, flexibles y de uso exclusivo para el área industrial. Integran un módulo de conexión inalámbrico (Wi-Fi) para obtener información almacenada sobre los tiempos muertos y conteo de piezas. Además de enviar en tiempo real un estatus de la línea de producción. En la Figura 13 se muestra un sistema ANDON LED. Figura 13. Sistema ANDON (Prodasis Group) Prodasis Group también fabrica y distribuye monitores de productividad que cuentan con puertos de Entrada y Salida (E/S) que le permiten conectarse con un proceso, indicadores para los operadores y generan informes. Estos monitores incluyen un sistema ANDON para monitorizar la línea de producción y mostrar la información recolectada de manera gráfica en el monitor LED. En la Figura 14 se muestran dos monitores de productividad de la empresa Prodasis Group. 24 Figura 14. Monitores de productividad LED 1.3 Justificación Como ya se mencionó anteriormente, las pantallas LED son muy utilizadas para mostrar información relevante a las personas de forma eficiente y llamativa. El desarrollo de este proyecto tendrá como beneficio directo el complementar el equipo construido en el Área de Control de Procesos del Departamento de Electrónica. De esta forma, la pantalla informativa podrá ser utilizada a futuro para desplegar datos de operación de equipos empleados en la automatización de procesos industriales, tales como: controladores de procesos y controladores lógicos programables, entre otros. Lo anterior permitirá complementar a los equipos didácticos de laboratorio relacionados con la enseñanza de control de procesos con los que cuenta la universidad. Adicionalmente, se tendrá el beneficio de que los participantes en este proyecto conocerán y manejarán herramientas útiles en el ámbito industrial. Es importante que los ingenieros egresados de la Universidad Autónoma Metropolitana (UAM) que laburen en un ámbito industrial conozcan este tipo de sistemas y su importancia dentro de los procesos de una empresa. 1.4 Objetivos Objetivo General Desarrollar e implementar los programas para controlar y configurar una pantalla informativa de LEDs mediante una conexión remota dentro de una red de área local. Objetivos Específicos 1. Elaborar un módulo para que la Raspberry controle los circuitos de LEDs RGB de la pantalla informativa. 2. Elaborar un módulo para configurar los parámetros de desplegado de las imágenes. 3. Desarrollar un módulo para enviar información a la pantalla de LEDs dentro de una LAN. 25 Capítulo 2. Marco Teórico En este capítulo se presentarán los conceptos teóricos en los cuales se basa el proyecto desarrollado. Dichos conceptos se engloban bajo los siguientes temas principales: Pantallas informativas, computadoras de placa simple, lenguajes de programación de alto nivel e Interfaces Gráficas de Usuario. 2.1 Pantallas Informativas LED RGB Un LED es un diodo emisor de luz, el cual está formado por un chip semiconductor que a su vez se encuentra rodeado por una carcasa de plástico que permite que la luz pase a través de ella. La emisión del color de un LED depende del material semiconductor que se utilice. Se puede generar un color dentro de la amplia gama que va desde la luz ultravioleta hasta la infrarroja [9]. En la Figura 15 se muestra el espectro de colores visibles para el ser humano. Figura 15. Espectro de colores visibles para el ser humano Un LED RGB tiene la peculiaridad de estar compuesto por tres LEDs de diferentes colores: rojo (Red), verde (Green) y azul (Blue), por las iniciales en inglés de estos colores recibe el nombre de RGB. Para formar un color se debe de variar la intensidad del voltaje en cada una de las terminales del diodo, debido a que cada terminal controla la luminosidad de uno de los colores RGB. En la Figura 16 se muestra un LED RGB y sus terminales. Figura 16. Terminales de un LED RGB 26 La combinación de estos tres colores puede producir más 16 millones de tonos distintos de luz. Sin embargo, existen colores como el rosa y el marrón que son difíciles de lograr. En la Figura 17 se muestran tres LEDs RGB. Figura 17. LEDs RGB Un módulo LED es un circuito con pistas conductoras de cobre que interconectan sus componentes. En algunos casos se añaden tratamientos de aislamiento y antihumedad que proporcionan una capa de protección adicional para usos en exterior. En la parte frontal de los módulos, se encuentran los LEDs y en la parte trasera, están montados los circuitos integrados que gestionan el color, luminosidad, así como los puertos de datos y alimentación del circuito. Dichos módulos pueden conectarse en serie para formar una matriz de mayor tamaño. En la Figura 18 se muestra un módulo LED. Figura 18. Módulo LED 27 Una pantalla informativa LED es una pantalla plana compuesta por módulos de diodos emisores de luz que en conjunto pueden mostrar texto alfanumérico, imágenes o videos. Una pantalla puede tener distintos tamaños dependiendo de la cantidad de paneles LED con los que está construida [10]. Las pantallas LED a menudo se pueden encontrar al aire libre en carteleras, anuncios publicitarios, señales en el transporte público, entre otros. Es muy común que distintos tipos de establecimientos como tiendas, cines, restaurantes, aeropuertos y más lugares públicos las utilicen para publicidad y mostrar información a los usuarios. En particular, en el ámbito industrial se utilizan para compartir de manera fácil y rápida información en el área de producción y mantener actualizado al personal sobre el estado de los procesos y protocolos de seguridad. En la Figura 19 se muestra una pantalla informativa compuesta por módulos LED. Figura 19. Pantalla Informativa LED 2.2 Computadoras de placa simple Una computadora de placa simple consiste en una pequeña placa la cual incluye todos los circuitos necesarios para funcionar. Por lo que el procesador, la memoria RAM, los puertos de entrada y salida (E/S) se encuentran integrados en dicha placa. La diferencia con una placa base de una computadora convencional es que estas son de tamaño reducido y utilizan una serie de interfaces especificas con el propósito de mantener un tamaño reducido. Pueden incluir interfaces USB, pines GPIO y SDIO, Ethernet, Wireless como lo son Bluetooth o Wi-Fi, además de puertos de video (HDMI o VGA). En cambio, no suelen incorporan interfaces PCI Express o SATA. Las placas simples más comunes en el mercado son Arduino, Galileo y Raspberry Pi [11]. 28 Arduino. Arduino fue creado en el año 2005 en el Instituto de Diseño Interativo de Ivrea. Se desarrolló por la necesidad de contar con un dispositivo que se pudiera emplear para uso interno de la escuela y que a su vez fuera de bajo costo. En ese mismo año, el instituto se vio obligado a cerrar sus puertas, en consecuencia, se decidió liberar al público el proyecto Arduino para que todo el mundo pudiera participar en su evolución, proponiendo mejoras y sugerencias. Se trata de una computadora de placa simple que incorpora un microcontrolador reprogramable y una serie de pines hembra. Estos permiten establecer conexiones entre el microcontrolador y diferentes sensores y actuadores de manera sencilla [12]. Puede programarse mediante el lenguaje Processing/Wiring, ser utilizado para desarrollar objetos interactivos o bien, conectarse a una computadora. El IDE para conectarse con el Arduino es de código abierto y puede ser descargado gratuitamente para los principales Sistemas Operativos (Mac OS X, Windows y Linux). En la Figura 20 se muestra el logo de Arduino. Figura 20. Logo Arduino Uno de los principales productos es el Arduino UNO R3 [13] el cual utiliza el microcontrolador ATmega328 y el ATmega16U2 para un mejor manejo del puerto USB. Esto permite una transferencia de datos más rápida y más memoria de almacenamiento interno. En la Figura 21 se muestra la placa de desarrollo de Arduino UNO R3. Sus especificaciones son las siguientes: • Microcontrolador ATmega328. • Voltaje de entrada 7-12V. • 14 pines digitales de I/O (6 salidas PWM). • 6 entradas análogas. • 32 KB de memoria Flash. • Reloj de 16 MHz de velocidad. • Dimensiones: 68.6mm x 53.4mm. 29 Figura 21. Arduino UNO R3 Intel Galileo Galileo es la primera placa siempre de desarrollo compatible con Arduino basada en la arquitectura Intel. Su diseño y distribución de entradas y salidas se basan en el modelo del Arduino UNO R3, de esta manera muchos de los módulos son compatibles entre estas dos placas. Una de las ventajas principales es que, gracias a su amplia conectividad, potencia de proceso y el uso de su Kit de Desarrollo de Software (SDK) el cual es fácil de usar, se puede crear software que sea capaz de conectar a Internet casi cualquier dispositivo. Galileo es una herramienta orientada a la domótica y a proyectos que requieran de un PC de bajo consumo, coste y que no requieran de una gran intervención por parte de un operador. Esta placa ejecuta un sistema operativo Linux libre el cual contiene la mayoría de las librerías de software empleadas en Arduino, gracias a esto, se puede tener una mayor escalabilidad y reutilizar software ya existente. Los usuarios tienen la posibilidad de programar las Intel Galileo desde los principales sistemas operativo como: Mac OS, Windows o Linux. Además, está diseñada para ser compatible tanto en software como en hardware con el ecosistema llamado Arduino Shield [14]. En la Figura 22 se muestra una placa Intel Galileo de segunda generación. 30 Figura 22. Placa Intel Galileo Una de las principales ventajas con las que cuenta la placa Galileo es su microprocesador, gracias a la arquitectura de Intel, esta cuenta con un Intel Quaek X1000 el cual está diseñado para el Internet de las cosas (IOT). Es más pequeño y cuenta con una mayor eficiencia energética que los procesadores Atom, lo que lo hace una gran opción para proyectos con baja potencia. En la Figura 23 se muestra una placa Intel Galileo de segunda generación. Figura 23. Placa Intel Galileo Uno de los agregados más importantes en esta placa es que cuenta con una ranura Mini PCI Explress (mPCIe). Gracias a este puerto es posible conectar módulos como Wi- Fi, Bluetooth, incluso adaptadores de tarjeta SIM para teléfonos celulares [15]. Las especificaciones técnicas de la placa Galileo se listan a continuación: • Formato de placa Arduino. • Zócalo Quark 393pin FCPGA. • Memoria RAM 256 MB. • Compatibilidad con PCI Express. • Tres puertos USB. • Un puerto serial. • Red de área local integrada. 31 Raspberry La Raspberry Pi es una computadora de placa simple de bajo costo y con un tamaño bastante compacto, esta pude ser conectada a un monitor o TV y ser manipulada con cualquier teclado y mouse estándar. Este pequeño computador trabaja con un sistema operativo Linux, gracias a esto, la placa es capaz de realizar la mayoría de las tareas típicas de una computadora de escritorio, desde poder navegar en internet, manipular documentos, reproducir emuladores, crear programas en lenguajes como Python o C++, entre otras cosas. En la Figura 24 se muestra el logo de Raspberry Pi. Figura 24. Logo Raspberry Pi En 2012 Raspberry Pi Foundation creó a la Raspberry Pi, la cual estaba pensada para promover la enseñanza de las ciencias básicas de la computación en escuelas y universidades de Reino Unido. Para esto se lanzaron los modelos A y B, estos eran tan fáciles de usar que al poco tiempo de su lanzamiento se generó una comunidad formada por miles de usuarios que compraron estas placas para poder experimentas con nuevos proyectos. En la Figura 25 se muestra una Raspberry Pi 1 Model A. Figura 25. Raspberry Pi 1 Model A 32 Existen dos formas de instalar un sistema operativo en la Raspberry Pi. La primera y más recomendada es instalar Raspberry Pi OS (antes llamado Raspbian), este es el sistema oficial desarrollado por Raspberry Pi Foundation. La otra manera es colocar la imagen del sistema llamada New Out Of the Box Software (NOOBS), con el cual se pueden instalar diferentes sistemas operativos basados en Linux [16]. En la Figura 26 se muestran el logo del sistema operativo Raspberry Pi OS. Figura 26. Raspberry Pi OS La implementación de las computadoras de placa simple en el mundo de la domótica ha hecho que este tenga un rápido crecimiento. Por lo que, a lo largo de su existencia, la fundación Raspberry ha lanzado al mercado distintas computadoras de placa simple, tratando de mejorar la eficacia de su uso y con la finalidad de que cada vez más proyectos cuenten con ellas para integrar un sistema. Las primeras versiones que se lanzaron fueron las Model A y B, las cuales contaban con las siguientes especificaciones. Raspberry Pi 1 Model A: • 40 pines para conectarlos por puerto serial. • Un puerto USB 2.0. • Socket para memoria SD. • CPU de 700 MHz single-core ARM. • Memoria RAM de 512 MB. • Entrada HDMI. • Entrada de audio 3.5 mm Jack. Raspberry Pi 1 Model B: • 40 pines para conectarlos por puerto serial. • Cuatro puertos USB 2.0. • Socket mara memoria SD. • Conector Ethernet. • CPU de 700 MHz single-core ARM. • Memoria RAM de 512 MB. • Entrada HDMI. • Entrada de audio 3.5 mm Jack. 33 En la Figura 27 se muestra del lado izquierdo una Raspberry Pi 1 Model A y del lado derecho una Raspberry Pi 1 Model B. Figura 27. Raspberry Pi 1 Model A y Model B Con la finalidad de seguir avanzando en la tecnología de las computadoras de placa simple, Raspberry ofreció su modelo Raspberry Pi 3 Model A+ y Model B+, estas hicieron un gran cambio al agregar más memoria y velocidad de procesamiento, las características de cada una se muestran a continuación. Raspberry Pi 3 Model A+: • CPU Broadcom BCM2837B0, Cortex-A53 (ARMv8) 64-bit SoC @ 1.4GHz. • Memoria RAM de 512 MB. • Bluetooth y Wi-Fi. • Conector serial de 40 pines. • Entrada HDMI. • Un puerto USB 2.0. • Socket para memoria SD. • Puerto para Cámara. Raspberry Pi 3 Model B+: • CPU Broadcom BCM2837B0, Cortex-A53 (ARMv8) 64-bit SoC @ 1.4GHz. • Memoria RAM de 1 GB. • Bluetooth y Wi-Fi. • Conector Ethernet. • Conector serial de 40 pines. • Entrada HDMI. • Cuatro puertos USB 2.0. • Socket para memoria SD. • Puerto para Cámara. En la Figura 28 se muestra del lado izquierdo la Raspberry Pi 3 Model A+, a del lado derecho es la Raspberry Pi 3 Model B. 34 Figura 28. Raspberry Pi 3 Model A+ y Model B Finalmente, uno de sus últimos lanzamientos es la Raspberry Pi 4 Model B la cual cuenta muchas mejoras al comprarla con sus versiones anteriores, haciendo que las computadoras de placa simple compitan contra ordenadores de sobremesa básicos, pero con ventajas como el bajo consumo energético, tamaño reducido y su fácil manipulación. Las principales características de este nuevo modelo se muestran a continuación. Raspberry Pi 4 Model B: • CPU Broadcom BCM2711, Quad core Cortex-A72 (ARM v8) 64-bit SoC @ 1.5GHz. • Memoria RAM de 1 GB, 2 GB, 4 GB o 8 GB. • Bluetooth y Wi-Fi. • Conector Ethernet. • Conector serial de 40 pines. • Dos puertos HDMI. • Dos puertos USB 3.0. • Dos puertos USB 2.0. • Socket para memoria SD. • Puerto para Cámara. En la Figura 29 se muestra la Raspberry Pi 4 Model B. Figura 29. Raspberry Pi 4 Model B 35 Su practicidad y facilidad de uso ha hecho que Raspberry sea una de las computadoras de placa simple más utilizadas tanto de manera educativa en las escuelas e institutos como a nivel productivo dentro de grandes empresas para el control de máquinas simples, creación de servidores, emuladores, entre muchas otras aplicaciones [17]. 2.3 Lenguajes de programación En los últimos años los lenguajes de programación han ido evolucionado en el desarrollo de sistemas o software, con el objetivo principal de facilitar al usuario las actividades que realiza día con día. Un lenguaje de programación es una herramienta que permite desarrollar programas para computadora y administrar el comportamiento de los dispositivos físicos y lógicos de la misma. A grandes rasgos, un lenguaje de programación se conforma de una serie de símbolos y reglas de sintaxis y semántica que definen la estructura principal del lenguaje y le dan un significado a sus elementos y expresiones. Los lenguajes de programación se clasifican en tres niveles, de acuerdo con la abstracción entre el lenguaje y el hardware. Lenguaje máquina El lenguaje máquina utiliza solo los símbolos cero (0) y uno (1), ya que los circuitos micro programables trabajan solo con estos dos niveles de voltaje. Este lenguaje se compone de un conjunto de instrucciones que definen acciones predeterminadas que la maquina es capaz de realizar. Y un programa de computadora consiste en una serie de estas instrucciones y sus datos. El flujo de ejecución de las instrucciones es secuencial, en ocasiones puede haber saltos entre las instrucciones del programa. El lenguaje máquina es específico de cada arquitectura a máquina, aunque las instrucciones pueden ser similares entre modelos del mismo fabricante. En la Figura 30 se muestra un ejemplo de lenguaje máquina. Figura 30. Ejemplo de lenguaje máquina 36 Lenguajes de bajo nivel (ensamblador) Un lenguaje de programación de bajo nivel proporciona poca o ninguna abstracción del microprocesador de una computadora, por lo que su trasladado al lenguaje máquina es fácil. Un ensamblador es un programa que traduce un archivo fuente, escrito en un lenguaje ensamblador, a un archivo objeto que contiene código máquina ejecutable directamente por la máquina para la que se ha generado. En la Figura 31 se muestra un diagrama donde el ensamblador traduce un código fuente a lenguaje máquina. Figura 31. Traducción de código en lenguaje ensamblador a lenguaje máquina Lenguaje de alto nivel Los lenguajes de programación de alto nivel se caracterizan por expresar los programas de manera sencilla, ya que su estructura semántica es muy similar a la forma como escriben los humanos, esto que permite escribir algoritmos de manera más natural, en lugar de codificarlos en el lenguaje binario de las máquinas, o a nivel de lenguaje ensamblador. Algunos de los lenguajes de alto nivel más utilizados son: C++, C#, Fortran, Java, PHP, Python, entre otros. Python Python es un lenguaje interpretado de programación de alto nivel, que está orientado a objetos y que tiene semántica dinámica. Está creado con estructuras de datos complejas que se manejan dinámicamente, es ideal para el desarrollo rápido de aplicaciones. Los nuevos programadores suelen utilizar este lenguaje ya que es más intuitivo y fácil de aprender para realizar proyectos complejos comparado con otros lenguajes de alto nivel, además posee herramientas útiles para el procesado de imágenes y creación de Interfaces Gráficas. Es usado para crear Scripts sencillos y que cumplan funciones específicas. Cuenta con una sintaxis fácil de aprender que reduce el costo de mantenimiento de los proyectos desarrollados en este lenguaje. Python soporta el uso de módulos y paquetes de terceros que promueve la programación modular y la reutilización de código. La versatilidad de este lenguaje lo convierte en uno de los lenguajes de programación más utilizados en la actualidad [19]. 37 Comúnmente, Python es empleado para diferentes técnicas de Inteligencia Artificial (IA), análisis de datos, automatización, desarrollo web, aplicaciones de escritorio, entre otras. En la Figura 32 se muestra el logo del lenguaje de programación Python. Figura 32. Logo de Python 2.4 Interfaz Gráfica de Usuario (GUI) Anteriormente, una interfaz estaba conformada por botones y luces que se limitaban a comunicar cosas simples como los estados de un proceso, de esta forma el usuario podía percatarse de los problemas que pudieran presentar en función de indicador se encendía o se apagaba. Con el avance de la industria y el incremento de complejos sensores y máquinas, fue necesaria una manera más efectiva en la que las personas fueran capaces de manipular y conocer el estado de dichas máquinas. Esto dio paso a la creación de Interfaces Gráficas de Usuario más complejas, las cuales están conformadas por ventanas, íconos, menús, botones, listas desplegables, cajas de texto, entre otros elementos, que permite a los usuarios una interacción visual e intuitiva con el sistema. Las interfaces gráficas ocultan los detalles del lenguaje de programación al usuario final. Tienen un comportamiento de acuerdo con las elecciones del usuario dentro de la interfaz, es decir, son manejadas por eventos, los cuales son tratados de manera interna por el programa [20]. En sus inicios, las interfaces gráficas eran muy sencillas, limitándose a interactuar con el usuario mediante texto simple en la terminal del sistema. Los cambios más importantes en el uso de las interfaces fueron introducidos por Windows y Mac OS a partir de los años 90. BeOS En la década de los 90’s las interfaces de software se encontraban en una aparente homogeneización, sin embargo, Windows 95 introdujo el concepto del menú de inicio en el que se podían iniciar los programas, y la barra de tareas donde se podían cambiar entre todos los programas que en ese momento estuvieran en ejecución. En 1998 se introdujo la idea de “Agrupación de tareas” en donde las tareas se ordenaban por tipo de aplicación, es decir, si se tenía más de un editor de texto, todos se encontrarían en un submenú de editor de texto. BeOS se unió a la idea de que el usuario permitiera mover hacia la izquierda o la derecha la barra de tareas a lo largo de la parte superior de la ventana, de esta manera las aplicaciones de fondo seguían siendo visibles. En la Figura 33 se muestra un sistema con Interfaz Gráfica de Usuario BeOS. 38 Figura 33. Interfaz Gráfica de Usuario BeOS Mac OS X y Aqua Apple desarrolló una nueva GUI llamada Aqua para su nuevo sistema operativo Mac OS X. Aqua introdujo nuevas características importantes y llamativas, como ventanas que se podían minimizar además de hacer un redibujado fuera de la pantalla y que no sea visible, otro concepto que se introdujo fue el de “hojas” donde aparecen cuadros de dialogo que eran “independientes” a su aplicación adjunta. En la última versión de OS X se agregó la característica de reducir y redimensionar la ventana de cada aplicación para que se tuviera un mayor espacio en la pantalla [21]. En la Figura 34 se muestra un sistema con Interfaz Gráfica de Usuario Mac Aqua. Figura 34. Sistema Operativo con Interfaz Gráfica de Usuario Mac Aqua. Mas recientemente, el desarrollo de interfaces gráficas se divide en dos grandes bloques, funcional (Backend) y visual (Frontend). Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son todas las tecnologías de diseño y desarrollo de una Interfaz Gráfica que se encargan de la interactividad con los usuarios. 39 Backend es la capa de acceso a datos de un software o cualquier dispositivo, que no es directamente accesible por los usuarios. Además, contiene la lógica de la aplicación que maneja dichos datos [22]. En la Figura 35 se muestran las capas de programación Frontend y Backend. Figura 35. Frontend y Backend 2.5 Librerías para Interfaces Gráficas de Usuario con Python Las librerías más utilizadas para realizar Interfaces Gráficas de Usuario con Python son: • Tkinter (Tk): es una biblioteca de código abierto escrita en C para desarrollar aplicaciones de escritorio multiplataforma. Desde sus primeras versiones Python incluye en su biblioteca o librería estándar el módulo Tkinter. Esto que permite utilizar las herramientas de Tk para desarrollar aplicaciones de escritorio en Python [23]. Tkinter está compuesta de varios widgets individuales. Cada widget es representado como un objeto de Python, instanciado desde clases tales como ttk.Frame, ttk.Label y ttk.Button. • PIL: Python Imaging Library agrega al intérprete de Python la capacidad para procesar imágenes en diferentes formatos como JPG, JPEG, PNG, PPM, entre otros [24]. • Pygame: es una librería escrita en Python diseñada principalmente para desarrollar videojuegos y crear programas multimedia en lenguaje Python. No depende del sistema operativo. Al estar elaborado de forma modular permite realizar distintas tareas de manera simultánea [25]. En la Figura 36 se muestran los logos de las librerías Pillow, Tkinter y Pygame. Figura 36. Logos de las librerías Pillow, Tkinter y Pygame 40 2.6 GRID Para organizar el contenido de una de las ventanas de la interfaz se utilizó el empaquetador GRID. La ventana puede dividirse en filas y columnas, que dan como resultado una tabla bidimensional, donde en cada celda se pueden colocar los widgets, incluso se puede colocar un widget que abarque más de una celda. En la Figura 37 se muestra un ejemplo del sistema de empaquetado aplicado a una ventana. Figura 37. Ejemplo de GRID 2.7 Ejemplo de creación de una ventana con Tkinter Los elementos visuales más comunes en una ventana son: Frame, Label, Button, CheckBox, messageBox, entre otros. Todos los elementos tienen como único parámetro obligatorio el contenedor en el que se van a colocar. A continuación, se describe el proceso de creación de la ventana mostrada en la Figura 38 y todos los elementos que la componen. Figura 38. Ventana creada con Tkinter 41 En la Tabla 1 se describen los elementos que se encuentran sobre la ventana mostrada anteriormente. No. Elemento Tipo de elemento Descripción 1 Tk Ventana 2 Label Logo UAM 3 Label Título de la ventana 4 Label Logo CBI 5 Label Imagen de fondo 6 Button Continuar 7 Button Salir 8 Separator Separador horizontal Tabla 1. Elementos de la ventana de Ejemplo Los Frames de la librería Tkinter son contenedores y sirven para colocar dentro de ellos otros elementos. Para crear una ventana, se debe iniciar el proceso Tk, el cual crea un Frame (root) que contendrá el resto de los componentes de la ventana. Los Labels de la librería Tkinter son etiquetas y sirven para colocar dentro de ellos texto o imágenes. Para crear una Label, se debe de indicar el Frame que lo contendrá, se le puede asignar un tamaño, tipo y color de fuente (en caso de texto), color de fondo, espaciado interior, entre otras modificaciones de propiedades. Los Buttons son elementos a los que se les puede asociar una funciona que será ejecutada al presionar sobre el elemento, al igual que los Labels se les pueden modificar algunas propiedades. Los Separators sirven para separar otros elementos, pueden utilizarse de manera vertical u horizontal. El orden de creación de la ventana y los elementos que la componen se describen en el Diagrama de Flujo 1. 42 Diagrama de Flujo 1. Proceso de creación de la ventana 2.7.1 Elemento 1 Como ya se mencionó, el proceso Tk crea un Frame en el que se colocaran el resto de los elementos de la ventana. En la Figura 39 se muestra la ventana en blanco. Figura 39. Ventana en blanco A este Frame en particular se le puede colocar un título y un ícono. A continuación, se muestra el código para la creación de la ventana en blanco. 43 #Creación de la ventana self.root = Tk() self.title = "Interfaz de configuración PLC" self.icon = "./images/plc.ico" self.root.title(self.title) icono = self.icon self.root.iconbitmap(icono) #Tamaño y posición de la ventana ancho = 680 alto = 400 xVentana = self.root.winfo_screenwidth() // 2 - ancho // 2 yVentana = self.root.winfo_screenheight() // 2 - alto // 2 posicion = str(ancho) + "x" + str(alto) + "+" + str(xVentana) + "+" + str(yVentana) self.root.resizable(0, 0) self.root.geometry(posicion) Para dar el tamaño y posición a la ventana, se ejecuta la función “geometry”, la cual recibe como parámetro una cadena con la siguiente forma: “widthxheight+x+y”. donde “x” y “y” corresponden a las coordenadas en las cuales se coloca el centro de la ventana. 2.7.2 Elemento 2 La imagen del elemento 2 se muestra en la Figura 40 y se encuentra en un Label colocado sobre la ventana. Figura 40. Imagen del elemento 2 El siguiente fragmento de código muestra cómo crear un Label con una imagen en su interior y colocarlo en la ventana. uam_image = Image.open("./images/uamazc.jpg") uam_image = uam_image.resize((200, 80)) uam_image = ImageTk.PhotoImage(uam_image) uam_encabezado = Label(self.root, image=uam_image, width=200, heigh=80) 44 uam_encabezado.image = uam_image uam_encabezado.grid(row=0, column=0, sticky='wsne') 2.7.3 Elemento 3 La imagen del elemento 3 se muestra en la Figura 41 y se encuentra en un Label colocado sobre la ventana. Figura 41. Imagen del elemento 3 El siguiente fragmento de código muestra cómo crear un Label con texto en su interior y colocarlo en la ventana. Label(self.root, text="Interfaz de configuración \npara PLC", padx=10, font=("Verdana", 14), background='white').grid(row=0, column=1) 2.7.4 Elemento 4 La imagen del elemento 4 se muestra en la Figura 42 y se encuentra en un Label colocado sobre la ventana. Figura 42. Imagen del elemento 4 El siguiente fragmento de código muestra cómo crear un Label con una imagen en su interior y colocarlo en la ventana. 45 electronica_image= Image.open("./images/electronica.jpg") electronica_image= electronica_image.resize((200, 80)) electronica_image= ImageTk.PhotoImage(electronica_image) electronica_encabezado = Label(self.root, image=electronica_image, width=200, heigh=80) electronica_encabezado.image = electronica_image electronica_encabezado.grid(row=0, column=2, sticky='wsne') 2.7.5 Elemento 5 La imagen del elemento 5 se muestra en la Figura 43 y se encuentra en un Label colocado sobre la ventana. Figura 43. Imagen del elemento 5 El siguiente fragmento de código muestra cómo crear un Label con una imagen en su interior y colocarlo en la ventana. plc_image = Image.open("./images/plc_bienvenida.jpg") plc_image = plc_image.resize((680, 500)) plc_image = ImageTk.PhotoImage(plc_image) plc_centro = Label(self.root, image=plc_image, width=400, heigh=400) plc_centro.image = plc_image plc_centro.grid(row=2, column=0, rowspan=4, columnspan=3, sticky='wsne' 2.7.6 Elemento 6 La imagen del elemento 6 se muestra en la Figura 44, este es un botón que se encuentra sobre la ventana. 46 Figura 44. Imagen del elemento 6 El siguiente fragmento de código muestra cómo crear un Button con una imagen y texto en su interior y colocarlo en la ventana. img_continuar = Image.open("./images/next.png") img_continuar = img_continuar.resize((30, 30)) img_continuar = ImageTk.PhotoImage(img_continuar) boton_continuar = Button(self.root, image=img_continuar, text="Continuar ", compound="right", padx=5, pady=5, font=("Verdana", 14), width=150) boton_continuar.grid(row=4, column=0) boton_continuar.image = img_continuar 2.7.7 Elemento 7 La imagen del elemento 7 se muestra en la Figura 45, este es un botón que se encuentra sobre la ventana. Figura 45. Imagen del elemento 7 El siguiente fragmento de código muestra cómo crear un Button con una imagen y texto en su interior y colocarlo en la ventana. img_salir = Image.open("./images/salir.png") img_salir = img_salir.resize((30, 30)) img_salir = ImageTk.PhotoImage(img_salir) 47 boton_salir = Button(self.root, image=img_salir, text="Salir ", compound="right", padx=5, pady=5, font=("Verdana", 14), width=150) boton_salir.grid(row=4, column=2) boton_salir.image = img_salir 2.7.8 Elemento 8 La imagen del elemento 8 se muestra en la Figura 46, este es Separator horizontal separa el encabezado de la ventana y la parte inferior. Figura 46. Imagen del elemento 8 El siguiente fragmento de código muestra cómo crear un Separator y colocarlo en la ventana. ttk.Separator(self.root, orient=HORIZONTAL).grid(row=1, column=0, columnspan=3, sticky="ews") 48 Capítulo 3. Descripción General del Sistema. En este capítulo se describen las características generales del sistema, así como su funcionamiento. Se presenta el desarrollo del software para la Interfaz Gráfica de Usuario, además de los módulos para controlar la pantalla informativa y desplegar imágenes. Como ya se mencionó, el sistema consta de una serie de ventanas interconectadas entre sí que facilitan al usuario el proceso para crear configuraciones de imágenes y efectos de entrada para desplegarlas en una pantalla LED RGB. El traslado de información entre la Interfaz Gráfica de Usuario y la pantalla informativa se realiza mediante una Red de Área Local (LAN). 3.1 Descripción de ventanas Se desarrollaron diferentes ventanas a través de las cuales el usuario puede navegar para crear, cargar, editar y enviar configuraciones a la pantalla informativa. En la Figura 47 se muestra un diagrama de navegación de todas las pantallas del sistema. Figura 47. Diagrama de navegación entre ventanas de la interfaz 49 3.1.1 Bienvenida La primera ventana que ve el usuario al abrir la aplicación es la de Bienvenida, esta cuenta con una imagen de fondo y tres botones los cuales son: • Ayuda: muestra un documento PDF con el manual de uso de la aplicación. • Salir: cierra la aplicación. • Continuar: abre la ventana de Opciones. En la Figura 48 se muestra la ventana de Bienvenida. Figura 48. Ventana de Bienvenida 3.1.2 Opciones La ventana de Opciones le permite al usuario crear un nuevo proyecto, cargar una configuración previa existente desde el explorador de archivos de la computadora o simplemente regresar a la ventana anterior (ventana de Bienvenida). En la Figura 49 se muestra la ventana de Opciones. Cuenta con tres botones los cuales son: • Nuevo: se carga la ventana de Configuración en donde puede comenzar a agregar imágenes y sus parámetros a la lista de configuración. • Cargar configuración: abre el explorador de archivos del sistema operativo en donde se le pide al usuario seleccionar la ruta en la que se encuentra la carpeta con la configuración previamente creada. • Regresar: regresa a la ventana de Bienvenida. 50 Figura 49. Ventana de Opciones 3.1.3 Configuración En la pantalla para crear Configuración el usuario puede cargar imágenes y seleccionar sus parámetros de desplegado, además de abrir la ventana de Visualización y pasar a la ventana de Resumen. Está dividida en cuatro bloques funcionales, los cuales son: selección de imagen, selección de efecto, selección de tiempo y área de botones. El bloque de selección de imagen permite mediante un botón cargar una imagen desde el explorador de archivos. En la sección de efectos, el usuario debe seleccionar una de las cinco animaciones disponibles. En el apartado de tiempo, se debe de ingresar el valor de minutos y segundos que la imagen permanecerá fija en la pantalla. Finalmente, en el área de botones se encuentran las siguientes opciones: • Regresar: regresa a la ventana anterior. • Agregar imagen: guarda en la lista de configuración la imagen y los parámetros seleccionados y limpia la ventana para agregar una nueva imagen y parámetros. • Visualizar: abre la ventana de Visualización con la imagen y efecto seleccionados. • Resumen de la configuración: pasa a la ventana de Resumen. En la Figura 50 se muestra la ventana para Crear una Configuración. 51 Figura 50. Ventana para Crear una Configuración 3.1.4 Visualización En la pantalla de Visualización el usuario puede previsualizar la imagen y el efecto de entrada seleccionados en la ventana de Configuración. Esta ventana cuenta únicamente con los siguientes botones: • Play: reproduce la animación. • Salir: cierra la ventana. En la Figura 51 se muestra la ventana de Visualización. Figura 51. Ventana de Visualización 52 3.1.5 Resumen La ventana de Resumen muestra una tabla donde se muestra de manera detallada el contenido de la lista de configuración. En la cual se muestra el número de presentación, una miniatura de la imagen, el nombre del efecto y el tiempo de desplegado. En la Figura 52 se muestra la ventana de Resumen. Figura 52. Ventana de Resumen La ventana de Resumen cuenta con los siguientes botones: • Editar: el usuario puede seleccionar el número de una imagen y con el botón Editar, se abre la ventana para Editar la Configuración. • Visualizar Configuración: abre la ventana de Visualización de Configuración. • Salir: cierra la aplicación. • Enviar Configuración: envía la lista configuración a la pantalla informativa LED RGB. • Guardar: guarda la configuración en el sitio seleccionado por el usuario. 3.1.6 Editar Configuración La ventana para Editar Configuración es una variante de la ventana Crear Configuración. Al abrir la ventana, se carga la imagen y parámetros seleccionados, el usuario puede hacer cambios y guardarlos mediante el botón Guardar Cambios. En la Figura 53 se muestra la ventana de Editar Configuración. 53 Figura 53. Ventana para Editar una Configuración 3.1.7 Visualización de configuración La ventana Visualización de Configuración es una variante de la pantalla Visualización, pero que permite previsualizar todas las imágenes y sus animaciones de la lista de configuración. Posee botones para saltar o retroceder las animaciones. En la Figura 54 se muestra la ventana de Visualización de Configuración. Figura 54. Ventana de Visualización de Configuración Las ventanas realizadas en el lenguaje de programación Python presentadas anteriormente conforman la Interfaz Gráfica de Usuario, a través de las cuales se pueden 54 crear configuraciones de imágenes para ser enviadas y desplegadas en la pantalla informativa. 3.2 Despliegue de imágenes Como ya se mencionó, las configuraciones creadas en la Interfaz Gráfica de Usuario se envían por medio de una Red de Área Local (LAN) a la pantalla LED RGB. Esta se encarga del despliegue de las imágenes utilizando los efectos de entrada seleccionados por el usuario. Los efectos que pueden seleccionares son: • Instantáneo. • De Derecha a Izquierda. • De Arriba a Abajo. • De Abajo a Arriba. • Aleatorio. Cada uno de los efectos es un programa dentro de la pantalla informativa realizado en lenguaje Python 3. Simultáneamente, se escribió el código de cada animación dentro de la Interfaz Gráfica de Usuario para simular el desplegado de las imágenes. Para lograr el efecto Instantáneo, se despliega la imagen en su totalidad encendiendo todos los módulos LED de la pantalla en el mismo instante. En la Figura 55 se muestra la pantalla informativa desplegando una imagen con efecto de entrada Instantáneo. Figura 55. Efecto Instantáneo El efecto De Derecha a Izquierda muestra un desplazamiento horizontal de la imagen en la dirección indicada por el nombre del efecto. Esto se realiza encendiendo los LEDs columna a columna comenzando del lado derecho, de tal forma que la imagen recorre la pantalla hacia la izquierda hasta ser mostrada por completo. En la Figura 56 se muestra la pantalla informativa desplegando una imagen con efecto de entrada De Derecha a Izquierda. 55 Figura 56. Efecto De Derecha a Izquierda El efecto De Arriba a Abajo muestra un desplazamiento vertical de la imagen en la dirección indicada por el nombre del efecto. Esto se realiza encendiendo los LEDs fila a fila comenzando en la parte superior, de tal forma que la imagen recorre la pantalla hacia abajo hasta ser mostrada por completo. En la Figura 57 se muestra la pantalla informativa desplegando una imagen con efecto de entrada De Arriba a Abajo. Figura 57. Efecto De Arriba a Abajo El efecto De Abajo a Arriba muestra un desplazamiento vertical de la imagen en la dirección indicada por el nombre del efecto. Esto se realiza encendiendo los LEDs fila a fila comenzando en la parte inferior, de tal forma que la imagen se recorre hacia arriba hasta ser mostrada por completo. En la Figura 58 se muestra la pantalla informativa desplegando una imagen con efecto de entrada De Abajo a Arriba. 56 Figura 58. Efecto De Abajo a Arriba El efecto Aleatorio enciende grupos de LEDs (de tamaño 2x2) de la pantalla informativa de manera aleatoria hasta que la imagen se muestra por completo. En la Figura 59 se muestra la pantalla informativa desplegando una imagen con efecto de entrada de Aleatorio. Figura 59. Efecto Aleatorio De acuerdo con la lista de configuración creada en la Interfaz Gráfica de Usuario, los efectos explicados anteriormente se aplican a las imágenes para ser desplegadas en la pantalla informativa. 3.3 Descripción de bloques del sistema En este segmento se describen las características generales del sistema, así como su funcionamiento. Se presenta el desarrollo del software para la Interfaz Gráfica de Usuario, además de los módulos para controlar la pantalla informativa y desplegar imágenes. En la Figura 60 se muestra el diagrama de bloques del sistema. 57 Figura 60. Diagrama de bloques del sistema La Interfaz Gráfica de Usuario genera los archivos necesarios en base a la configuración creada por el usuario, que pueden transmitirse de manera remota por medio de un dispositivo de almacenamiento externo (USB), o bien, a través de un servidor de Red de Área Local (LAN). 3.3.1 Interfaz Gráfica de Usuario La Interfaz Gráfica comprende el sistema de ventanas mencionado anteriormente, a través de las cueles el usuario puede previsualizar los efectos de animación, crear y editar configuraciones y enviarlas a la pantalla informativa. Los archivos son enviados a una Raspberry Pi conectada a los módulos LED por medio de los pines de entrada y salida. Los archivos de configuración deben de tener una estructura específica, la cual debe ser una carpeta llamada “Configuracion” que contenga un archivo de texto plano llamado “configuracion.txt” y una carpeta con el nombre “Imagenes”. El archivo “configuración.txt” indica en forma de lista el nombre de la imagen, el efecto con la que se presentará y el tiempo que permanecerá dicha imagen en la pantalla, mientras que la carpeta “Imagenes” debe contener las imágenes que se indican en el archivo “configuracion.txt”. Las imágenes deben tener un tamaño de 128x48 pixeles y con extensión ppm. La Interfaz Gráfica se encarga de crear los archivos con la estructura mencionada de acuerdo con la configuración creada por el usuario. En la Figura 61 se muestra un diagrama con la estructura que deben tener los archivos. 58 Figura 61. Estructura de archivos La Interfaz Gráfica de Usuario fue creada en su totalidad con lenguaje de programación de alto nivel Python 3, empleando las utilidades de las bibliotecas Tkinter, PIL y Pygame. Esta interfaz permite crear una configuración seleccionando imágenes y parámetros de desplegado, mediante programación interna se crean los archivos necesarios para que la pantalla informativa pueda mostrar el contenido. Para agregar imágenes a la lista de configuración, el usuario debe seleccionarlas mediante el explorador de archivos del sistema operativo. Estas pueden tener cualquier nombre y cualquier formato (JPG, JPEG, PNG, entre otros). 3.3.2 Control de la Pantalla Los archivos son recibidos por una Raspberry Pi 3 Model “B” que se encuentra en la estructura de la pantalla, la cual interpreta la información recibida y posteriormente envía datos por los puertos de entrada y salida (GPIO) a los módulos LED para desplegar las imágenes con las animaciones seleccionadas por el usuario. En la Figura 62 se muestra el diagrama de pines de una computadora de placa simple Raspberry Pi 3 Model “B”. 3.3.3 Traslado de Información Los archivos creados por la interfaz pueden transferirse a la Raspberry Pi que controla la pantalla conectando un dispositivo de almacenamiento externo USB que contenga los archivos, o bien, a través de un botón dentro de la interfaz, el cual llama a una función que envía los archivos de configuración a un servidor de Red de Área Local (LAN) alojado en la Raspberry Pi. 59 Figura 62. Diagrama de Pines El control de encendido y apagado de los LED de la pantalla informativa se realiza mediante scripts escritos en el lenguaje Python, donde se utilizan las funciones de la librería rpi-rgb-led-matrix para crear las animaciones de las imágenes. De acuerdo con la configuración hecha por el usuario y por el archivo “configuracion.txt” creado por la Interfaz de Usuario, un programa ejecutado por la Raspberry se encarga de leer los datos del archivo para cada una de las presentaciones. El programa llama al script correspondiente al dato obtenido de la lista y le indica la imagen que debe presentar. 60 Capítulo 4. Bloque: Interfaz Gráfica de Usuario En este apartado se describe el desarrollo del programa realizado en Python de la Interfaz Gráfica de Usuario (GUI). La cual contiene los bloques de Sistema de Ventanas y Creación de Archivos. El Sistema de Ventanas consta de un conjunto de pantallas por las cuales el usuario puede navegar para crear o abrir una configuración, seleccionar las imágenes a mostrar en la pantalla informativa y sus parámetros de desplegado. Además de observar una visualización previa de las animaciones configuradas. El bloque de Control de Archivos se encarga de las funcionalidades de la interfaz para crear y abrir configuraciones. Además del manejo del flujo de información entre las distintas ventanas. 4.1 Lista de configuración Para el proyecto se definió una clase llamada “Datos” en la cual se almacenan todos los parámetros de desplegado de una imagen. Con esta clase se pueden crear objetos que se agregan en una lista global llamada “lista_configuracion”. De esta manera, puede consultarse y modificarse en cualquier momento y desde cualquier ventana que la requiera. A continuación, se muestra el código de la clase “Datos” y la declaración de la lista de configuración. #Esta clase es una estructura para almacenar y obtener los parámetros para presentar una imagen en la pantalla informativa. # Los parámetros son: # Número de imagen # Ruta de imagen # Efecto de entrada # Tiempo de presentación class Datos: def __init__(self, numero, imagen, efecto, tiempo): self.numero = numero self.imagen = imagen self.efecto = efecto self.tiempo = tiempo def set_numero(self, numero): self.numero = numero def get_numero(self): return self.numero def set_imagen(self, imagen): self.imagen = imagen def get_imagen(self): return self.imagen 61 def set_efecto(self, efecto): self.efecto = efecto def get_efecto(self): return self.efecto def set_tiempo(self, tiempo): self.tiempo = tiempo def get_tiempo(self): return self.tiempo def __repr__(self): return str(self.__dict__) #Lista de tipo Datos donde se almacenan todas las imágenes y sus parámetros de desplegado. lista_configuracion = [] 4.2 Proceso de creación de las ventanas Cada ventana está definida por una clase y estas tienen varios elementos y funciones en común que son esenciales, las cuales se describen a continuación. La función “__init__” es el constructor de la clase de la ventana, en esta se indica el título, el icono de la ventana y se inicia el proceso de Tk(), el cual crea una ventana. La función “cargar” coloca todos los widgets (elementos) en la ventana, como lo son imágenes, separadores, letreros y botones. Además, en esta función se indican parámetros como el tamaño y la posición de la ventana en pixeles, además de indicar si es posible redimensionarla o no. La función “mostrar” se encarga de actualizar el contenido de la ventana y colocar todos los elementos en ella. Las funciones “cerrar” y “destruir” sirven para cerrar la ventana que se está mostrando en ese momento. Cada una de las ventanas cuenta con una o varias funciones que le permiten al usuario navegar entre las ventanas de la Interfaz, por lo que estas cuentan con funciones específicas que cierran la ventana actual, crean un objeto del tipo de la nueva pantalla, cargan y muestran sus elementos. El procedimiento para mostrar una ventana en la pantalla se describe en el Diagrama de Flujo 2. 62 Diagrama de Flujo 2. Diagrama de flujo de creación de ventanas 63 4.3 Ventana de Bienvenida Esta ventana es la primera que ve el usuario al abrir la aplicación, cuenta únicamente con funciones que permiten navegar a otras dos ventanas o bien, salir de la interfaz. En la Figura 63 se muestran los elementos que conforman la ventana de Bienvenida. Figura 63. Elementos de la ventana de Bienvenida Esta ventana cuenta con 8 elementos que se describen en la Tabla 2, mostrada a continuación. Número Tipo Elemento 1 Tk() Ventana en blanco 2 Label Logo UAM Azcapotzalco 3 Label Título del sistema 4 Label Logo CBI 64 5 Label Imagen de fondo 6 Button Botón Ayuda 7 Button Botón Continuar 8 Button Botón Salir Tabla 2. Elementos de la ventana de Bienvenida El orden de creación de la ventana y los elementos que la componen se describen en el Diagrama de Flujo 3. Diagrama de Flujo 3. Proceso de creación de la ventana de Bienvenida 65 4.3.1 Elemento 1. Ventana en blanco. El proceso Tk() crea una pantalla en blanco, la cual sirve como contenedor para colocar elementos dentro de ella. En la Figura 64 se muestra la ventana en blanco creada. Figura 64. Ventana en blanco Para crear una ventana en blanco, se debe indicar en los atributos de la clase el nombre, el ícono de la ventana e iniciar el proceso Tk(), esta ventana tiene por nombre “self.root”. Estas instrucciones se realizan mediante el siguiente bloque de código. def __init__(self): self.title = "Monitor de Productividad para Procesos Industriales (MPPI)" self.icon = "./iconos/main.ico" self.resizable = True self.root = Tk() Además, con las siguientes líneas de código dentro de la función “cargar”, se modifican parámetros de la ventana como lo son: color, tamaño y posición de la ventana. def cargar(self): self.root.title(self.title) icono = os.path.abspath(self.icon) self.root.iconbitmap(icono) ancho = 660 alto = 400 #winfo da el tamaño de la pantalla en ancho y en alto #Colocar la ventana en el centro de la pantalla xVentana = self.root.winfo_screenwidth() // 2 - ancho // 2 yVentana = self.root.winfo_screenheight() // 2 - alto // 2 66 posicion = str(ancho) + "x" + str(alto) + "+" + str(xVentana) + "+" + str(yVentana) self.root.geometry(posicion) self.root.config(background='white') 4.3.2 Elemento 2: Logo UAM Azcapotzalco El logo de la Universidad Autónoma Metropolitana Azcapotzalco se encuentra sobre la ventana en blanco “self.root” en la parte superior izquierda de la ventana. En la Figura 65 se muestra una imagen del elemento. Figura 65. Logo UAM Azcapotzalco Para colocar el elemento primero se carga la imagen y se redimensiona a 180x60 pixeles, posteriormente se agrega a un Label y finalmente, utilizando GRID, se coloca en la parte superior izquierda de la ventana, correspondiente a la posición (0,0) de filas y columnas, respectivamente. Esto se logra mediante el siguiente bloque de código. #Cargar la imagen y colocarla en el encabezado de la ventana, del lado izquierdo. uama = Image.open("./recursos/uamazcL.png") uama = uama.resize((180, 60)) uama = ImageTk.PhotoImage(uama) uamA = Label(self.root, image=uama, width=180, height=60, background='white') uamA.image = uama uamA.grid(row=0, column=0, sticky=W + S + N + E) El parámetro “sticky=W + S + N + E” (o bien, “ewns”) indica que la imagen debe centrarse horizontal y verticalmente dentro de la casilla GRID donde se posicionó. 4.3.3 Elemento 3: Título del sistema El título de la ventana se encuentra en el centro y en la parte superior, correspondiente a la posición (0, 1) de filas y columnas, respectivamente. En la Figura 66 se muestra una imagen del elemento. 67 Figura 66. Título del sistema El título cuenta con una fuente de tipo “Verdana” en tamaño 14 y un espaciado horizontal de 15 pixeles. El código de este elemento se muestra a continuación. #Título del proyecto en el centro del encabezado. titulo = Label(self.root, text="Monitor de Productividad \n para Procesos Industriales \n MPPI", padx=15, font=("Verdana", 14), background='white').grid(row=0, column=1) 4.3.4 Elemento 4: Logo CBI UAM Azcapotzalco El logo de la Universidad Autónoma Metropolitana Azcapotzalco se encuentra sobre la ventana en blanco “self.root”, en la parte superior derecha de la ventana. En la Figura 67 se muestra una imagen del elemento. Figura 67. Logo CBI Para colocar el elemento primero se carga la imagen y se redimensiona a 180x60 pixeles, posteriormente se agrega a un Label y finalmente, utilizando GRID, se coloca en la parte superior derecha de la ventana, correspondiente a la posición (0,2) de filas y columnas, respectivamente. Esto se logra mediante el siguiente bloque de código. #Cargar la imagen y colocarla en el encabezado de la ventana, del lado derecho. cbi = Image.open("./recursos/cbi.png") cbi = cbi.resize((180, 60)) cbi = ImageTk.PhotoImage(cbi) CBI = Label(self.root, image=cbi, width=180, height=60, background='white') CBI.image = cbi CBI.grid(row=0, column=2, sticky=W + S + N + E) 68 4.3.5 Elemento 5: Imagen de fondo Este elemento se encuentra en la parte inferior de la ventana sobre el Frame “fondo”, ocupando todo el espacio del disponible. En la Figura 68 se muestra una imagen del elemento. Figura 68. Imagen de fondo En la parte inferior de la ventana se encuentra un Frame llamado “fondo” el cual se encuentra en la fila 1 y ocupando las 3 columnas de “self.root”. El código de este Frame es el siguiente. fondo = Frame(self.root, width=480, height=320, bg='lightblue') fondo.grid_propagate(False) #El frame no se ajusta al contenido fondo.grid(row=1, column=0, columnspan=3, sticky=W + S + N + E) Para colocar el elemento primero se carga la imagen y se redimensiona a 660x600 pixeles, posteriormente se agrega a un Label y finalmente, utilizando GRID, se coloca la imagen en todo el Frame, utilizando 5 filas por 3 columnas. Esto se logra mediante el siguiente bloque de código. #Imagen de fondo rgbImagen = Image.open("./recursos/bienvenida.jpg") rgbImagen = rgbImagen.resize((660, 600)) rgbImagen = ImageTk.PhotoImage(rgbImagen) 69 fondoRGB = Label(fondo, image=rgbImagen, background='white') fondoRGB.image = rgbImagen fondoRGB.grid(row=0, column=0, rowspan=5, columnspan=3, sticky="ewns") 4.3.6 Elemento 6: Botón Ayuda El botón se encuentra sobre el Frame “fondo” en la fila 4 y la columna 0, cuenta con un espaciado interno horizontal de 10 pixeles. En la Figura 69 se muestra una imagen del elemento. Figura 69. Botón Ayuda Para crear este elemento primero se carga la imagen que contiene y se redimensiona a 20x20 pixeles, se posiciona a la derecha del texto y finalmente, se le asigna una función al botón. Además, cuenta con un espaciado interior. A continuación, se muestra el código para crear este elemento. #Cargar imagen y colocarla en un botón imgAyuda = Image.open("./iconos/signo-de-interrogacion.png") imgAyuda = imgAyuda.resize((20, 20)) imgAyuda = ImageTk.PhotoImage(imgAyuda) botonAyuda = Button(fondo, image=imgAyuda, text="Ayuda ", compound="right", command=self.mostrarAyuda) botonAyuda.grid(row=4, column=0, ipadx=10) botonAyuda.image = imgAyuda El procedimiento para crear un botón con una imagen se muestra en el Diagrama de Flujo 4. 70 Diagrama de Flujo 4. Procedimiento para crear un botón con imagen. 4.3.7 Elemento 7: Botón Continuar El botón se encuentra sobre el Frame “fondo” en la fila 4 y la columna 1. En la Figura 70 se muestra una imagen del elemento. Figura 70. Botón Continuar 71 Para crear este elemento primero se carga la imagen que contiene y se redimensiona a 20x20 pix