Lovelace: Button card

It only loads the JS from the server when you refresh the page. If you switch tab or whatever, it’s already in memory. So it might slow down a bit if you have a 56k connection, but else it should be fine :slight_smile: Give it a try, you’ll see by yourself!

Nah got decent internet here so no problems there, maybe if I go on holidays, but at most places I come there is okayish internet. Thank god they no longer charge you for roaming in the EU :stuck_out_tongue:

At home there would be no problems as I have a 500mbit line. I could have had 1Gigs but I got into a fight with Vodafone and Reggefiber (ISP and the company that is responsible for connecting fiber to houses) so they asked me if I would please never ever contact them again to get fiber.
Luckily both of these companies no longer sell these services. But going to move out next year anyways so yeah why bother?

To be on-topic again, would it be possible to have a hold_action with a swipe? For example now you have hold a bit longer to increase the volume. (The one you introduced in the 1.7 update). How about a hold longer and still hold and swipe up to increase volume and hold longer, hold and swipe down having it decrease the volume? Or would swipe actions on the button be impossible or too complicated?

Or have the button have a left and right (or up and down zone) basically meaning splitting the button in 2 parts, where on both parts they’d turn on/off on a single press and when holding on the left or bottom part of the button it would decrease volume and on the right or top part of the button increase the volume?

I know I could probably do this with a vertical-stack-in-card by having 2 buttons look like a single one and then have the left button decrease volume on hold and the right one increase volume on hold, but I feel that the vertical-stack-in-card never really plays beautifully with css (it could also be because I am a big programming noob as I do this as a “gotten out of hand” hobby).

Srry for the long text, and thanks again for the button that changed my interface drastically forever!

Looking for a way to put an iframe code inside a button card

this is awesome, can I use this card with a script for my volume. I use a harmony hub and I call volume commands from a script. If so do i also make a input_number for this to work? Sorry for the noob question.

You can try using the label field as the label supports html.

Yes you can. Please read the documentation of the card on github.
The service part of the button would be something like:

hold_action:
  action: call-service
  repeat: 500
  service: script.turn_on
  service_data:
    entity_id: script.volume_up

If you want to display the actual volume you need to retrieve it from somewhere, that’s up to you to find out how.

Don’t hold your breath on that one :wink:
(Unless of course my assumption that you are in the UK is wrong!)

It looks like you are saying we don’t need track=true either? Is that correct, and if so I assume it is so for all cards? (Sorry if this slightly off topic).

  - url: /customcards/lovelace_cards/button-card.js?track=true
    type: module

This page should help explain things: https://custom-components.github.io/custom_updater/How-it-works

Also, track is an optional value as by default it tracks components and cards:

@ludeeus chided me for not including track=true and said it was a ‘bug’ (that it worked without it) so I then added it to all my cards anyway in the github folder of custom cards… But up to you…

Hahaha and that link makes no mention of track=true…

that is mentioned here https://custom-components.github.io/custom_updater/super_custom-cards

that is mentioned here https://custom-components.github.io/custom_updater/super_custom-cards

1 Like

I don’t use custom updater actually for what it’s made for, I just use it for the no caching part, so I don’t actually track the cards version. I use git submodules for that :blush:

@klogg Nah I am Dutch, so no worries there (don’t know why you’d assume that I am from the UK :P)

I think it must have been your perfect English :+1:

Swipe up and down doesn’t play well with scrolling and doesn’t work well on standard browsers (non-mobile one) so that’s not something I’ll do.

Vertical stack in card with 2 buttons inside is how I’d do it, and vertical stack in card should work with CSS, unless there’s a bug? Can you share a screenshot and a config of something which breaks the display?

The black square backgroundstay there, whatever I do, I have to mention that I use it on a popup card. I tried putting card modder on like everything, on the stacks on the cards, on everything all together, whatever I do it just won’t get transparent.
I switched to a standard vertical stack for the moment until I figure it out. Also the photo has a vertical-stack-in-card and as you can see there are black corners on the photo. Yes I have used overflow: hidden.

This is what it should look like give or take.

I’ll have a look at the code of vertical-stack-in-card, can you share your config also please, just one line is enough :blush:

Hi @jimz011,
First off all, thank you very much for your HomeKit button! I have used it totally in my first experience with this Button card, for lights switches view and it looks just great.

Now I have one small issue with Yeelight icon coloring. The “auto” does not really always works. When I am at 5% brightness (Moonlight Mode), the color is actually fine, but when it is 40% (Normal Mode), the icon color become the same as in OFF state.
The colors actually works just fine when using the very simple glance card.

Here is Normal Mode 40% (the problematic one):

Here is Moonlight Mode 5%:

Here is how it looks with simple Glance card, both 40% and 5%, respectively:

Any idea, what might be the reason?
Thanks in advance.

Unfortunately I did not create this card, I only created a design with this card. But could you post your config it would help us find out what exactly is wrong.