MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast

j.e.f.f

@fillilutten said in MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast:

Any way to change the order of the different extraCurrentConditions?

This is technically possible with CSS, but it’s likely more trouble than it’s worth for me to explain it here, and error prone. A better and easier option for you would be to modify the mmm-openweather-forecast.njk file to reorder these items as you like.

Starting on line 39 you’ll see the templates for the extra current conditions. The order in which they appear here is the order in which they appear in the module.

Here are the first several lines of that section:

{# -------------- Extra Current Conditions -------------- #}
    {% if config.showExtraCurrentConditions %}
      <div class="extra-current-conditions-wrapper small bright">

        {# -- High / Low Temp -- #}
        {% if config.extraCurrentConditions.highLowTemp %}
          <span class="temperature-container">
            <span class="high-temperature">{{ forecast.currently.tempRange.high }}</span>
            <span class="temperature-separator dimmed">/</span>
            <span class="low-temperature">{{ forecast.currently.tempRange.low }}</span>
          </span>
        {% endif %}

        {# -- Sunrise -- #}
        {% if config.extraCurrentConditions.sunrise %}
        <span class="sunrise-container">
          <img class="inline-icon sunrise-icon" src="{{ inlineIcons.sunrise }}" />
          {{ forecast.currently.sunrise }}
        </span>
        {% endif %}

        {# -- Sunset -- #}
        {% if config.extraCurrentConditions.sunset %}
        <span class="sunset-container">
          <img class="inline-icon sunset-icon" src="{{ inlineIcons.sunset }}" />
          {{ forecast.currently.sunset }}
        </span>
        {% endif %}

Say you wanted the Hi / Lo temps to display after sunrise / sunset, just move the whole block as follows:

{# -------------- Extra Current Conditions -------------- #}
    {% if config.showExtraCurrentConditions %}
      <div class="extra-current-conditions-wrapper small bright">

        {# -- Sunrise -- #}
        {% if config.extraCurrentConditions.sunrise %}
        <span class="sunrise-container">
          <img class="inline-icon sunrise-icon" src="{{ inlineIcons.sunrise }}" />
          {{ forecast.currently.sunrise }}
        </span>
        {% endif %}

        {# -- Sunset -- #}
        {% if config.extraCurrentConditions.sunset %}
        <span class="sunset-container">
          <img class="inline-icon sunset-icon" src="{{ inlineIcons.sunset }}" />
          {{ forecast.currently.sunset }}
        </span>
        {% endif %}

        {# -- High / Low Temp -- #}
        {% if config.extraCurrentConditions.highLowTemp %}
          <span class="temperature-container">
            <span class="high-temperature">{{ forecast.currently.tempRange.high }}</span>
            <span class="temperature-separator dimmed">/</span>
            <span class="low-temperature">{{ forecast.currently.tempRange.low }}</span>
          </span>
        {% endif %}

Keep in mind that doing this will make it a touch more difficult to update my module as I release updates. When you want to update, you’ll need to to the following:

Make a backup of your modified mmm-openweather-forecast.njk file (copy it to another location, for example)
Restore the original with git checkout mmm-openweather-forecast.njk
Update the code with git pull
Restore your modified version of mmm-openweather-forecast.njk from your backup

j.e.f.f

@fillilutten said in MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast:

What css do I do to change color of the slash in H/L in “extraCurrentConditions” ?

Yes:

.MMM-OpenWeatherForecast .temperature-container .temperature-separator,
.MMM-OpenWeatherForecast .forecast-container .forecast-item .temperature-container .temperature-separator {
  color: #FF0000; /* makes it red */
}

@fillilutten said in MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast:

And can I remove “Powered by OpenWeather”?

Yes.

.MMM-OpenWeatherForecast .attribution {
  display: none;
}

j.e.f.f

@pwalsh2202 said in MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast:

I’m looking to see if I can get just a truncated text-based description of the upcoming weather.

I’d like to see this too. The DarkSky API had this and it’s the one thing I really miss with switching over to OpenWeather. My guess is that in order to do this I’d need to create a special formatter that generates a detailed summary based on the weather data available. Say the API returned a wind speed of over 10mph, gusts reaching 30mph… I could generate a phrase like “It’s windy today with gusts reaching 30mph.”

This looks like a significant time commitment that I just don’t have. I would need to come up with all of the thresholds of the weather data that would trigger such phrases, create phrase templates, choose how they should be ordered, and then worry about translation for all of the languages MM supports. As it is I barely have an hour or two on the weekend to dedicate answering forum questions on this module and fixing any bugs.

If anyone else is willing to do this, I’d gladly welcome the pull request into my code.

The best my module can currently do to address your ask is to configure the module to only show the current conditions and the extra current conditions (which give you the summary in icon/metric format). You can turn off the hourly and daily forecasts if you like. Take a look through the README.md file with outlines all of the configuration options for this module.

pwalsh2202

@j-e-f-f - Thanks for responding. I wasn’t sure if this was something their API auto-configured or not. I didn’t mean to ask so much work of you but thought there might be a part of their API I missed. I just last night managed to get what I needed with a really basic “(Description) currently. The high will be (high temp) and the low will be (low temp.”

Thank you for all your work on this. You saved me a ton of time by using your module as a base.

miniashman

@j-e-f-f Thank you it worked just the way I wanted it. Appreciate it :oncoming_fist:

Stoffbeuteluwe

@miniashman

hi… how can I get the C for Celsius behind the degree, on my mirror I only have the number …

BKeyport

Actually, I’d like the F for F#@(%**&@ stupid measurements, for mine too.

miniashman

@stoffbeuteluwe In the custom.css i added the following:


.MMM-OpenWeatherForecast .current-conditions-wrapper .current.temperature:after {
    content: "C";
}
.MMM-OpenWeatherForecast .extra-current-conditions-wrapper  . temperature-container . high-temperature:after,
.MMM-OpenWeatherForecast .extra-current-conditions-wrapper  . temperature-container . low-temperature:after {
    content: "C";
}
.MMM-OpenWeatherForecast .forecast-item.daily .high-temperature:after,
.MMM-OpenWeatherForecast .forecast-item.daily .low-temperature:after {
    content: "C";
}

You can change “C” to “F” if needed depending on which units you want to use.

Stoffbeuteluwe

@miniashman oh thanks 🙏 I will try today …

j.e.f.f

@miniashman said in MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast:

@stoffbeuteluwe In the custom.css i added the following:


.MMM-OpenWeatherForecast .current-conditions-wrapper .current.temperature:after {
    content: "C";
}
.MMM-OpenWeatherForecast .extra-current-conditions-wrapper  . temperature-container . high-temperature:after,
.MMM-OpenWeatherForecast .extra-current-conditions-wrapper  . temperature-container . low-temperature:after {
    content: "C";
}
.MMM-OpenWeatherForecast .forecast-item.daily .high-temperature:after,
.MMM-OpenWeatherForecast .forecast-item.daily .low-temperature:after {
    content: "C";
}

You can change “C” to “F” if needed depending on which units you want to use.

There’s actually a slight bug in this. The CSS should be as follows (notice he removal of the sapce between the period and class names in a few places):

.MMM-OpenWeatherForecast .current-conditions-wrapper .current.temperature:after {
    content: "C";
}
.MMM-OpenWeatherForecast .extra-current-conditions-wrapper  .temperature-container .high-temperature:after,
.MMM-OpenWeatherForecast .extra-current-conditions-wrapper  .temperature-container .low-temperature:after {
    content: "C";
}
.MMM-OpenWeatherForecast .forecast-item.daily .high-temperature:after,
.MMM-OpenWeatherForecast .forecast-item.daily .low-temperature:after {
    content: "C";
}

Biebermann

One question about this, how do you get the weather warnings from the DWD displayed in German? The language is set to German “de” but these messages are displayed in English.

Unfortunately I have not found anything.

P.S. Sorry for my English :confused_face:

miniashman

@j-e-f-f Thank you. Will correct it

karsten13

@biebermann

Unfortunately I have not found anything.

https://forum.magicmirror.builders/post/89463
https://forum.magicmirror.builders/post/90002

Biebermann

@karsten13

I have already gone through the two posts.

But thanks for your answer.

P.S. now I also have the double display since today. Let’s wait and see if there will be a solution.

j.e.f.f

@biebermann There isn’t a solution. The alerts come through as-is. There seems to be no logic in place on OpenWeather’s side to return the alerts in the configured language.

Biebermann

@j-e-f-f

Ok, then there is nothing we can do for the time being.
Is that ever fixed?

j.e.f.f

@biebermann it’s something I can’t fix. It’s a problem with OpenWeather’s API. Someone previously mentioned that OpenWeather had acknowledged it was an issue and maybe it will be fixed in the future. But the alerts don’t have a language identifier associated with them so it’s not even like I could filter out the duplicates in the wrong language.

lavolp3

@biebermann A workaround would be to additionally use MMM-DWD-WarnWeather which works pretty well.

Another option could be to run the warning through the google-translate npm module which you could add to the module.
https://www.npmjs.com/package/@vitalets/google-translate-api
Might be a bit much however.

Biebermann

@j.e.f.f
Don’t stress, if it’s not possible to correct it (yet) then so be it.

@lavolp3
I had the module running, thought since it is in this module here, I could save myself another module.

Is there then the possibility to turn off the severe weather warnings completely?

lavolp3

@Biebermann

Is there then the possibility to turn off the severe weather warnings completely?

I used a css “hack” for that

Add to custom.css

.MMM-OpenWeatherForecast .weather-alert {
    display: none;
}

You can also set showSummary: false in the config but would then lose the whole summary