Import weather data other than Wunderground

[HansieNL]

@toro : OWM webpage is openweathermap.org
Maybe you can suggest your changes on GitHub?
Thanks for your addition.

[jake]

@toro Nice, thank you very much! It works well. One weather question. I see for the coming 4 days 4 different temperatures, but the same weather forecast (light rain). Since I don't like the light rain every day, this might be a bug?

You'r welcome. It's probably because there actualy is light rain for the next days. You can check on openweathermaps.org if this is the case. There might be some difference, forecast for the days is on the specific day at 13:00h, 14:00h or 15:00h.

When I compare Rotterdam and Dordrecht weather for Monday, the first is shown as sunny, the second as light rain. The difference in rain is only 0mm versus 0.32mm.
Sun and (rsin)clouds would be a better description, but I can understand that this might be difficult to do.

Feature request, the given temperature is an average, it would be nice to have the min temperature of the day as an option on a 2nd row.

[toro]

When I compare Rotterdam and Dordrecht weather for Monday, the first is shown as sunny, the second as light rain. The difference in rain is only 0mm versus 0.32mm.
Sun and (rsin)clouds would be a better description, but I can understand that this might be difficult to do.

The descriptions are straight from OWM. They come in the forecast, I do not change them.

Feature request, the given temperature is an average, it would be nice to have the min temperature of the day as an option on a 2nd row.

Your wish is my command

Daily forecast with minimum.jpg (42.09 KiB) Viewed 2026 times

I implemented it in the new version of the file weather_owm.js (Dashticz version 2.5.2)
But it can also be used in 2.5.1
Please test the code. As with the previous, this is not the official Dashticz file.
Make a backup of your weather_owm.js file and overwrite the content with the code below

Spoiler: show

Code: Select all

function loadWeather(location, country) {
    var html = '';
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var site = 'http://api.openweathermap.org/data/2.5/weather?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

        $.getJSON(site, function (weather) {
            $('.containsweather').each(function () {
                var curfull = $(this);
                if (typeof(weather.main) === 'undefined') {
                    curfull.remove();
                    currentweather = false;
                    curfull.find('.weather').html('<p style="font-size:10px; width:100px;">Location ERROR</p>');
                } else {
                    currentweather = weather.weather[0];
                    var wiclass = getIcon(weather.weather[0].icon);
                    var temp = weather.main.temp;

                    weatherIcon = '<i class="wi ' + wiclass + '"></i>';
                    if (settings['static_weathericons'] === 0) {
                        weatherIcon = getSkycon(weather.weather[0].icon, 'skycon');
                    }
                    html += '<h2><span>' + Math.round(temp) + _TEMP_SYMBOL + '</span> ' + weatherIcon + '</h2>';
                    curfull.find('.weather').html(weatherIcon);
                    curfull.find('.weatherdegrees').html('<strong>' + Math.round(temp) + _TEMP_SYMBOL + '</strong><span class="rainrate"></span>');

                    if (settings['owm_name'] !== '' && settings['owm_name'] !== 0 && settings.hasOwnProperty('owm_name')) curfull.find('.weatherloc').html(settings['owm_name']);
                    else curfull.find('.weatherloc').html(location);
                }
            });
        });
    }
}

function loadWeatherFull(location, country) {
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
        if (settings['owm_cnt'] > 4) {
            var ColXs = 'col-xs-2';
        } else {
            var ColXs = 'col-xs-3';
        }
        var containsweatherfull = '' ;
        for (count = 0; count < settings['owm_cnt']; count++) {
            containsweatherfull += '<div class="' + ColXs + ' transbg"></div>';
        }
        $('div.containsweatherfull').html('<div class="weatherfull">' + containsweatherfull + '</div>');
		var site = 'http://api.openweathermap.org/data/2.5/forecast?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'] + '&lang=' + settings['owm_lang'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

		var html = '';
        $.getJSON(site, function (currentforecast) {
            $('.containsweatherfull').each(function () {
                var curfull = $(this);
                if (typeof(currentforecast.list) === 'undefined') {
                    curfull.remove();
                }
                else {
                    curfull.find(".weatherfull ." + ColXs).html('');
                    var start = 0;

                    if(typeof(settings['owm_days']) == 'undefined' || settings['owm_days'] == '' || settings['owm_days'] == 0) { //torov3
						for (var i = start; i < (start + settings['owm_cnt']); i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var wiclass = getIcon(curfor.weather[0].icon);
							var temp = curfor.main.temp;

							var rain = 0;
							if(typeof(curfor.rain) !== 'undefined'){
								if(typeof(curfor.rain['3h']) !== 'undefined' ){
									rain = curfor.rain['3h'];
								}
							}
							html = '<div class="day">' + date.format('HH')+':' +date.format('mm') + '<br />' + date.format(settings['weekday']) + '</div>';
							if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
							else html += getSkycon(curfor.weather[0].icon, 'skycon');
							html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

							curfull.find('.weatherfull').each(function () {
							   $(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
							});
						}
					}
					else {
						var minTemp = [199,199,199,199,199];
						var tempTemp = 199;
						var x = -1;
						for (var i = 0; i < 39; i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var temp = curfor.main.temp;
							if (date.format('HH') == '00' || date.format('HH') == '01' || date.format('HH') == '02'){
								if (x> -1) minTemp[x] = tempTemp;
								tempTemp = 199;
							}
							if (temp < tempTemp) tempTemp = temp;
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14') x++;
						}
						if (minTemp[4] == 199) minTemp[4] = tempTemp;
						
						var i = 0;
						while (start < 41){
							curfor = currentforecast.list[start];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14'){
								var wiclass = getIcon(curfor.weather[0].icon);
								var temp = curfor.main.temp;
								var Wdescription = curfor.weather[0].description;
								var rain = 0;
								if(typeof(curfor.rain) !== 'undefined'){
									if(typeof(curfor.rain['3h']) !== 'undefined' ){
										rain = curfor.rain['3h'];
									}
								}
								html = '<div class="day">' + date.format(settings['weekday']) + '</div>';
								if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
								else html += getSkycon(curfor.weather[0].icon, 'skycon');
								html += '<div class="day">' + Wdescription + '</div><div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</div>';
								if (settings['owm_min'] === 1) html += '<div class="day">Min</div><div class="temp"><span class="av_temp">' + Math.round(minTemp[i]) + _TEMP_SYMBOL + '</div>';

								curfull.find('.weatherfull').each(function () {
									$(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
								});
								i++;
							}
							start++;
						}
					}
                }
            });
        });
    }
}

