Skip to content

Commit 0d5c780

Browse files
paupau77paupau77
authored
Updated code
1 parent 1bed77d commit 0d5c780

1 file changed

Lines changed: 129 additions & 143 deletions

File tree

‎Monitor/index.html‎

Lines changed: 129 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -374,167 +374,153 @@ <h4 class="text-sm font-bold text-slate-800 mb-2">Repositorios Oficiales</h4>
374374
</footer>
375375

376376
<!-- Lógica de la Aplicación -->
377-
<script>
378-
// --- Configuración Inicial ---
379-
lucide.createIcons();
380-
let currentMode = 'salinity'; // 'salinity' or 'potassium'
381-
let chartInstance = null;
382-
383-
// --- Navegación (Tabs) ---
384-
function switchTab(tabId) {
385-
// Ocultar todos los contenidos
386-
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
387-
// Mostrar el seleccionado
388-
document.getElementById(`tab-${tabId}`).classList.remove('hidden');
389-
390-
// Actualizar botones del menú desktop
391-
document.querySelectorAll('.nav-btn').forEach(btn => {
392-
btn.classList.remove('bg-emerald-50', 'text-emerald-700');
393-
btn.classList.add('text-slate-600');
394-
});
395-
const activeBtn = document.getElementById(`btn-${tabId}`);
396-
if(activeBtn) {
397-
activeBtn.classList.add('bg-emerald-50', 'text-emerald-700');
398-
activeBtn.classList.remove('text-slate-600');
399-
}
377+
<script>
378+
// --- Configuración Inicial ---
379+
lucide.createIcons();
380+
let currentMode = 'salinity'; // 'salinity' or 'potassium'
381+
let chartInstance = null;
400382

401-
// Cerrar menú móvil si está abierto
402-
document.getElementById('mobile-menu').classList.add('hidden');
403-
}
383+
// --- Navegación (Tabs) ---
384+
function switchTab(tabId) {
385+
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
386+
document.getElementById(`tab-${tabId}`).classList.remove('hidden');
404387

405-
function toggleMobileMenu() {
406-
const menu = document.getElementById('mobile-menu');
407-
menu.classList.toggle('hidden');
388+
document.querySelectorAll('.nav-btn').forEach(btn => {
389+
btn.classList.remove('bg-emerald-50', 'text-emerald-700');
390+
btn.classList.add('text-slate-600');
391+
});
392+
const activeBtn = document.getElementById(`btn-${tabId}`);
393+
if(activeBtn) {
394+
activeBtn.classList.add('bg-emerald-50', 'text-emerald-700');
395+
activeBtn.classList.remove('text-slate-600');
408396
}
409397

410-
// --- Lógica del Dashboard (Modos) ---
411-
function setMode(mode) {
412-
currentMode = mode;
413-
const isK = mode === 'potassium';
414-
415-
// Actualizar UI de botones
416-
const btnSal = document.getElementById('btn-mode-salinity');
417-
const btnPot = document.getElementById('btn-mode-potassium');
418-
const title = document.getElementById('mode-title');
419-
420-
if (isK) {
421-
btnSal.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 text-slate-500 hover:text-slate-700";
422-
btnPot.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 bg-white shadow-sm text-amber-600 flex items-center gap-2";
423-
title.innerText = "Potasio (K+)";
424-
title.className = "text-amber-500 transition-colors duration-500";
425-
document.getElementById('lcd-label').innerText = "K+ ION:";
426-
document.getElementById('lcd-status').innerText = ">> MIDIENDO K+ <<";
427-
document.getElementById('chart-title-text').innerText = "Potasio";
428-
document.getElementById('analysis-text').innerText = "Monitoreo de electrolitos activo (Rama Experimental Agosto 2025). Los valores de Potasio se encuentran dentro del rango esperado.";
429-
} else {
430-
btnSal.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 bg-white shadow-sm text-emerald-700";
431-
btnPot.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 text-slate-500 hover:text-slate-700 flex items-center gap-2";
432-
title.innerText = "Salinidad";
433-
title.className = "text-emerald-600 transition-colors duration-500";
434-
document.getElementById('lcd-label').innerText = "SALINIDAD:";
435-
document.getElementById('lcd-status').innerText = ">> SISTEMA OK <<";
436-
document.getElementById('chart-title-text').innerText = "Conductividad";
437-
document.getElementById('analysis-text').innerText = "La conductividad eléctrica muestra estabilidad. Compensación de temperatura activa a 25°C.";
438-
}
398+
document.getElementById('mobile-menu').classList.add('hidden');
399+
}
400+
401+
function toggleMobileMenu() {
402+
document.getElementById('mobile-menu').classList.toggle('hidden');
403+
}
404+
405+
// --- Lógica del Dashboard (Modos) ---
406+
function setMode(mode) {
407+
currentMode = mode;
408+
const isK = mode === 'potassium';
439409

440-
// Reiniciar gráfico con nuevo color y datos
441-
initChart(isK);
410+
const btnSal = document.getElementById('btn-mode-salinity');
411+
const btnPot = document.getElementById('btn-mode-potassium');
412+
const title = document.getElementById('mode-title');
413+
414+
if (isK) {
415+
btnSal.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 text-slate-500 hover:text-slate-700";
416+
btnPot.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 bg-white shadow-sm text-amber-600 flex items-center gap-2";
417+
title.innerText = "Potasio (K+)";
418+
title.className = "text-amber-500 transition-colors duration-500";
419+
document.getElementById('lcd-label').innerText = "K+ ION:";
420+
document.getElementById('lcd-status').innerText = ">> MIDIENDO K+ <<";
421+
document.getElementById('chart-title-text').innerText = "Potasio";
422+
document.getElementById('analysis-text').innerText =
423+
"Monitoreo de electrolitos activo (Rama Experimental Agosto 2025). Los valores de Potasio se encuentran dentro del rango esperado.";
424+
} else {
425+
btnSal.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 bg-white shadow-sm text-emerald-700";
426+
btnPot.className = "px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 text-slate-500 hover:text-slate-700 flex items-center gap-2";
427+
title.innerText = "Salinidad";
428+
title.className = "text-emerald-600 transition-colors duration-500";
429+
document.getElementById('lcd-label').innerText = "SALINIDAD:";
430+
document.getElementById('lcd-status').innerText = ">> SISTEMA OK <<";
431+
document.getElementById('chart-title-text').innerText = "Conductividad";
432+
document.getElementById('analysis-text').innerText =
433+
"La conductividad eléctrica muestra estabilidad. Compensación de temperatura activa a 25°C.";
442434
}
443435

444-
// --- Gráficos con Chart.js ---
445-
function initChart(isPotassium) {
446-
const ctx = document.getElementById('mainChart').getContext('2d');
447-
const color = isPotassium ? '#f59e0b' : '#10b981'; // Amber vs Emerald
448-
const gradient = ctx.createLinearGradient(0, 0, 0, 300);
449-
gradient.addColorStop(0, isPotassium ? 'rgba(245, 158, 11, 0.3)' : 'rgba(16, 185, 129, 0.3)');
450-
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
436+
initChart(isK);
437+
}
451438

452-
if (chartInstance) {
453-
chartInstance.destroy();
454-
}
439+
// --- Gráficos ---
440+
function initChart(isPotassium) {
441+
const ctx = document.getElementById('mainChart').getContext('2d');
442+
const color = isPotassium ? '#f59e0b' : '#10b981';
443+
const gradient = ctx.createLinearGradient(0, 0, 0, 300);
444+
gradient.addColorStop(0, isPotassium ? 'rgba(245, 158, 11, 0.3)' : 'rgba(16, 185, 129, 0.3)');
445+
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
446+
447+
if (chartInstance) chartInstance.destroy();
455448

456-
// Datos iniciales vacíos
457-
const initialData = Array(20).fill(null);
458-
const initialLabels = Array(20).fill('');
459-
460-
chartInstance = new Chart(ctx, {
461-
type: 'line',
462-
data: {
463-
labels: initialLabels,
464-
datasets: [{
465-
label: isPotassium ? 'Potasio (mM)' : 'Conductividad (uS)',
466-
data: initialData,
467-
borderColor: color,
468-
backgroundColor: gradient,
469-
borderWidth: 2,
470-
fill: true,
471-
tension: 0.4,
472-
pointRadius: 0
473-
}]
474-
},
475-
options: {
476-
responsive: true,
477-
maintainAspectRatio: false,
478-
animation: false,
479-
interaction: { intersect: false, mode: 'index' },
480-
plugins: { legend: { display: false } },
481-
scales: {
482-
x: { display: false },
483-
y: {
484-
display: true,
485-
grid: { color: '#f1f5f9' },
486-
suggestedMin: isPotassium ? 3 : 1000,
487-
suggestedMax: isPotassium ? 6 : 1400
488-
}
449+
chartInstance = new Chart(ctx, {
450+
type: 'line',
451+
data: {
452+
labels: Array(20).fill(''),
453+
datasets: [{
454+
label: isPotassium ? 'Potasio (mM)' : 'Conductividad (uS)',
455+
data: Array(20).fill(null),
456+
borderColor: color,
457+
backgroundColor: gradient,
458+
borderWidth: 2,
459+
fill: true,
460+
tension: 0.4,
461+
pointRadius: 0
462+
}]
463+
},
464+
options: {
465+
responsive: true,
466+
maintainAspectRatio: false,
467+
animation: false,
468+
plugins: { legend: { display: false } },
469+
scales: {
470+
x: { display: false },
471+
y: {
472+
suggestedMin: isPotassium ? 3 : 1000,
473+
suggestedMax: isPotassium ? 6 : 1400
489474
}
490475
}
491-
});
492-
}
476+
}
477+
});
478+
}
479+
480+
// --- Simulación ---
481+
setInterval(() => {
482+
const timeStr = new Date().toLocaleTimeString('es-AR', {
483+
hour12: false, minute: '2-digit', second: '2-digit'
484+
});
493485

494-
// --- Simulación de Datos en Tiempo Real ---
495-
setInterval(() => {
496-
const now = new Date();
497-
const timeStr = now.toLocaleTimeString('es-AR', { hour12: false, minute: '2-digit', second: '2-digit' });
498-
499-
// Generar valores aleatorios
500-
const ec = (1200 + Math.random() * 100 - 50).toFixed(0);
501-
const ph = (7.0 + Math.random() * 0.4 - 0.2).toFixed(2);
502-
const temp = (24 + Math.random() * 1 - 0.5).toFixed(1);
503-
const k = (4.5 + Math.random() * 0.8 - 0.4).toFixed(2);
504-
505-
// Actualizar DOM (Pantalla LCD y Sensores)
506-
const isK = currentMode === 'potassium';
507-
document.getElementById('lcd-value').innerText = isK ? `${k} mM` : `${ec} uS`;
486+
const ec = (1200 + Math.random() * 100 - 50).toFixed(0);
487+
const ph = (7.0 + Math.random() * 0.4 - 0.2).toFixed(2);
488+
const temp = (24 + Math.random() * 1 - 0.5).toFixed(1);
489+
const k = (4.5 + Math.random() * 0.8 - 0.4).toFixed(2);
490+
491+
const isK = currentMode === 'potassium';
492+
493+
// LCD principal
494+
document.getElementById('lcd-value').innerText =
495+
isK ? `${k} mM` : `${ec} uS`;
496+
497+
// 🔥 ACÁ ESTÁ EL ARREGLO
498+
if (!isK) {
508499
document.getElementById('lcd-temp').innerText = `${temp} C`;
509500
document.getElementById('lcd-ph').innerText = ph;
510501
document.getElementById('card-temp').innerText = `${temp}°`;
511502
document.getElementById('card-ph').innerText = ph;
503+
} else {
504+
document.getElementById('lcd-temp').innerText = "--";
505+
document.getElementById('lcd-ph').innerText = "--";
506+
document.getElementById('card-temp').innerText = "--";
507+
document.getElementById('card-ph').innerText = "--";
508+
}
512509

513-
// Actualizar Gráfico
514-
if (chartInstance) {
515-
const val = isK ? k : ec;
516-
517-
// Mover datos (efecto deslizante)
518-
const dataArr = chartInstance.data.datasets[0].data;
519-
const labelsArr = chartInstance.data.labels;
520-
521-
dataArr.push(val);
522-
labelsArr.push(timeStr);
523-
524-
if (dataArr.length > 20) {
525-
dataArr.shift();
526-
labelsArr.shift();
527-
}
528-
529-
chartInstance.update();
530-
}
510+
if (chartInstance) {
511+
const val = isK ? k : ec;
512+
chartInstance.data.datasets[0].data.push(val);
513+
chartInstance.data.labels.push(timeStr);
531514

532-
}, 1000);
515+
if (chartInstance.data.datasets[0].data.length > 20) {
516+
chartInstance.data.datasets[0].data.shift();
517+
chartInstance.data.labels.shift();
518+
}
519+
chartInstance.update();
520+
}
521+
}, 1000);
533522

534-
// --- Inicialización ---
535-
window.onload = function() {
536-
initChart(false);
537-
};
538-
</script>
523+
window.onload = () => initChart(false);
524+
</script>
539525
</body>
540526
</html>

0 commit comments

Comments
 (0)