MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    How to add custom weather icons

    Scheduled Pinned Locked Moved Development
    1 Posts 1 Posters 271 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kool
      last edited by

      Hi everyone, i have no clue what im doing…i dont know how to code or really how the rpi/magicmirror works but here i am. So basically im using the default weather module (as it works) and i just wanna replace those icons with custom icons. I also wanna note that im using openmeteo and not the default openweathermap or wtv its called because it didn’t work.

      here is my config.js file (the weather part):

          module: "weather",
    position: "top_right", // Adjust position as needed
locationName: "xxxx",
displayLocation: "xxxx",
header: "xxxx",
    config: {
locationName: "xxxx",
displayLocation: "xxxx",
header: "xxxx",
        weatherProvider: "openmeteo", // Specify the Open-Meteo provider
        apiBase: "https://api.open-meteo.com/v1", // REQUIRED: Base URL for Open-Meteo

       lat: xxxx, // REQUIRED: Latitude of the location
        lon: xxxx, // REQUIRED: Longitude of the location
        maxNumberOfDays: 8, // OPTIONAL: Number of forecast days (default is 5)
        pastDays: 0, // OPTIONAL: Number of past days of data to include (default is 0)
   units: "imperial", // Set this to 'imperial' for Fahrenheit and miles per hour
        tempUnits: "imperial", // Make sure to match with 'imperial'
        windUnits: "imperial",
        type: "current", // OPTIONAL: Change to "current" if only current weather data is desired
iconTable: {
					'0': 'wi-day-sunny',         // Clear sky
					'1': 'wi-day-cloudy',        // Mainly clear
					'2': 'wi-cloudy',            // Partly cloudy
					'3': 'wi-cloudy',            // Overcast
					'45': 'wi-fog',              // Fog
					'48': 'wi-fog',              // Depositing rime fog
					'51': 'wi-showers',          // Drizzle: Light intensity
					'53': 'wi-showers',          // Drizzle: Moderate intensity
					'55': 'wi-showers',          // Drizzle: Dense intensity
					'56': 'wi-sleet',            // Freezing drizzle: Light intensity
					'57': 'wi-sleet',            // Freezing drizzle: Dense intensity
					'61': 'wi-rain',             // Rain: Slight
					'63': 'wi-rain',             // Rain: Moderate
					'65': 'wi-rain',             // Rain: Heavy intensity
					'66': 'wi-sleet',            // Freezing rain: Light intensity
					'67': 'wi-sleet',            // Freezing rain: Heavy intensity
					'71': 'wi-snow',             // Snow fall: Slight
					'73': 'wi-snow',             // Snow fall: Moderate
					'75': 'wi-snow',             // Snow fall: Heavy intensity
					'77': 'wi-snow',             // Snow grains
					'80': 'wi-showers',          // Rain showers: Slight
					'81': 'wi-rain',             // Rain showers: Moderate
					'82': 'wi-rain',             // Rain showers: Violent
					'85': 'wi-snow',             // Snow showers: Slight
					'86': 'wi-snow',             // Snow showers: Heavy
					'95': 'wi-thunderstorm',     // Thunderstorm: Slight or moderate
					'96': 'wi-thunderstorm',     // Thunderstorm with slight hail
					'99': 'wi-thunderstorm'      // Thunderstorm with heavy hail
				}
 
    }
},

