MMM-DarkSkyForecast - Yet ANOTHER weather module

[Smotx]

@j-e-f-f

I want to reduce free space identified by “red areas” on this screen :

[j.e.f.f]

@smotx screenshot didn’t come through. You don’t need to host the image on Imagur. You can upload it directly when editing your post. Just drag it in, or hit the cloud/upload icon.

[BKeyport]

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

[j.e.f.f]

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

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.

[Smotx]

@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.

[dan-o]

@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 :)

[dan-o]

@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.e.f.f]

@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 */
}

[j.e.f.f]

@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.

[j.e.f.f]

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.