Hey does anyone have a working example on how to use the popup in a custom card?
I’m working on a custom card and so far so good but now I want to get a popup window when I hold my button.
When I use this @ha-hold="${cardTools.popUp(“title” , “message”, false)} I get following error.
(Unhandled Promise Rejection: TypeError: Argument 1 ('node') to node.appendChild must be an instance of Node)
If I use a console.log in de @ha-hold it works.
Its still very early to show but this is what I got so far. https://github.com/gST84/homekit-card
It is a card that puts everything in a homekit style layout. (the code could probably be a lot better by somebody more skilled but it works. )
I don’t really understand what you are going for. Do you want homekit style buttons? They can be made with button-card (but the screen shows me that you already have that).
Do you want a pop up windows? This is already possible with the popup card
If there are any differences in the things you want to do, could you please care to explain, because it would help a lot. I have an example posted on popup cards etc here:
Hi, just download the file from the GitHub link and put it inside your www folder.
You also need to put this file inside your www folder. https://github.com/thomasloven/lovelace-card-tools
Then add this to your Lovelace at recourses.
- type: js
url: /local/card-tools.js?track=true
- type: module
url: /local/homekit-card-beta.js
Then you can add a custom card like this .
i had build all my buttons with the button card but found it a pain to copy and past all the yaml and align all the spaces when using vertical and horizontal stacks.
So I made my own card so that does the same thing and in some cases even more than I could with the button card. thomasloven also has the card-tools card made to simplify card reaction. There is a way to add the hold function to your own cards. This works but there is also a way to add a popup function to your custom card and this is were I struggle to get it to work.
My plan is to have a slider popup when holding a light just like homekit.
I also hope to add a popup with the thermostat to the climate button and a color wheel to the rgb lights.
All in all I want to create a card to mimic homekit without a lot of work in Lovelace and to have fun making it .
I didn’t think i could use the popup card on my own custom card but i will look in to this. Thanks
Ah I understand. Yeah I have been looking for a popup card as well. But @RomRider (the current dev of the button-card) said that this might not be possible because of the way polymer works or something like that. But I am not a dev so i can’t comment on that.
But basically what you want is a hold and slide action right?
E.g.
hold button until the popup comes
still keep holding and slide up/down for brightness
Well if you could make something like this that would be really awesome as I have been looking for something like it as well. Currently I use the light entity as a popup (you might have seen it in the video I shared). But man a hold action which will create a popup and then slide up/down just like Homekit does would be very cool.
I didn’t say it’s not possible, I just said it’s a completely new “HTML object”, I could do it, it’s just a lot of work
Also, @hST, there’s a templating feature in button-card in case you missed it
It’s nice to create a card that does just “homekit” style buttons, but I don’t think it’s good to duplicate the work especially because you can already achieve the same thing with button-card. I would gladly accept PRs to add the missing features you are talking about or feature requests.
Also good luck with fixed width buttons with multiple interfaces size (I’ve seen 116px width/height in your code)
Indeed I missed the template feature in the button-card
Yes I know the hardcoded width probably is horrible but I’m not the best at this and this project is a way to learn more.
Thats why I wasn’t planning on really putting my card out there and just develop this for myself. But everybody is free to use what I made how they see fit.
i started to work on hST homekit style lovelace card to make a custom pop-up like homekit.
I got a working version here: https://github.com/DBuit/homekit-card
Omg, this is what I have been looking for for almost a year. Unfortunately I do not have programming skills to make such a card myself. But I will definitely try this as soon as I get back from work. Amazing work. Now lets hope this works the way I hope it works !
Wow, this is awesome I have not gotten it to work yet. But I love that someone pick this up because I got a bit discouraged because everything stopt working with the latest Hassio updates. The buttons displayed but when I klik them nothing works witch still is the case for me with this version.
If you like homekit that much, I will suggest you to take a look at my repo. You might find something you could use.
I will be releasing a lot of updates to that repo in a few weeks, so it is bound to change a lot. However I think it represents a homekit style good enough for production use (My wife and I use this on a daily basis for almost a year now). The repo should be up to date for current HA versions and current custom cards.
(Srry for hijacking this thread, I only want to help out!).
@hST bij mij werkt hij wel. Heb je ervaring met developer console in Chrome? Heb je een melding in console staan wellicht dat ik je kan helpen het op te lossen.
Ik gebruik hem zelf eigenlijk niet in lovelace hen zelf custom front-end gemaakt gebaseerd op homekit heb ff snel video gemaakt wil de card nog wel uitbreiden met kleuren.
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.
Dat ziet er zalig uit geen ambitie om die front-end te delen ? 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.
)
!
I have not gotten it to work yet. But I love that someone pick this up because I got a bit discouraged because everything stopt working with the latest Hassio updates. The buttons displayed but when I klik them nothing works witch still is the case for me with this version.
