• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Changing icons of the modules Current Weather and Weather Forecast

Scheduled Pinned Locked Moved Development
301 Posts 30 Posters 1.1m Views 33 Watching
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.
  • P Offline
    PhilReis @Tagriel
    last edited by Nov 1, 2018, 10:38 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.

    T 1 Reply Last reply Nov 2, 2018, 2:23 PM Reply Quote 0
    • T Offline
      Tagriel @PhilReis
      last edited by 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.

      P 1 Reply Last reply Nov 5, 2018, 4:16 PM Reply Quote 0
      • P Offline
        PhilReis @Tagriel
        last edited by Nov 5, 2018, 4:16 PM

        @tagriel i will test it.

        1 Reply Last reply Reply Quote 0
        • T Offline
          Tagriel
          last edited by Nov 5, 2018, 9:24 PM

          Thanks man! I’ve also got a question for you, it’s breaking my head, I’ve given a lot of days of debugging and searching what might be happening but I don’t find an answer.

          If I have my currentweather module on top_left alone, there’s no weather icon
          0_1541452997075_Captura de pantalla 2018-11-05 a las 22.20.25.png

          BUT if I put any other module on top_left below my current weather module, I can see the icon :'(
          0_1541453036867_Captura de pantalla 2018-11-05 a las 22.19.38.png

          I just don’t understand what I’m doing wrong, do you have any ideas?

          Thanks in advance!

          1 Reply Last reply Reply Quote 0
          • T Offline
            Tagriel
            last edited by Nov 10, 2018, 8:58 AM

            Hi all,

            I just found the issue. Just check there’s height and width on your custom.css

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

            1 Reply Last reply Reply Quote 0
            • H Offline
              homerj99
              last edited by homerj99 Nov 15, 2018, 3:31 PM Nov 15, 2018, 1:54 PM

              looks great, thanks so much

              1 Reply Last reply Reply Quote 0
              • S Offline
                schwoediauer @Vulcain
                last edited by Dec 23, 2018, 10:55 AM

                @vulcain

                best solution for my Icons - good job!

                1 Reply Last reply Reply Quote 0
                • F Offline
                  Fa @Vulcain
                  last edited by Feb 27, 2019, 8:49 AM

                  @vulcain can you copy/paste your custom.css in full please , it would help me
                  thanks

                  1 Reply Last reply Reply Quote 0
                  • V Offline
                    vinp Module Developer
                    last edited by Feb 28, 2019, 4:59 PM

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

                    J 1 Reply Last reply Mar 4, 2019, 4:37 PM Reply Quote 0
                    • S Offline
                      santiago5 @PhilReis
                      last edited by santiago5 Mar 4, 2019, 3:14 PM Mar 4, 2019, 3:13 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:

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

                      T P 2 Replies Last reply Nov 21, 2019, 1:13 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 30
                      • 31
                      • 4 / 31
                      • 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