├── css └── styles.css ├── js └── main.js └── index.html /css/styles.css: -------------------------------------------------------------------------------- 1 | .btn-purple { 2 | background-color: #c32aa3; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | const apiUrl = "http://3.209.180.253:5000"; // Cambia a tu IP pública si es necesario 2 | let clientIp = "0.0.0.0"; // Valor predeterminado en caso de error 3 | 4 | const statusMap = { 5 | 1: "Adelante", 6 | 2: "Atrás", 7 | 3: "Detener", 8 | 4: "Vuelta adelante derecha", 9 | 5: "Vuelta adelante izquierda", 10 | 6: "Vuelta atrás derecha", 11 | 7: "Vuelta atrás izquierda", 12 | 8: "Giro 90° derecha", 13 | 9: "Giro 90° izquierda", 14 | 10: "Giro 360° derecha", 15 | 11: "Giro 360° izquierda" 16 | }; 17 | 18 | async function getClientIp() { 19 | try { 20 | const res = await fetch("https://api.ipify.org?format=json"); 21 | const data = await res.json(); 22 | clientIp = data.ip; 23 | } catch (error) { 24 | console.warn("No se pudo obtener la IP pública. Se usará 0.0.0.0"); 25 | } 26 | } 27 | 28 | async function fetchLastStatus() { 29 | try { 30 | const res = await fetch(`${apiUrl}/devices/last-status`); 31 | const data = await res.json(); 32 | document.getElementById("movement").textContent = data[0]?.status_texto || "Sin datos"; 33 | } catch (err) { 34 | document.getElementById("movement").textContent = "Error de conexión"; 35 | } 36 | } 37 | 38 | async function sendCommand(status_clave) { 39 | const payload = { 40 | name: "Dispostivo IoT de Rbaume", 41 | ip: clientIp, 42 | status_clave: status_clave, 43 | status_texto: statusMap[status_clave] 44 | }; 45 | 46 | try { 47 | await fetch(`${apiUrl}/devices`, { 48 | method: "POST", 49 | headers: { 50 | "Content-Type": "application/json" 51 | }, 52 | body: JSON.stringify(payload) 53 | }); 54 | } catch (err) { 55 | alert("Error al enviar el comando"); 56 | } 57 | } 58 | 59 | // Inicializar IP y comenzar actualización cada 2 segundos 60 | getClientIp().then(() => { 61 | fetchLastStatus(); 62 | setInterval(fetchLastStatus, 2000); 63 | }); 64 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Control de Vehículo IoT 7 | 8 | 9 | 10 | 11 |
12 |

Control de vehículo IoT

13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 |

Movimiento

57 |

Cargando...

58 | 59 | 62 |
63 | 64 | 65 | 66 | 67 | --------------------------------------------------------------------------------