Weather card within picture elements panel

Configuration
1

Hi all, I’m trying to design a view panel using picture elements card, and one thing i’m trying to achieve its to show the weather card on the top left corner. I can’t find anything on the documentation about using cards inside picture elements cards. Is this posible?
This is where i get the idea: https://www.youtube.com/watch?v=o_AKHEyWXR0

1 Like
2

I used to think a floorplan was kind of ridiculous, but that’s really nice…
The video that is.

3

The problem for me was always, when scaling and position doesnt fit. I use custom cards as a wrapper, e.g. custom:button-card or custom:mod-card

type: 'custom:button-card'
tap_action:
  action: call-service
  service: mqtt.publish
  service_data:
    payload: Menu
    topic: frontend/wallmode
name: |
  [[[
    var sWeatherIcon = states['sensor.dark_sky_detail_2'].attributes.icon;
    var sWeatherText = states['sensor.dark_sky_detail_2'].state;
    var sCelsius = states['sensor.dark_sky_celsius_template'].state;
    var sCelsiusIcon = "mdi:thermometer";
    var sWindIcon = states['sensor.weather_wind_strength'].attributes.icon;
    var sWindText = states['sensor.weather_wind_strength'].state;
    
    const res = `<ha-icon style="width: 2rem;" icon="${sCelsiusIcon}"></ha-icon>${sCelsius}°C
    <ha-icon style="width: 2rem;" icon="${sWeatherIcon}"></ha-icon>${sWeatherText}
    <ha-icon style="width: 2rem;" icon="${sWindIcon}"></ha-icon>${sWindText}
    `;
    return res;

   ]]]
custom_fields:
  graph:
    card:
      type: weather-forecast
      entity: weather.dark_sky
      show_forecast: true
      tap_action:
        action: call-service
        service: mqtt.publish
        service_data:
          payload: Menu
          topic: frontend/wallmode
      style: >
        ha-card {border1: 1px solid; height: 10rem !important; width: 368px;}
        ha-card .content {display: none;} ha-card {
          box-shadow: none; padding: 0; margin: 0; border1: 1px solid; background: transparent
        }
styles:
  name:
    - padding-top: 5px
    - width: 100%
  custom_fields:
    graph:
      - overflow: unset
      - padding: 0
  card:
    - overflow1: unset
    - width: 368px
    - height: 10rem
  grid:
    - grid-template-areas: '"n" "graph"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content

tmp
tmp1665×307 29.8 KB