search

erikflowers / weather-icons

215 Weather Themed Icons and CSS
https://github.com/erikflowers/weather-icons
6.95k stars 855 forks source link

How display icon by ID and Code? #204

Open thehatami opened 6 years ago

thehatami commented 6 years ago

I not find any more information to display icon from Open Weather API code like 09d or id like 300.

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

cyoung502 commented 6 years ago 
function getIconClass(weatherCode){
    let icon;
    switch(weatherCode){
        case 300:
            icon = 'wi-sprinkle';
            break;
    }
    return icon;
}

element.innerHTML = '<i class="wi ' + getIconClass(weather.id) + '"></i>';
Wikibear commented 6 years ago

Are you sure that there is only this way? So then we need a json array with all data to compare status codes or anything that it make possible to add icons via code.

cyoung502 commented 6 years ago

Are you sure that there is only this way? So then we need a json array with all data to compare status codes or anything that it make possible to add icons via code.

This isn't the only way, but it is one way. You return the class for the weather icon with the input weather code, and you apply the class to some element to display it. Ideally you already have all weather codes in a json array from whatever weather API you using. Here is what I use for Yahoo Weather:

function getIconClass(weatherCode){
    let icon;
    switch(weatherCode){
        case "0":
            icon = "wi-tornado";
            break;
        case "1":
            icon = "wi-hurricane-warning";
            break;
        case "2":
            icon = "wi-hurricane";
            break;
        case "3":
        case "4":
        case "37":
        case "38":
            icon = "wi-thunderstorm";
            break;
        case "5":
        case "6":
        case "7":
        case "35":
        case "46":
            icon = "wi-rain-mix";
            break;
        case "8":
        case "10":
        case "18":
            icon = "wi-sleet";
            break;
        case 9:
            icon = "wi-sprinkle";
            break;
        case "11":
        case "12":
        case "39":
        case "40":
            icon = "wi-showers";
            break;
        case "13":
        case "14":
        case "15":
        case "16":
            icon = "wi-snow";
            break;
        case "17":
            icon = "wi-hail";
            break;
        case "19":
            icon = "wi-dust";
            break;
        case "20":
            icon = "wi-fog";
            break;
        case "21":
            icon = "wi-day-haze";
            break;
        case "23":
            icon = "wi-strong-wind";
            break;
        case "24":
            icon = "wi-windy";
            break;
        case "25":
            icon = "wi-snowflake-cold";
            break;
        case "26":
            icon = "wi-day-sunny-overcast";
            break;
        case "27":
        case "29":
            icon = "wi-night-alt-cloudy";
            break;
        case "28":
            icon = "wi-cloudy";
            break;
        case "30":
            icon = "wi-day-cloudy";
            break;
        case "31":
            icon = "wi-night-clear";
            break;
        case "32":
            icon = "wi-day-sunny";
            break;
        case "33":
            icon = "wi-night-cloudy";
            break;
        case "34":
            icon = "wi-day-haze";
            break;
        case "36":
            icon = "wi-hot";
            break;
        case "41":
        case "42":
        case "43":
            icon = "wi-snow";
            break;
        case "44":
            icon = "wi-cloud";
            break;
        case "45":
        case "47":
            icon = "wi-storm-showers";
            break;
        case "3200":
        default:
            icon = "wi-na";
            break;
    }
    return icon;
}

And how I set the icon:

    for(let i = 0; i < days; i++){
        let td = document.createElement("td");
        td.innerHTML = "<i class=\"mt-3 mb-1 wi " + getIconClass(w.weatherData.item.forecast[i].code) + "\"></i>";
        tr.appendChild(td);
    }
jonneymendoza commented 5 years ago

Looks like a hackable way of doing so.

Wikibear commented 5 years ago

