I am new to HA and taking it slow and only using the frontend,
how would I add a homekit style card with the frontend?
anyone got a sample code I can adjust?
No real easy way to do it except install HACS. Once you do that its somewhat easy.
I recommend using the HA discord to ask for help.
I believe he used this
I have hacs, installed the thing but dont understand how to add the code in the ui, just want a basic button for lights
The style component should look like this:
- type: "custom:homekit-card"
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
See more detail here https://github.com/DBuit/Homekit-panel-card
I used this
Garbage collection integration
Thanks - I’ll definitely check it out!
@DBuit or others, when the card is something like a sensor, is there a way to control whether it uses the ‘on’ CSS class or not?
What I’m trying to do: I have modified the CSS so that any light that is ‘on’ has a glow around it. This works brilliantly for anything that has an ‘on’/‘off’ state. However, if I have a sensor that has a state that is anything else (e.g. weather, times of the day, person location) it defaults to being ‘on’ and so it glows like the lights do.
And I can’t seem to find a way to turn off the ‘on’ class. If I set state to ‘false’ it still sets the overall button to ‘on’.
Any advice on this one? I’m not sure if I have explained myself clearly or not…
How did you get card to glow when is on
About weather, I have homekit card, double, and only shows name of the city, sunny or … and sun …
No temperature or anything else
Thx
I have Sony Tv, model xe85
And now Bravia tv integration won’t work any more, anybody else have problem
What does “won’t work any more” mean?
I have it installed, or when I reinstall it shows normal, but with press opens the window where is power button, but when I try to power it nothing happens, and it won’t show state; on or off, when I turn on or off tv with remote
I added the following to the homekit-panel-card.js, @doktordoc, but Ihad to delete the .gz version for it to work. I assume this is because you’re overwriting the generated CSS @DBuit? When I just added these changes to a custom CSS, they wouldn’t get picked up):
.button {
background-color: var(--paper-card-background-color) !important;
}
homekit-button.event.button.on {
box-shadow: 0px 0px 5px 3px var(--primary-color) !important;
}
I think I’ve figured it out…or at least a hack.
I can use the “offStates” attribute and just put all the states in there.
How do I get the wallpaper with that frost effect? I’ve done the dashboard. but the wallpaper is not working…
Anyone know how I can get a vertical slider without the popup, e.g. directly in a Lovelace card?
Any way to adjust the width of a single tile?
What about weather card, no information but name of town and sunny or cloudy …