function getSkycon(code, classname) {
    var random = getRandomInt(1, 100000);

    var icon = 'PARTLY_CLOUDY_DAY';
    var icons = {
		'01d': 'CLEAR_DAY',
		'01n': 'CLEAR_NIGHT',
		'02d': 'PARTLY_CLOUDY_DAY',
		'02n': 'PARTLY_CLOUDY_NIGHT',
		'03d': 'CLOUDY',
		'03n': 'CLOUDY',
		'04d': 'CLOUDY',
		'04n': 'CLOUDY',
		'09d': 'RAIN',
		'09n': 'RAIN',
		'10d': 'RAIN',
		'10n': 'RAIN',
		'11d': 'WIND',
		'11n': 'WIND',
		'13d': 'SNOW',
		'13n': 'SNOW',
		'50d': 'FOG',
		'50n': 'FOG',
    };
    if (icons.hasOwnProperty(code)) {
        icon = icons[code];
    }

    var skycon = '<script>';
    skycon += 'var skycons = new Skycons({"color": "white"});';
    skycon += 'skycons.add("icon' + random + '", Skycons.' + icon + ');';
    skycon += 'skycons.play();';
    skycon += '</script>';
    skycon += '<canvas class="' + classname + '" data-icon="' + icon + '" id="icon' + random + '"></canvas>';
    return skycon;
}

function getIcon(code) {
    var wiclass = 'wi-cloudy';

    var icons = {
		'01d': 'wi-day-sunny',
		'01n': 'wi-night-clear',
		'02d': 'wi-day-cloudy',
		'02n': 'wi-night-cloudy',
		'03d': 'wi-cloud',
		'03n': 'wi-cloud',
		'04d': 'wi-cloudy',
		'04n': 'wi-cloudy',
		'09d': 'wi-showers',
		'09n': 'wi-showers',
		'10d': 'wi-day-rain',
		'10n': 'wi-night-rain',
		'11d': 'wi-day-thunderstorm',
		'11n': 'wi-night-thunderstorm',
		'13d': 'wi-snow',
		'13n': 'wi-snow',
		'50d': 'wi-day-fog',
		'50n': 'wi-night-fog',
    };
    if (icons.hasOwnProperty(code)) {
        wiclass = icons[code];
    }
    return wiclass;
}

There is also a new option, owm_min.

Code: Select all

config['owm_api'] = 'xxxxxxx'; 		// Your OWM API key
config['owm_city'] = 'Amsterdam';	// Your city or nearby city to use in OWM
config['owm_name'] = '';		// If your city is not available with OWM, you have to use a nearby city. You can type the name of your own city here to show it in Dashticz
config['owm_country'] = 'nl';		// Your country to use in OWM
config['owm_cnt'] = 4;			// Number of columns to show. If showing days, max is 5, (4 is recommended )
config['owm_days'] = 1;			// Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_min'] = 1;			// Enter 1 to show min temperature on 2nd row
config['owm_lang'] = 'nl';		// Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['static_weathericons'] = 0;	// Enter 1 for animated weather icons, 0 for static icons

@toro : OWM webpage is openweathermap.org
Maybe you can suggest your changes on GitHub?
Thanks for your addition.

You are right, it's without the 's' at the end, thanks.
I would love to suggest the change on GitHub. But I have no clue on how to do that.
Maybe someone can help me with that.
Perhaps Rob can/want's to use it in a future version. And probably make it a little better
Playing with the script makes you realize how great they are, really impressive I think.

[Lokonli]

The descriptions are straight from OWM. They come in the forecast, I do not change them.

Your wish is my command


Daily forecast with minimum.jpg


I implemented it in the new version of the file weather_owm.js (Dashticz version 2.5.2)
But it can also be used in 2.5.1
Please test the code. As with the previous, this is not the official Dashticz file.
Make a backup of your weather_owm.js file and overwrite the content with the code below

Spoiler: show

Code: Select all

function loadWeather(location, country) {
    var html = '';
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var site = 'http://api.openweathermap.org/data/2.5/weather?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

        $.getJSON(site, function (weather) {
            $('.containsweather').each(function () {
                var curfull = $(this);
                if (typeof(weather.main) === 'undefined') {
                    curfull.remove();
                    currentweather = false;
                    curfull.find('.weather').html('<p style="font-size:10px; width:100px;">Location ERROR</p>');
                } else {
                    currentweather = weather.weather[0];
                    var wiclass = getIcon(weather.weather[0].icon);
                    var temp = weather.main.temp;

                    weatherIcon = '<i class="wi ' + wiclass + '"></i>';
                    if (settings['static_weathericons'] === 0) {
                        weatherIcon = getSkycon(weather.weather[0].icon, 'skycon');
                    }
                    html += '<h2><span>' + Math.round(temp) + _TEMP_SYMBOL + '</span> ' + weatherIcon + '</h2>';
                    curfull.find('.weather').html(weatherIcon);
                    curfull.find('.weatherdegrees').html('<strong>' + Math.round(temp) + _TEMP_SYMBOL + '</strong><span class="rainrate"></span>');

                    if (settings['owm_name'] !== '' && settings['owm_name'] !== 0 && settings.hasOwnProperty('owm_name')) curfull.find('.weatherloc').html(settings['owm_name']);
                    else curfull.find('.weatherloc').html(location);
                }
            });
        });
    }
}

function loadWeatherFull(location, country) {
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
        if (settings['owm_cnt'] > 4) {
            var ColXs = 'col-xs-2';
        } else {
            var ColXs = 'col-xs-3';
        }
        var containsweatherfull = '' ;
        for (count = 0; count < settings['owm_cnt']; count++) {
            containsweatherfull += '<div class="' + ColXs + ' transbg"></div>';
        }
        $('div.containsweatherfull').html('<div class="weatherfull">' + containsweatherfull + '</div>');
		var site = 'http://api.openweathermap.org/data/2.5/forecast?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'] + '&lang=' + settings['owm_lang'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

		var html = '';
        $.getJSON(site, function (currentforecast) {
            $('.containsweatherfull').each(function () {
                var curfull = $(this);
                if (typeof(currentforecast.list) === 'undefined') {
                    curfull.remove();
                }
                else {
                    curfull.find(".weatherfull ." + ColXs).html('');
                    var start = 0;

                    if(typeof(settings['owm_days']) == 'undefined' || settings['owm_days'] == '' || settings['owm_days'] == 0) { //torov3
						for (var i = start; i < (start + settings['owm_cnt']); i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var wiclass = getIcon(curfor.weather[0].icon);
							var temp = curfor.main.temp;

							var rain = 0;
							if(typeof(curfor.rain) !== 'undefined'){
								if(typeof(curfor.rain['3h']) !== 'undefined' ){
									rain = curfor.rain['3h'];
								}
							}
							html = '<div class="day">' + date.format('HH')+':' +date.format('mm') + '<br />' + date.format(settings['weekday']) + '</div>';
							if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
							else html += getSkycon(curfor.weather[0].icon, 'skycon');
							html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

							curfull.find('.weatherfull').each(function () {
							   $(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
							});
						}
					}
					else {
						var minTemp = [199,199,199,199,199];
						var tempTemp = 199;
						var x = -1;
						for (var i = 0; i < 39; i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var temp = curfor.main.temp;
							if (date.format('HH') == '00' || date.format('HH') == '01' || date.format('HH') == '02'){
								if (x> -1) minTemp[x] = tempTemp;
								tempTemp = 199;
							}
							if (temp < tempTemp) tempTemp = temp;
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14') x++;
						}
						if (minTemp[4] == 199) minTemp[4] = tempTemp;
						
						var i = 0;
						while (start < 41){
							curfor = currentforecast.list[start];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14'){
								var wiclass = getIcon(curfor.weather[0].icon);
								var temp = curfor.main.temp;
								var Wdescription = curfor.weather[0].description;
								var rain = 0;
								if(typeof(curfor.rain) !== 'undefined'){
									if(typeof(curfor.rain['3h']) !== 'undefined' ){
										rain = curfor.rain['3h'];
									}
								}
								html = '<div class="day">' + date.format(settings['weekday']) + '</div>';
								if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
								else html += getSkycon(curfor.weather[0].icon, 'skycon');
								html += '<div class="day">' + Wdescription + '</div><div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</div>';
								if (settings['owm_min'] === 1) html += '<div class="day">Min</div><div class="temp"><span class="av_temp">' + Math.round(minTemp[i]) + _TEMP_SYMBOL + '</div>';

								curfull.find('.weatherfull').each(function () {
									$(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
								});
								i++;
							}
							start++;
						}
					}
                }
            });
        });
    }
}

