2021-02-16 03:40:22 +00:00
document . addEventListener ( "DOMContentLoaded" , startInterval ) ;
var colorConfig =
{
// green
'Good' : [
"#85a762" , "#dbe4d1" ,
2021-02-19 13:21:51 +00:00
"invert(66%) sepia(11%) saturate(1318%) hue-rotate(47deg) brightness(92%) contrast(86%)" ,
"AQI 0 to 50" ,
"Good: No health concerns, enjoy activities."
] ,
2021-02-16 03:40:22 +00:00
// yellow
'Moderate' : [
"#d4b93c" , "#f9f0c7" ,
2021-02-19 13:21:51 +00:00
"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."
] ,
2021-02-16 03:40:22 +00:00
// orange
'Unhealthy for Sensitive Groups' : [
"#e96843" , "#f8d0c8" ,
2021-02-19 13:21:51 +00:00
"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."
] ,
2021-02-16 03:40:22 +00:00
// red
'Unhealthy' : [
"#d03f3b" , "#f1c5c4" ,
2021-02-19 13:21:51 +00:00
"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."
] ,
2021-02-16 03:40:22 +00:00
// pink
'Very Unhealthy' : [
"#be4173" , "#e9c9d6" ,
2021-02-19 13:21:51 +00:00
"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."
] ,
2021-02-16 03:40:22 +00:00
// violet
'Hazardous' : [
"#714261" , "#d7c6d0" ,
2021-02-19 13:21:51 +00:00
"invert(31%) sepia(8%) saturate(2659%) hue-rotate(268deg) brightness(91%) contrast(88%)" ,
"AQI 301 - 500:" ,
"Hazardous: Everyone should avoid all outdoor exertion."
]
2021-02-16 03:40:22 +00:00
}
2021-02-19 05:57:04 +00:00
2021-02-16 03:40:22 +00:00
function startInterval ( ) {
refreshAqiValues ( ) ;
setInterval ( "refreshAqiValues();" , 60000 ) ;
}
2021-02-19 05:57:04 +00:00
// wrap for interval
2021-02-16 03:40:22 +00:00
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 ) ;
2021-02-19 05:57:04 +00:00
setAqiColors ( aqiCategory ) ;
setWeatherDetails ( responseAqi ) ;
2021-02-19 13:21:51 +00:00
setDesc ( responseAqi ) ;
2021-02-16 03:40:22 +00:00
} ;
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 ] ;
2021-02-19 05:57:04 +00:00
// apply topbox col
2021-02-16 03:40:22 +00:00
document . getElementById ( 'colorbox' ) . style . backgroundColor = colMain ;
2021-02-19 05:57:04 +00:00
// apply border col
var colBorder = document . getElementsByClassName ( 'col_border' ) ;
for ( var i = 0 ; i < colBorder . length ; i ++ ) {
colBorder [ i ] . style . borderColor = colMain ;
} ;
2021-02-16 03:40:22 +00:00
// apply light background change
var lightBg = document . getElementsByClassName ( 'light_background' ) ;
2021-02-19 05:57:04 +00:00
for ( var i = 0 ; i < lightBg . length ; i ++ ) {
2021-02-16 03:40:22 +00:00
lightBg [ i ] . style . backgroundColor = colSecond ;
} ;
2021-02-19 05:57:04 +00:00
// 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 ;
} ;
2021-02-16 03:40:22 +00:00
}
2021-02-19 05:57:04 +00:00
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 ;
2021-02-19 13:21:51 +00:00
}
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" ) ;
}