Card Tools popup? (Homekit style card )

Well, I have tested it and it is great for the people that use HST, unfortunately I had hoped this popup card would be a separate card so I could use it on my own button styles. I am actually only interested in the vertical-slider that you have created. Would there be a way to create/release this apart from the button so I could use it in a popup window?

Thanks for the hard work though (both of you) I am sure this makes many people very happy and it is always to nice to see what the community does with Home Assistant.
Unfortunately the card is unusable for me as I only need the slider.

1 Like

Dat ziet er zalig uit :slight_smile: geen ambitie om die front-end te delen :stuck_out_tongue: ? Er staat niets noemenswaardig in de console, buiten een error i.v.m de custom header maar heb die een verwijderd maar maakt geen verschil.

Mits ik al mijn automations via node-red doe ben ik momenteel de mogelijkheid aan het uitzoeken voor de dashboard te gebruiken als front-end, het lijkt mij veel eenvoudiger om hierin een custom ui te maken.
Nadeel hiervan natuurlijk dat ik geen gebruik kan maken van de community cards van home assistant. Kan uw front-end dit wel?

Ik kan hem wel delen hij staat al op github maar Onder uitleg dus weet niet hoe ver je dan gaat komen haha

maar je kan geen lovelace cards gebruiken alles zal los gebouwd moeten worden.

Zal vanmiddag uitleg maken dan kan je het proberen
Je kan nu lights, sensors, switchen, media player, weather en calendar. De rest heb ik niet maar rolluiken komen nog dus wordt nog uitgebreid en kan altijd dingen toevoegen.

You user the custom pop up card thing from Thomas? I van try to make the card for Just the slider Will let you know if that works

1 Like

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.

@hST

Ik heb de code hier staan: https://github.com/DBuit/hass-home-remote
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: https://home.buitwebdevelopment.nl/
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: https://github.com/DBuit/hass-custom-light-popup-card

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

3 Likes

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:
    image

  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
2 Likes

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