MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Changing icons of the modules Current Weather and Weather Forecast



  • @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:

    0_1531077724549_Mirror.JPG

    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.

    Hello anyone, if i have a icon packs named sun.mov, rain.mov, etc, can i put the pack in /css/icons and use the same code but changing the url (and maybe padding)?
    from content: url("/css/icons/day.svg"), to content: url("/css/icons/sun.mov"); or i need something else?
    i don’t know how coding 😅


  • Project Sponsor Module Developer

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

    My CPU goes through the roof when I tried these animated icons last night. Anyone else seeing high CPU usage with them ?

    I added the ability to use animated icons in my weather module, and I, too, notice very high CPU usage, even though the animation code is purported to not be demanding of resources. I’m going to guess that SVG / Canvas animation on Electron running or on a Raspberry Pi (or both!) is not optimised to be as efficient as it could be.

    If I have many icons animated at the same time and if I leave it running for days, eventually MM will freeze. CPU temp and usage goes up significantly until that happens.



  • This post is deleted!

  • Project Sponsor

    @aecandroid - Please check out this guide on how to use the markdown features of the forum. Then go back and properly block out your config.js file. That will make debugging your code much easier.


  • Project Sponsor Module Developer



  • @bhepler @Mykle1 My apologies. It was late last night and when I posted the code I saw it had created a block and I didn’t look at it closely. I have properly blocked out my config.js file below. Your help is greatly appreciated.

    /* Magic Mirror Config Sample
     *
     * By Michael Teeuw http://michaelteeuw.nl
     * MIT Licensed.
     *
     * For more information how you can configurate this file
     * See https://github.com/MichMich/MagicMirror#configuration
     *
     */
    
    var config = {
    	address: "localhost", // Address to listen on, can be:
    	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
    	                      // - another specific IPv4/6 to listen on a specific interface
    	                      // - "", "0.0.0.0", "::" to listen on any interface
    	                      // Default, when address config is left out, is "localhost"
    	port: 8080,
    	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
    	                                                       // or add a specific IPv4 of 192.168.1.5 :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
    	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
    
    	language: "en",
    	timeFormat: 24,
    	units: "metric",
    
    	modules: [
    		{
    			module: "alert",
    		},
    		{
    			module: "updatenotification",
    			position: "top_bar"
    		},
    		{
    			module: "clock",
    			position: "top_left"
    		},
    		{
    			module: "calendar",
    			header: "UK Holidays",
    			position: "top_left",
    			config: {
    				calendars: [
    					{
    						symbol: "calendar-check-o ",
    						url: "webcal://calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
    					}
    				]
    			}
    		},
    		 {
    			       module: 'MMM-TFL',
    			       position: 'bottom_right',    // This can be any of the regions but works best on either side of the display
    			       config: {
    				               updateTime: 600000,
    				               modes: ['tube', 'overground', 'national-rail'],
    				               lines: ['c2c', 'bakerloo', 'central', 'district', 'hammersmith-city', 'jubilee', 'metropolitan', 'northern', 'piccadilly', 'victoria', 'waterloo-city'],
    				             }
    			     },
    		{	
    			units: "imperial",
    			module: "currentweather",
    			position: "top_right",
    			config: {
    				location: "London",
    				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
    				appid: "xxx"
    				iconTable: {
        					'01d': 'wi-day-sunny',
        					'02d': 'wi-day-cloudy',
        					'03d': 'wi-cloudy',
        					'04d': 'wi-cloudy-windy',
        					'09d': 'wi-showers',
        					'10d': 'wi-rain',
        					'11d': 'wi-thunderstorm',
        					'13d': 'wi-snow',
        					'50d': 'wi-fog',
        					'01n': 'wi-night',
        					'02n': 'wi-night-cloudy',
        					'03n': 'wi-night-cloudy',
        					'04n': 'wi-night-cloudy',
        					'09n': 'wi-night-showers',
        					'10n': 'wi-night-rain',
        					'11n': 'wi-night-thunderstorm',
        					'13n': 'wi-night-snow',
        					'50n': 'wi-night-alt-cloudy-windy'
    				}
    				
    		}
    		},
    		{
    			units: "imperial",
    			module: "weatherforecast",
    			position: "top_right",
    			header: "Weather Forecast",
    			config: {
    				location: "London",
    				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
    				appid: "xxx"
    			}
    		},
    		{
    					module: 		'MMM-UKNationalRail',
    					position: 		'bottom_left',
    					header:			'Departures',		//Optional - delete this line to turn OFF the header completely
    					config: {
    									stationCode: 		'xxx', 		// CRS code for station
    									app_id: 			'xxx', 		// TransportAPI App ID
    									app_key: 			'xxx', 		// TransportAPI App Key
    									maxResults: 		5,  		//Optional - Maximum results to display.
    									showOrigin: 		false   	//Optional - Show the origin of the train in the table
    								}
    				},
    	]
    
    };
    
    /*************** DO NOT EDIT THE LINE BELOW ***************/
    if (typeof module !== "undefined") {module.exports = config;}
    
    

  • Module Developer

    @j-e-f-f I also tried out your module for the weather. Looks neat! I also noticed that any animated image in any MM module spikes the CPU. I tried my best at looking at the Electron github project to see if there were any open or closed issues on it. I did not find much. I even tried upgrading my Electron to the latest stable version and that did not help much either.



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

    @bhepler @Mykle1 My apologies. It was late last night and when I posted the code I saw it had created a block and I didn’t look at it closely. I have properly blocked out my config.js file below. Your help is greatly appreciated.

    /* Magic Mirror Config Sample
     *
     * By Michael Teeuw http://michaelteeuw.nl
     * MIT Licensed.
     *
     * For more information how you can configurate this file
     * See https://github.com/MichMich/MagicMirror#configuration
     *
     */
    
    var config = {
    	address: "localhost", // Address to listen on, can be:
    	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
    	                      // - another specific IPv4/6 to listen on a specific interface
    	                      // - "", "0.0.0.0", "::" to listen on any interface
    	                      // Default, when address config is left out, is "localhost"
    	port: 8080,
    	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
    	                                                       // or add a specific IPv4 of 192.168.1.5 :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
    	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
    
    	language: "en",
    	timeFormat: 24,
    	units: "metric",
    
    	modules: [
    		{
    			module: "alert",
    		},
    		{
    			module: "updatenotification",
    			position: "top_bar"
    		},
    		{
    			module: "clock",
    			position: "top_left"
    		},
    		{
    			module: "calendar",
    			header: "UK Holidays",
    			position: "top_left",
    			config: {
    				calendars: [
    					{
    						symbol: "calendar-check-o ",
    						url: "webcal://calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
    					}
    				]
    			}
    		},
    		 {
    			       module: 'MMM-TFL',
    			       position: 'bottom_right',    // This can be any of the regions but works best on either side of the display
    			       config: {
    				               updateTime: 600000,
    				               modes: ['tube', 'overground', 'national-rail'],
    				               lines: ['c2c', 'bakerloo', 'central', 'district', 'hammersmith-city', 'jubilee', 'metropolitan', 'northern', 'piccadilly', 'victoria', 'waterloo-city'],
    				             }
    			     },
    		{	
    			units: "imperial",
    			module: "currentweather",
    			position: "top_right",
    			config: {
    				location: "London",
    				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
    				appid: "xxx"
    				iconTable: {
        					'01d': 'wi-day-sunny',
        					'02d': 'wi-day-cloudy',
        					'03d': 'wi-cloudy',
        					'04d': 'wi-cloudy-windy',
        					'09d': 'wi-showers',
        					'10d': 'wi-rain',
        					'11d': 'wi-thunderstorm',
        					'13d': 'wi-snow',
        					'50d': 'wi-fog',
        					'01n': 'wi-night',
        					'02n': 'wi-night-cloudy',
        					'03n': 'wi-night-cloudy',
        					'04n': 'wi-night-cloudy',
        					'09n': 'wi-night-showers',
        					'10n': 'wi-night-rain',
        					'11n': 'wi-night-thunderstorm',
        					'13n': 'wi-night-snow',
        					'50n': 'wi-night-alt-cloudy-windy'
    				}
    				
    		}
    		},
    		{
    			units: "imperial",
    			module: "weatherforecast",
    			position: "top_right",
    			header: "Weather Forecast",
    			config: {
    				location: "London",
    				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
    				appid: "xxx"
    			}
    		},
    		{
    					module: 		'MMM-UKNationalRail',
    					position: 		'bottom_left',
    					header:			'Departures',		//Optional - delete this line to turn OFF the header completely
    					config: {
    									stationCode: 		'xxx', 		// CRS code for station
    									app_id: 			'xxx', 		// TransportAPI App ID
    									app_key: 			'xxx', 		// TransportAPI App Key
    									maxResults: 		5,  		//Optional - Maximum results to display.
    									showOrigin: 		false   	//Optional - Show the origin of the train in the table
    								}
    				},
    	]
    
    };
    
    /*************** DO NOT EDIT THE LINE BELOW ***************/
    if (typeof module !== "undefined") {module.exports = config;}
    
    

    I certainly would appreciate anyone’s help on this one.


  • Project Sponsor

    @aecandroid - I’m not seeing anything obviously incorrect with your config. What behavior are you seeing that you wish to fix? Are you getting the module to display at all? Are you getting any modules to display at all? Are you just not getting the icons that you wish?


  • Moderator

    You are missing a comma in line appid for currentweather module

    				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
    				appid: "xxx",
    				iconTable: {
    

Log in to reply