var wiToOWM = { "200": "thunderstorm", "201": "thunderstorm", "202": "thunderstorm", "210": "lightning", "211": "lightning", "212": "lightning", "221": "lightning", "230": "thunderstorm", "231": "thunderstorm", "232": "thunderstorm", "300": "sprinkle", "301": "sprinkle", "302": "rain", "310": "rain-mix", "311": "rain", "312": "rain", "313": "showers", "314": "rain", "321": "sprinkle", "500": "sprinkle", "501": "rain", "502": "rain", "503": "rain", "504": "rain", "511": "rain-mix", "520": "showers", "521": "showers", "522": "showers", "531": "storm-showers", "600": "snow", "601": "snow", "602": "sleet", "611": "rain-mix", "612": "rain-mix", "615": "rain-mix", "616": "rain-mix", "620": "rain-mix", "621": "snow", "622": "snow", "701": "showers", "711": "smoke", "721": "day-haze", "731": "dust", "741": "fog", "761": "dust", "762": "dust", "771": "cloudy-gusts", "781": "tornado", "800": "day-sunny", "801": "cloudy-gusts", "802": "cloudy-gusts", "803": "cloudy-gusts", "804": "cloudy", "900": "tornado", "901": "storm-showers", "902": "hurricane", "903": "snowflake-cold", "904": "hot", "905": "windy", "906": "hail", "957": "strong-wind", "day-200": "day-thunderstorm", "day-201": "day-thunderstorm", "day-202": "day-thunderstorm", "day-210": "day-lightning", "day-211": "day-lightning", "day-212": "day-lightning", "day-221": "day-lightning", "day-230": "day-thunderstorm", "day-231": "day-thunderstorm", "day-232": "day-thunderstorm", "day-300": "day-sprinkle", "day-301": "day-sprinkle", "day-302": "day-rain", "day-310": "day-rain", "day-311": "day-rain", "day-312": "day-rain", "day-313": "day-rain", "day-314": "day-rain", "day-321": "day-sprinkle", "day-500": "day-sprinkle", "day-501": "day-rain", "day-502": "day-rain", "day-503": "day-rain", "day-504": "day-rain", "day-511": "day-rain-mix", "day-520": "day-showers", "day-521": "day-showers", "day-522": "day-showers", "day-531": "day-storm-showers", "day-600": "day-snow", "day-601": "day-sleet", "day-602": "day-snow", "day-611": "day-rain-mix", "day-612": "day-rain-mix", "day-615": "day-rain-mix", "day-616": "day-rain-mix", "day-620": "day-rain-mix", "day-621": "day-snow", "day-622": "day-snow", "day-701": "day-showers", "day-711": "smoke", "day-721": "day-haze", "day-731": "dust", "day-741": "day-fog", "day-761": "dust", "day-762": "dust", "day-781": "tornado", "day-800": "day-sunny", "day-801": "day-cloudy-gusts", "day-802": "day-cloudy-gusts", "day-803": "day-cloudy-gusts", "day-804": "day-sunny-overcast", "day-900": "tornado", "day-902": "hurricane", "day-903": "snowflake-cold", "day-904": "hot", "day-906": "day-hail", "day-957": "strong-wind", "night-200": "night-alt-thunderstorm", "night-201": "night-alt-thunderstorm", "night-202": "night-alt-thunderstorm", "night-210": "night-alt-lightning", "night-211": "night-alt-lightning", "night-212": "night-alt-lightning", "night-221": "night-alt-lightning", "night-230": "night-alt-thunderstorm", "night-231": "night-alt-thunderstorm", "night-232": "night-alt-thunderstorm", "night-300": "night-alt-sprinkle", "night-301": "night-alt-sprinkle", "night-302": "night-alt-rain", "night-310": "night-alt-rain", "night-311": "night-alt-rain", "night-312": "night-alt-rain", "night-313": "night-alt-rain", "night-314": "night-alt-rain", "night-321": "night-alt-sprinkle", "night-500": "night-alt-sprinkle", "night-501": "night-alt-rain", "night-502": "night-alt-rain", "night-503": "night-alt-rain", "night-504": "night-alt-rain", "night-511": "night-alt-rain-mix", "night-520": "night-alt-showers", "night-521": "night-alt-showers", "night-522": "night-alt-showers", "night-531": "night-alt-storm-showers", "night-600": "night-alt-snow", "night-601": "night-alt-sleet", "night-602": "night-alt-snow", "night-611": "night-alt-rain-mix", "night-612": "night-alt-rain-mix", "night-615": "night-alt-rain-mix", "night-616": "night-alt-rain-mix", "night-620": "night-alt-rain-mix", "night-621": "night-alt-snow", "night-622": "night-alt-snow", "night-701": "night-alt-showers", "night-711": "smoke", "night-721": "day-haze", "night-731": "dust", "night-741": "night-fog", "night-761": "dust", "night-762": "dust", "night-781": "tornado", "night-800": "night-clear", "night-801": "night-alt-cloudy-gusts", "night-802": "night-alt-cloudy-gusts", "night-803": "night-alt-cloudy-gusts", "night-804": "night-alt-cloudy", "night-900": "tornado", "night-902": "hurricane", "night-903": "snowflake-cold", "night-904": "hot", "night-906": "night-alt-hail", "night-957": "strong-wind" };

and

console.log(wiToOWM[night-957]);

Will do the trick.

EG Open Weather:

$('p.wwIcon').html('<i class="wi wi-'+wiToOWM[getDayNight(data.sys.sunrise*1000,data.sys.sunset*1000)+data.weather[0].id]+'"></i>');

jonneymendoza commented 5 years ago

Do you have a java or kotlin example?

mrbbp commented 5 years ago

getDayNight function missed try this

const getDayNight = (sunrise, sunset) => {
      const now = Date.now();
      if (now> sunrise && now< sunset) {
        return "day-";
      } else {
        return "night-";
      }
    };