{
    module: "weather",
    position: "top_right", // Adjust position as needed
locationName: "xxxx",
displayLocation: "xxxx",
header: "xxxx",
    config: {
locationName: "xxxx",
displayLocation: "xxxx",
header: "xxxx",
        weatherProvider: "openmeteo", // Specify the Open-Meteo provider
        apiBase: "https://api.open-meteo.com/v1", // REQUIRED: Base URL for Open-Meteo

       lat: xxxx, // REQUIRED: Latitude of the location
        lon: xxxx, // REQUIRED: Longitude of the location
        maxNumberOfDays: 8, // OPTIONAL: Number of forecast days (default is 5)
        pastDays: 0, // OPTIONAL: Number of past days of data to include (default is 0)
   units: "imperial", // Set this to 'imperial' for Fahrenheit and miles per hour
        tempUnits: "imperial", // Make sure to match with 'imperial'
        windUnits: "imperial",
        type: "forecast", // OPTIONAL: Change to "current" if only current weather data is desired
iconTable: {
					'0': 'wi-day-sunny',         // Clear sky
					'1': 'wi-day-cloudy',        // Mainly clear
					'2': 'wi-cloudy',            // Partly cloudy
					'3': 'wi-cloudy',            // Overcast
					'45': 'wi-fog',              // Fog
					'48': 'wi-fog',              // Depositing rime fog
					'51': 'wi-showers',          // Drizzle: Light intensity
					'53': 'wi-showers',          // Drizzle: Moderate intensity
					'55': 'wi-showers',          // Drizzle: Dense intensity
					'56': 'wi-sleet',            // Freezing drizzle: Light intensity
					'57': 'wi-sleet',            // Freezing drizzle: Dense intensity
					'61': 'wi-rain',             // Rain: Slight
					'63': 'wi-rain',             // Rain: Moderate
					'65': 'wi-rain',             // Rain: Heavy intensity
					'66': 'wi-sleet',            // Freezing rain: Light intensity
					'67': 'wi-sleet',            // Freezing rain: Heavy intensity
					'71': 'wi-snow',             // Snow fall: Slight
					'73': 'wi-snow',             // Snow fall: Moderate
					'75': 'wi-snow',             // Snow fall: Heavy intensity
					'77': 'wi-snow',             // Snow grains
					'80': 'wi-showers',          // Rain showers: Slight
					'81': 'wi-rain',             // Rain showers: Moderate
					'82': 'wi-rain',             // Rain showers: Violent
					'85': 'wi-snow',             // Snow showers: Slight
					'86': 'wi-snow',             // Snow showers: Heavy
					'95': 'wi-thunderstorm',     // Thunderstorm: Slight or moderate
					'96': 'wi-thunderstorm',     // Thunderstorm with slight hail
					'99': 'wi-thunderstorm'      // Thunderstorm with heavy hail
				}
 
    }
},

      sorry if that looks bad…also note that i got that table from this reddit post (the second image in the post): https://www.reddit.com/r/filemaker/comments/14yrpb9/openmeteo_weather_api_integration_free_icons_free/

      here is my custom.css file:

      /*!
*  Weather Icons 2.0.8
*  Updated September 19, 2015
*  Weather themed icons for Bootstrap
*  Author - Erik Flowers - erik@helloerik.com
*  Email: erik@helloerik.com
*  Twitter: http://twitter.com/Erik_UX
*  ------------------------------------------------------------------------------
*  Maintained at http://erikflowers.github.io/weather-icons
*
*  License
*  ------------------------------------------------------------------------------
*  - Font licensed under SIL OFL 1.1 -
*    http://scripts.sil.org/OFL
*  - CSS, SCSS and LESS are licensed under MIT License -
*    http://opensource.org/licenses/mit-license.html
*  - Documentation licensed under CC BY 3.0 -
*    http://creativecommons.org/licenses/by/3.0/
*  - Inspired by and works great as a companion with Font Awesome
*    "Font Awesome by Dave Gandy - http://fontawesome.io"
*/
@font-face {
 font-family: 'weathericons';
 src: url('../font/weathericons-regular-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
.wi {
 display: inline-block;
 font-family: 'weathericons';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.wi-fw {
 text-align: center;
 width: 1.4em;
}
.wi-rotate-90 {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 -webkit-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);
}
.wi-rotate-180 {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
}
.wi-rotate-270 {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 -webkit-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 transform: rotate(270deg);
}
.wi-flip-horizontal {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
 -webkit-transform: scale(-1, 1);
 -ms-transform: scale(-1, 1);
 transform: scale(-1, 1);
}
.wi-flip-vertical {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
 -webkit-transform: scale(1, -1);
 -ms-transform: scale(1, -1);
 transform: scale(1, -1);
}



/* Current Weather Icons */
.currentweather .wi-day-sunny {
 content: url("/home/kool/MagicMirror/css/icons/6fa/day.svg") !important;

}

.currentweather .wi-night-clear {
 content: url("/home/kool/MagicMirror/css/icons/6fa/night.svg") !important;

}

.currentweather .wi-cloudy {
 content: url("/home/kool/MagicMirror/css/icons/6fa/cloudy.svg") !important;

}

.currentweather .wi-fog {
 content: url("/home/kool/MagicMirror/css/icons/6fa/fog.svg") !important;
 
}

.currentweather .wi-rain {
 content: url("/home/kool/MagicMirror/css/icons/6fa/rain.svg") !important;

}

/* Add more current weather icons as needed */

/* Weather Forecast Icons */

}

.weatherforecast .wi-day-sunny {
 content: url("/home/kool/MagicMirror/css/icons/6fas/day.svg") !important;

}

.weatherforecast .wi-night-clear {
 content: url("/home/kool/MagicMirror/css/icons/6fa/night.svg") !important;

}

.weatherforecast .wi-cloudy {
 content: url("/home/kool/MagicMirror/css/icons/6fa/cloudy.svg") !important;

}

.weatherforecast .wi-fog {
 content: url("/home/kool/MagicMirror/css/icons/6fa/fog.svg") !important;

}

.weatherforecast .wi-rain {
 content: url("/home/kool/MagicMirror/css/icons/6fa/rain.svg") !important;

}



/* Hide Humidity */
.humidity {
 display: none !important;
}

      I got the icons from this other weather module (but that module didn’t work as openweathermap is like glitchy or something)… weather module link: https://github.com/MarcLandis/MMM-OpenWeatherMapForecast
      when i try to load the magic mirror, i see the numbers - like whats the weather and stuff, but i keep getting the default weather icons.
      basically my idea was to override the default weather icons with some custom weather icons that i found but its not exactly working
      any help would be greatly appreciated plz help me :(

      1 Reply Last reply Reply Quote 0
      • 1 / 1
      • First post
        Last post
      Enjoying MagicMirror? Please consider a donation!
      MagicMirror created by Michael Teeuw.
      Forum managed by Sam, technical setup by Karsten.
      This forum is using NodeBB as its core | Contributors
      Contact | Privacy Policy