mirror of
https://github.com/bbilly1/aqi_monitor.git
synced 2024-08-02 16:03:33 +00:00
161 lines
6.2 KiB
JavaScript
161 lines
6.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded", startInterval);
|
|
|
|
|
|
var colorConfig =
|
|
{
|
|
// green
|
|
'Good': [
|
|
"#85a762", "#dbe4d1",
|
|
"invert(66%) sepia(11%) saturate(1318%) hue-rotate(47deg) brightness(92%) contrast(86%)",
|
|
"AQI 0 to 50",
|
|
"Good: No health concerns, enjoy activities."
|
|
],
|
|
// yellow
|
|
'Moderate': [
|
|
"#d4b93c", "#f9f0c7",
|
|
"invert(79%) sepia(5%) saturate(4660%) hue-rotate(9deg) brightness(89%) contrast(103%)",
|
|
"AQI 51 - 100:",
|
|
"Moderate: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion."
|
|
],
|
|
// orange
|
|
'Unhealthy for Sensitive Groups': [
|
|
"#e96843", "#f8d0c8",
|
|
"invert(61%) sepia(93%) saturate(3252%) hue-rotate(333deg) brightness(95%) contrast(91%)",
|
|
"AQI 101 - 150:",
|
|
"Unhealthy for Sensitive Groups: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion."
|
|
],
|
|
// red
|
|
'Unhealthy': [
|
|
"#d03f3b", "#f1c5c4",
|
|
"invert(39%) sepia(16%) saturate(2264%) hue-rotate(314deg) brightness(97%) contrast(110%)",
|
|
"AQI 151 - 200:",
|
|
"Unhealthy: Everyone may begin to experience health effects: Active children and adults, and people with respiratory disease, such as asthma, should avoid prolonged outdoor exertion; everyone else, especially children, should limit prolonged outdoor exertion."
|
|
],
|
|
// pink
|
|
'Very Unhealthy': [
|
|
"#be4173", "#e9c9d6",
|
|
"invert(45%) sepia(32%) saturate(3238%) hue-rotate(308deg) brightness(77%) contrast(90%)",
|
|
"AQI 201 - 300:",
|
|
"Very Unhealthy: Active children and adults, and people with respiratory disease, such as asthma, should avoid all outdoor exertion; everyone else, especially children, should limit outdoor exertion."
|
|
],
|
|
// violet
|
|
'Hazardous': [
|
|
"#714261", "#d7c6d0",
|
|
"invert(31%) sepia(8%) saturate(2659%) hue-rotate(268deg) brightness(91%) contrast(88%)",
|
|
"AQI 301 - 500:",
|
|
"Hazardous: Everyone should avoid all outdoor exertion."
|
|
]
|
|
}
|
|
|
|
|
|
function startInterval() {
|
|
refreshAqiValues();
|
|
setInterval("refreshAqiValues();",60000);
|
|
}
|
|
|
|
|
|
// wrap for interval
|
|
function refreshAqiValues() {
|
|
var req = new XMLHttpRequest();
|
|
req.responseType = 'json';
|
|
req.open('GET', 'https://data.lpb-air.com', true);
|
|
req.setRequestHeader('cache-control', 'no-cache');
|
|
req.onload = function() {
|
|
var responseAqi = req.response;
|
|
var timestamp = responseAqi['timestamp'];
|
|
var aqiValue = responseAqi['aqi_value'];
|
|
var aqiCategory = responseAqi['aqi_category'];
|
|
setAqiValues(timestamp,aqiValue,aqiCategory);
|
|
setAqiColors(aqiCategory);
|
|
setWeatherDetails(responseAqi);
|
|
setDesc(responseAqi);
|
|
};
|
|
req.send();
|
|
}
|
|
|
|
function setAqiValues(timestamp,aqiValue,aqiCategory) {
|
|
|
|
document.getElementById('aqiValue').innerHTML = aqiValue;
|
|
document.getElementById('aqiCategory').innerHTML = aqiCategory;
|
|
document.getElementById('timestamp').innerHTML = timestamp;
|
|
|
|
}
|
|
|
|
function setAqiColors(aqiCategory) {
|
|
// parse config
|
|
var colMain = colorConfig[aqiCategory][0];
|
|
var colSecond = colorConfig[aqiCategory][1];
|
|
var colFilter = colorConfig[aqiCategory][2];
|
|
// apply topbox col
|
|
document.getElementById('colorbox').style.backgroundColor = colMain;
|
|
// apply border col
|
|
var colBorder = document.getElementsByClassName('col_border');
|
|
for (var i = 0; i < colBorder.length; i++) {
|
|
colBorder[i].style.borderColor = colMain;
|
|
};
|
|
// apply light background change
|
|
var lightBg = document.getElementsByClassName('light_background');
|
|
for (var i = 0; i < lightBg.length; i++) {
|
|
lightBg[i].style.backgroundColor = colSecond;
|
|
};
|
|
// apply color filter
|
|
var colFilterElements = document.getElementsByClassName('col_filter');
|
|
for (var i = 0; i < colFilterElements.length; i++) {
|
|
colFilterElements[i].style.filter = colFilter;
|
|
};
|
|
// apply font color
|
|
var colFontElements = document.getElementsByClassName('col_font');
|
|
for (var i = 0; i < colFontElements.length; i++) {
|
|
colFontElements[i].style.color = colMain;
|
|
};
|
|
}
|
|
|
|
function setWeatherDetails(responseAqi) {
|
|
// parse response
|
|
var weatherIcon = responseAqi['weather_icon'];
|
|
var weatherName = responseAqi['weather_name'];
|
|
var temperature = Math.round(responseAqi['temperature'] * 10) / 10
|
|
var windSpeed = responseAqi['wind_speed'];
|
|
var humidity = Math.round(responseAqi['humidity']);
|
|
var pressure = Math.round(responseAqi['pressure']);
|
|
// weather icon
|
|
weatherIconSrc = '/img/icon/' + weatherIcon + '.png';
|
|
document.getElementById('weather_icon').src = weatherIconSrc;
|
|
// weather name
|
|
document.getElementById('weather_name').innerHTML = weatherName;
|
|
// temperature
|
|
document.getElementById('temperature').innerHTML = temperature;
|
|
// wind speed
|
|
document.getElementById('wind_speed').innerHTML = windSpeed;
|
|
// humidity
|
|
document.getElementById('humidity').innerHTML = humidity;
|
|
// pressure
|
|
document.getElementById('pressure').innerHTML = pressure;
|
|
}
|
|
|
|
function setDesc(responseAqi) {
|
|
// parse response
|
|
var aqiCategory = responseAqi['aqi_category'];
|
|
var aqiCatClean = aqiCategory.toLowerCase().replaceAll(' ', '');
|
|
var iconSrc = '/img/icon/category-' + aqiCatClean + ".png";
|
|
// parse config
|
|
var aqiRange = colorConfig[aqiCategory][3];
|
|
var aqiDesc = colorConfig[aqiCategory][4];
|
|
// set values
|
|
document.getElementById('categoryIcon').src = iconSrc;
|
|
document.getElementById('aqiName').innerHTML = aqiCategory;
|
|
document.getElementById('aqiRange').innerHTML = aqiRange;
|
|
document.getElementById('aqiDesc').innerHTML = aqiDesc;
|
|
// remove active if any
|
|
var active = document.querySelector(".active");
|
|
if (active) {
|
|
active.classList.remove("active");
|
|
};
|
|
// figure out which to activate
|
|
var allCategories = Object.keys(colorConfig);
|
|
var indexMatch = allCategories.indexOf(aqiCategory);
|
|
var activeCat = document.getElementsByClassName('desc_item')[indexMatch];
|
|
// activate
|
|
activeCat.classList.add("active");
|
|
}
|