MagicMirror/modules/default/weather/hourly.njk

{% if hourly %}
  {% set numSteps = hourly | calcNumEntries %}
  {% set currentStep = 0 %}
  <table class="{{ config.tableClass }}">
    {% set hours = hourly.slice(0, numSteps) %}
    {% for hour in hours %}
      <tr
        {% if config.colored %}class="colored"{% endif %}
        {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}
      >
        <td class="day">{{ hour.date | formatTime }}</td>
        <td class="bright weather-icon">
          <span class="wi weathericon wi-{{ hour.weatherType }}"></span>
        </td>
        <td class="align-right bright">{{ hour.temperature | roundValue | unit("temperature") }}</td>
        {% if config.showUVIndex %}
          <td class="align-right bright uv-index">
            {% if hour.uv_index!=0 %}
              {{ hour.uv_index }}
              <span class="wi weathericon wi-hot"></span>
            {% endif %}
          </td>
        {% endif %}
        {% if config.showHumidity != "none" %}
          <td class="align-left bright humidity-hourly">
            {{ hour.humidity }}
            <span class="wi wi-humidity humidity-icon"></span>
          </td>
        {% endif %}
        {% if config.showPrecipitationAmount %}
          {% if (not config.hideZeroes or hour.precipitationAmount>0) %}
            <td class="align-right bright precipitation-amount">{{ hour.precipitationAmount | unit("precip", hour.precipitationUnits) }}</td>
          {% endif %}
        {% endif %}
        {% if config.showPrecipitationProbability %}
          {% if (not config.hideZeroes or hour.precipitationAmount>0) %}
            <td class="align-right bright precipitation-prob">{{ hour.precipitationProbability | unit('precip', '%') }}</td>
          {% endif %}
        {% endif %}
      </tr>
      {% set currentStep = currentStep + 1 %}
    {% endfor %}
  </table>
{% else %}
  <div class="dimmed light small">{{ "LOADING" | translate }}</div>
{% endif %}
<!-- Uncomment the line below to see the contents of the `hourly` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{ hourly | dump }}</div> -->