Skip to content

Bitácora

Jump to bottom
matias4280 edited this page Dec 8, 2020 · 13 revisions

11/10/2020

Modelos papel aluminio y servos

Se implementaron dos modelos:

Modelo servos

Se presenta el modelo de los servos 360, en el cual se puede observar el funcionamiento de los mismos con sus respectivos estados y conexionado.

Modelo aluminio

Además, se implemento un modelo para detectar la colisión del vehículo. En dicho modelo se utiliza el papel aluminio como un switch o pulsador. Al producir contacto se detecta un nivel bajo, por lo que el sistema deberá responder a dicho evento.

22/10/2020

Simulación

Se comenzó a programar la simulación del vehículo utilizando el lenguaje python.

Carpeta donde se encuentran los archivos

5/11/2020 - 7/11/2020

Servidor flask

Para montar el servidor flask los pasos que seguimos fueron los siguientes:

  1. Instalamos python.
  2. Instalamos para poder crear entornos virtuales, con el comando pip install virtualenv.
  3. En la carpeta donde luego crearemos el proyecto flask primero armamos un entorno virtual con el comando virtualenv env.
  4. Una vez creado el entorno virtual, lo activamos con env\Scripts\activate.bat.
  5. Instalamos flask en el entorno virtual activado con el comando pip install Flask.
  6. Configuramos la variables de entorno, agregando la linea set "FLASK_APP=run.py" en el archivo env\Scripts\activate.bat. Luego ejecutamos flask run para corroborar que se haya instalado correctamente.
  7. Creamos una jerarquía de carpetas para que el código sea más mantenible, con el siguiente formato:
├── app
│   ├── db.py        # módulo de conexión con la base de datos.
│   ├── helpers      # directorio con funciones auxiliares.
│   ├── __init__.py  # módulo principal.
│   ├── models       # directorio con los modelos (Models).
│   ├── controller   # directorio de los controladores (Controllers).
│   ├── static       # directorio de archivos estáticos.
│   └── templates    # directorio de templates (Views).
├── config
│   └── config.py
│   └── routes.py
├── README.md
├── requirements.txt
└── run.py
  1. Instalamos XAMPP para poder correr mariadb.
  2. Instalamos en el proyecto SQLAlchemy el cual es un ORM que nos va permitir trabajar con la base de datos con modelos orientados a objetos.
  3. Realizamos las configuraciones necesarias para que el ORM y la base de datos estén conectados (configuración de variables de entorno, path de la base de datos, creación de usuario y base de datos utilizando phpmyadmin).
  4. Creamos una vista utilizando bootstrap en la cual se muestra un header y en el cuerpo de la página cuatro botones (los cuale sirven para el manejo de vehículo).

Problemas que surgieron en el proceso de montar el servidor:

  1. No se reconocía el comando virtualenv. virtualenv
  2. Al ejecutar flask run basededatosorm
  3. Problemas al conectar la base de datos con el ORM: basededatosorm
  4. Problema de no tener permisos para acceder a la base de datos: basededatosorm

Pese a estos errores logramos montar el servidor. Dejamos una captura de la estructura del proyecto (que anteriormente se mencionó y del home de la página web): visualstudio home_pagina

Carpeta donde se encuentran los archivos

14/11/2020

Conexión de la simulación con el servidor flask

Se realizó la conexión entre la simulación y el servidor flask. Esta conexión consiste en poder desde la interfaz de la página web poder mandar la orden al vehículo simulado de ir hacia arriba, abajo, derecha e izquierda, mientras la simulación muestra la velocidad de los servomotores, si el parachoque colisionó y la posición del vehículo constantemente utilizando los hilos.

Un problema que surgió, es que una vez se le da la orden al vehículo, la página no actualiza constantemente los datos pertenecientes al vehículo (como la posición, el estado del parachoque y la velocidad de los servomotores) ya que debería realizar un pooling del estado del vehículo. Como solución provisoria se resolvió actualizar la página de manera manual, para ver los cambios reflejados.

Se puede ver en la siguiente captura, la interfaz realizada: interfaz

Se cambió la ruta de la carpeta de simulación

17/11/2020

Simulación en Tinkercad

Se realizo la simulación del vehículo dentro del entorno de Tinkercad. La simulación permite observar el funcionamiento de los motores dc mediante el uso de un puente H (L293D). Por otro lado la representación del papel aluminio se realizo por medio de un pulsador, como se menciono en el modelado inicial.

Se puede observar en la siguiente imagen el esquema de la simulación:

Esquema Tinkercad

26/11/2020

Para facilitar el refrescado de la información en la página y reducir la cantidad de código javascript se opto por utilizar el micro-framework VueJS.

Desde la página oficial se describe como "Vue es un micro framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser utilizado incrementalmente. La librería central está enfocada solo en la capa de visualización, y es fácil de utilizar e integrar con otras librerías o proyectos existentes."

Por lo tanto dividimos la aplicación en un cliente que utilizara Vue (incorporando en un archivo html el cdn de Vue) y un servidor que utilizara Flask.

Servidor

El servidor se encargara de brindar una API por la cual el cliente podrá controlar y acceder a los datos actuales del vehículo. A continuación detallamos la definición de la API realizada en Flask.

Defición de API

Status del vehiculo

Ruta: /api/vehicle/status

Metodo: GET

Argumentos:

  • N/A

Ejemplo exitoso:

