Card Tools popup? (Homekit style card )

I use browser-mod yes (by Thomas Loven, which is essentially the “new” popup card).

But yes, that would be awesome. I have created my own Homekit style buttons with lovelace so I am not in need of an entire button (you can check my repo with the link a few posts back if you are interested) But a brightness slider like this in a popup card would be amazing. As I am still baffled that no one has created a vertical slider for lovelace.

In ieder geval bedankt, genoeg mensen die hier al blij mee zijn.


Ik heb de code hier staan:
Maar de app moet je builden om deze bijv. in je www directory te zetten en hem te gebruiken. Weet je hoe dat werkt? Het is in ionic gemaakt?

Ik heb hem ook gehost staan daar gebruik ik hem zelf dat is hier:
Je kan hem daar ook gebruiken om het uit te testen, ik zal binnenkort een kant en klare app online zetten dat je hem zelf in je www directory kan gebruiken.

Maar als je de website bezoekt kom je direct op de settings pagina.
Het makkelijkste is om eerst je configuration.json te maken. Uitleg op de github pagina maar:

  1. Maak in je www directory een map home_remote en daarin een file configuration.json
  2. Maak je configuration in json zoals op github aangegeven mocht je vragen hebben hoor ik het wel heb het er snel neergezet.

Als je dit hebt gedaan ga je naar de website, op de settings pagina vul je jouw home assistant url in. Deze moet dus wel buiten je netwerk beschikbaar zijn!
Vervolgens sla je dit op en klik je op download configuration
Je zult onderaan de pagina zien dat de configuration daar zichtbaar wordt, als hij klaar is klik je op refresh app.
Nu zul je onderaan de tabs zien die je in de configuratie hebt ingesteld.
Ga naar een tab en hij maakt verbinding met home assistant en dan wordt je geredirect om in te loggen en dan ben je klaar.
Of je gebruikt de long lived token optie in de settings (Dit werkt beter en altijd) via de login moet je vaak opnieuw inloggen.

Succes ik hoor wel of het is gelukt.

1 Like

@jimz011 i put some work in making the popup as a card you can use in combination with browser mod.
It works for me so hope it can help you. you can find it here:

if you have any problems or see something that can be done better let me know!


I will test this tonight, looks cool.

Alright, @DBuit I have tested your card and it actually is really good. I had thought of hardcoded scenes at the bottom, but you didn’t which is really great. It works really great with the popup card and the popup card looks a lot better now.

I have a few questions though (better said some feature requests)

  1. Could you release this on HACS perhaps? You will make a ton of people happy I am damn sure about that

  2. Could you make the percentage text move up a little bit (I think it looks a bit better when the icon and the brightness seem to belong together a bit more)

  3. Could the icon at the top be the same as the icon configured with the entity? It always shows a lightbulb now. E.g. it will show a led strip when a led strip was configured in customize.yaml

  4. Could you make that same icon the actual color that it currently is like e.g. button-card can? See screenshot below:

  5. And last but not least, could you make this in such a way that when it is used on an entity that doesn’t have brightness (e.g. a switch or a light with only on/off) to show a on/off slider like actual Homekit does?
    First screenshot is your (amazing) card

    Second is actual Homekit

Sorry for asking so much requests :rofl::joy:, but this card is truly amazing, and because you didn’t hardcode scenes to be mandatory I can use the rgb-card for that. In any case thank you so much for this card, it truly is amazing. I hope you will consider the “improvements” I have suggested. Thanks again, greetings from Eindhoven!

Edit: watching the video you shared for the actual project, I mean exactly that :rofl::joy:, the video you shared yourself shows exactly what I mean.

1 Like

hey, good to hearnyou like.
great suggestions i will work on that!
have to figure out some things out like how to know if a light got brightness settings and HACS.

you will hear from me soon :slight_smile:

one question: the switch screenshot how does it look when turned on? any color changes? @jimz011

Your card doesn’t show a switch when used on an entity without a brightness. But I guess you meant the homekit button?

This is what the actual homekit button looks like when it is on, though I do not particularly like that color (real homekit has some real design issues imho, that is the whole reason I created my lovelace interface in the first place).

In your video, you show the right icon with the correct entity, also in your video at around 0.36 it shows a button for a switch. It is that switch I was talking about.

Ah, and feature request number 6: let us configure the width/height of the slider (that would make it more adjustable for different screen sizes).

I won’t bother you anymore :stuck_out_tongue: haha, thanks again.

Is this card capable of running without a popup just as card?
I tried and just receive an error in chrome:

hass-custom-light-popup-card.js:26 Uncaught (in promise) TypeError: Cannot read property 'attributes' of undefined
    at HTMLElement.render (hass-custom-light-popup-card.js:26)
    at HTMLElement.update (lit-element.js?module:160)
    at HTMLElement.performUpdate (updating-element.js?module:475)
    at HTMLElement._enqueueUpdate (updating-element.js?module:437)

Hello Stephan
I should be possible to use it without pop-up it is just a card like any other.
If i look at the error i think your state of the entity you use has no attributes like brightness.
maybe you can check the state of the entity in the developer tools or maybe the entity doesnt exsist maybe typo?

@DBuit: Thank you for your reply. I will try the other card as I for some reason handled all the errors, but no card is showing up and I can not figure out what I do wrong. But as I tried to get a design exactly like the one you made already :slight_smile: I will try this one.
Thanks again for your work you put into this. I totally appreciate what you are doing!

I updated the pop-up card with Dome fixes and features:

  • jimzz CSS is added
  • you can now use HACS
  • close pop-up nu clicking in open space
  • colors of light is uses to color the icon
  • state on/off is translated to your locale of the hass installation

It seems that after renaming the light-popup-card from 'custom-light-popup-card.js' to 'light-popup-card.js' the card can no longer be used from within the homkeit-stlye-card.

I now only get a black screen when I open a light popup

did you rename the file in your hass installation? If you did that you also updated the name of the card in de configuration everywhere? It still works for me.

If that is all ok and it still not works can you check your developer console if you know what it is?

HACS will automatically install it as light-popup-card.js, as specified in the repo.
In the lovelace resources I then use this specification:

  - url: /community_plugin/light-popup-card/light-popup-card.js
    type: module

I will check the developer console and report back

Ok i dont use HACS really only installed it yesterday to check if the cards can be installed.

Let me know what you can find if you cant find it i will try to figure it out

Couldnt wait so i tried it myself and it still works.

i got this (same as u):

- url: /community_plugin/light-popup-card/light-popup-card.js
  type: module 

This in the homekit card to set the custom popup:

  type: custom:light-popup-card
1 Like

Okay, I figured it out myself now. I had to do the renaming not only in my lovelace ressources file, but also in the yaml files for each view:

Changed e.g from…

      - title: Wohn- / Esszimmer
          type: custom:custom-light-popup-card


      - title: Wohn- / Esszimmer
          type: custom:light-popup-card

…and now it works again :slight_smile:

Maybe you could adapt it in the Github Readme when you have time? There you can still find the old naming scheme.:

Ah, and another (hopefully) small question. Do you happen to know where this text comes from?

I have looked through all my yaml files, but couldn’t find it in the config. But I want to delete it, so that there is only the X left.

Best regards and many thanks

Yeah i have to update te readme Will do that.
The test is in the code have to remove it Will do that also :slight_smile: