SensorDataViewer

Visualizador en tiempo real de datos IMU enviados desde un dispositivo M5StackFire.

El proyecto levanta un servidor Node.js con Express + Socket.IO para:

• Recibir muestras de aceleración y posición por HTTP (POST /datos_IMU)
• Emitir los datos en tiempo real a clientes web conectados
• Mostrar gráficos en vivo con Chart.js
• Guardar un log CSV con las muestras recibidas

Características

• Streaming en tiempo real con Socket.IO
• Gráficas de aceleración en eje X/Y
• Visualización de posición en plano cartesiano (bola roja/azul)
• Conteo de espectadores y sensores conectados
• Persistencia simple en:
  • public/logs/logfile.csv (muestras)
  • public/data/clients.json (clientes conectados)
  • public/data/sensors.json (sensores detectados)

Requisitos

• Node.js 18+ (recomendado)
• npm
• (Opcional) Dispositivo M5StackFire con script MicroPython (finalM5.py)

Instalación

npm install

Ejecución

Actualmente no hay scripts en package.json, así que se ejecuta directamente:

node server.js

Servidor por defecto:

• http://localhost:8080

Rutas principales:

• / -> página de bienvenida (index.html)
• /public/client.html -> dashboard en tiempo real
• POST /datos_IMU -> endpoint para recibir muestras del sensor

Flujo de datos

1. El sensor envía una muestra JSON a POST /datos_IMU.
2. El servidor normaliza la muestra (modules/logger.js).
3. Se registra la muestra en CSV (public/logs/logfile.csv).
4. Se notifica por Socket.IO a los clientes web (datosIMU).
5. El cliente actualiza gráficos y métricas en pantalla.

Formato esperado en POST /datos_IMU

Ejemplo de body JSON (el servidor espera al menos mac):

{
  "mac": "11:22:33:44:55:66",
  "id": 15782,
  "aceleracion": {
    "x": 0.12,
    "y": -0.06
  },
  "posicion": {
    "px": 163,
    "py": 118
  },
  "limites": {
    "limiteX": false,
    "limiteY": false
  }
}

Respuesta exitosa:

• 200 OK -> Datos recibidos correctamente

Validación:

• Si no se envía mac, responde 400.

Eventos Socket.IO usados

Emitidos por servidor:

• datosIMU: muestra IMU procesada
• cant_clientes: número de espectadores conectados
• cant_sensores: número de sensores detectados
• valoresIniciales: últimas muestras X/Y para inicializar gráficas

Escuchados por cliente:

• connect
• disconnect
• datosIMU
• cant_clientes
• cant_sensores
• valoresIniciales

Estructura del proyecto

SensorDataViewer/
  server.js
  finalM5.py
  modules/
    logger.js
  public/
    client.html
    css/client.css
    js/client.js
    js/grafico.js
    data/clients.json
    data/sensors.json
    logs/logfile.csv (se crea al iniciar)
  index.html
  index.css
  package.json

Notas importantes

• Al iniciar el servidor se reinician:
  • public/data/clients.json
  • public/data/sensors.json
  • public/logs/logfile.csv (se recrea con cabecera)
• finalM5.py usa por defecto:
  • SERVER_URL = "http://127.0.0.1:8080/datos_IMU"
  • Si el sensor no está en la misma máquina, cambia esa URL por la IP del servidor.

Prueba rápida sin hardware

Puedes enviar muestras manualmente con curl o Postman.

Ejemplo con curl:

curl -X POST http://localhost:8080/datos_IMU \
  -H "Content-Type: application/json" \
  -d "{\"mac\":\"11:22:33:44:55:66\",\"id\":1,\"aceleracion\":{\"x\":0.2,\"y\":-0.1},\"posicion\":{\"px\":160,\"py\":120},\"limites\":{\"limiteX\":false,\"limiteY\":false}}"

Luego abre:

• http://localhost:8080/public/client.html

Tecnologías

• Express
• Socket.IO
• Chart.js
• Node.js (fs, path, http)

Autor

• Ricardo Román Martínez
• Daniel Martín Ferres