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 :(
