Weather panel

I have hacked up a weather panel, which I use on a Home Assistant dashboard displayed on an iPad Pro attached to the wall.

Someone asked me about it in connection with my ring-tile card project, so I thought I would share how I do it here. It's just a bunch of card_mod styling applied to the inbuilt weather forecast card.

Caveat emptor! Home Assistant frontend CSS styling can and does change from time to time, which can break hacky approaches like this. So apologies in advance if this stops working in a future update and I forget to update this page.

Step 1: Make sure you have a weather entity

There are lots of integrations that can provide a weather entity. As an Australian, I use the BOM integration. The BOM integration provides a weather entity named after the location. So I have weather.hobart.

Step 2: Make sure you have card_mod installed

Install Thomas Lovén's excellent card_mod tool.

Step 3: Deploy weather images

You're welcome to use mine, or you can make your own. Download the image files and deploy them to a new weather directory in your www directory on your HA system. I use HAOS, so for me, they show up as follows:

% ls /config/www/weather
clear-night.png      lightning-rainy.png  rainy.png            windy-variant.png
cloudy.png           lightning.png        snowy-rainy.png      windy.png
fog.png              partlycloudy.png     snowy.png
hail.png             pouring.png          sunny.png

If you haven't created the www directory previously, you'll need to create it in your config directory on your HA system. The whereabouts of your config directory may vary, depending on your system. After creating www for the first time, you may need to restart HA for it to become accessible to the HA frontend. (HA docs)

Step 4: Add my hacky weather panel

Go to your dashboard in HA, choose Edit Dashboard, add a new card, choose a manual card, and paste the following config. You will need to swap out weather.hobart for the name of your own weather entity. Note that it appears in two places!

type: weather-forecast
entity: weather.hobart
forecast_type: daily
forecast_slots: 7
show_current: false
show_forecast: true
grid_options:
  columns: 12
  rows: 5
card_mod:
  style: |
    ha-card {
      background: linear-gradient(    
        to top,     
        color-mix(in srgb, 
            var(--card-background-color), 
            transparent 30%) 40%,    
         color-mix(in srgb, 
            var(--card-background-color), 
            transparent 12%) 55%    
          ), 
        url(/local/weather/{{ states('weather.hobart') }}.png);
      background-size: cover;
      background-position-x: center;
      background-position-y: center;
      justify-content: start !important;
      border: none;
    }
    ha-card .forecast {
      padding-top: 32px;
      padding-bottom: 32px;
      backdrop-filter: blur(15px);
      mask: linear-gradient(to top, transparent, black 15%, black 85%, transparent);
    }

Have fun!

Bonus step - cook your own weather images

Confession: my weather images were made by AI. I used Photoshop's "Generate Image" tool (which I understand is just a wrapper for Adobe Firefly). You're welcome to start with the prompts I used.

Second confession: I'm not very good at AI prompts. I would welcome PRs with improvements to the images that I've come up with.

What's next?

I am a little tempted to turn this into an HA card. Once I've got through my ring-tile card issues list, maybe I'll give it some time. Reckon ring-tiles could be the basis of quite cool forecast indicators...