Lovelace: Simple Weather Card

That’d be cool!

What do you think about allowing for up to maybe three sensors next to each other separated by either | or / ?

Just trying to get use out of some of that space while getting rid of other cards.

Yup, good idea, could possibly remake the secondary_info option into an array/list which accepts multiple sensors/states or something.

1 Like

I really like this card and I use it with a popup window now when pressing on it. But what I would really love to see is that we can actually change the behavior of a tap action (currently it will show the more-info window).

For example I would like to use the card as an extra button (that can do a service call).

Hey, I was wondering, is there any way to dictate what day we want to see with this card? I’d love to use this to just show tomorrow’s weather if at all possible.

Could be useful indeed, there might be a custom card that makes this possible already, if not, feel free to open an issue with the request in the github repo :tada:

Hey, should be possible to implement at least for weather components that report the forecast in a daily format, some report hourly forecast and others daily from what i’ve seen.

Feel free to open an issue over at github

Yes I am able to do this with the button-card, however I like this card :stuck_out_tongue: as it has this nice gradient (called fade). It gives a nice effect on the card:

As you can see in the screenshots the weather card has the exact same color defined as the buttons. But because of the fade effect it is slightly off and more like gradient. Which I kinda like :stuck_out_tongue:

So I’m using darksky, and on the typical setup for this card, using the entityweather.darksky will get me today. I know it has all the week (because the default card shows through the week), but I guess I’m unsure what entity to use to get tomorrow. I’ll look into a bit more, but if you have any direction that’d be much appreciated!

just trying to explore this thought, would that be the same wish as this:

eg. having the simple-weather card on the main view, and clicking it (like more-info) would navigate to a weather-view page with full weather info? Seems to be something else than secondary_info.

or would that be the tap-action, with

tap_action: navigate
navigation_path: /lovelace/weer_klimaat/

which I cant get to work… sorry if this too obvious, but please let me ask your assistance:

I have this view:

title: Weer & Klimaat
path: weer_klimaat
icon: mdi:weather-partlycloudy
badges:

which is in a file: /config/lovelace/views/view_Weer_klimaat.yaml

would the navigate-path point to the path name in the view, so in my case weer_klimaat? or would it need to point to the filename, in this case /lovelace/views/view_Weer_klimaat.yaml …

ive also tried:

  - type: custom:simple-weather-card
    entity: weather.woensdrecht
    name: Weer actueel
    tap_action: navigate
    navigation_path: /lovelace/16/

but no succes unfortunately.

the card itself shows alright (I think?)

58
Please have a look…

edit

might have missed the intermediary action definition so think it should be:

  - type: custom:simple-weather-card
    entity: weather.woensdrecht
    name: Weer actueel
    tap_action:
      action: navigate
      navigation_path: /lovelace/weer_klimaat/

still, no result. sorry.

must add this is tested in Safari on a Mac. Silly thing is when opening the same page in Chrome/Mac I get a more info window. Made me enter the same page in a private window in Safari, because I have several blockers active in the regular Safari browser, but that doesnt make any difference. Nothing happening, not even the more-info.
As does nothing happen in the App.

Your edited example looks correct.
I suspect you aren’t loading the latest version of the code.

Some HACS users have alerted me that the actual resource location of my cards have changed in later HACS versions. So you manually have to update the resource location in order to load the latest updated version.

In later HACS versions

 - url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
   type: module

Older HACS

 - url: /community_plugin/mini-graph-card/mini-graph-card.js
   type: module

So if you are using HACS, please have a look at the card page in HACS and double check that the resource reference match your config.

If not, try clearing cache.

you are so right, I am embarrassed to have to confess I still used a version 0.1… which was the version using the dot between card and bundle

- url: /local/lovelace/resources/simple-weather-card.bundle.js?v=0.1.0
  type: module

I dont use HACS, so have updated manually, and can report progress! using both the number or the name of the view, now navigates me to the correct page. Which is cool indeed!. I can even use this now (btw, Ive borrowed the notation from CCH where we can indicate the tabs in a similar way)

  - type: custom:simple-weather-card
    entity: weather.woensdrecht
    name: Weer actueel weer_klimaat
    backdrop: true
    tap_action:
      action: navigate
      navigation_path: weer_klimaat

thanks for you assistance, much appreciated.

now I only need to find out how to get the more-info view back :wink:

1 Like

separate post please allow…
continuing on my navigation tap action, I find my self in a dilemma… according to the docs, more-info and navigate are both options for the tap_action, so we cant have both? is that correct?

