[TIPS] Weather button with icons and temps

[cmewse]

I wanted a weather bar with the forecast in 1h, 3h, 5h and 7h.

you need to create an hourly forecast sensor, a temperature sensor for each of the hours you want pulled from the hourly forecast and a condition sensor with the icon.

template:
  - trigger:
      - platform: time_pattern
        minutes: /1
      - platform: homeassistant
        event: start
    action:
      - service: weather.get_forecasts
        data:
          type: hourly
        target:
          entity_id: weather.home
        response_variable: hourly
    sensor:
      - name: Weather Hourly
        state: "{{ states('weather.home') }}"
        attributes:
          temperature: "{{ state_attr('weather.home', 'temperature') }}"
          dew_point: "{{ state_attr('weather.home', 'dew_point') }}"
          temperature_unit: "{{ state_attr('weather.home', 'temperature_unit') }}"
          humidity: "{{ state_attr('weather.home', 'humidity') }}"
          cloud_coverage: "{{ state_attr('weather.home', 'cloud_coverage') }}"
          pressure: "{{ state_attr('weather.home', 'pressure') }}"
          pressure_unit: "{{ state_attr('weather.home', 'pressure_unit') }}"
          wind_bearing: "{{ state_attr('weather.home', 'wind_bearing') }}"
          wind_speed: "{{ state_attr('weather.home', 'wind_speed') }}"
          wind_speed_unit: "{{ state_attr('weather.home', 'wind_speed_unit') }}"
          visibility_unit: "{{ state_attr('weather.home', 'visibility_unit') }}"
          precipitation_unit: "{{ state_attr('weather.home', 'precipitation_unit') }}"
          forecast: "{{ hourly['weather.home'].forecast }}" 

      - name: "weather_1h_temp"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[0].temperature}}"
      - name: "weather_3h_temp"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[2].temperature}}"
      - name: "weather_5h_temp"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[4].temperature}}"
      - name: "weather_7h_temp"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[6].temperature}}"

      - name: "weather_1h"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[0].condition}}"
        icon: >
          {% if is_state('sensor.weather_1h', 'clear-night') %}
          mdi:weather-night
          {% elif is_state('sensor.weather_1h', 'cloudy') %}
          mdi:weather-cloudy
          {% elif is_state('sensor.weather_1h', 'fog') %}
          mdi:weather-fog
          {% elif is_state('sensor.weather_1h', 'hail') %}
          mdi:weather-hail
          {% elif is_state('sensor.weather_1h', 'lightning') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_1h', 'lightning-rainy') %}
          mdi:weather-lightning-rainy
          {% elif is_state('sensor.weather_1h', 'pouring') %}
          mdi:weather-pouring
          {% elif is_state('sensor.weather_1h', 'rainy') %}
          mdi:weather-rainy
          {% elif is_state('sensor.weather_1h', 'snowy') %}
          mdi:weather-snowy
          {% elif is_state('sensor.weather_1h', 'snowy-rainy') %}
          mdi:weather-snowy-rainy
          {% elif is_state('sensor.weather_1h', 'sunny') %}
          mdi:weather-sunny
          {% elif is_state('sensor.weather_1h', 'windy') %}
          mdi:weather-windy
          {% elif is_state('sensor.weather_1h', 'windy-variant') %}
          mdi:weather-windy-variant
          {% elif is_state('sensor.weather_1h', 'exceptional') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_1h', 'partlycloudy') %}
          mdi:weather-partly-cloudy
          {% else %}
          mdi:weather-cloudy-clock
          {% endif %}

      - name: "weather_3h"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[2].condition}}"
        icon: >
          {% if is_state('sensor.weather_3h', 'clear-night') %}
          mdi:weather-night
          {% elif is_state('sensor.weather_3h', 'cloudy') %}
          mdi:weather-cloudy
          {% elif is_state('sensor.weather_3h', 'fog') %}
          mdi:weather-fog
          {% elif is_state('sensor.weather_3h', 'hail') %}
          mdi:weather-hail
          {% elif is_state('sensor.weather_3h', 'lightning') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_3h', 'lightning-rainy') %}
          mdi:weather-lightning-rainy
          {% elif is_state('sensor.weather_3h', 'pouring') %}
          mdi:weather-pouring
          {% elif is_state('sensor.weather_3h', 'rainy') %}
          mdi:weather-rainy
          {% elif is_state('sensor.weather_3h', 'snowy') %}
          mdi:weather-snowy
          {% elif is_state('sensor.weather_3h', 'snowy-rainy') %}
          mdi:weather-snowy-rainy
          {% elif is_state('sensor.weather_3h', 'sunny') %}
          mdi:weather-sunny
          {% elif is_state('sensor.weather_3h', 'windy') %}
          mdi:weather-windy
          {% elif is_state('sensor.weather_3h', 'windy-variant') %}
          mdi:weather-windy-variant
          {% elif is_state('sensor.weather_3h', 'exceptional') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_3h', 'partlycloudy') %}
          mdi:weather-partly-cloudy
          {% else %}
          mdi:weather-cloudy-clock
          {% endif %}

      - name: "weather_5h"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[4].condition}}"
        icon: >
          {% if is_state('sensor.weather_5h', 'clear-night') %}
          mdi:weather-night
          {% elif is_state('sensor.weather_5h', 'cloudy') %}
          mdi:weather-cloudy
          {% elif is_state('sensor.weather_5h', 'fog') %}
          mdi:weather-fog
          {% elif is_state('sensor.weather_5h', 'hail') %}
          mdi:weather-hail
          {% elif is_state('sensor.weather_5h', 'lightning') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_5h', 'lightning-rainy') %}
          mdi:weather-lightning-rainy
          {% elif is_state('sensor.weather_5h', 'pouring') %}
          mdi:weather-pouring
          {% elif is_state('sensor.weather_5h', 'rainy') %}
          mdi:weather-rainy
          {% elif is_state('sensor.weather_5h', 'snowy') %}
          mdi:weather-snowy
          {% elif is_state('sensor.weather_5h', 'snowy-rainy') %}
          mdi:weather-snowy-rainy
          {% elif is_state('sensor.weather_5h', 'sunny') %}
          mdi:weather-sunny
          {% elif is_state('sensor.weather_5h', 'windy') %}
          mdi:weather-windy
          {% elif is_state('sensor.weather_5h', 'windy-variant') %}
          mdi:weather-windy-variant
          {% elif is_state('sensor.weather_5h', 'exceptional') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_5h', 'partlycloudy') %}
          mdi:weather-partly-cloudy
          {% else %}
          mdi:weather-cloudy-clock
          {% endif %}

      - name: "weather_7h"
        state: "{{state_attr('sensor.weather_hourly', 'forecast')[6].condition}}"
        icon: >
          {% if is_state('sensor.weather_7h', 'clear-night') %}
          mdi:weather-night
          {% elif is_state('sensor.weather_7h', 'cloudy') %}
          mdi:weather-cloudy
          {% elif is_state('sensor.weather_7h', 'fog') %}
          mdi:weather-fog
          {% elif is_state('sensor.weather_7h', 'hail') %}
          mdi:weather-hail
          {% elif is_state('sensor.weather_7h', 'lightning') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_7h', 'lightning-rainy') %}
          mdi:weather-lightning-rainy
          {% elif is_state('sensor.weather_7h', 'pouring') %}
          mdi:weather-pouring
          {% elif is_state('sensor.weather_7h', 'rainy') %}
          mdi:weather-rainy
          {% elif is_state('sensor.weather_7h', 'snowy') %}
          mdi:weather-snowy
          {% elif is_state('sensor.weather_7h', 'snowy-rainy') %}
          mdi:weather-snowy-rainy
          {% elif is_state('sensor.weather_7h', 'sunny') %}
          mdi:weather-sunny
          {% elif is_state('sensor.weather_7h', 'windy') %}
          mdi:weather-windy
          {% elif is_state('sensor.weather_7h', 'windy-variant') %}
          mdi:weather-windy-variant
          {% elif is_state('sensor.weather_7h', 'exceptional') %}
          mdi:weather-lightning
          {% elif is_state('sensor.weather_7h', 'partlycloudy') %}
          mdi:weather-partly-cloudy
          {% else %}
          mdi:weather-cloudy-clock
          {% endif %}

[evilpig]

Looks sweet. How do I make the card?

[iroQuai]

Looks amazing! Would be great if this could be supported out of the box by selecting the "weather style card"

[exetico]

Would you mind sharing the YAML for the card itself? I think a few people would be more willing to give it a try, with the actual Bubble Card styling, too.

I've used the default weather solution for this.

Update:

Here's my re-make:

I'm sure there's a better way, but here it is.

There's room for improvements regarding the CSS styling of both the icon and text-size; but the primary things does work as expected.

          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: weather.openweathermap
            show_name: false
            show_state: true
            card_layout: large-2-rows
            grid_options:
              columns: full
            sub_button:
              - name: Icon 1h
                show_icon: true
                show_background: false
              - name: Tmp 1h
                entity: sensor.weather_1h_temp
                show_state: true
                show_icon: false
                show_background: false
              - name: Icon 3h
                show_icon: true
                show_background: false
              - name: Tmp 3h
                entity: sensor.weather_3h_temp
                show_state: true
                show_icon: false
                show_background: false
              - name: Icon 5h
                show_icon: true
                show_background: false
              - name: Tmp 5h
                entity: sensor.weather_5h_temp
                show_state: true
                show_icon: false
                show_background: false
              - name: Icon 7h
                show_icon: true
                show_background: false
              - name: Tmp 7h
                entity: sensor.weather_7h_temp
                show_state: true
                show_icon: false
                show_background: false
              - name: Today
                entity: climate.wa_esp_wa_esp_livingroom
                show_state: false
                show_attribute: true
                show_background: false
                attribute: current_temperature
                icon: mdi:home-thermometer-outline
                tap_action:
                  action: more-info
              - name: Today
                entity: weather.openweathermap
                show_state: false
                icon: mdi:thermometer
                show_attribute: true
                attribute: temperature
                show_background: false
                tap_action:
                  action: more-info
            styles: |
              ${subButtonIcon[0].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_1h'].attributes.icon))}
              ${subButtonIcon[1].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_3h'].attributes.icon))}
              ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_5h'].attributes.icon))}
              ${subButtonIcon[3].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_7h'].attributes.icon))}