Weather-forecast in picture-elements

Configuration Frontend
1

Have some challenges trying to get the weather icon (not state.icon) to show in picture-elements.
Dont face the same issue using other custom:cards.
Is this a limitation of the the weather-forecast card?
Any suggestions welcome?

The below shows the weather-forecast card correctly on its own in the dashboard.

type: weather-forecast
entity: weather.home_hourly
show_current: true
show_forecast: false
forecast_type: hourly
secondary_info_attribute: temperature

But when trying to do this within picture-elements i just get a print of below code:

type: picture-elements
elements:
  - type: custom:weather-forecast
    show_current: true
    show_forecast: true
    entity: weather.home_hourly
    forecast_type: hourly
    secondary_info_attribute: temperature
    style:
      top: 40%
      left: 40%
image: /local/community/blank.png
2

You posted a different code for the weather card in these cases.

3

Do you have a suggestion on how to get weather-forecast icons shown in picture elements?

4

I am not getting the question.
Icons are part of the card.

Picture-elements card may contain CUSTOM cards.
Conventional cards should be wrapped inside custom:hui-element:

image
image968×662 49 KB

type: picture-elements
elements:
  - type: custom:hui-element
    card_type: weather-forecast
    entity: weather.home_openweathermap
    forecast_type: daily
    style:
      top: 20%
      left: 50%
  - type: custom:weather-card
    entity: weather.home_openweathermap
    style:
      top: 65%
      left: 50%
image: /local/images/test/orange.jpg
5 
type: picture-elements
elements:
  - type: custom:weather-card
    entity: weather.home_hourly
    style:
      top: 65%
      left: 50%
image: /local/images/test/orange.jpg

Thank you for confirming this work. I must have an issue with the weather-card then, because when I use this code, i get the below screenshot.Screenshot 2023-10-01 142621

1 Like
6

Do you have it installed?

7

Yes. works standalone as a card but not in picture-elements.

8

Check my post - a custom card is used inside picture elements.
Are you sure that custom:weather-card works as standalone ?

9

100%.

Source:

type: weather-forecast
entity: weather.home_hourly
show_current: true
show_forecast: false
forecast_type: hourly
secondary_info_attribute: temperature

Screenshot 2023-10-03 164657

10

These are diff cards. You posted a screen with a standard card.
Check again my code.

11

If I use your code I get these results. Not like yours!
Weather Forecast card is available as a new card when adding to the dashboard, but not the weather-card

Screenshot 2023-10-03 204816
Screenshot 2023-10-03 204816970×285 18.1 KB

Screenshot 2023-10-03 204107
Screenshot 2023-10-03 204107970×290 20.4 KB

12

Custom cards (weather-card, hui-elements) should be INSTALLED.
They are not present in HA setup by default.
Find them in Github & install.
For beginners, the easiest way to install custom cards is via HACS. Google HACS and install it, then install these cards via HACS.

1 Like
13

Thank you for your patience and help.
Solved now by installing Hui Elements completely missed installing this. Such a dumb ass thing to do.

14

Hello,

While trying to help another member in the forums, i came accross the hui-element. I would like to use it to add a vignette on a map card. Whatever i do, the map does not display. Could i please ask for some help? Here is what i tried so far:

image
image1205×653 44 KB

Code:

type: picture-elements
image: /local/vignete.png
elements:
  - type: custom:hui-element
    card_type: map
    entities:
      - entity: device_tracker.michael
    style:
      top: 50%
      left: 50%

If i put a different card it works:

image
image1205×643 55.8 KB

Code:

type: picture-elements
image: /local/vignete.png
elements:
  - type: custom:hui-element
    card_type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    style:
      top: 50%
      left: 50%

Is the map card supported by the hui-element?

Thank you

15

I have a similar question: I want to change the background on my picture-elements card/dashboard, so that when it rains, it shows a rain .gif file I made, and same with sunny, cloudy etc…

I have searched online repeatedly, and I find different half-answers, none of which seem to work. I can’t believe this is so difficult, but surely someone must have figured this out by now. Any help appreciated!