New weather card - Weather-Forecast-Extended

Only one of the sections at a time, but yes, you’re right about the space constraints. Maybe scaling down the icon is a way to make more space for the bars.

Probably not just me, but I’d be fine with templating support and slots where I can put my stuff into, kind of like primary and secondary info on mushroom template card.

This code works fine for me when I change the entities to my own.
Do you have any errors in the browser console regarding this card?

1 Like

I added it to the ideas list in my notepad.
Most likely this shouldn’t be the default behavior when adding the card to the dashboard.
But it could be used when the row-size in decreased manually.
Still not sure if its possible with 2 rows for all parts of the card.

If you need a quick solution, you could play around with card-mod.

Me too, lets see how this can be implemented. :stuck_out_tongue:

No errors. But found the problem, I have default theme, this is problem. If I change theme it works. How to fix that?

Default theme is Waves: GitHub - tgcowell/waves: This is a blend of 2 themes found within the Home Assistant community. Inspired mostly by Noctis, I've adjust colours slightly and have also opted to pull some features from Caule Theme packs to build my own 'ultimate' theme. I will continue to update overtime and do my best to credit those whom I have 'referenced'

I guess this is the problem (Not using the default theme in general, but the Waves theme).

This theme seems to overwrite a lot stuff for the default weather card.
As my card is using weather resources from the default weather card, the Waves theme might break it.

1 Like

Uploaded a new version that enables sticky scrolling to the day-badge of the hourly forecast (current badge always stays on the left edge of the scrollview, so you never get lost).

Demo Video, as this is hard to explain. :slight_smile:

click

3 Likes

Really nice card.

Is it possible to add a click action to the card?
My use case is that I plan to have this card on a table dashboard (with daily forecast), and when I click on it should take me to my weather dashboard where I have more info, like the full week weather.

1 Like

Not so far, but I added it to my todos.

The daily forecast already has click actions (scrolling to same day on hourly forecast) and I have also some ideas about interaction with the hourly forecast.

But actions might make sense on the header, or the single texts in the header.
(Which also might be useful for other displayed attributes here, as soon as I have implemented the possibility to display them in the header :stuck_out_tongue:)

1 Like

Maybe someone noticed that there was already a new release 0.3.1.
Only adds a little feature to display the daily and hourly precipitation as blue bars behind the already shown numbers for this values.

Once again a small step to be able to see the weather at a glance.

This is an awesome card, I really like it!
Not sure if it’s already on your ideas list, but I’d like to be able to switch the location of the hourly and daily chart. So in the vertical position, I’d want the hourly on top for example

1 Like

Thanks :slight_smile:

Haven’t had idea so far, as my way was always tap day → Look at the hours.

But I guess if one mostly looks at the next few hours, the daily forecast might not be that important.

Added it to the todo list, as this shouldn’t be too much work. :+1:

2 Likes

Ok, a first release for more information in the header section:
Should show up as version 0.4.0

You can select up to three attributes from your weather entity to show up here, as this was quite easy to implement.
Next step would be an alternative toggle to use a template (or something like that) instead of an attribute I guess …

3 Likes

New version 0.5.1 adds support for templates as source for the header section chips.

Can be configured in the card editor like that:

1 Like

i prefer this combination:

when there will be rain, the background of a day-bar will be blue (according of the amount of rain). Very nice!

Yes, I also played around with a bar behind the day.
But didn’t really like the look, so you have to live with the current implementation so far. :stuck_out_tongue:

Will play around with it a little bit more when I find some spare time for that.
Maybe there’s a way to get a larger rain indicator bar without messing up the look of the card …

This is now, it’s raining a lot, but this is how it’s look like. I like it. Clean and clear.

To everyone who wrote issues on Github:
I just noticed, that I missed to setup email notifications for them in this Github repository. :stuck_out_tongue:

Will take a look at them over the next days.

There was a question in a Github issue, if it’s possible to display a clock with the current time on the card.

Here’s a quick solution using a template chip and card-mod to apply some CSS for a larger chip / font-size:

type: custom:weather-forecast-extended-card
entity: weather.home
daily_forecast: true
hourly_forecast: true
orientation: vertical
show_sun_times: true
show_header: true
use_night_header_backgrounds: true
header_attributes: []
header_chips:
  - type: template
    template: "{{ now().strftime('%H:%M') }}"
  - type: attribute
    attribute: ""
  - type: attribute
    attribute: ""
card_mod:
  style:
    .: |
      ha-card {
        .weather .attribute-chip:first-child {
          font-size: var(--ha-font-size-2xl);
          line-height: calc(10px + var(--ha-font-size-2xl));
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 100px;
          width: fit-content;
          padding: 2px 17px;
          font-weight: bold;
        }
      }

I totally agree on the ‘clean and clear’ - well done ! Care to share the yaml ?

Hello, I love the looks of this! I’m trying to install via HACS but in the Custom repositories box, under Type I do not have a “Lovelace” option. I only have Integration, Template, Theme, or Dashboard. Should I choose one of those?

Thanks!

EDIT: I used type: Dashboard and it worked!

However, the Daily forcast section was blank with NWS so I switch to Open-Meteo and it shows up. I would prefer to use NWS though because it provides humidity, is there a way to make NWS show the daily forcast? Does it matter that NWS provides twice-daily instead of daily data?