function getSkycon(code, classname) {
    var random = getRandomInt(1, 100000);

    var icon = 'PARTLY_CLOUDY_DAY';
    var icons = {
		'01d': 'CLEAR_DAY',
		'01n': 'CLEAR_NIGHT',
		'02d': 'PARTLY_CLOUDY_DAY',
		'02n': 'PARTLY_CLOUDY_NIGHT',
		'03d': 'CLOUDY',
		'03n': 'CLOUDY',
		'04d': 'CLOUDY',
		'04n': 'CLOUDY',
		'09d': 'RAIN',
		'09n': 'RAIN',
		'10d': 'RAIN',
		'10n': 'RAIN',
		'11d': 'WIND',
		'11n': 'WIND',
		'13d': 'SNOW',
		'13n': 'SNOW',
		'50d': 'FOG',
		'50n': 'FOG',
    };
    if (icons.hasOwnProperty(code)) {
        icon = icons[code];
    }

    var skycon = '<script>';
    skycon += 'var skycons = new Skycons({"color": "white"});';
    skycon += 'skycons.add("icon' + random + '", Skycons.' + icon + ');';
    skycon += 'skycons.play();';
    skycon += '</script>';
    skycon += '<canvas class="' + classname + '" data-icon="' + icon + '" id="icon' + random + '"></canvas>';
    return skycon;
}

function getIcon(code) {
    var wiclass = 'wi-cloudy';

    var icons = {
		'01d': 'wi-day-sunny',
		'01n': 'wi-night-clear',
		'02d': 'wi-day-cloudy',
		'02n': 'wi-night-cloudy',
		'03d': 'wi-cloud',
		'03n': 'wi-cloud',
		'04d': 'wi-cloudy',
		'04n': 'wi-cloudy',
		'09d': 'wi-showers',
		'09n': 'wi-showers',
		'10d': 'wi-day-rain',
		'10n': 'wi-night-rain',
		'11d': 'wi-day-thunderstorm',
		'11n': 'wi-night-thunderstorm',
		'13d': 'wi-snow',
		'13n': 'wi-snow',
		'50d': 'wi-day-fog',
		'50n': 'wi-night-fog',
    };
    if (icons.hasOwnProperty(code)) {
        wiclass = icons[code];
    }
    return wiclass;
}

There is also a new option, owm_min.

Code: Select all

config['owm_api'] = 'xxxxxxx'; 		// Your OWM API key
config['owm_city'] = 'Amsterdam';	// Your city or nearby city to use in OWM
config['owm_name'] = '';		// If your city is not available with OWM, you have to use a nearby city. You can type the name of your own city here to show it in Dashticz
config['owm_country'] = 'nl';		// Your country to use in OWM
config['owm_cnt'] = 4;			// Number of columns to show. If showing days, max is 5, (4 is recommended )
config['owm_days'] = 1;			// Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_min'] = 1;			// Enter 1 to show min temperature on 2nd row
config['owm_lang'] = 'nl';		// Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['static_weathericons'] = 0;	// Enter 1 for animated weather icons, 0 for static icons

@toro : OWM webpage is openweathermap.org
Maybe you can suggest your changes on GitHub?
Thanks for your addition.

You are right, it's without the 's' at the end, thanks.
I would love to suggest the change on GitHub. But I have no clue on how to do that.
Maybe someone can help me with that.
Perhaps Rob can/want's to use it in a future version. And probably make it a little better
Playing with the script makes you realize how great they are, really impressive I think.

Nice improvement for OWM.
I've created the PR on github. Probably it will be merged in the next Beta.

[jake]

When I compare Rotterdam and Dordrecht weather for Monday, the first is shown as sunny, the second as light rain. The difference in rain is only 0mm versus 0.32mm.
Sun and (rsin)clouds would be a better description, but I can understand that this might be difficult to do.

The descriptions are straight from OWM. They come in the forecast, I do not change them.

Feature request, the given temperature is an average, it would be nice to have the min temperature of the day as an option on a 2nd row.

Your wish is my command

Thank you, thank you! It works well, if only the font size for temperature could be decreased a little. The block is now higher than the original WU blocks, pushing my bottom block just that little bit off page, which didn't happen before.

Other than that, excellent work and thanks for your time!

[jake]

By looking in the topic 'show your dashboard' I saw that with WU the min temperature was a smaller font, a less prominent color and that the word 'min' wasn't there. Altogether a nice solution to save height in the block.

[HansieNL]

I did add the following to the files to get the settings in the settings menu:

settings.js:

Spoiler: show

settingList['weather']['owm_days'] = {};
settingList['weather']['owm_days']['title'] = language.settings.weather.owm_days;
settingList['weather']['owm_days']['type'] = 'text';
settingList['weather']['owm_days']['help'] = language.settings.weather.owm_days_help;

settingList['weather']['owm_cnt']['help'] = language.settings.weather.owm_cnt_help;

nl_NL.json:

Spoiler: show

"owm_days": "Voorspelling in dagen of standaard (1 = dagen, 0 = standaard)",
"owm_days_help": "Voer 1 in voor weergave voorspelling in dagen, 0 voor de Open Weather Map standaard 3 uurs voorspelling",
"owm_cnt_help": "Aantal weer te geven kolommen. Bij dagen weergave is 5 het maximaal aantal",

en_US.json:

Spoiler: show

"owm_days": "Forecast in days or default (1 = days, 0 = default)",
"owm_days_help": "Enter 1 for showing forecast in days, 0 for the Open Weather Map default 3 hour forecast",
"owm_cnt_help": "Number of columns to show. If showing days, max is 5",

[Lokonli]

I did add the following to the files to get the settings in the settings menu:

settings.js:

Spoiler: show

settingList['weather']['owm_days'] = {};
settingList['weather']['owm_days']['title'] = language.settings.weather.owm_days;
settingList['weather']['owm_days']['type'] = 'text';
settingList['weather']['owm_days']['help'] = language.settings.weather.owm_days_help;

