CODIGO PARA VISUALIZAR TEMPERATURA
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Monitor de Temperaturas</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f0f2f5;
}
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.sensor-card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.temperature {
font-size: 48px;
font-weight: bold;
margin: 10px 0;
color: #2196F3;
}
.location {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.status {
display: inline-block;
padding: 5px 10px;
border-radius: 15px;
font-size: 14px;
}
.connected {
background: #e8f5e9;
color: #2e7d32;
}
.disconnected {
background: #ffebee;
color: #c62828;
}
.timestamp {
font-size: 12px;
color: #666;
margin-top: 10px;
}
.average {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#log {
background: white;
padding: 10px;
border-radius: 10px;
margin-top: 20px;
height: 200px;
overflow-y: auto;
font-family: monospace;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.log-entry {
margin: 5px 0;
padding: 5px;
border-bottom: 1px solid #eee;
}
#connectButton {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#connectButton:hover {
background-color: #1976D2;
}
</style>
</head>
<body>
<h1>Monitor de Temperaturas en Tiempo Real</h1>
<button id="connectButton">Conectar Puerto Serial</button>
<div class="dashboard">
<div class="sensor-card">
<div class="location">Canchas</div>
<div class="temperature" id="temp-canchas">--</div>
<div class="status" id="status-canchas">Esperando datos...</div>
<div class="timestamp" id="time-canchas"></div>
</div>
<div class="sensor-card">
<div class="location">Baños</div>
<div class="temperature" id="temp-banos">--</div>
<div class="status" id="status-banos">Esperando datos...</div>
<div class="timestamp" id="time-banos"></div>
</div>
<div class="sensor-card">
<div class="location">Cafetería</div>
<div class="temperature" id="temp-cafeteria">--</div>
<div class="status" id="status-cafeteria">Esperando datos...</div>
<div class="timestamp" id="time-cafeteria"></div>
</div>
</div>
<div class="average">
<h2>Temperatura Promedio</h2>
<div class="temperature" id="temp-promedio">--</div>
</div>
<div id="log">
<div class="log-entry">Iniciando monitor de temperaturas...</div>
</div>
<script>
let port;
let reader;
let inputBuffer = "";
// Configuración inicial
let lastUpdate = {
canchas: null,
banos: null,
cafeteria: null
};
async function connectSerial() {
try {
// Solicitar puerto serial
port = await navigator.serial.requestPort();
await port.open({ baudRate: 115200 });
addLogEntry("Conectado al puerto serial");
document.getElementById('connectButton').textContent = 'Conectado';
document.getElementById('connectButton').disabled = true;
// Configurar lectura
reader = port.readable.getReader();
readSerialData();
} catch (error) {
addLogEntry(`Error al conectar: ${error}`);
console.error(error);
}
}
async function readSerialData() {
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
reader.releaseLock();
break;
}
// Convertir el buffer a texto
const text = new TextDecoder().decode(value);
processIncomingData(text);
}
} catch (error) {
addLogEntry(`Error de lectura: ${error}`);
console.error(error);
}
}
function processIncomingData(text) {
// Agregar el nuevo texto al buffer
inputBuffer += text;
// Buscar líneas completas
let newlineIndex;
while ((newlineIndex = inputBuffer.indexOf('\n')) !== -1) {
// Extraer la línea completa
const line = inputBuffer.slice(0, newlineIndex).trim();
// Remover la línea procesada del buffer
inputBuffer = inputBuffer.slice(newlineIndex + 1);
if (line) {
processSerialData(line);
}
}
}
function updateSensor(location, value) {
const temp = document.getElementById(`temp-${location}`);
const status = document.getElementById(`status-${location}`);
const timestamp = document.getElementById(`time-${location}`);
if (value === 'XX') {
temp.textContent = '--';
status.textContent = 'Desconectado';
status.className = 'status disconnected';
} else {
temp.textContent = `${value}°C`;
status.textContent = 'Conectado';
status.className = 'status connected';
lastUpdate[location] = new Date();
timestamp.textContent = `Última actualización: ${moment(lastUpdate[location]).format('HH:mm:ss')}`;
}
}
function updateAverage(values) {
const connectedValues = values.filter(v => v !== 'XX').map(Number);
const avg = connectedValues.length ?
(connectedValues.reduce((a, b) => a + b, 0) / connectedValues.length).toFixed(1) : '--';
document.getElementById('temp-promedio').textContent = avg === '--' ? avg : `${avg}°C`;
}
function addLogEntry(text) {
const log = document.getElementById('log');
const entry = document.createElement('div');
entry.className = 'log-entry';
entry.textContent = `[${moment().format('HH:mm:ss')}] ${text}`;
log.appendChild(entry);
log.scrollTop = log.scrollHeight;
while (log.children.length > 100) {
log.removeChild(log.firstChild);
}
}
function processSerialData(data) {
// Formato esperado: "C:26,B:30,F:26"
const parts = data.split(',');
const values = [];
parts.forEach(part => {
const [location, value] = part.split(':');
values.push(value);
switch(location) {
case 'C':
updateSensor('canchas', value);
break;
case 'B':
updateSensor('banos', value);
break;
case 'F':
updateSensor('cafeteria', value);
break;
}
});
if (values.length === 3) {
updateAverage(values);
addLogEntry(`Datos recibidos - C:${values[0]}, B:${values[1]}, F:${values[2]}`);
}
}
// Agregar evento al botón de conexión
document.getElementById('connectButton').addEventListener('click', connectSerial);
// Verificar si el navegador soporta Web Serial API
if (!navigator.serial) {
addLogEntry("Tu navegador no soporta Web Serial API. Por favor usa Chrome o Edge.");
document.getElementById('connectButton').disabled = true;
}
</script>
</body>
</html>
Comentarios
Publicar un comentario