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";
}