settingList['weather']['owm_cnt']['help'] = language.settings.weather.owm_cnt_help;

nl_NL.json:

Spoiler: show

"owm_days": "Voorspelling in dagen of standaard (1 = dagen, 0 = standaard)",
"owm_days_help": "Voer 1 in voor weergave voorspelling in dagen, 0 voor de Open Weather Map standaard 3 uurs voorspelling",
"owm_cnt_help": "Aantal weer te geven kolommen. Bij dagen weergave is 5 het maximaal aantal",

en_US.json:

Spoiler: show

"owm_days": "Forecast in days or default (1 = days, 0 = default)",
"owm_days_help": "Enter 1 for showing forecast in days, 0 for the Open Weather Map default 3 hour forecast",
"owm_cnt_help": "Number of columns to show. If showing days, max is 5",

I'll add this to the PR.

[toro]

By looking in the topic 'show your dashboard' I saw that with WU the min temperature was a smaller font, a less prominent color and that the word 'min' wasn't there. Altogether a nice solution to save height in the block.

Thanks, that put me on the right track. I changed the code so it looks like this now:

Daily forecast with minimum small.jpg (37.83 KiB) Viewed 1992 times

Spoiler: show

Code: Select all

function loadWeather(location, country) {
    var html = '';
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var site = 'http://api.openweathermap.org/data/2.5/weather?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

        $.getJSON(site, function (weather) {
            $('.containsweather').each(function () {
                var curfull = $(this);
                if (typeof(weather.main) === 'undefined') {
                    curfull.remove();
                    currentweather = false;
                    curfull.find('.weather').html('<p style="font-size:10px; width:100px;">Location ERROR</p>');
                } else {
                    currentweather = weather.weather[0];
                    var wiclass = getIcon(weather.weather[0].icon);
                    var temp = weather.main.temp;

                    weatherIcon = '<i class="wi ' + wiclass + '"></i>';
                    if (settings['static_weathericons'] === 0) {
                        weatherIcon = getSkycon(weather.weather[0].icon, 'skycon');
                    }
                    html += '<h2><span>' + Math.round(temp) + _TEMP_SYMBOL + '</span> ' + weatherIcon + '</h2>';
                    curfull.find('.weather').html(weatherIcon);
                    curfull.find('.weatherdegrees').html('<strong>' + Math.round(temp) + _TEMP_SYMBOL + '</strong><span class="rainrate"></span>');

                    if (settings['owm_name'] !== '' && settings['owm_name'] !== 0 && settings.hasOwnProperty('owm_name')) curfull.find('.weatherloc').html(settings['owm_name']);
                    else curfull.find('.weatherloc').html(location);
                }
            });
        });
    }
}

function loadWeatherFull(location, country) {
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
        if (settings['owm_cnt'] > 4) {
            var ColXs = 'col-xs-2';
        } else {
            var ColXs = 'col-xs-3';
        }
        var containsweatherfull = '' ;
        for (count = 0; count < settings['owm_cnt']; count++) {
            containsweatherfull += '<div class="' + ColXs + ' transbg"></div>';
        }
        $('div.containsweatherfull').html('<div class="weatherfull">' + containsweatherfull + '</div>');
		var site = 'http://api.openweathermap.org/data/2.5/forecast?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'] + '&lang=' + settings['owm_lang'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

		var html = '';
        $.getJSON(site, function (currentforecast) {
            $('.containsweatherfull').each(function () {
                var curfull = $(this);
                if (typeof(currentforecast.list) === 'undefined') {
                    curfull.remove();
                }
                else {
                    curfull.find(".weatherfull ." + ColXs).html('');
                    var start = 0;

                    if(typeof(settings['owm_days']) == 'undefined' || settings['owm_days'] == '' || settings['owm_days'] == 0) { //torov4
						for (var i = start; i < (start + settings['owm_cnt']); i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var wiclass = getIcon(curfor.weather[0].icon);
							var temp = curfor.main.temp;

							var rain = 0;
							if(typeof(curfor.rain) !== 'undefined'){
								if(typeof(curfor.rain['3h']) !== 'undefined' ){
									rain = curfor.rain['3h'];
								}
							}
							html = '<div class="day">' + date.format('HH')+':' +date.format('mm') + '<br />' + date.format(settings['weekday']) + '</div>';
							if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
							else html += getSkycon(curfor.weather[0].icon, 'skycon');
							html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

							curfull.find('.weatherfull').each(function () {
							   $(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
							});
						}
					}
					else {
						var minTemp = [199,199,199,199,199];
						var tempTemp = 199;
						var x = -1;
						for (var i = 0; i < 39; i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var temp = curfor.main.temp;
							if (date.format('HH') == '00' || date.format('HH') == '01' || date.format('HH') == '02'){
								if (x> -1) minTemp[x] = tempTemp;
								tempTemp = 199;
							}
							if (temp < tempTemp) tempTemp = temp;
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14') x++;
						}
						if (minTemp[4] == 199) minTemp[4] = tempTemp;
						
						var i = 0;
						while (start < 41){
							curfor = currentforecast.list[start];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14'){
								var wiclass = getIcon(curfor.weather[0].icon);
								var temp = curfor.main.temp;
								var Wdescription = curfor.weather[0].description;
								var rain = 0;
								if(typeof(curfor.rain) !== 'undefined'){
									if(typeof(curfor.rain['3h']) !== 'undefined' ){
										rain = curfor.rain['3h'];
									}
								}
								html = '<div class="day">' + date.format(settings['weekday']) + '</div>';
								if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
								else html += getSkycon(curfor.weather[0].icon, 'skycon');
								html += '<div class="day">' + Wdescription + '</div><div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</div>';
								if (settings['owm_min'] === 1) html += '<div class="temp"><span class="nightT">' + Math.round(minTemp[i]) + _TEMP_SYMBOL + '</div>';
								
								curfull.find('.weatherfull').each(function () {
									$(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
								});
								i++;
							}
							start++;
						}
					}
                }
            });
        });
    }
}

function getSkycon(code, classname) {
    var random = getRandomInt(1, 100000);

    var icon = 'PARTLY_CLOUDY_DAY';
    var icons = {
		'01d': 'CLEAR_DAY',
		'01n': 'CLEAR_NIGHT',
		'02d': 'PARTLY_CLOUDY_DAY',
		'02n': 'PARTLY_CLOUDY_NIGHT',
		'03d': 'CLOUDY',
		'03n': 'CLOUDY',
		'04d': 'CLOUDY',
		'04n': 'CLOUDY',
		'09d': 'RAIN',
		'09n': 'RAIN',
		'10d': 'RAIN',
		'10n': 'RAIN',
		'11d': 'WIND',
		'11n': 'WIND',
		'13d': 'SNOW',
		'13n': 'SNOW',
		'50d': 'FOG',
		'50n': 'FOG',
    };
    if (icons.hasOwnProperty(code)) {
        icon = icons[code];
    }

    var skycon = '<script>';
    skycon += 'var skycons = new Skycons({"color": "white"});';
    skycon += 'skycons.add("icon' + random + '", Skycons.' + icon + ');';
    skycon += 'skycons.play();';
    skycon += '</script>';
    skycon += '<canvas class="' + classname + '" data-icon="' + icon + '" id="icon' + random + '"></canvas>';
    return skycon;
}

