Hi,
I am trying to set up the homekit card for a wall mounted tablet and I have an issue with the render.
I can get the right view on my laptop (5 tiles by row) but only 3 on the tablet.
I suppose there is somewhere in the card a detection for mobile devices.
Is there a way to have more than 3 tiles by row for mobile devices ?
Thanks for helping me 
This is the view of my laptop (below) :
And the view of my tablet :
Hi @maxtone66,
you could add the style part to overwrite the mobile css:
- type: "custom:homekit-card"
titleColor: "#FFF"
style: |
@media (max-width: 768px) {
.homekit-card {
margin: 15px 0 0 15px!important;
text-align: left!important;
width: initial!important;
}
.card-title {
margin-top: 10px!important;
margin-left: 15px!important;
font-size: 18px;
text-align: left!important;
width: initial!important;
}
}
entities:
Thatâs perfect ! Thanks a lot ! It works ! 
HI @DBuit,
one more point, below is my config working fine excepting with the value 0 is not showing icon and value at the top, when i change it to 1 or other value is working fine and showing the icon and value
Any idea ?
- entity: cover.bureau
name: Bureau
offStates: "closed"
offIcon: mdi:window-shutter
icon: mdi:window-shutter-open
state: sensor.cover_pos_bureau
popup:
type: custom:switch-popup-card
noActiveState: '-'
entity_value_path: attributes.current_position
service: cover.set_cover_position
service_data:
entity_id: this
position: value
entities:
- cover.bureau
buttons:
- icon: "mdi:window-shutter-open"
value: 100
name: "Ouvert"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:window-shutter-open"
value: 80
name: "80%"
color: "#FFF"
icon_color: "rgba(255,255,255,0.8)"
- icon: "mdi:window-shutter-open"
value: 50
name: "50%"
color: "#FFF"
icon_color: "rgba(255,255,255,0.6)"
- icon: "mdi:window-shutter-open"
value: 30
name: "30%"
color: "#FFF"
icon_color: "rgba(255,255,255,0.4)"
- icon: "mdi:window-shutter"
value: 0
name: "Fermé"
color: "#FFF"
icon_color: "rgba(255,255,255,0.2)"I was finally able to figure out a way to get the switch popup card as a FAN and non popup. I had to use the custom:hui-element and Custom:layout-card. but works flawlessly.
type: 'custom:layout-card'
entities:
- type: 'custom:hui-element'
card_type: 'custom:switch-popup-card'
entities:
- fan.master_bedroom_fan
buttons:
- icon: 'mdi:fan'
value: high
name: Hoog
color: '#FFF'
icon_color: 'rgba(255,255,255,1)'
- icon: 'mdi:fan'
value: medium
name: Gemiddeld
color: '#FFF'
icon_color: 'rgba(255,255,255,1)'
- icon: 'mdi:fan'
value: low
name: Laag
color: '#FFF'
icon_color: 'rgba(255,255,255,1)'
- icon: 'mdi:fan-off'
value: 'off'
name: Uit
icon: mdi-fan
noActiveState: '-'
entity_value_path: attributes.speed
service: fan.set_speed
service_data:
entity_id: this
speed: value
Hello! Iâm trying to use switch-popup-card to implement a good looking âhold_actionâ for my alarm. Because Iâm not using the Homekit Style Card, Iâve used browser mod to create the popup. The problem that Iâm facing is that, the hass call service to arm/disarm my alarm is failing with the following error:
Failed to call service alarm_control_panel/alarm_disarm. must contain at least one of entity_id, area_id.
Iâm specifying the entity_id and the code needed to arm/disarm the alarm on each button. Here you have the code:
- type: custom:switch-popup-card
entity_value_path: state
fullscreen: false
entities:
- '[[[ return entity.entity_id ]]]'
buttons:
- icon: "mdi:lock"
value: "armed_away"
name: "Arm Away"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
service: alarm_control_panel.alarm_arm_away
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
code: !secret alarm_code
- icon: "mdi:lock"
value: "disarmed"
name: "Disarm"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
service: alarm_control_panel.alarm_disarm
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
code: !secret alarm_code
What am I doing wrong?
Thanks!!
Hi @asierralozano,
Not sure what this is: [[[ return entity.entity_id ]]]
But inside the card for the service_data you can also use entity_id: this try if that works.
It looks that it works! Thanks!
Hello Guys,
Just released small update: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.4.9.5
Works like a charm! Is way better now!
Btw, I found that:
style: |
:host {
--tile-background: rgba(230,230,225,0.7);
--tile-on-background: white;
}
looks really close to the original colors (in case anyone will need this)
Thanks again!
Great work! I have two questions which im struggling with and where i hope you could help.
One big thing im missing is a lock feature just like with the button card. With this i can prevent that me or my wife push something we donât want to push by accident. Is this something you are going to add?
Secondly, is it possible to combine the homekit card together with other cards on the same view? I found one workaround with the layout card but then my layout is screwed with homekit. What i want to do is to combine the homekit buttons for my lights and use double gauge card for example to show the current brightness/colortemp variable for circadian values
It keeps throwing errors at me or isnât showing the homekit card, see below my test code:
id: TestHomekit
title: TestHomekit
path: TestHomekit
panel: true
icon: mdi:home
cards:
- type: custom:dual-gauge-card
title: Test
outer:
entity: sensor.tpl_clbrightness
label: "1"
min: 0
max: 255
inner:
entity: sensor.tpl_clcolortemp
label: "2"
min: 0
max: 500
colors:
- color: "var(--label-badge-yellow)"
value: 100
- color: "var(--label-badge-green)"
value: 150
- color: "var(--label-badge-blue)"
value: 250
- type: "custom:homekit-card"
useBrightness: true
useTemperature: true
# titleColor: "#FFF"
enableColumns: true
statePositionTop: true
style: |
:host {
--tile-background: rgba(230,230,225,0.7);
--tile-on-background: white;
}
rows:
- row: 1
columns:
- column: 1
# tileOnRow: 4
entities:
- title: Begane grond
entities:
- entity: light.grp_beganegrond
name: Begane grond
spin: false
icon: bha:mirror-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_toilet
name: Toilet
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_hal
name: Hal
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_woonkamer
name: Woonkamer
icon: bha:led-strip
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_woonkamertv
name: Woonkamer TV
icon: bha:mirror-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_trapkast
name: Trapkast
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_keukentafel
name: Keukentafel
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_achterhoek
name: Achterhoek
icon: bha:led-strip
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.bureaubeam01
name: Beam Achterhoek
icon: bha:mirror-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_keuken
name: Keuken
icon: bha:led-strip
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_bijkeuken
name: Bijkeuken
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_benedensfeerlifx
name: Beneden sfeer Lifx
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
When i include it into a homekit card itâs not showing correctly
- row: 4
columns:
- column: 1
# tileOnRow: 4
entities:
- title: Test
entities:
- card: custom:mini-graph-card
noPadding: true
wider: true
cardOptions:
entities:
- entity: sensor.tpl_clcolortemp
name: "Badkamer 1"
line_color: '#1427ff'
hold_action:
action: none
tap_action:
action: none
- card: gauge
wider: true
noPadding: true
cardOptions:
entity: sensor.tpl_clcolortemp
name: With Severity
unit: '%'
severity:
green: 0
yellow: 250
red: 450
- card: custom:dual-gauge-card
wider: true
higher: true
noPadding: true
cardOptions:
outer:
entity: sensor.tpl_clbrightness
label: "1"
min: 0
max: 255
inner:
entity: sensor.tpl_clcolortemp
label: "2"
min: 0
max: 500
colors:
- color: "var(--label-badge-yellow)"
value: 100
- color: "var(--label-badge-green)"
value: 150
- color: "var(--label-badge-blue)"
value: 300
Hi Dbuit,
First thanks a lot for your hard work, itâs really great addon to Home Assistant.
I have a ceiling fan with light and I just wonder if there is an option to show the âlight-popup-cardâ together with âswitch-popup-cardâ in order to be able to control the light and fan speed from the same popup screen, maybe something like this:
Is there anyone that has problem that the Rules part wont load untill clicked on?
Or that it take extremly long time to load.
If i klick the part were the rules are it loads direkly. @DBuit
Can it be some Java thing of homeassistant causing this? Want me to make a video of it?
Is there a way of getting the image in the card to take up the whole card?
Iâve tried a couple of things mentioned above but no joy?
Code is
- entity: media_player.kitchen_display
name: Top Songs 2016
image: 'http://192.168.68.110:8123/local/2016playlisticon.png'
style: |
:host {
--tile-image-radius: 300%
}
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
Thanks!
Hi @Eldudemeister,
at the moment it is no option but maybe not a bad idea.
For now you could fix it with the styles but than all images will go over the whole tile but maybe that is no problem for your.
Add this to 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 @tomerbs,
What you could try to do is use browser_mod (maybe you already have it?)
You can open any lovelace card as a popup.
Next you could use layout card i think and inside the layout card use the light popup, and switch popup so you have them both in 1 popup.
Hi @lubbertkramer,
About locking, you really want it with a password and stuff or just a tile where you can disable the actions when tapped?
About combining i have not done that but other people have i guess that is your best option, maybe scroll back there are people that got it working i think.
Really strange that gauge card is working so strange inside a tile, i guess some conflicting css i dont use that card what can you put in it maybe i can see what breaks it.
Thx for this post. Was pulling my hair on this one. Had no icons showing untill i used this.
This is the code in total im using on the Card
enableColumns: true
home: true
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 %}
title: Home
icon: 'mdi:home-outline'
rows:
- columns:
- column: 1
entities:
- entities:
- entity: sensor.vardagsrum_temperature
- entity: input_boolean.fan
spin: true
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.vardagsrums_lampor_grupp
offStates:
- 'off'
- unavailable
- entity: light.vardagsrum_vanster
offStates:
- 'off'
- unavailable
- entity: light.vardagsrum_hoger
offStates:
- 'off'
- unavailable
- otillgÀnglig
- unknown
- entity: switch.koks_fonster
- entity: light.koket
supportedFeaturesTreshold: 0
- entity: binary_sensor.altandorr_vardagsrum
icon: 'mdi:door-open'
offIcon: 'mdi:door'
popup:
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
entities:
- '[[[ return entity.entity_id ]]]'
settings:
closeButton: stÀng
openButton: InstÀllningar
supportedFeaturesTreshold: -1
switchHeight: 300px
switchWidth: 110px
type: 'custom:switch-popup-card'
title: Vardagsrum
tileOnRow: 4
- column: 1
entities:
- entities:
- entity: sensor.sovrummet_temperature
- entity: light.sovrum_sang_vanster
- entity: light.sovrum_sang_hoger
- entity: light.sovrums_fonster
- entity: light.sovrum_bank_vanster
- entity: light.sovrum_bank_hoger
- 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
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
entity: |
[[[ return entity.entity_id ]]]
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Sovrum
tileOnRow: 4
row: 1
- columns:
- column: 2
entities:
- entities:
- entity: sensor.hallen_temperature
- entity: alarm_control_panel.dammtorps_alle_lgh_alarm
offStates:
- unarmed
- entity: switch.hallen
- entity: binary_sensor.entredorr
icon: 'mdi:door-open'
offIcon: 'mdi:door'
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
icon: 'mdi:lamp'
- entity: switch.malvinas_sang
icon: 'mdi:light-switch'
name: Malvinas Fönster
- entity: switch.malvinas_rum
icon: 'mdi:floor-lamp'
name: Malvinas 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'
offStates:
- 'off'
- unavailable
- entity: switch.evelins_rum
name: Evelins Golvlampa
- card: weather-forecast
noPadding: true
wider: true
cardOptions:
entity: weather.smhi_hemma
cardStyle: |
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!important;
background: transparent!important;
box-shadow: none!important;
border-radius:0!important;
}
.content {
display: flex!important;
flex-direction: row!important;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 32px!important;
flex: 0 0 32px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:14px!important;
text-align:right;
}
.info .name-state .name {
font-size:14px!important;
}
.info .temp-attribute {
width:100%;
font-weight: 500;
}
.info .temp-attribute .temp {
font-size: 16px!important;
}
.info .temp-attribute .temp span {
font-size: 14px!important;
}
.forecast {
font-size: 10px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:20px!important;
height:20px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:12px!important;
}
.forecast .templow {
display:none;
}
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'
offStates:
- 'off'
- unavailable
- entity: light.utomhus_ljusslinga
name: Ljusslinga
- entity: light.busklampor
name: Busklampor
popup:
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Utomhus
row: 2
- columns:
- column: 1
entities:
- entities:
- entity: light.vardagsrum_vanster
- entity: switch.vardagsrum_hoger
- entity: switch.sovrum_vanster
- entity: switch.sovrum_hoger
- entity: switch.sovrumssang_vanster
- entity: switch.sovrumssang_hoger
- entity: switch.sovrumsfonster_lampa
- 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: Knappar
tileOnRow: 10
row: 3
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
}
titleColor: '#FFF'
type: 'custom:homekit-card'
useBrightness: true
useTemperature: false
Really stange i never had problemsâŠ
Any thing in the developer tools console of the browser?