Changing icons of the modules Current Weather and Weather Forecast

Vulcain · Jul 10, 2018, 8:01 AM

@solelo You have to create it, naviguate to css folder then execute “mkdir icon”, you’r done.

Kecko · Jul 15, 2018, 12:48 PM

@philreis said in Changing icons of the modules Current Weather and Weather Forecast:

I have add the other icons. But not all are properly positioned yet.
And a there is no icon for fog.
In the next few weeks I will position the icon correctly.
This solution is maybe not the best but it works!

Picture:

For this icons you need this icon package:
https://www.amcharts.com/free-animated-svg-weather-icons/

Copy the icon from the folder “animated” to the folder “MagicMirror/css/icons”

Then you have to add this code to your “custom.css” file.

/* Aenderungen Wetter Icon */
/* Aenderungen aktuelles Wetter */

.currentweather .weathericon {
  position: absolute;
  z-index: 0;
  height: 200px;
  right: 180px;
  margin-top: -65px;
}

.currentweather .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.currentweather .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.currentweather .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-clear {
content: url("/css/icons/night.svg");
}

.currentweather .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
padding-right: 15px;
padding-top: 10px;
}

.currentweather .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
}

.currentweather .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
}

/* Aenderungen Wettervorhersage */

.weatherforecast .weathericon {
  position: absolute;
  left: 35px;
  z-index: 1;
  margin-top: -30px;
  height: 60px;
}

.weatherforecast .wi-day-sunny {
content: url("/css/icons/day.svg");
padding-left: 6px;
padding-top: 5px;
height: 50px;
}

.weatherforecast .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.weatherforecast .wi-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-clear {
content: url("/css/icons/night.svg");
}

.weatherforecast .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
height: 45px;
padding-left: 8px;
padding-top: 7px;
}

.weatherforecast .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

As I said not completely finished.

hey man, thanks a lot! this makes things much easier.
TY for sharing your work :)

mmille40 · Sep 5, 2018, 4:44 PM

@philreis Thank you for taking the time to show your code! I copied and pasted your code exactly and made sure all of my folders holding the icons are in the right place. My “Current Weather” has the new icon, but for the life of me I cannot get the “Weather Forecast” to show the new icons. Was there another step to get it to work?

Smotx · Sep 5, 2018, 6:36 PM

@philreis Thanks for code !

PhilReis · Sep 5, 2018, 8:41 PM

@mmille40 you must copy the icons in the CSS folder (/css/icons/) and add the code to your custom.css only.
But it works only with the standard weatherforecast module.

Here is my current config for the custom icon.

/* Aenderungen Wetter Icon */
/* Aenderungen aktuelles Wetter */

.currentweather .weathericon {
  position: absolute;
  z-index: 0;
  height: 200px;
  right: 180px;
  margin-top: -65px;
}

.currentweather .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.currentweather .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.currentweather .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-clear {
content: url("/css/icons/night.svg");
}

.currentweather .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
padding-right: 15px;
padding-top: 10px;
}

.currentweather .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
}

.currentweather .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
padding-right: 20px;
padding-top: 10px;
}

/* Aenderungen Wettervorhersage */

.weatherforecast .weathericon {
  position: absolute;
  left: 35px;
  z-index: 1;
  margin-top: -30px;
  height: 60px;
}

.weatherforecast .wi-day-sunny {
content: url("/css/icons/day.svg");
padding-left: 6px;
padding-top: 5px;
height: 50px;
}

.weatherforecast .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
height: 45px;
padding-left: 8px;
padding-top: 10px;
}

.weatherforecast .wi-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-clear {
content: url("/css/icons/night.svg");
}

.weatherforecast .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
height: 45px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
height: 45px;
padding-left: 8px;
padding-top: 7px;
}

.weatherforecast .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

PhilReis · Sep 5, 2018, 8:28 PM

@smotx you’re welcome, no problem

mmille40 · Sep 5, 2018, 9:59 PM

@philreis I’ll try that out, I’m unsure what you mean by “you must copy the icons in the CSS folder”. Thank you for your response!

Tagriel · Oct 31, 2018, 5:09 PM

@philreis wow man it’s beautiful!!! I have a question for you, I’ve been wondering if instead of having an svg it could be done via js and css, like this project here:
https://codepen.io/anon/pen/JmQqOw

PhilReis · Nov 2, 2018, 2:23 PM

@tagriel i have used svg Icons because it was easier for me.
I can try to make a solution with the CSS Icons which you have linked here.

Tagriel · Nov 2, 2018, 2:23 PM

@philreis I’m wondering because my raspberry heat goes way up after displaying the new weather icons. I thought it might be bc of the svg files, does it happen to you? (are you using a raspberry?). I also wanted to share something with you, if I don’t have any modules, lets say, on my top_left screen, the current weather module only displays the degree without any icons, and if I add any other module to the top-left screen, then I can see the icons, its pretty strange :( do you happen to know what might be happening? I’ve been reading the code almost line by line trying to find if there is a table or div anywhere missing but I can’t seem to find anything.