function getIcon(code) {
    var wiclass = 'wi-cloudy';

    var icons = {
		'01d': 'wi-day-sunny',
		'01n': 'wi-night-clear',
		'02d': 'wi-day-cloudy',
		'02n': 'wi-night-cloudy',
		'03d': 'wi-cloud',
		'03n': 'wi-cloud',
		'04d': 'wi-cloudy',
		'04n': 'wi-cloudy',
		'09d': 'wi-showers',
		'09n': 'wi-showers',
		'10d': 'wi-day-rain',
		'10n': 'wi-night-rain',
		'11d': 'wi-day-thunderstorm',
		'11n': 'wi-night-thunderstorm',
		'13d': 'wi-snow',
		'13n': 'wi-snow',
		'50d': 'wi-day-fog',
		'50n': 'wi-night-fog',
    };
    if (icons.hasOwnProperty(code)) {
        wiclass = icons[code];
    }
    return wiclass;
}

[HansieNL]

@toro: Thanks. If I choose for default 3 hour forecast the temp and rain are on the same row without space.

I think a break will make it more readable.
html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><br /><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

[jake]

@toro, thanks again!

[toro]

@HansieNL: You are right, that looks a lot better. So here's the complete code

Spoiler: show

Code: Select all

function loadWeather(location, country) {
    var html = '';
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var site = 'http://api.openweathermap.org/data/2.5/weather?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

        $.getJSON(site, function (weather) {
            $('.containsweather').each(function () {
                var curfull = $(this);
                if (typeof(weather.main) === 'undefined') {
                    curfull.remove();
                    currentweather = false;
                    curfull.find('.weather').html('<p style="font-size:10px; width:100px;">Location ERROR</p>');
                } else {
                    currentweather = weather.weather[0];
                    var wiclass = getIcon(weather.weather[0].icon);
                    var temp = weather.main.temp;

                    weatherIcon = '<i class="wi ' + wiclass + '"></i>';
                    if (settings['static_weathericons'] === 0) {
                        weatherIcon = getSkycon(weather.weather[0].icon, 'skycon');
                    }
                    html += '<h2><span>' + Math.round(temp) + _TEMP_SYMBOL + '</span> ' + weatherIcon + '</h2>';
                    curfull.find('.weather').html(weatherIcon);
                    curfull.find('.weatherdegrees').html('<strong>' + Math.round(temp) + _TEMP_SYMBOL + '</strong><span class="rainrate"></span>');

                    if (settings['owm_name'] !== '' && settings['owm_name'] !== 0 && settings.hasOwnProperty('owm_name')) curfull.find('.weatherloc').html(settings['owm_name']);
                    else curfull.find('.weatherloc').html(location);
                }
            });
        });
    }
}

function loadWeatherFull(location, country) {
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
        if (settings['owm_cnt'] > 4) {
            var ColXs = 'col-xs-2';
        } else {
            var ColXs = 'col-xs-3';
        }
        var containsweatherfull = '' ;
        for (count = 0; count < settings['owm_cnt']; count++) {
            containsweatherfull += '<div class="' + ColXs + ' transbg"></div>';
        }
        $('div.containsweatherfull').html('<div class="weatherfull">' + containsweatherfull + '</div>');
		var site = 'http://api.openweathermap.org/data/2.5/forecast?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'] + '&lang=' + settings['owm_lang'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

		var html = '';
        $.getJSON(site, function (currentforecast) {
            $('.containsweatherfull').each(function () {
                var curfull = $(this);
                if (typeof(currentforecast.list) === 'undefined') {
                    curfull.remove();
                }
                else {
                    curfull.find(".weatherfull ." + ColXs).html('');
                    var start = 0;

                    if(typeof(settings['owm_days']) == 'undefined' || settings['owm_days'] == '' || settings['owm_days'] == 0) { //torov4
						for (var i = start; i < (start + settings['owm_cnt']); i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var wiclass = getIcon(curfor.weather[0].icon);
							var temp = curfor.main.temp;

							var rain = 0;
							if(typeof(curfor.rain) !== 'undefined'){
								if(typeof(curfor.rain['3h']) !== 'undefined' ){
									rain = curfor.rain['3h'];
								}
							}
							html = '<div class="day">' + date.format('HH')+':' +date.format('mm') + '<br />' + date.format(settings['weekday']) + '</div>';
							if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
							else html += getSkycon(curfor.weather[0].icon, 'skycon');
							html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><br /><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

							curfull.find('.weatherfull').each(function () {
							   $(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
							});
						}
					}
					else {
						var minTemp = [199,199,199,199,199];
						var tempTemp = 199;
						var x = -1;
						for (var i = 0; i < 39; i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var temp = curfor.main.temp;
							if (date.format('HH') == '00' || date.format('HH') == '01' || date.format('HH') == '02'){
								if (x> -1) minTemp[x] = tempTemp;
								tempTemp = 199;
							}
							if (temp < tempTemp) tempTemp = temp;
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14') x++;
						}
						if (minTemp[4] == 199) minTemp[4] = tempTemp;
						
						var i = 0;
						while (start < 41){
							curfor = currentforecast.list[start];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14'){
								var wiclass = getIcon(curfor.weather[0].icon);
								var temp = curfor.main.temp;
								var Wdescription = curfor.weather[0].description;
								var rain = 0;
								if(typeof(curfor.rain) !== 'undefined'){
									if(typeof(curfor.rain['3h']) !== 'undefined' ){
										rain = curfor.rain['3h'];
									}
								}
								html = '<div class="day">' + date.format(settings['weekday']) + '</div>';
								if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
								else html += getSkycon(curfor.weather[0].icon, 'skycon');
								html += '<div class="day">' + Wdescription + '</div><div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</div>';
								if (settings['owm_min'] === 1) html += '<div class="temp"><span class="nightT">' + Math.round(minTemp[i]) + _TEMP_SYMBOL + '</div>';
								
								curfull.find('.weatherfull').each(function () {
									$(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
								});
								i++;
							}
							start++;
						}
					}
                }
            });
        });
    }
}

