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.

    MMM-DarkSkyForecast - Yet ANOTHER weather module

    Scheduled Pinned Locked Moved Utilities
    334 Posts 67 Posters 745.3k Views 74 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.
    • BKeyportB Offline
      BKeyport Module Developer
      last edited by

      It’s showing for me, @j-e-f-f

      The "E" in "Javascript" stands for "Easy"

      1 Reply Last reply Reply Quote 0
      • J Offline
        j.e.f.f Project Sponsor Module Developer @Smotx
        last edited by

        @smotx Yeah coming through for me now too. Weird.

        OK from the top down:

        • The first two regions are actually spacing that accommodates the icon when it appears (It’s currently not appearing due to a bug I fixed today. Do a git pull to update the module and restart MM. You’ll see once the icon is in place, that the vertical space is better used. Keep in mind that the icons are square, and some of them only use a portion of the square. Nonetheless the square still takes up that amount of space. Here’s what it should look like:

        0_1544566139465_Screen Shot 2018-12-11 at 10.08.31 PM.png

        You can decrease the space under the header a bit with this:

        .MMM-DarkSkyForecast .module-header {
          margin-bottom: 5px; /* adjust to taste */
        }
        

        Keep in mind this will also affect the header above the forecast if you have configured it to be there. That can be controlled independently as follows:

        .MMM-DarkSkyForecast .module-header.forecast-header {
          margin-bottom: 10px; /* adjust to taste */
        }
        
        * the next one below the extra current conditions is margin above the summary.  Adjust it as follows:
        
        

        .MMM-DarkSkyForecast .summary {
        margin-top: 10px; /* adjust to taste */
        }

        
        You can also affect the margin underneath the summary in a similar way:
        
        

        .MMM-DarkSkyForecast .summary {
        margin-bottom: 10px; /* adjust to taste */
        }

        
        
        * The following four below are controlled by the line-height of the time and day displays:
        
        

        .MMM-DarkSkyForecast .wrapper.tiled .forecast-container .forecast-item .time,
        .MMM-DarkSkyForecast .wrapper.tiled .forecast-container .forecast-item .day-name {
        line-height: 20px; /* adjust to taste */
        }

        
        Put all of the CSS changes in your `custom.css` file.  Don't make changes to `MMM-DarkSkyForecast.css` as they will be overwritten if you update the module to a newer version.
        S 1 Reply Last reply Reply Quote 0
        • S Offline
          Smotx @j.e.f.f
          last edited by

          @j-e-f-f

          Thx a lot

          it’s good now, it remains 2 spaces a little wide, but it does not exceed more on the next module, thank you again.

          J 1 Reply Last reply Reply Quote 0
          • D Offline
            dan-o
            last edited by

            @j-e-f-f came home to see the icon working, which was strange. anyway, grabbed your recent update and it works great. thank you SO MUCH for your time on this :)

            D 1 Reply Last reply Reply Quote 0
            • D Offline
              dan-o @dan-o
              last edited by

              @dan-o said in MMM-DarkSkyForecast - Yet ANOTHER weather module:

              @j-e-f-f came home to see the icon working, which was strange. anyway, grabbed your recent update and it works great. thank you SO MUCH for your time on this :)

              Looks like I spoke too soon :(. Was working after a restart. Walked by the mirror just now and no icon present.

              J 2 Replies Last reply Reply Quote 0
              • J Offline
                j.e.f.f Project Sponsor Module Developer @Smotx
                last edited by

                @smotx you can control the width of the module in CSS. It defaults to 300px, but if you need it wider or narrower you can use this:

                .MMM-DarkSkyForecast .module-content {
                  width: 250px; /* adjust this to taste */
                }
                
                1 Reply Last reply Reply Quote 0
                • J Offline
                  j.e.f.f Project Sponsor Module Developer @dan-o
                  last edited by

                  @dan-o hmmm… will look into this some more. For now, if you disable the animated icons you will at least get the static one reliably.

                  1 Reply Last reply Reply Quote 0
                  • J Offline
                    j.e.f.f Project Sponsor Module Developer
                    last edited by

                    I left this running on my mirror overnight and my main icon disappeared at some point as well, but it was back this morning. I have a few theories as to why.

                    The way the animated icons work is that they get drawn real-time by JavaScript, which means I need to wait until the DOM update is finished before executing the draw command. I thought I had licked that with my last update but the combination of the Nunjucks templating system seems to be adding a latency I’m not accounting for.

                    Will continue working on this over the next couple of days. Turn off animated icons for now as a work around.

                    1 Reply Last reply Reply Quote 0
                    • A Offline
                      Arjan Project Sponsor
                      last edited by Arjan

                      Is it possible to disable the main icon via the config?
                      I’m running two configs of MMM-DarkSlyForecast next to each other. One with 9 hour forecast and the other one with 6 day forecast.
                      Because of this I have 2 main icons that are the same. See picture below.

                      Is it possible to disable one of them via the config?

                      0_1544721189173_43b4ccd5-eb05-46ce-8246-680aaf875837-image.png

                      J 1 Reply Last reply Reply Quote 0
                      • J Offline
                        j.e.f.f Project Sponsor Module Developer @Arjan
                        last edited by

                        @arjan yes. Here are a few config options for you:

                        showCurrentConditions: false will turn off the main icon and the current temparature display (the two big items).
                        showExtraCurrentConditions: false will turn off the the additional current conditions immediately below the big icon and temperature.

                        This module is programmed it with this type of usage in mind, so it supports multiple instances to work independently. I do something similar on my kitchen display centre.

                        A 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 33
                        • 34
                        • 2 / 34
                        • 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