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.
Ohhh You can se supportedFeatures on light entity stats and put the value from there. Got it working.
Hope that anyone searching the forum here will see that. Maby that should be updetad on the readme for the popup to avoid anyone allse asking. Thx all, Have a great day.
Even with this i still get a card that wont have picture from top to bot. Ice tried a picture larger then the button.
rows:
- columns:
- column: 1
entities:
- title: People
entities:
- card: 'custom:button-card'
noPadding: true
cardStyle: |
:host {
display: flex;
height: 100%;
}
cardOptions:
color_type: card
custom_fields:
sd: |
[[[
return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
<span>${states['sensor.jimmyberglund'].state}</span>`
]]]
show_entity_picture: 'true'
styles:
card:
- background-image: url("/local/jimmy.jpg")
- background-size: cover
- background-position: 50% 50%
- text-shadow: '1px 1px #000000'
- color: white
- font-size: 14px
- font-weight: bold
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 3fr 3fr 2fr 2fr 2fr
template: button
Hi,
It should work in the card it self, you sure you put the style at the right part of the card config?
Can you share the full config?
What is wrong on the screenshot you send?
HI m8.
I guess it can be abitt hard to see with the coloring. but 10% of the picture was cropped.
I fixed it with
styles: card: - border-radius: 0px
I did not need to use that when i only had the custom lovelace button card.
Now its just about grid placement for the text and im done. Guess its mostly getting use to how this works. But now om done with a setup that looks like it did with button card.
A Question. Is it possible to setup a row or column with a condition code on?. Im using that on a card that has a custom lovelace button setup that only shows buttons when its info that is needed. Like for example. Front door is open. and then a icon showing the front door open is shown. OR example larm is not set when everyone left the building.
Rather then having a seonsor icon showing both closed and open I have a row in my previus setup that only shows them when i need to see them.
This bar below is that setup that shows now that my backdoor is open. and when its closed it get hidden.
Thx for all the work you put in. If the conditioning is possible then that will be my last step before im done with my setup.
Can anyone help me style this card so that the camera image fills it correctly?
This is what it should look like
Thanks.
- title: Camera entities: - card: picture-glance cardOptions: title: Garage entities: [] camera_image: camera.esp_camera1 camera_view: live cardStyle: | :host { display: flex; height: 100%; } name: Garage noPadding: true wider: true higher: true
Is it a design choice that title name does not show upp on homekit card when using popup light?
Cause when i use it on my old setup with button card and browser mod it shows the name of the light.
Ive search the forum here and been looking around for an hour now. but all i find is others posting configs without title name showing aswell
my code for my lights:
enableColumns: true
home: false
tileHoldAnimation: false
icon: 'mdi:home-outline'
rows:
- columns:
- column: 1
entities:
- entities:
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.vardagsrums_lampor_grupp
offStates:
- 'off'
- unavailable
- entity: light.vardagsrums_lampor_vanster_grupp
name: Golvlampa Vänster
offStates:
- 'off'
- unavailable
- entity: light.vardagsrums_lampor_hoger_grupp
name: Golvlampa Höger
offStates:
- 'off'
- unavailable
- otillgänglig
- unknown
- entity: switch.koks_fonster
- entity: light.koket
popup:
icon: 'mdi:power'
actions:
- color: '#271a00'
name: Movie
service: scene.turn_on
service_data:
entity_id: scene.vardagsrum_movie_night
- color: '#ffb424'
name: Familj Kväll
service: scene.turn_on
service_data:
entity_id: scene.familj_kvall
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
switchHeight: 300px
switchWidth: 110px
settings:
closeButton: stäng
openButton: Inställningar
supportedFeaturesTreshold: -1
title: idiot
type: 'custom:light-popup-card'
title: Vardagsrum
tileOnRow: 5
- column: 1
entities:
- entities:
- entity: light.sovrumssang_vanster_grupp
name: Säng Vänster
- entity: light.sovrumssang_hoger_grupp
name: Säng Höger
- entity: light.sovrumsfonster_lampa_grupp
name: Fönster Lampa
- entity: light.sovrums_bank_vanster_grupp
name: Bänk Vänster
- entity: light.sovrums_bank_hoger_grupp
name: Bänk Höger
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrumsbank_lampor_grupp
name: Bänklampor
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrums_temp_lampor_grupp
name: Temp Lampor
title: |
[[[ return entity.attributes.friendly_name ]]]
popup:
actions:
- color: '#00c788'
name: Grönt
service: scene.turn_on
service_data:
entity_id: scene.gront_ar_skont
- color: '#ff7200'
name: Mysigt
service: scene.turn_on
service_data:
entity_id: scene.mysigt
- color: '#c4d9d2'
name: Spelande
service: scene.turn_on
service_data:
entity_id: scene.spelande
- color: '#f000ff'
name: Sexigt
service: scene.turn_on
service_data:
entity_id: scene.sexigt
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stäng
openButton: Inställningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Sovrum
tileOnRow: 7
row: 1
- columns:
- column: 2
entities:
- entities:
- entity: light.hall_lampor_switch
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
settings:
closeButton: stäng
openButton: Inställningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Hallen
- column: 2
entities:
- entities:
- entity: light.malvinas_fonster_lampa_grupp
icon: 'mdi:lamp'
name: Fönsterlampa
- entity: switch.malvinas_rum
icon: 'mdi:floor-lamp'
name: Golvlampa
popup:
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stäng
openButton: Inställningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Malvinas rum
- column: 2
entities:
- entities:
- entity: light.evelins_fonster
icon: 'mdi:lamp'
name: Fönsterlampa
offStates:
- 'off'
- unavailable
- entity: switch.evelins_rum
name: Golvlampa
popup:
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stäng
openButton: Inställningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Evelins rum
- column: 2
entities:
- entities:
- entity: switch.utomhus_vagg
icon: 'mdi:wall-sconce'
popupExtend:
title: Vägglampa
name: Vägglampa
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stäng
openButton: Inställningar
switchHeight: 300px
switchWidth: 110px
- entity: light.utomhus_ljusslinga
name: Ljusslinga
- entity: light.busklampor
name: Busklampor
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
supportedFeaturesTreshold: 40
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Utomhus
- column: 1
entities:
- entities:
- entity: light.vardagsrums_lampor_grupp
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrumsbank_lampor_grupp
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrums_temp_lampor_grupp
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
settings:
closeButton: stäng
openButton: Inställningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Grupper
tileOnRow: 10
row: 2
rules: |
{% if states('sensor.current_lights_on') | float > 0 %}
<li>{{states('sensor.current_lights_on')}} Lampor är på</li> {% endif %}
{% if "unlocked" in states('lock.entre_dorr') %} <li>Dörren är EJ LÅST!!</li>
{% endif %}
{% if "disarmed" in states('alarm_control_panel.dammtorps_alle_lgh_alarm') %}
<li>Larmet är: avlarmat</li> {% endif %}
{% if "triggered" in states('alarm_control_panel.dammtorps_alle_lgh_alarm') %}
<li>Larmet larmar</li> {% endif %}
{% if "armed_home" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
%} <li>Larmet är i: Skalskyddat läge</li> {% endif %}
{% if "armed_away" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
%} <li>Larmet är i: Helskyddat läge</li> {% endif %}
{% if "armed_night" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
%} <li>Larmet är: Nattlarmat</li> {% endif %}
<li>Tempratur Hemma är runt {{states('sensor.vardagsrum_temperature') |
round(1) }} °C</li>
{% if "home" in states('person.jimmy') %} <li>Jimmy är Hemma</li> {% endif %}
{% if "home" in states('person.Maria') %} <li>Maria är Hemma</li> {% endif %}
statePositionTop: false
style: |
:host {
--tile-background: rgba(10, 10, 10, 0.22);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: var(--card-background-color);
--tile-name-text-color: rgba(183, 183, 183, 0.59);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: rgba(183, 183, 183, 0.59);
--tile-on-state-text-color: var(--paper-item-icon-active-color);
--tile-state-changed-text-color: var(--primary-text-color);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: var(--primary-text-color);
--tile-icon-color: rgba(183, 183, 183, 0.59);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--tile-icon-size: 30px;
--tile-padding-top: 0
--tile-image-radius: 0;
}
.icon.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.icon.image img {
height: 100%;
}
}
title: Home
titleColor: '#FFF'
type: 'custom:homekit-card'
useBrightness: true
useTemperature: false
You might see a few test names on titels were i try to make it work ^^
Sorry for posting allot past day.
Hi @Jimmy_Berglund,
There is no title / name as you see in the default more info popup.
Where would you wanna have a title?
Ill explain with pictures.
My old setup:
Here i had no problem getting a name tag from the entity.
New setup:
Here when i bring upp the popup all my efforts have all been invain. Even when i try manuy type the name. So i must be doing something verry wrong. or its not possible in homekit card?
Ive tried to find a solution for it on the forum but all my searching only found the same outcome as mine.
And the one i found that works are with browser mod. Allso kind wondering if dubble tap funktion for popup is only achivable with browser mod? or can it be called with the same funktion used for hold_action on the card itself?