Updated
This commit is contained in:
Hickmeister
@@ -93,6 +93,7 @@ void setup() {
|
||||
|
||||
// Sync time using NTP
|
||||
syncTime();
|
||||
delay(1000);
|
||||
|
||||
// Initialize AHTX0 sensor
|
||||
if (!aht.begin()) {
|
||||
@@ -150,11 +151,11 @@ void setup() {
|
||||
color: #000000;
|
||||
}
|
||||
.card.poor {
|
||||
background-color: #ff5722;
|
||||
background-color:rgb(255, 60, 34);
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.unhealthy {
|
||||
background-color: #f44336;
|
||||
background-color:rgb(244, 54, 244);
|
||||
color: #ffffff;
|
||||
}
|
||||
.apexcharts-tooltip {
|
||||
@@ -225,7 +226,7 @@ void setup() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
<script>
|
||||
let chartOptions = {
|
||||
chart: {
|
||||
type: 'line',
|
||||
@@ -241,39 +242,64 @@ void setup() {
|
||||
],
|
||||
xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
|
||||
yaxis: { labels: { style: { colors: '#ffffff' } } },
|
||||
tooltip: { theme: 'dark' },
|
||||
tooltip: { theme: 'dark' }
|
||||
};
|
||||
|
||||
let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
|
||||
chart.render();
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch('/data');
|
||||
if (!response.ok) {
|
||||
console.error(`Failed to fetch data: ${response.statusText}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
console.log(data.latest.humidity);
|
||||
|
||||
// Update cards
|
||||
updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
|
||||
updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
|
||||
updateCard("tvocCard", data.latest.tvoc, getTVOCRecommendation(data.latest.tvoc));
|
||||
updateCard("temperatureCard", data.latest.temperature, getTemperatureClass(data.latest.temperature));
|
||||
updateCard("humidityCard", data.latest.humidity, getHumidityClass(data.latest.humidity));
|
||||
|
||||
// Update chart
|
||||
chart.updateSeries([
|
||||
{ name: 'TVOC (ppb)', data: data.history.tvoc },
|
||||
{ name: 'eCO2 (ppm)', data: data.history.eco2 },
|
||||
{ name: 'Temperature (°C)', data: data.history.temperature },
|
||||
{ name: 'Humidity (%)', data: data.history.humidity }
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCard(cardId, value, recommendation) {
|
||||
const card = document.getElementById(cardId);
|
||||
if (!card) {
|
||||
console.error(`Card with ID ${cardId} not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const valueText = card.querySelector(".card-body h4");
|
||||
const recText = card.querySelector(".card-body p");
|
||||
card.className = `card text-center ${recommendation.class}`;
|
||||
|
||||
if (valueText) {
|
||||
valueText.textContent = value.toFixed(1);
|
||||
recText.textContent = recommendation.text;
|
||||
} else {
|
||||
console.error(`Value text element not found in ${cardId}`);
|
||||
}
|
||||
|
||||
if (recText && recommendation) {
|
||||
recText.textContent = recommendation.text || "";
|
||||
card.className = `card text-center ${recommendation.class || ""}`;
|
||||
} else if (recText) {
|
||||
recText.textContent = "";
|
||||
card.className = "card text-center";
|
||||
}
|
||||
}
|
||||
|
||||
function getAQIRecommendation(aqi) {
|
||||
@@ -300,19 +326,21 @@ void setup() {
|
||||
}
|
||||
|
||||
function getTemperatureClass(temp) {
|
||||
if (temp < 18) return { class: "moderate", text: "Too cold, consider heating." };
|
||||
if (temp > 26) return { class: "poor", text: "Too hot, ventilate or cool down." };
|
||||
return { class: "good", text: "Comfortable temperature." };
|
||||
if (temp < 18) return { class: "moderate"};
|
||||
if (temp > 26) return { class: "poor"};
|
||||
return { class: "good"};
|
||||
}
|
||||
|
||||
function getHumidityClass(hum) {
|
||||
if (hum < 30) return { class: "moderate", text: "Too dry, consider humidifying." };
|
||||
if (hum > 60) return { class: "poor", text: "Too humid, consider dehumidifying." };
|
||||
return { class: "good", text: "Comfortable humidity." };
|
||||
if (hum < 30) return { class: "moderate"};
|
||||
if (hum > 60) return { class: "poor"};
|
||||
return { class: "good"};
|
||||
}
|
||||
|
||||
// Fetch data every second
|
||||
setInterval(fetchData, 1000);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
)rawliteral";
|
||||
|
||||
@@ -93,6 +93,7 @@ void setup() {
|
||||
|
||||
// Sync time using NTP
|
||||
syncTime();
|
||||
delay(1000);
|
||||
|
||||
// Initialize AHTX0 sensor
|
||||
if (!aht.begin()) {
|
||||
@@ -150,11 +151,11 @@ void setup() {
|
||||
color: #000000;
|
||||
}
|
||||
.card.poor {
|
||||
background-color: #ff5722;
|
||||
background-color:rgb(255, 60, 34);
|
||||
color: #ffffff;
|
||||
}
|
||||
.card.unhealthy {
|
||||
background-color: #f44336;
|
||||
background-color:rgb(244, 54, 244);
|
||||
color: #ffffff;
|
||||
}
|
||||
.apexcharts-tooltip {
|
||||
@@ -225,7 +226,7 @@ void setup() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
<script>
|
||||
let chartOptions = {
|
||||
chart: {
|
||||
type: 'line',
|
||||
@@ -241,39 +242,64 @@ void setup() {
|
||||
],
|
||||
xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
|
||||
yaxis: { labels: { style: { colors: '#ffffff' } } },
|
||||
tooltip: { theme: 'dark' },
|
||||
tooltip: { theme: 'dark' }
|
||||
};
|
||||
|
||||
let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
|
||||
chart.render();
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch('/data');
|
||||
if (!response.ok) {
|
||||
console.error(`Failed to fetch data: ${response.statusText}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
console.log(data.latest.humidity);
|
||||
|
||||
// Update cards
|
||||
updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
|
||||
updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
|
||||
updateCard("tvocCard", data.latest.tvoc, getTVOCRecommendation(data.latest.tvoc));
|
||||
updateCard("temperatureCard", data.latest.temperature, getTemperatureClass(data.latest.temperature));
|
||||
updateCard("humidityCard", data.latest.humidity, getHumidityClass(data.latest.humidity));
|
||||
|
||||
// Update chart
|
||||
chart.updateSeries([
|
||||
{ name: 'TVOC (ppb)', data: data.history.tvoc },
|
||||
{ name: 'eCO2 (ppm)', data: data.history.eco2 },
|
||||
{ name: 'Temperature (°C)', data: data.history.temperature },
|
||||
{ name: 'Humidity (%)', data: data.history.humidity }
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCard(cardId, value, recommendation) {
|
||||
const card = document.getElementById(cardId);
|
||||
if (!card) {
|
||||
console.error(`Card with ID ${cardId} not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const valueText = card.querySelector(".card-body h4");
|
||||
const recText = card.querySelector(".card-body p");
|
||||
card.className = `card text-center ${recommendation.class}`;
|
||||
|
||||
if (valueText) {
|
||||
valueText.textContent = value.toFixed(1);
|
||||
recText.textContent = recommendation.text;
|
||||
} else {
|
||||
console.error(`Value text element not found in ${cardId}`);
|
||||
}
|
||||
|
||||
if (recText && recommendation) {
|
||||
recText.textContent = recommendation.text || "";
|
||||
card.className = `card text-center ${recommendation.class || ""}`;
|
||||
} else if (recText) {
|
||||
recText.textContent = "";
|
||||
card.className = "card text-center";
|
||||
}
|
||||
}
|
||||
|
||||
function getAQIRecommendation(aqi) {
|
||||
@@ -300,19 +326,21 @@ void setup() {
|
||||
}
|
||||
|
||||
function getTemperatureClass(temp) {
|
||||
if (temp < 18) return { class: "moderate", text: "Too cold, consider heating." };
|
||||
if (temp > 26) return { class: "poor", text: "Too hot, ventilate or cool down." };
|
||||
return { class: "good", text: "Comfortable temperature." };
|
||||
if (temp < 18) return { class: "moderate"};
|
||||
if (temp > 26) return { class: "poor"};
|
||||
return { class: "good"};
|
||||
}
|
||||
|
||||
function getHumidityClass(hum) {
|
||||
if (hum < 30) return { class: "moderate", text: "Too dry, consider humidifying." };
|
||||
if (hum > 60) return { class: "poor", text: "Too humid, consider dehumidifying." };
|
||||
return { class: "good", text: "Comfortable humidity." };
|
||||
if (hum < 30) return { class: "moderate"};
|
||||
if (hum > 60) return { class: "poor"};
|
||||
return { class: "good"};
|
||||
}
|
||||
|
||||
// Fetch data every second
|
||||
setInterval(fetchData, 1000);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
)rawliteral";
|
||||
|
||||
Reference in New Issue
Block a user