{
  "data": {
    "bumper_status": false,
    "datetime": "02/12/2020-18:25:38",
    "position_x": 10,
    "position_y": 10,
    "speed": 0,
    "speed_motor_1": 0,
    "speed_motor_2": 0
  }
}

Historial de hasta los ultimos 15 valores

Aclaraciones: Muestra hasta los ultimos 15 valores guardados en la base de datos.

Ruta: /api/vehicle/historical

Metodo: GET

Argumentos:

  • N/A

Ejemplo exitoso:

{
  "data": [
    {
      "bumper_status": false,
      "created_at": "02/12/2020-18:29:36",
      "motor_1": 0,
      "motor_2": 0,
      "speed": 0,
      "version": 49
    },
    {
      "bumper_status": false,
      "created_at": "02/12/2020-18:29:35",
      "motor_1": 0,
      "motor_2": 0,
      "speed": 0,
      "version": 49
    },
    {
      "bumper_status": false,
      "created_at": "02/12/2020-18:29:34",
      "motor_1": 0,
      "motor_2": 0,
      "speed": 0,
      "version": 49
    }
  ]
}

Historial completo

Ruta: /api/vehicle/export

Metodo: GET

Argumentos:

  • N/A

Ejemplo exitoso:

{
  "data": [
    {
      "bumper_status": false,
      "created_at": "02/12/2020-18:29:36",
      "motor_1": 0,
      "motor_2": 0,
      "speed": 0,
      "version": 49
    },
    {
      "bumper_status": false,
      "created_at": "02/12/2020-18:29:35",
      "motor_1": 0,
      "motor_2": 0,
      "speed": 0,
      "version": 49
    },
    {
      "bumper_status": false,
      "created_at": "02/12/2020-18:29:34",
      "motor_1": 0,
      "motor_2": 0,
      "speed": 0,
      "version": 49
    }
  ]
}

Control del vehiculo

Ruta: /api/vehicle/control/<int:code>

Metodo: POST

Argumentos:

  • codigo*

Aclaraciones: El codigo representa la acción a realizar sobre el vehiculo, a continuación se ve el listado:

  • 0 es STOP.
  • 1 es ARRIBA.
  • 2 es ABAJO.
  • 3 es DERECHA.
  • 4 es IZQUIERDA.

Codigos de error:

  • 400 Bad Request

Ejemplo exitoso:

Cuerpo de la respuesta

{ "data": "success stop" }

Se incorporo en la página principal del servidor esta misma definición de API, para que cualquier persona que quiera utilizarla pueda saber como.

Hilo que almacena el estado del vehículo en la base de datos

Se agrego que la aplicación Flask, cree un hilo para almacenar el estado del vehículo cada un segundo en la base de datos y cada vez que se abre la aplicación se incrementa en uno la versión.

Problemas que surgieron del lado del servidor:

  • El hilo que guardaba el estado del vehículo se ejecutaba dos veces, haciendo que se guarde en un mismo instante de tiempo el registro dos veces. Como solución se encontró ejecutar la aplicación en modo producción, ya que en modo desarrollo ejecuta un hilo adicional que es una replica del hilo principal.

Cliente

Por el lado del cliente, se pudo lograr que se actualicen los valores cada un segundo y se agrego la tabla con los últimos 15 valores del estado del vehículo (esta se obtiene consultado la API).

Se puede ver a continuación como se ve el cliente:

captura

Problemas que surgieron del lado del cliente:

  • Al querer acceder a la API desde el cliente surgió un error de CORS que nos bloqueaba el acceso a la API. Citando wikipedia "CORS (Intercambio de recursos de origen cruzado) es un mecanismo que permite que se puedan solicitar recursos restringidos en una página web desde un dominio diferente del dominio que sirvió el primer recurso" por lo tanto como solución instalamos en el servidor el modulo Flask-Cors el cual configura la aplicación para poder ser accedida .

Enlaces a los archivos fuentes:

Los archivos fuentes del cliente se pueden encontrar aquí.

Los archivos fuentes del servidor se pueden encontrar aquí.

Los archivos fuentes de la simulación se pueden encontrar aquí.

2/12/2020

Funcionalidad exportar Excel

Se agrego la nueva funcionalidad a la API, la cual permite exportar el historial completo de los recorridos realizados por el vehículo. El usuario deberá agregar el nombre del archivo antes de realizar la descarga.

En la siguiente captura se observa la ventana 'Guardar como', la cual se visualiza luego de apretar el boton 'Exportar a Excel'.

captura

Fecha: 5/12/2020

Correcciones de la Interfaz web

Se agregaron dos botones. El primer botón llamado “Simulación” se agregó en el servidor de dirección http://127.0.0.1:5000/ que es donde se encuentra la documentación de la API. Al presionar el botón, se redirecciona al controlador del vehículo en el cliente con dirección http://127.0.0.1:5500/cliente/index.html. El segundo botón llamado “Documentación” se agregó en el cliente y redirecciona a la documentación de la API.

documentacion

simulacion

Además, se realizó la corrección en la opción de exportar a Excel haciendo que el botón “Exportar a Excel” esté bloqueado hasta que se ingrese un nombre para el archivo. Por último, se agregaron los mensajes “El vehículo se encuentra quieto”, “El vehículo ha colisionado” y “El vehículo se encuentra en movimiento” en la sección que muestra el estado del vehículo para informar al usuario lo que va sucediendo con el vehículo mientras se utilizado.

estados

Clone this wiki locally