function getSkycon(code, classname) {
    var random = getRandomInt(1, 100000);

    var icon = 'PARTLY_CLOUDY_DAY';
    var icons = {
		'01d': 'CLEAR_DAY',
		'01n': 'CLEAR_NIGHT',
		'02d': 'PARTLY_CLOUDY_DAY',
		'02n': 'PARTLY_CLOUDY_NIGHT',
		'03d': 'CLOUDY',
		'03n': 'CLOUDY',
		'04d': 'CLOUDY',
		'04n': 'CLOUDY',
		'09d': 'RAIN',
		'09n': 'RAIN',
		'10d': 'RAIN',
		'10n': 'RAIN',
		'11d': 'WIND',
		'11n': 'WIND',
		'13d': 'SNOW',
		'13n': 'SNOW',
		'50d': 'FOG',
		'50n': 'FOG',
    };
    if (icons.hasOwnProperty(code)) {
        icon = icons[code];
    }

    var skycon = '<script>';
    skycon += 'var skycons = new Skycons({"color": "white"});';
    skycon += 'skycons.add("icon' + random + '", Skycons.' + icon + ');';
    skycon += 'skycons.play();';
    skycon += '</script>';
    skycon += '<canvas class="' + classname + '" data-icon="' + icon + '" id="icon' + random + '"></canvas>';
    return skycon;
}

function getIcon(code) {
    var wiclass = 'wi-cloudy';

    var icons = {
		'01d': 'wi-day-sunny',
		'01n': 'wi-night-clear',
		'02d': 'wi-day-cloudy',
		'02n': 'wi-night-cloudy',
		'03d': 'wi-cloud',
		'03n': 'wi-cloud',
		'04d': 'wi-cloudy',
		'04n': 'wi-cloudy',
		'09d': 'wi-showers',
		'09n': 'wi-showers',
		'10d': 'wi-day-rain',
		'10n': 'wi-night-rain',
		'11d': 'wi-day-thunderstorm',
		'11n': 'wi-night-thunderstorm',
		'13d': 'wi-snow',
		'13n': 'wi-snow',
		'50d': 'wi-day-fog',
		'50n': 'wi-night-fog',
    };
    if (icons.hasOwnProperty(code)) {
        wiclass = icons[code];
    }
    return wiclass;
}

[Lokonli]

@HansieNL: You are right, that looks a lot better. So here's the complete code

Spoiler: show

Code: Select all

function loadWeather(location, country) {
    var html = '';
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var site = 'http://api.openweathermap.org/data/2.5/weather?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

        $.getJSON(site, function (weather) {
            $('.containsweather').each(function () {
                var curfull = $(this);
                if (typeof(weather.main) === 'undefined') {
                    curfull.remove();
                    currentweather = false;
                    curfull.find('.weather').html('<p style="font-size:10px; width:100px;">Location ERROR</p>');
                } else {
                    currentweather = weather.weather[0];
                    var wiclass = getIcon(weather.weather[0].icon);
                    var temp = weather.main.temp;

                    weatherIcon = '<i class="wi ' + wiclass + '"></i>';
                    if (settings['static_weathericons'] === 0) {
                        weatherIcon = getSkycon(weather.weather[0].icon, 'skycon');
                    }
                    html += '<h2><span>' + Math.round(temp) + _TEMP_SYMBOL + '</span> ' + weatherIcon + '</h2>';
                    curfull.find('.weather').html(weatherIcon);
                    curfull.find('.weatherdegrees').html('<strong>' + Math.round(temp) + _TEMP_SYMBOL + '</strong><span class="rainrate"></span>');

                    if (settings['owm_name'] !== '' && settings['owm_name'] !== 0 && settings.hasOwnProperty('owm_name')) curfull.find('.weatherloc').html(settings['owm_name']);
                    else curfull.find('.weatherloc').html(location);
                }
            });
        });
    }
}

function loadWeatherFull(location, country) {
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
        if (settings['owm_cnt'] > 4) {
            var ColXs = 'col-xs-2';
        } else {
            var ColXs = 'col-xs-3';
        }
        var containsweatherfull = '' ;
        for (count = 0; count < settings['owm_cnt']; count++) {
            containsweatherfull += '<div class="' + ColXs + ' transbg"></div>';
        }
        $('div.containsweatherfull').html('<div class="weatherfull">' + containsweatherfull + '</div>');
		var site = 'http://api.openweathermap.org/data/2.5/forecast?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'] + '&lang=' + settings['owm_lang'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

		var html = '';
        $.getJSON(site, function (currentforecast) {
            $('.containsweatherfull').each(function () {
                var curfull = $(this);
                if (typeof(currentforecast.list) === 'undefined') {
                    curfull.remove();
                }
                else {
                    curfull.find(".weatherfull ." + ColXs).html('');
                    var start = 0;

                    if(typeof(settings['owm_days']) == 'undefined' || settings['owm_days'] == '' || settings['owm_days'] == 0) { //torov4
						for (var i = start; i < (start + settings['owm_cnt']); i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var wiclass = getIcon(curfor.weather[0].icon);
							var temp = curfor.main.temp;

							var rain = 0;
							if(typeof(curfor.rain) !== 'undefined'){
								if(typeof(curfor.rain['3h']) !== 'undefined' ){
									rain = curfor.rain['3h'];
								}
							}
							html = '<div class="day">' + date.format('HH')+':' +date.format('mm') + '<br />' + date.format(settings['weekday']) + '</div>';
							if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
							else html += getSkycon(curfor.weather[0].icon, 'skycon');
							html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><br /><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

							curfull.find('.weatherfull').each(function () {
							   $(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
							});
						}
					}
					else {
						var minTemp = [199,199,199,199,199];
						var tempTemp = 199;
						var x = -1;
						for (var i = 0; i < 39; i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var temp = curfor.main.temp;
							if (date.format('HH') == '00' || date.format('HH') == '01' || date.format('HH') == '02'){
								if (x> -1) minTemp[x] = tempTemp;
								tempTemp = 199;
							}
							if (temp < tempTemp) tempTemp = temp;
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14') x++;
						}
						if (minTemp[4] == 199) minTemp[4] = tempTemp;
						
						var i = 0;
						while (start < 41){
							curfor = currentforecast.list[start];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14'){
								var wiclass = getIcon(curfor.weather[0].icon);
								var temp = curfor.main.temp;
								var Wdescription = curfor.weather[0].description;
								var rain = 0;
								if(typeof(curfor.rain) !== 'undefined'){
									if(typeof(curfor.rain['3h']) !== 'undefined' ){
										rain = curfor.rain['3h'];
									}
								}
								html = '<div class="day">' + date.format(settings['weekday']) + '</div>';
								if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
								else html += getSkycon(curfor.weather[0].icon, 'skycon');
								html += '<div class="day">' + Wdescription + '</div><div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</div>';
								if (settings['owm_min'] === 1) html += '<div class="temp"><span class="nightT">' + Math.round(minTemp[i]) + _TEMP_SYMBOL + '</div>';
								
								curfull.find('.weatherfull').each(function () {
									$(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
								});
								i++;
							}
							start++;
						}
					}
                }
            });
        });
    }
}

