Universidad Autónoma de Nuevo León

Facultad de Ingeniería Mecánica y Eléctrica

INTERFACES GRAFICAS

Actividad .- Interfaz Grafica

Maestro.- LAURA PATRICIA DEL BOSQUE VEGA
Hora.- Martes N4-N6
Semestre.- 7
Carrera.- Ing. en Mecatrónica
Plan 401
30 / Mayo/ 2021
NOMBRE MATRICULA
Pedro Luis Marroquin Bustos 1801105
Jose Rogelio Uresti Gutierrez 1810467
Nicolás Oyervides García 1863902
Edgar Alberto Muñoz Garza 1799427
Leslie Ximena Nuño Flores 1800768
Jesús Víctor Oziel Guerrero Martínez 1820175
Jose Manuel Rodriguez Soto 1753655

Proyecto:
https://interfaz-roomba.web.app/
Introducción
En este proyecto se realizo una interfaz que simula el control de un roomba, esto
con el fin de que un futuro se pudiera implementar en un roomba de verdad
mediante el manejo de bluetooth.
La interfaz se realizó en código HTML, CSS, y JavaScript, esto con tal de darle un
estilo mas moderno a la página.

El modelado del roomba se realizó en Fusion 360, y se exporto en un archivo para

después ser usado en la página web.

Para la visualización y manipulación del modelo 3d en la página se utilizó la

librería de ThreeJS.
También se usan las librerías de Bootstrap y de JQuery, las cuales hoy en día son
fundamentales para tener una interfaz limpia, innovadora, y moderna.

Para el hosting de la pagina web se usó Firebase, que es un servicio gratuito de

Google para que los desarrolladores puedan implementar bases de datos, páginas
web, autentificación de usuarios, y almacenamiento en la nube, entre otras cosas.
Desarrollo de código.
Esta parte del código es la parte de CSS, la cual se encarga de darle estilo a la
página.

En esta parte del código empieza HTML. Esta parte se encarga de importar las
librerías de Bootstrap, JQuery, y ThreeJS, las cuales son necesarias para poder
hacer nuestra interfaz lo más moderno posible.
Esta parte del código solo declara el título y matricula.

Esta parte es la crucial parte de la interfaz que se encuentra al lado izquierdo de la página. Se encarga de admitir
las coordenadas y mostrar los resultados del Roomba.
Esta parte del código es la primera página de instrucciones que sale al entrar por primera vez a la página, y al
presionar el botón de instrucciones.

Esta parte es la segunda página de instrucciones.

Esta parte del código es la tercera y última página de instrucciones.
En esta parte del código es donde empieza la sección de JavaScript, la cual se
encarga de procesar las coordenadas introducidas en la interfaz. También se
encarga de crear la escena 3D y de manipular el roomba y el punto guía según la
coordenada deseada.
A grandes rasgos, en esta imagen se declaran las variables, que sucede cuando
se presiona un botón, se declaran las limitantes de -40 y 40.
Esta parte del código se encarga de apagar (en realidad pausar el movimiento) el
roomba.
Si el roomba está en movimiento, este se apagará y permanecerá congelado,
simulando que se apagó en la vida real.

A partir de este punto del código, es donde se crea la escena 3d, se llama el
modelo 3D, se crea la bola 3D, y dependiendo de los resultados de la introducción
de las coordenadas, es como se va a mover el roomba y hacia dónde se dirige.
Esta parte del código se dedica a plasmar las letras de los ejes X y Y para una
fácil apreciación.
En esta parte del código se crea la base de cuadro, se importa el roomba, y
también se encarga de animar el roomba.
Por último, en esta parte se realizan dos funciones con la intención de convertir
Radianes a Grados, y de Grados a Radianes.

Resultado final
Como resultado la pagina queda de esta manera.
Esta es la prima pagina de instrucciones que explica que es una coordenada.

Esta es la segunda hoja de instrucciones, el cual señala como es el roomba y el

punto deseado al introducir las coordenadas.
Esta es la tercera pagina el cual indica cuales son los controles de la cámara al
observar el entorno 3D.

El introducir una coordenada en el campo de texto, la interfaz te recuerda los

valores mínimos y máximos.
Al enviar una coordenada al roomba, cuando se mueve, si se presiona el botón de
apagado/encendido este se detiene justo en el momento en el que esta. Al
Encenderse de nuevo, este reanuda su trayecto.
Conclusión
Al realizar la interfaz se puede observar como el proyecto tiene un potencial para
poder realizarse en la vida real con un roomba que tenga alguna forma de
comunicación inalámbrica.
También como esta interfaz fue realizada en la web, se puede observar en
cualquier lugar del mundo y en cualquier momento mientras los servidores de
Google sigan de pie. En el momento en el que Google deje de existir la página no
podrá ser visible.

Link del proyecto.

https://interfaz-roomba.web.app/