Programación de Sistema Telemáticos

Grupo #3
Avance de proyecto 1
INTEGRANTES:
Kevin Josue Santana Toapanta

kejosant@espol.edu.ec

Edward Elián Fernández Carranza

edwelfer@espol.edu.ec

Xavier Eduardo Banchon Gonzales

xbanchon@espol.edu.ec

FECHA DE ENTREGA:

martes, 28 de junio de 2022

PROFESORA:

Msig. Adriana Collaguazo Jaramillo

 a) Introducción: Descripción detallada de la propuesta del grupo para desarrollar el tema
del proyecto.

El proyecto se basa en la conexión de un dispositivo Iot ,un ESP32 , que se conecte a la aplicación
móvil ,para mostrar imágenes png en un png, la aplicación deberá estar conectada a una base de datos
para obtener la información de inicio de sesión de igual manera para agregar registros y manejar las
imágenes png , además de que la aplicación va a ser capaz de mostrar una selección de fotos, estas
pueden ser escogidas y ordenadas mediante la aplicación ,para así simular un Portarretratos digitales.

b) Diseño: Contiene el “Diseño de Hardware” con el diagrama esquemático y el diagrama

de red, incluyendo imágenes explicadas del proceso de diseño hasta su versión final.
Además, contiene los diagramas de “Diseño de Software” como diagrama del proyecto,
diagrama de despliegue, diagrama de entidad-relación, y prototipado móvil.

• Diagrama Esquemático

Fig. 1 Diagrama de circuito del sistema.

 • Diagrama de Red
1. Primero definimos todos los dispositivos de red relevantes para crear el diagrama de red. El
proyecto tiene tres dispositivos de gran importancia: el smartphone, el portarretratos y el servidor.
Los dispositivos de red como son el router, el modem y la nube nos permiten realizar la conexión
entre todos los dispositivos.

Fig. 2 Dispositivos de red.

2. Como el servidor no se encontrará en la misma red que el portarretratos separamos estos dos en
redes diferentes. Se define una red para el portarretratos y que incluye el dispositivo móvil del usuario
llamada “Oficina”, donde ambos dispositivos estarán conectados a una misma red Wi-Fi. También se
define una segunda red a la cual se nombró Servidor, la cual incluye al servidor donde se almacenarán
las imágenes que serán mostradas en el portarretratos dinámico.

Fig. 3 Agrupamiento de dispositivos de red.

3. La conexión entre la nube y el servidor se realiza bajo una conexión con cable directo. El modem
que se encuentra en la red “Oficina” se conecta a la nube por medio de una conexión con cable coaxial
y, a su vez, el modem se conecta con el router inalámbrico con cable directo. Por último, los
dispositivos finales de la red “Oficina” se conectar al router inalámbricamente por la interfaz Wi-Fi.

Fig. 4 Conexión entre los dispositivos de red.

4. En la configuración del servidor se le asignó la dirección IP 10.10.10.10 que corresponde a un host

de una red 10.10.10.0/8
 Fig. 5 Configuración del servidor imágenes.

5. En la configuración de la nube definimos el intercambio de datos entre la interfaz GigabitEthernet0

(Servidor) y Coaxial1 (Modem de la oficina). Luego, configuramos la interfaz correspondiente al
servidor para determinar bajo qué servicio trabajará la conexión.
Fig. 6 Configuraciones de la nube.
6. Al router inalámbrico le otorgamos la dirección IP 10.10.10.2/8 y definimos la dirección 10.10.10.1
como Gateway predeterminado esto con el fin de poder establecer conexión con el servidor. En la
interfaz Wireless se le dio el nombre “AP-IoT” que identificará a la red Wi-Fi que conectará al
smartphone y al portarretratos con el servidor.

Fig. 7 Configuración del router.

7. Para finalizar se configura la conexión a la red AP-IoT tanto en el smartphone como en el
portarretratos. En este último se realizó una configuración adicional ya que como tal este dispositivo
no viene con una interfaz Wireless en Cisco Packet Tracer por lo que en la pestaña I/O Config en el
apartado de adapator de red se seleccionó la opción PT-IOT-NM-1W para habilitar la inferfaz
Wireless y realizar la respectiva configuración.

Fig. 8 Configuración del smartphone.

Fig. 9 Configuraciones del dispositivo portarretrato ioT.
 • Diseño software
• Diagrama del proyecto

Fig. 10 Diagrama esquemático del sistema Portarretrato dinámico.

Los elementos por implementar en el proyecto propuesto son los siguientes:

❖ ESP32: Entre sus características incluye interfaz para tarjeta SD, Wifi: 802.11 b/g/n/e/i
(802.11n @ 2.4 GHz hasta 150 Mbit/s), Bluetooth: v4.2 BR/EDR and Bluetooth Low Energy
(BLE).
❖ Pantalla LCD touch de 320 x 240, que utiliza la biblioteca de accionamiento ili9341.
❖ Aplicación Android (dispositivo móvil).
La funcionalidad del esquema presentado consiste en conectar el módulo ESP32 con la pantalla LCD
touch para poder presentar datos (imágenes .JPG), todo bajo el control de un dispositivo móvil
conectado al sistema de forma inalámbrica. Además, se implementa dos pulsadores (botones) para
realizar el cambio de imágenes manualmente sin recurrir a la pantalla touch. En alternativa se podría
usar un módulo ESP32 TFT LCD, que es la integración en una sola pieza del ESP32 con el LCD.
 • Diagrama del despliegue

Fig. 11 Diagrama de despliegue del sistema físico de red.

La representación del esquema de despliegue detalla los componentes físicos involucrados (nodos)
en el diagrama de red propuesto para el sistema de portarretrato dinámico, cada nodo contiene sus
respectivas ejecuciones y configuraciones a emplear.
• Diagrama de entidad relación

Fig. 12 Diagrama de entidad-relación del sistema de portarretrato.

 • Prototipado móvil

1.-Página de inicio de la aplicación

2.-Página de inicio de sesión
3.-Página de registro
4.-Página donde se encuentran los álbumes a mostrar
5.-Página donde se van a estar pasando las imágenes que se muestran en la pantalla led.
Referencias
❖ AV Electronics. (2022, 25 junio). Tarjeta de Desarrollo ESP32 Wifi Bluetooth.

https://avelectronics.cc/producto/tarjeta-de-desarrollo-esp32-wifi-bluetooth/

❖ Instructables. (2020, 22 diciembre). Make a Digital Photo Album by ESP32.

https://www.instructables.com/Make-a-Digital-Photo-Album-by-ESP32/

❖ Fakhroutdinov, K. (s. f.). UML deployment diagrams overview of graphical notation. Uml-

Diagrams.Org. https://www.uml-diagrams.org/deployment-diagrams.html