Borrado de html antiguo
EMOTIONS-HUNTER
6 days ago
parent
943d032056
commit
bb78bda6cf
@ -1,147 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Air Quality Monitor</title>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
/* General Styles */
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
|
|
||||||
body { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f5f5; color: #333; height: 100vh; }
|
|
||||||
|
|
||||||
h1 { font-size: 2em; color: #444; margin-bottom: 20px; }
|
|
||||||
|
|
||||||
/* Container for Sensors */
|
|
||||||
.sensor-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sensor Box */
|
|
||||||
.sensor {
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 180px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
.sensor:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
|
|
||||||
|
|
||||||
/* Sensor Titles */
|
|
||||||
.sensor-title {
|
|
||||||
font-weight: 400;
|
|
||||||
color: #555;
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sensor Value */
|
|
||||||
.sensor-value {
|
|
||||||
font-size: 2.5em;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
animation: fadeIn 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unit { font-size: 0.8em; color: #777; }
|
|
||||||
|
|
||||||
/* Icon Styles */
|
|
||||||
.sensor-icon {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
margin-right: 8px;
|
|
||||||
filter: grayscale(50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyframes for Smooth Animations */
|
|
||||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>Room Air Quality Monitor</h1>
|
|
||||||
<div class="sensor-container">
|
|
||||||
<div id="temperature" class="sensor">
|
|
||||||
<div class="sensor-title">
|
|
||||||
<img src="./images/thermometer-outline.svg" class="sensor-icon" alt="Temperature Icon">
|
|
||||||
Temperature
|
|
||||||
</div>
|
|
||||||
<div class="sensor-value" id="temp-value">--</div>
|
|
||||||
<div class="unit">℃</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="humidity" class="sensor">
|
|
||||||
<div class="sensor-title">
|
|
||||||
<img src="./images/water-outline.svg" class="sensor-icon" alt="Humidity Icon">
|
|
||||||
Humidity
|
|
||||||
</div>
|
|
||||||
<div class="sensor-value" id="humidity-value">--</div>
|
|
||||||
<div class="unit">%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="co2" class="sensor">
|
|
||||||
<div class="sensor-title">
|
|
||||||
<img src="./images/cloud-outline.svg" class="sensor-icon" alt="CO2 Icon">
|
|
||||||
CO₂
|
|
||||||
</div>
|
|
||||||
<div class="sensor-value" id="co2-value">--</div>
|
|
||||||
<div class="unit">ppm</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="pressure" class="sensor">
|
|
||||||
<div class="sensor-title">
|
|
||||||
<img src="./images/sunny-outline.svg" class="sensor-icon" alt="Pressure Icon">
|
|
||||||
Pressure
|
|
||||||
</div>
|
|
||||||
<div class="sensor-value" id="pressure-value">--</div>
|
|
||||||
<div class="unit">hPa</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
async function fetchData() {
|
|
||||||
try {
|
|
||||||
const res = await Promise.all([
|
|
||||||
//fetch("./data/BH1750.json"),
|
|
||||||
//fetch("./data/BMP180.json"),
|
|
||||||
fetch("./data/HTU21D.json"),
|
|
||||||
//fetch("./data/MH_Z19.json")
|
|
||||||
]);
|
|
||||||
|
|
||||||
const data = (await Promise.all(res.map(r => r.json()))).reduce((acc, item) => ({ ...acc, ...item }), {});
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch sensor data:", error);
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUI(data) {
|
|
||||||
document.getElementById("temp-value").textContent = data.temperature ? data.temperature.toFixed(1) : "--";
|
|
||||||
document.getElementById("humidity-value").textContent = data.humidity ? data.humidity.toFixed(1) : "--";
|
|
||||||
document.getElementById("co2-value").textContent = data.co2 ? data.co2 : "--";
|
|
||||||
document.getElementById("pressure-value").textContent = data.pressure ? data.pressure.toFixed(1) : "--";
|
|
||||||
}
|
|
||||||
|
|
||||||
async function refreshData() {
|
|
||||||
const data = await fetchData();
|
|
||||||
updateUI(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(refreshData, 6000); // Refresh every 60 seconds
|
|
||||||
refreshData(); // Initial fetch
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Simple Sensor Dashboard</title>
|
|
||||||
<style>
|
|
||||||
body { font-family: Arial, sans-serif; text-align: center; }
|
|
||||||
.sensor { margin: 10px; padding: 10px; border: 1px solid #ccc; }
|
|
||||||
.sensor-title { font-weight: bold; }
|
|
||||||
.sensor-value { font-size: 2em; color: #333; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>EZO RTD Temperature Monitor</h1>
|
|
||||||
|
|
||||||
<div id="temperature" class="sensor">
|
|
||||||
<div class="sensor-title">Temperature</div>
|
|
||||||
<div class="sensor-value" id="temp-value">--</div>
|
|
||||||
<div id="last-update">--</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
async function fetchData() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('./data/EZORTD.json');
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
document.getElementById('temp-value').textContent =
|
|
||||||
data.temperature.toFixed(3) + ' ℃';
|
|
||||||
document.getElementById('last-update').textContent =
|
|
||||||
"Updated: " + new Date().toLocaleTimeString();
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching data:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(fetchData, 1000);
|
|
||||||
fetchData();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue