@sdetweil
I’m confused what you mean
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
Read the statement by Michael Teeuw here.
K
Offline
Latest posts made by kool
-
RE: How to add custom weather icons
@kool
Bumping this back up. Pleeeease help -
How to add custom weather icons
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 :(