if so, would it be a valid feature request to ask for something like a hold-action, so we can have eg action: navigate for the hold, and action: more-info for the tap?

would really be awesome to be able to do so within this card.

please allow another question, concerning style of the card.

Id like to use the border-radius and have tried

      - type: custom:simple-weather-card
        style:
          - border-radius: 6px
        entity: weather.woensdrecht
        name: Weer actueel
        fade: true
        backdrop:
          day: '#F0C209' #'var(--primary-color)'
          night: '#555B65'
        tap_action:
          action: navigate
          navigation_path: weer_klimaat

but the card-mod won’t change the radius at all. isn’t this an option for the mini weather card?

secondly, as you can see I have my own day and night colors, and wish to reverser these colors for text. I think I can only set 1 dedicated text variable, and not use a template or set a night/day color?

Would you know of a way to do so? If not yet available maybe consider an option like this:

text:
  day: '#555B65'
  night: '#F0C209'

Appreciate the fact it is supposed to be a ‘simple’-weather-card, but this would seem complementary to the night and day modes…?

thanks!

I don’t think that’s valid card-mod syntax, should look something like this:

style: |
  ha-card {
    border-radius: 6px; 
  }

The card does also adopt the ha-card-border-radius theme option, if it’s set in your theme.

Good idea, you could do this through config-template-card but we should add this as a card option.

1 Like

Of course! Wrong syntax… thanks.
And cool you like the text color suggestion. Thanks nr 2 :+1:

update

dont think the card-mod works your weather-card, Im using this now:

      - type: custom:simple-weather-card
        style: |
          ha-card: {
            border-radius: 6px;
            box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
          }

and it has no effect whatsoever…could it be the card-mod doesn’t stick to your card, and then, who is the cause of that? could this be the matter: https://github.com/thomasloven/lovelace-card-mod#why-wont-this-work-for-some-cards ?

also:
if I set the background color to ivory the text (and icon!) is almost invisible. Doesn’t the card auto calculate a best available contrast text-color. Right now it forces me to set the text-color hard coded, but the icons remain practically invisible:

28

taken the fact the icons probably have their own color, this would imply I have to choose the background color carefully myself? which is fine, just asking if this is the correct assumption.
thanks!

Just tried, border-radius works fine, you’ll need to remove the single quotes from the box-shadow line for that to work.

No, there’s no auto color feature, the icons are multi-color designs so changing the color of them wouldn’t really work.

this I what I tried now… no luck

  - type: custom:simple-weather-card
    style: |
      ha-card: {
        border-radius: 6px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

I’m puzzled, even without the box-shadow I cant get the style to set border-radius…

I meant auto color for the text. Using ivory as coloring in the backdrop doesn’t make the card use another text color:

29

opposed to:

04

btw: using backdrop with the default true wont allow for fade: true? I’ve tried it both on the same indent, (no effect) and indented, as with night/day, but that errors out no Mapping allowed.

Should work, if it doesn’t I would look into updating card-mod or HA or open an issue in the card-mod repo. You could also check the browser dev console for any errors/hints.

Yes I know, and that’s the case for both text and icons, that’s why I thought your suggestion for a text night/day option was a good idea.

No, the fade is a gradient/fade effect on the backdrop so that’s not possible.

You could do this though:

- type: custom:simple-weather-card
  entity: weather.example
  name: in Example
  backdrop:
    fade: true

Ok I will investigate further. Just to be sure I checked all bases, I have an entities card using:

  - type: entities
    style: |
      ha-card {
        --ha-card-background: radial-gradient(lightgray, green);
        box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
        border-radius: 6px;

just fine, even with the quotes for box-shadow…

cool, looking forward to that (maybe even with a template option, to make it a killer feature.

Don’t think I’ll add support for templates but you could always use config-template-card.

well, I am baffled now:

  - type: custom:simple-weather-card
    style: |
      ha-card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border-radius: 6px;
        }
    entity: weather.woensdrecht
    name: ' ' # Weer actueel
    backdrop:
      fade: true
      day: ivory #'#45aaf2'
      night: '#a55eea'
      text: green
    tap_action:
      action: navigate
      navigation_path: weer_klimaat

suddenly does work.

29

And you are correct, the quotes shouldn’t be there, guess I didn’t notice closely enough. It doesn’t error out though, so one has to be careful.

As to the why: I wouldn’t know, and don’t understand. As far as I can see, I didn’t make an error before, and the style section is identical…

thanks for your patience…

1 Like