MMM-DarkSkyForecast - Yet ANOTHER weather module

[onkelbobby]

I implemented this fantastic Modus and it integrates almost seamlessly into our existing mirror layout. To make it perfect I need to reduce the gap between the time and the icon as wells between the day and the icon (yellow arrows). and also between the individual block’s (arrows in red)

I know that I have to modify the .css file can someone give me a hint what would be the correct values to be changed?
Thanks

[Cr4z33]

@chris1971 maybe the API key has expired or has been blacklisted?

I had this issue 1 month ago and using another API key solved the issue. :)

[mielu80]

@j-e-f-f

I’ve just tried with your config and I can’t duplicate this problem. That said, when I inspect that part of the screen with the dev tools, it looks like there is an extra character there, but in my case it just appears as white space. But there’s nothing I can see in the markup where this is…

Hello j.e.f.f,

Thank you for your update about this issue.
I did try another thing:
-I’ve commented out my whole config for DarkSkyForecast module
-copied the default config from module’s github and pasted it my config file from MM
-restarted MM
Unfortunately the result is the same,still had that odd character even with the default config for this module.

Thank you very much for your effort.

[chris1971]

@Cr4z33 - Thx - I tried a new API and the module is running. Does anybody know how to minimize the font size in the module. Especially in the tiled view?

[onkelbobby]

Minimizing to font size should not be a big thing. If you open the module specific css file you an search for font and play with the values in that section. Note that you need to restart MM after saving the modified css file.

[chris1971]

how can I delete the 2 lines in the forecast?

[surger13]

@chris1971

concise: true,

Hello, Chris,
you can set concise: true. Then wind direction and speed are gone. Unfortunately also with the current weather.

My wish would also be that wind direction and wind speed can only be displayed for the current weather. Does anyone know a solution for this?

Greetings

[chris1971]

The crazy situation is, that I have done it before… after a crash I had to config the system again, but I do not know how I have done this in the past. My backup didn’t work and the file was corrupt… :-(

This is the design I would like to have again.
Hope that an expert can support…

[surger13]

I hope so, too. Just like on your picture I would configure it for myself.

[onkelbobby]

@chris1971
if you just wanna remove the wind in the forecast tile try to add that line in MMM_DarkSkyForecast.css

.MMM-DarkSkyForecast .wrapper.tiled .forecast-container .forecast-item .wind-container{
  display: none;
} 

of course it makes sense to remove the existing line before
hope this helps

[evil_gusgus]

@j-e-f-f

Hey there, I’ve also run into this issue. Not sure if anyone has made any progress on it?

[sdetweil]

@j-e-f-f this looks like a null character before some translation…

I think it is caused by this line of code in MMM-DarkSkyForecast.js

        animatedIconId: this.config.useAnimatedIcons ? this.getAnimatedIconId() : null,

and I think the template check has failed

          {% if forecast.currently.animatedIconId %}

[pugsly]

Trying to find out how to remove this spacing circled in RED.

[mydiva]

Hi all, why my day forecast jambs to the hourly forecast? This happens not always just rendemly? image url)

[lavolp3]

@pugsly You can check out the css of the part using the developer’s tools of your browser.
The css properties can then be switched on and off and with that you can find out what is responsible for the space.

I would guess your module has become broader due to another module. The forecast part, however, seems to have a fixed width and is aligned left. Then you get an empty space on the right.

[lavolp3]

@mydiva The width of your module seems to have become so big that the daily forecast slips into hourly line. I would suggest to set a fixed width for this part or control the width of the other module influencing this.

[j.e.f.f]

@mydiva said in MMM-DarkSkyForecast - Yet ANOTHER weather module:

Hi all, why my day forecast jambs to the hourly forecast? This happens not always just rendemly?

By default, my module does not force a size for the tiles in this view, as I can’t guess how many columns you’ll have if you’ve adjusted the size of your main layout columns. It should be three columns on a default magic mirror installation, but the actual forecast information might cause the tiles to grow or shrink.

You can fix this in your custom.css file. Try this:

.MMM-DarkSkyForecast .forecast-item {
  width: 33%; /* for a three column layout */
}

Adjust as desired. For a four-column layout, specify 25% (You may need to also increase the size of the main container (e.g.: top_left) to get it all to fit. For a two-column layout, use 50%.

I might add a specific configuration to handle this in the future so that you don’t need to write CSS to address this.

[j.e.f.f]

@pugsly said in MMM-DarkSkyForecast - Yet ANOTHER weather module:

Trying to find out how to remove this spacing circled in RED.

By default my module forces a fixed width of 300px. It looks like your parent column (i.e.: top_right) is either explicitly set to be larger or is being forced larger by another module (maybe the “Devices Online” module underneath the forecast in your screenshot).

You can address either of the above situations in your custom.css file. If you’ve set an explicit width for the parent column, then this should fix the issue:

.MMM-DarkSkyForecast .module-content {
  width: 100%;
}

Otherwise, if another module is forcing the width of the column to be larger than normal, then you can either try to tame the width of that module, or you can set an explicit pixel width for your forecast to use the extra space. Try something like this:

.MMM-DarkSkyForecast .module-content {
  width: 450px; /* adjust this as desired */
}

[chris1971]

@onkelbobby
Done… after several trails I got the right setup …
Thanks

[trividar]

Is there a way to hide or delete the „power by …“ signet? Thx… by the way thanks for answering my previous question, I just resized 20px and it works now 👌 thx🤘