Mmm, I can’t find this in HACS, how is it exactly called there?
OK, I better properly read the github 
sorry
Thanks for this, when I try to input it as you have put it above, it doesnt like the location of the first } and tells me there is an indention issue? If I allign them nothing happens to the card?
Strange, can you share tour config maybe i can find what is going on.
Hi @DBuit
Locking just to enable/disable with a double tap or hold functionality, just to be sure you don’t tap by accident the power from your 3DPrinter. The custom button card has an example that i used a lot but your card is much more easy to manage then to keep all the UI changes in mind about all the cards (see here for example -> https://github.com/custom-cards/button-card#lock-object).
I will investigate some more on the combining and will take a look into this topic, thought i already did but i guess i overlooked it
Thanks, this is the config I am using without an error but the image size is still the same…
- entities:
- entity: media_player.kitchen_display
name: Top Songs 2016
image: 'http://192.168.68.110:8123/local/2016playlisticon.png'
style: |
:host {
--tile-image-radius: 0;
}
.icon.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.icon.image img {
height: 100%;
}
tap_action:
action: call-service
entity_id: media_player.kitchen_display
service: spotcast.start
service_data:
device_name: Kitchen Display
entity_id: media_player.kitchen_display
offset: 1
random_song: true
repeat: track
shuffle: true
uri: 'spotify:playlist:37i9dQZF1CAaiIWVF9iQy0'
Here are two things i guess are intresting.
DevTools failed to load SourceMap: Could not load content for https://myhomeassistanturl/hacsfiles/light-popup-card/index.m.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://myhomeassistanturl/hacsfiles/Homekit-panel-card/index.m.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
So the style part must be at the beginnen of the home kit card.
You can’t style 1 specific tile that is also why this solution is not always working because all images (if you have more on a tile) will be filling the whole tile.
So it should be right here:
- type: "custom:homekit-card"
style: |
:host {
--tile-image-radius: 0;
}
.icon.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.icon.image img {
height: 100%;
}
Hi,
more people have that but don’t think that is the problem.
i will try to make a change today on the rules part how it is rendering, because right now you need admin rights and i wanna fix that. maybe that change also does something for you.
Hi,
the light-popup works great for my hue strips, but when I add a KNX light (which in itself works 100% fine in HA) to the light-popup I can only switch it on/off not change the brightness. Also the popup card looks different between the two.
Ok nice! Thx ill try it out once you apply it and get back with how it turns out.
Thank you for looking in to it.
I had the same problem with a light in my kitchen.
Fround in this thread about “supportedFeaturesTreshold: 0” that helps out with dimming feature on light when it wont work on auto.
For me it worked with adding this line to the popup light part “supportedFeaturesTreshold: -1”
Try it out and see how it works. You can allso search for “supportedFeaturesTreshold” on this topic.
Hi @DBuit,
Just starting with this card, it’s awesome, tnx! I’ve set up a dashboard with several views and I’d like to have the tiles have a different color in each view. Is that possible? This is my (stripped down) code:
title: My Home
views:
- title: "View 1"
path: "home"
panel: true
background: center / cover no-repeat fixed url("/local/LightBlue-iOS-13-Home-app-wallpaper.png")
cards:
- type: 'custom:homekit-card'
style: |
:host {
--tile-background: rgba(255, 0, 0, 1);
}
home: true
title: View 1
entities:
...
- title: "View 2"
path: "deck"
panel: true
background: center / cover no-repeat fixed url("/local/LightGreen-iOS-13-Home-app-wallpaper.png")
cards:
- type: 'custom:homekit-card'
style: |
:host {
--tile-background: rgba(0, 255, 0, 1);
}
title: View 2
entities:
...What happens is that the tiles on all views are the same color (from the --tile-background in the 2nd view). Everything else works as expected.
Tx!
supportedFeaturesTreshold: -1
did the trick
Awesome. Glad i could help.
Hi @DBuit
I have a request in connection with the use of custom cards:
The color for the status of a card (On or Off) depends on the previously defined style guidelines.
- type: 'custom:homekit-card'
style: | ...
This makes it impossible to assign the status: Off to a custom card (for example cutom:button-card), because custom cards always get the status: On. (see HomeKit-panel-card.ts line 473 below)
} else if(ent.card) {
entityCount++;
return html`
<homekit-button class="button on event ... ></homekit-button>
My suggestion would be to replace either
<homekit-button class="button on event ... >
with
<homekit-button class="button event ... >,
so that you can define the status color in the style of the custom:buttom-card yourself and it is not supplemented by an underlying color …
Or you can supplement the options when using custom cards so that the status of the entity is also taken into account for custom cards and can also be supplemented by defining offStates.
Example:
- card: custom:button-card
noPadding: true
cardOptions:
entity: binary_sensor.template_heating_circuit_a #(status on or off)
offStates: #(optional)
- 'state1'
- 'state2'
and in your code line 473 and below similar like this:
} else if(ent.card) {
entityCount++;
if statusEntity == 'off' or statusEntity == valueFromOffStates {
return html`
<homekit-button class="button off event ... ></homekit-button>
} else {
return html`
<homekit-button class="button on event ... ></homekit-button>
}
I hope it’s clear what I mean. Maybe I think too complicated and there is an even simpler solution.
I hope my request is accepted, otherwise I see no possibility to solve this admittedly special problem. Here and there a custom-button-card will remain indispensable. Apart from that, a big praise from me for your great work, which really makes the construction of a clever user interface much easier.
Best regards
Could u by any chanse post your final code for this Sensor Graph?
Is there a way with light-popup on the homekit card to setup a Light as a switch? yes the opposite of what everyone allse wants
I have a spot light thats not dimmable in the garden thats connected to a hue bridge. ITs just a switch.
But show upp as a dimmer. So i wanna call it out for what it realy is.
Ive tried playing around with supportedFeaturesTreshold: -1 and ill to value of 13. And that has done nothing for me.
Sorry, but my design has changed a bit in the meantime and looks like this now:
I now use the Homekit Stlye Card in combination with the Button Card and Decluttering Templates.
If you are interested, you can find my config on github: https://github.com/CM000n/homeassistant
Here for example for the Sensor tiles: https://github.com/CM000n/homeassistant/blob/247a79e8eb347d6d346cea3a67a91f2c41815806/ha_lovelace/views/temperature_sensors.yaml and for the corresponding decluttering template: https://github.com/CM000n/homeassistant/blob/247a79e8eb347d6d346cea3a67a91f2c41815806/ha_lovelace/templates/graph-card.yaml
I hope this helps you a little. Best regards
3 Likes
Ty! Been looking for something like that for a while. That will probably help allot.