function getSkycon(code, classname) {
    var random = getRandomInt(1, 100000);

    var icon = 'PARTLY_CLOUDY_DAY';
    var icons = {
		'01d': 'CLEAR_DAY',
		'01n': 'CLEAR_NIGHT',
		'02d': 'PARTLY_CLOUDY_DAY',
		'02n': 'PARTLY_CLOUDY_NIGHT',
		'03d': 'CLOUDY',
		'03n': 'CLOUDY',
		'04d': 'CLOUDY',
		'04n': 'CLOUDY',
		'09d': 'RAIN',
		'09n': 'RAIN',
		'10d': 'RAIN',
		'10n': 'RAIN',
		'11d': 'WIND',
		'11n': 'WIND',
		'13d': 'SNOW',
		'13n': 'SNOW',
		'50d': 'FOG',
		'50n': 'FOG',
    };
    if (icons.hasOwnProperty(code)) {
        icon = icons[code];
    }

    var skycon = '<script>';
    skycon += 'var skycons = new Skycons({"color": "white"});';
    skycon += 'skycons.add("icon' + random + '", Skycons.' + icon + ');';
    skycon += 'skycons.play();';
    skycon += '</script>';
    skycon += '<canvas class="' + classname + '" data-icon="' + icon + '" id="icon' + random + '"></canvas>';
    return skycon;
}

function getIcon(code) {
    var wiclass = 'wi-cloudy';

    var icons = {
		'01d': 'wi-day-sunny',
		'01n': 'wi-night-clear',
		'02d': 'wi-day-cloudy',
		'02n': 'wi-night-cloudy',
		'03d': 'wi-cloud',
		'03n': 'wi-cloud',
		'04d': 'wi-cloudy',
		'04n': 'wi-cloudy',
		'09d': 'wi-showers',
		'09n': 'wi-showers',
		'10d': 'wi-day-rain',
		'10n': 'wi-night-rain',
		'11d': 'wi-day-thunderstorm',
		'11n': 'wi-night-thunderstorm',
		'13d': 'wi-snow',
		'13n': 'wi-snow',
		'50d': 'wi-day-fog',
		'50n': 'wi-night-fog',
    };
    if (icons.hasOwnProperty(code)) {
        wiclass = icons[code];
    }
    return wiclass;
}

I've made one change (line 114) to prevent an error. It's part of Beta 2.5.3 which has been released today. Can you test?

[toro]

I've made one change (line 114) to prevent an error. It's part of Beta 2.5.3 which has been released today. Can you test?

Thank you so much!
Updated to 2.5.3. So far so good, it's running fine.

I was also looking into why sometimes the forecast wasn't displayed.
As it turns out, from time to time OWM doesn't produce a 40 times list (8 x 3hour forecast x 5 days), but only 39.
So I guess that's where the code got confused and spend it's time looking where in the world number 40 was wandering about.

[HansieNL]

@toro : Day view is not displayed at this moment, but 3 hour forecast is. Is there a way to solve this problem?

[Snowtiger]

@toro : Day view is not displayed at this moment, but 3 hour forecast is. Is there a way to solve this problem?

I am having the same problem, could not get it work yesterday I am on the latest Dashticz_v2 beta

[toro]

@toro : Day view is not displayed at this moment, but 3 hour forecast is. Is there a way to solve this problem?

Yes, there is! This was driving me nuts to. I did some more testing en finaly figured it out.
I already found out that sometimes OWM returned 39 lines instead of 40. Yesterday, when the view was not displayed I tested the response of OWM. There were only 34 lines!
I made an improvement to the code. The script will now check for the number of lines and then fill the view with this amount of lines.
I've tested this today, it works great. Now, when there are only 34 lines returned by OWM, the view is displayed correctly for 4 days. The fifth (if you set it to 5 columns) is blank.

So, long story short, there is an UPDATE. See code below.
@Lokonli: Can you use this code in the next update?

For now, replace the content of weather_owm.js with this code.

Spoiler: show

Code: Select all

function loadWeather(location, country) {
    var html = '';
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var site = 'http://api.openweathermap.org/data/2.5/weather?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

        $.getJSON(site, function (weather) {
            $('.containsweather').each(function () {
                var curfull = $(this);
                if (typeof(weather.main) === 'undefined') {
                    curfull.remove();
                    currentweather = false;
                    curfull.find('.weather').html('<p style="font-size:10px; width:100px;">Location ERROR</p>');
                } else {
                    currentweather = weather.weather[0];
                    var wiclass = getIcon(weather.weather[0].icon);
                    var temp = weather.main.temp;

                    weatherIcon = '<i class="wi ' + wiclass + '"></i>';
                    if (settings['static_weathericons'] === 0) {
                        weatherIcon = getSkycon(weather.weather[0].icon, 'skycon');
                    }
                    html += '<h2><span>' + Math.round(temp) + _TEMP_SYMBOL + '</span> ' + weatherIcon + '</h2>';
                    curfull.find('.weather').html(weatherIcon);
                    curfull.find('.weatherdegrees').html('<strong>' + Math.round(temp) + _TEMP_SYMBOL + '</strong><span class="rainrate"></span>');

                    if (settings['owm_name'] !== '' && settings['owm_name'] !== 0 && settings.hasOwnProperty('owm_name')) curfull.find('.weatherloc').html(settings['owm_name']);
                    else curfull.find('.weatherloc').html(location);
                }
            });
        });
    }
}

