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.

    New icons not showing up - default MM-Weather modules

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    7 Posts 3 Posters 1.4k Views 3 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.
    • B Offline
      Bill Burch
      last edited by

      Newbie here. I would like to add animated .svg weather icons to my default weather module configurations.

      I’ve loaded a test file (“day.svg”) into my /MagicMirror/css/icons folder and created the following instructions within my “custom.css” file located in my css folder.

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

      .currentweather .wi-day-sunny {
      content: url(“/css/icons/day.svg”);
      }

      My water module is correctly configured and showing the current weather and icons for my selected region ID. It’s currently sunny outside so I’d expect that my newly uploaded icon would show up in the current weather window. But it does not.

      What am I missing? Do I need to do anything to enable the custom.ccs file?

      As per another thread in the Forum about adding animated icons, I also added the following callouts in my “config.js” file:

      {
      module: “weather”,
      position: “top_right”,
      config: {
      weatherProvider: “openweathermap”,
      type: “current”,
      location: “Reno”,
      locationID: “5511077”, //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find yo>
      apiKey: “x1x1x1x1x1x1x”, //hidden
      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’
      }
      }
      },

      Any guidance is much appreciated.

      Bill

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @Bill Burch
        last edited by

        @Bill-Burch weather is done all in browser, so open the developers window ctrl-shift-i on the keyboard, use the console tab to look for error messages. use the elements tab to see the web content

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        B 2 Replies Last reply Reply Quote 0
        • B Offline
          Bill Burch @sdetweil
          last edited by

          @sdetweil Thanks, Sam. I’m struggling with how SLOW the Dev tool works on my Pi Zero W2. Scrolling is painfully slow and eventually causes the browser to hang/crash.

          Bill

          1 Reply Last reply Reply Quote 0
          • B Offline
            Bill Burch @sdetweil
            last edited by

            @sdetweil Thanks, Sam. One big issue I may be having is I’m trying to run MM on a Pi Zero 2W. Looks like I may be a bit underpowered for what I’m trying to do. Chromium hangs/crashes and the Dev tool is painfully slow with selecting and scrolling. I’ll try upgrading to a 4B with 2gb memory and see if that helps.

            Bill

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @Bill Burch
              last edited by

              @Bill-Burch my 2ws don’t have any issue running mm. have to make the swap space bigger tho

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              B 1 Reply Last reply Reply Quote 0
              • B Offline
                Bill Burch @sdetweil
                last edited by

                @sdetweil Good call on the swapfile. Bumped it up to 16GB (32GB card) and the browser and dev tools load and work as they should. Thanks.

                1 Reply Last reply Reply Quote 0
                • G Offline
                  greedyvegan
                  last edited by

                  I have a joke:

                  After HOURS of reading, research and testing,
                  I FINALLY got the weather icons to change,
                  THEN I spent hours trying to find out why I am missing an icon

                  missingicon.gif

                  the cloud icon is white.
                  the background is white.
                  so it’s “invisible”

                  I changed the size of the icon in the developer window and saw six icons and fixed my problem.
                  I bring this up to share a lesson, spend a little more time trying to figure it out.

                  1 Reply Last reply Reply Quote 0
                  • bugsounetB bugsounet referenced this topic on
                  • 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