Is adding weather icon possible

Hi
I have made a 3D plan over my house in Sweet Home 3D, and now i’m playing with it in Home Assistant (Layout).
I have turned the floorplan 45Degreeds, so now I have two white area in the two top corners.
What I want, but can’t see how to do, is that in the left top corner I want the weather symbol/icon from today, from the weather.home sensor, and then in the right top corner, I want the weather symbol/icon fore tomorrow.

I have tried to use the state-icon and icon inside the picture-element, but it does not work.
My yaml code fore the floorplan is:

        cards:
          - type: picture-elements
            elements:
              - type: state-label
                entity: sensor.badevarelse_temperature
                prefix: 'Bade Temperatur '
                style:
                  top: 50%
                  left: 50%
                  font-size: 20px
              - type: 'custom:weather-forecast'
                entity: weather.hjem
                show_forecast: true
                style:
                  top: 60%
                  left: 50%
            image: /local/images/3DFloorplan/Hoejen26_3.png

I can see that in “development tools and Current entities” here I have the weather sensor and can see the condition for today and tomorrow, as I also can see the temperature: 0.3, humidity: 97 and pressure: 1022, fore today and tomorrow.

But is it possible to add/show/display these informations on the picture-element floorplan, and get the conditions as a weather icon/symbol, if yes how ?

OK I am doing this with the latest version of floorplan so some of the code may be different for you but you should get the general idea:

            - name: Weather Today Icon
              entities:
                - input_text.current_wx_icon
              state_action:
                action: call-service
                service: floorplan.image_set
                service_data: '/local/icons/weather_icons/animated/${entity.state}.svg?v=6"'
            - name: Future Weather Icon
              entities:
                - sensor.bom_brisbane_icon_1
                - sensor.bom_brisbane_icon_2
                - sensor.bom_brisbane_icon_3
              state_action:
                action: call-service
                service: floorplan.image_set
                service_data: |
                  >
                    var imageName = '';
                    switch (entity.state) { 
                      case 'sunny': imageName = 'day'; break; 
                      case 'clear': imageName = 'clear-day'; break; 
                      case 'mostly-sunny': imageName = 'fair-day'; break; 
                      case 'partly-cloudy': imageName = 'cloudy-day-3'; break; 
                      case 'cloudy': imageName = 'cloudy'; break; 
                      case 'light-rain': imageName = 'rainy-2'; break; 
                      case 'wind': imageName = 'wind'; break; 
                      case 'windy': imageName = 'wind'; break; 
                      case 'dust': imageName = 'haze'; break; 
                      case 'fog': imageName = 'fog'; break; 
                      case 'showers': imageName = 'rainy-5'; break; 
                      case 'rain': imageName = 'rainy-6'; break;      
                      case 'rainy': imageName = 'rainy-6'; break; 
                      case 'storm': imageName = 'scattered-thunderstorms'; break;     
                      case 'stormy': imageName = 'scattered-thunderstorms'; break;      
                      case 'light-showers': imageName = 'rainy-5'; break;       
                      case 'light-shower': imageName = 'rainy-5'; break;     
                      case 'heavy-showers': imageName = 'rainy-7'; break;      
                      case 'heavy-shower': imageName = 'rainy-7'; break;     
                      case 'clear-day': imageName = 'clear-day'; break;   
                      case 'clear-night': imageName = 'clear-night'; break;      
                      case 'partly-cloudy-day': imageName = 'partly-cloudy-day'; break;      
                      case 'partly-cloudy-night': imageName = 'partly-cloudy-night'; break;      
                      case 'hail': imageName = 'severe-thunderstorm'; break;
                      case 'lightning': imageName = 'thunder'; break;    
                      case 'thunderstorm': imageName = 'thunder'; break; 
                      default: imageName = 'weather_sunset'; break; 
                    } 
                    return '/local/icons/weather_icons/animated/' + imageName + '.svg?v=1';

and I use this automation to set the current day’s icon:

  - alias: Track Weather Icon Day vs Night     
    mode: restart
    trigger:
      - platform: state
        entity_id: sun.sun
      - platform: state
        entity_id: sensor.bom_brisbane_icon_0
    action:
      - service: input_text.set_value
        data_template:
          entity_id: input_text.current_wx_icon
          value: >
            {% if is_state('sensor.bom_brisbane_icon_0', 'sunny') %} day
            {% elif is_state('sensor.bom_brisbane_icon_0', 'clear') and is_state('sun.sun', 'below_horizon') %} clear-night
            {% elif is_state('sensor.bom_brisbane_icon_0', 'clear') and is_state('sun.sun', 'above_horizon') %} clear-day
            {% elif is_state('sensor.bom_brisbane_icon_0', 'mostly-sunny') %} fair-day
            {% elif is_state('sensor.bom_brisbane_icon_0', 'partly-cloudy') and is_state('sun.sun', 'above_horizon') %} cloudy-day-3
            {% elif is_state('sensor.bom_brisbane_icon_0', 'partly-cloudy') and is_state('sun.sun', 'below_horizon') %} cloudy-night-3
            {% elif is_state('sensor.bom_brisbane_icon_0', 'cloudy') %} cloudy
            {% elif is_state('sensor.bom_brisbane_icon_0', 'light-rain') %} rainy-2
            {% elif is_state('sensor.bom_brisbane_icon_0', 'wind') %} wind
            {% elif is_state('sensor.bom_brisbane_icon_0', 'windy') %} wind
            {% elif is_state('sensor.bom_brisbane_icon_0', 'dust') %} haze
            {% elif is_state('sensor.bom_brisbane_icon_0', 'fog') %} fog
            {% elif is_state('sensor.bom_brisbane_icon_0', 'showers') %} rainy-5
            {% elif is_state('sensor.bom_brisbane_icon_0', 'rain') %} rainy-6
            {% elif is_state('sensor.bom_brisbane_icon_0', 'rainy') %} rainy-6
            {% elif is_state('sensor.bom_brisbane_icon_0', 'storm') %} scattered-thunderstorms
            {% elif is_state('sensor.bom_brisbane_icon_0', 'stormy') %} scattered-thunderstorms
            {% elif is_state('sensor.bom_brisbane_icon_0', 'light-showers') %} rainy-5
            {% elif is_state('sensor.bom_brisbane_icon_0', 'light-shower') %} rainy-5
            {% elif is_state('sensor.bom_brisbane_icon_0', 'heavy-showers') %} rainy-7
            {% elif is_state('sensor.bom_brisbane_icon_0', 'heavy-shower') %} rainy-7
            {% elif is_state('sensor.bom_brisbane_icon_0', 'clear-day') %} clear-day
            {% elif is_state('sensor.bom_brisbane_icon_0', 'clear-night') %} clear-night
            {% elif is_state('sensor.bom_brisbane_icon_0', 'partly-cloudy-day') %} partly-cloudy-day 
            {% elif is_state('sensor.bom_brisbane_icon_0', 'partly-cloudy-night') %} partly-cloudy-night
            {% elif is_state('sensor.bom_brisbane_icon_0', 'hail') %} severe-thunderstorm
            {% elif is_state('sensor.bom_brisbane_icon_0', 'lightning') %} thunder
            {% elif is_state('sensor.bom_brisbane_icon_0', 'thunderstorm') %} thunder
            {% else %} weather_sunset 
            {% endif %}
2 Likes

Thank you for this and it Still works.
Just need to find some cool animated weather images.

Have a look here weather-card/icons/animated at master · bramkragten/weather-card · GitHub

1 Like