function loadWeatherFull(location, country) {
    if (typeof(settings['owm_api']) !== 'undefined' && settings['owm_api'] !== '' && settings['owm_api'] !== 0) {
		var cntSetting = settings['owm_cnt'];
		if (cntSetting > 40) cntSetting = 40;
		if (cntSetting > 5 && settings['owm_days'] == 1) cntSetting = 5;
        if (cntSetting > 4) {
            var ColXs = 'col-xs-2';
        } else {
            var ColXs = 'col-xs-3';
        }
        var containsweatherfull = '' ;
        for (count = 0; count < cntSetting; count++) {
            containsweatherfull += '<div class="' + ColXs + ' transbg"></div>';
        }
        $('div.containsweatherfull').html('<div class="weatherfull">' + containsweatherfull + '</div>');
		var site = 'http://api.openweathermap.org/data/2.5/forecast?q=' + settings['owm_city'] + ',' + settings['owm_country'] + '&appid=' + settings['owm_api'] + '&lang=' + settings['owm_lang'];

        if (settings['use_fahrenheit'] === 1) {
            site += '&units=imperial';
        }
        else {
            site += '&units=metric';
        }

		var html = '';
        $.getJSON(site, function (currentforecast) {
            $('.containsweatherfull').each(function () {
                var curfull = $(this);
                if (typeof(currentforecast.list) === 'undefined') {
                    curfull.remove();
                }
                else {
                    curfull.find(".weatherfull ." + ColXs).html('');
                    var start = 0;

                    if(typeof(settings['owm_days']) == 'undefined' || settings['owm_days'] == '' || settings['owm_days'] == 0) { //torov5
						for (var i = start; i < (start + cntSetting); i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var wiclass = getIcon(curfor.weather[0].icon);
							var temp = curfor.main.temp;

							var rain = 0;
							if(typeof(curfor.rain) !== 'undefined'){
								if(typeof(curfor.rain['3h']) !== 'undefined' ){
									rain = curfor.rain['3h'];
								}
							}
							html = '<div class="day">' + date.format('HH')+':' +date.format('mm') + '<br />' + date.format(settings['weekday']) + '</div>';
							if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
							else html += getSkycon(curfor.weather[0].icon, 'skycon');
							html += '<div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</span><br /><span class="rain">' + (Math.round(rain*100)/100) + " mm" + '</span></div>';

							curfull.find('.weatherfull').each(function () {
							   $(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
							});
						}
					}
					else {
						var fcNumber = currentforecast.cnt;
						var minTemp = [199,199,199,199,199];
						var tempTemp = 199;
						var x = -1;
						for (var i = 0; i < fcNumber; i++) {
							curfor = currentforecast.list[i];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							var temp = curfor.main.temp;
							if (date.format('HH') == '00' || date.format('HH') == '01' || date.format('HH') == '02'){
								if (x> -1) minTemp[x] = tempTemp;
								tempTemp = 199;
							}
							if (temp < tempTemp) tempTemp = temp;
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14') x++;
						}
						if (minTemp[4] == 199) minTemp[4] = tempTemp;
						
						var i = 0;
						while (start < fcNumber){
							curfor = currentforecast.list[start];
							var date = moment.unix(curfor.dt).locale(settings['calendarlanguage']);
							if (date.format('HH') == '12' || date.format('HH') == '13' || date.format('HH') == '14'){
								var wiclass = getIcon(curfor.weather[0].icon);
								var temp = curfor.main.temp;
								var Wdescription = curfor.weather[0].description;
								var rain = 0;
								if(typeof(curfor.rain) !== 'undefined'){
									if(typeof(curfor.rain['3h']) !== 'undefined' ){
										rain = curfor.rain['3h'];
									}
								}
								html = '<div class="day">' + date.format(settings['weekday']) + '</div>';
								if (settings['static_weathericons'] === 1) html += '<div class="icon"><i class="wi ' + wiclass + '"></i></div>';
								else html += getSkycon(curfor.weather[0].icon, 'skycon');
								html += '<div class="day">' + Wdescription + '</div><div class="temp"><span class="av_temp">' + Math.round(temp) + _TEMP_SYMBOL + '</div>';
								if (settings['owm_min'] === 1) html += '<div class="temp"><span class="nightT">' + Math.round(minTemp[i]) + _TEMP_SYMBOL + '</div>';
								
								curfull.find('.weatherfull').each(function () {
									$(this).find('.'+ ColXs + ':eq(' + i + ')').html(html);
								});
								i++;
							}
							start++;
						}
					}
                }
            });
        });
    }
}

function getSkycon(code, classname) {
    var random = getRandomInt(1, 100000);

    var icon = 'PARTLY_CLOUDY_DAY';
    var icons = {
		'01d': 'CLEAR_DAY',
		'01n': 'CLEAR_NIGHT',
		'02d': 'PARTLY_CLOUDY_DAY',
		'02n': 'PARTLY_CLOUDY_NIGHT',
		'03d': 'CLOUDY',
		'03n': 'CLOUDY',
		'04d': 'CLOUDY',
		'04n': 'CLOUDY',
		'09d': 'RAIN',
		'09n': 'RAIN',
		'10d': 'RAIN',
		'10n': 'RAIN',
		'11d': 'WIND',
		'11n': 'WIND',
		'13d': 'SNOW',
		'13n': 'SNOW',
		'50d': 'FOG',
		'50n': 'FOG',
    };
    if (icons.hasOwnProperty(code)) {
        icon = icons[code];
    }

    var skycon = '<script>';
    skycon += 'var skycons = new Skycons({"color": "white"});';
    skycon += 'skycons.add("icon' + random + '", Skycons.' + icon + ');';
    skycon += 'skycons.play();';
    skycon += '</script>';
    skycon += '<canvas class="' + classname + '" data-icon="' + icon + '" id="icon' + random + '"></canvas>';
    return skycon;
}

function getIcon(code) {
    var wiclass = 'wi-cloudy';

    var icons = {
		'01d': 'wi-day-sunny',
		'01n': 'wi-night-clear',
		'02d': 'wi-day-cloudy',
		'02n': 'wi-night-cloudy',
		'03d': 'wi-cloud',
		'03n': 'wi-cloud',
		'04d': 'wi-cloudy',
		'04n': 'wi-cloudy',
		'09d': 'wi-showers',
		'09n': 'wi-showers',
		'10d': 'wi-day-rain',
		'10n': 'wi-night-rain',
		'11d': 'wi-day-thunderstorm',
		'11n': 'wi-night-thunderstorm',
		'13d': 'wi-snow',
		'13n': 'wi-snow',
		'50d': 'wi-day-fog',
		'50n': 'wi-night-fog',
    };
    if (icons.hasOwnProperty(code)) {
        wiclass = icons[code];
    }
    return wiclass;
}

[Lokonli]

@toro : Day view is not displayed at this moment, but 3 hour forecast is. Is there a way to solve this problem?

Yes, there is! This was driving me nuts to. I did some more testing en finaly figured it out.
I already found out that sometimes OWM returned 39 lines instead of 40. Yesterday, when the view was not displayed I tested the response of OWM. There were only 34 lines!
I made an improvement to the code. The script will now check for the number of lines and then fill the view with this amount of lines.
I've tested this today, it works great. Now, when there are only 34 lines returned by OWM, the view is displayed correctly for 4 days. The fifth (if you set it to 5 columns) is blank.

So, long story short, there is an UPDATE. See code below.
@Lokonli: Can you use this code in the next update?

For now, replace the content of weather_owm.js with this code.

I've created the PR. It will be merged into beta 2.5.4.

[jake]

Based on the weather description the individual forecast days may have a different height, by either using 1 or 2 lines (rain versus light snow for instance).
This has an impact on the blocks underneath the weather forecast. Depending on the 1st,2nd,3rd,4th day, it throws the blocks beneath down, or start a block after the day with double line text.

Long story short, it would be nice if the block height always takes 2 text lines into account for the weather description, whether used or not.

[jake]

Based on the weather description the individual forecast days may have a different height, by either using 1 or 2 lines (rain versus light snow for instance).
This has an impact on the blocks underneath the weather forecast. Depending on the 1st,2nd,3rd,4th day, it throws the blocks beneath down, or start a block after the day with double line text.

Long story short, it would be nice if the block height always takes 2 text lines into account for the weather description, whether used or not.

I now was able to take a screenshot of my tablet. Normally, when all 4 weather boxes have the same size, the 'woonkamer' block would start underneath 'zaterdag'. Since the forecast takes 2 lines for that sub block only, the temperature block starts below 'zondag'.
The result is that the garbage block ends up on the next line, ruining that whole column setup.
(woonkamer width =3, buiten width = 3 and garbage width = 6, making 12 to fill a column)

The bottom 3 blocks are not visible right now, but by halfway tomorrow they will, because then Saturday will be gone for the weather forecast and (hopefully) 4 sub blocks of equal height will remain.

Screenshot_2019-02-08-18-51-47.jpg (72.35 KiB) Viewed 1762 times