Hi @DBuit,
I’ve update and tested again. Now it’s working and showing the right sizes.
Great and thanks for this. 
1 Like
That’s true.
I think it should be possible with vertical stack but with alot of trial and error.
Haha almost strak.
I will see if i can get it strakker 
Haha thank you.
The card on desktop however is now the other way around: The smaller tiles are slight stretching out: (zoomed in for showing)
Hello how can I have the longest brick or card configuration could you put a code example Thanks
Like this?
- row: 2
columns:
- column: 1
tileOnRow: 3
entities:
- custom: Scripts
name: Etentje
icon: mdi:silverware-fork-knife
tap_action:
action: script.turn_on
entity: script.dinnerI don’t know what the today’s update did, but styles aren’t working anymore. At least changing --tile-background doesn’t do anything anymore 
Almost the action is service:
- custom: Scripts
name: Etentje
icon: mdi:silverware-fork-knife
tap_action:
action: call-service
service: script.dinner
service_data: <- Not sure if you need service data?
Here you can see the part in the readme about actions: https://github.com/DBuit/Homekit-panel-card#action-options
I’m getting a "cannot call service “script turn on” expected dict for dictionary value @data[service_data] Got script.dinner
custom: Scripts
name: Etentje
icon: mdi:silverware-fork-knife
tap_action:
action: call-service
service: script.turn_on
service_data: script.dinner
edit:
got it
no need for service data
Still have a problem though… the button shows the color as like i press the button…
Hi guys I need a lot of help I would like to integrate a specific “iframe” card like the one I am attaching to my cards to view forecast data in real time.
The url to which I would like to connect the card is the following: https://embed.windy.com/embed2.html
Could you help me and indicate the type of card to use among those homekit cards and the code to use to view what is attached?
Also I wanted to know and you just need to prepare the card or you need to write some code also in configuration.yaml or other files.
Thanks I hope someone can help me
Hi,
Does it show like it is in the “on” state?
Yes it’s shown like it is in the “on” state.
Im using it on another yaml page too for my lights dashboard.
When i change it on the page containing the scripts - so its shown like it is in the “off” state (like i want to)
then its good, but then on the other lights yaml page, the colors show there are like the off state too although the code is differently
Very strange
So i cant get it right
for Dbuit
Hello could you help me to display this card with one of those homekit panel cards maybe a little bigger, forgive me if I ask you this but it is the day that I try to read and reread your info on the forum and on your pages but I do not come out. The image I am attaching is the classic Home assistant card but I would like to use Homekit panel card but I can’t thanks claudio
[image]
Posting this again in the hope I’ll find some help.
My popups appear in a very small scrollable window and I can’t figure out why.
Most of my config is copied from the sample in @DBuit’s repo but with my own entities.
Here are screenshots of how they look and also my full view code
config:
background: var(--background-image)
custom_header:
background: 'rgba(155, 155, 155, 0.25)'
button_text:
options: '{{ hours24 }}:{{ minutesLZ }}'
compact_mode: true
hide_header: true
hide_help: true
popup_cards:
climate.office_ac:
card:
entity: climate.office_ac
type: 'custom:thermostat-popup-card'
style:
'--iron-icon-fill-color': '#FFF'
align-items: center
background: 'rgba(0, 0, 0, 0.8)'
display: block
flex-direction: column
height: 100%
justify-content: center
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 999
title: ''
views:
- cards:
- entities:
- entities:
- entity: lock.front_door
halfheight: true
name: ' '
offStates:
- locked
tap_action:
action: toggle
entity: lock.front_door
- entity: sensor.night_status
halfheight: true
hide: |
[[[
var state = states['input_boolean.night_mode'].state ;
return (state == 'idle') || (state == 'boo');
]]]
hideState: true
name: ' '
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.night_mode
- entity: input_boolean.away_mode
halfheight: true
hide: |
[[[
var state = states['input_boolean.away_mode'].state ;
return (state == 'idle') || (state == 'off');
]]]
name: Away
- entity: light.entryway
name: ENTRYWAY
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
state: binary_sensor.motion_entryway
- entity: light.kitchen
name: KITCHEN
style: |
:host {
--tile-icon-color: rgba(255, 0, 0, 0.3);
--tile-on-icon-color: rgba(0, 255, 0, 0.3);
}
- entity: light.dining_room
name: DINING ROOM
- entity: light.lounge
name: LOUNGE
- entity: light.hallway
name: HALLWAY
- entity: light.closet
name: CLOSET
- entity: light.bedroom
name: BEDROOM
- entity: light.living_room
name: LIVING ROOM
- entity: light.adams_room
name: ADAM'S ROOM
- entity: light.office
name: OFFICE
state: sensor.temperature_office
type: 'custom:light-popup-card'
- entity: light.patio_lights
name: PATIO
- entity: light.porch
name: PORCH
- entity: light.lounge_led
name: LOUNGE LED
- entity: light.bar
name: BAR
- entity: light.shed
name: SHED
- entity: light.living_room_colour_lamp
halfheight: true
state: false
wider: true
widerSize: 2
- entity: climate.office_ac
tap_action:
action: more-info
entity: climate.office_ac
- entity: light.lounge_lamp
halfheight: true
hideState: true
style: |
:host {
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f75977;
--tile-icon-size: 10px;
--tile-border-radius: 5px;
}
- entity: light.buffet_led
halfheight: true
style: |
:host {
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f75977;
--tile-icon-size: 10px;
--tile-border-radius: 5px;
}
masonry: true
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
statePositionTop: true
state_color: true
style: |
:host {
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f75977;
--tile-icon-size: 25px;
--tile-border-radius: 5px;
}
titleColor: '#FFF'
type: 'custom:homekit-card'
useBrightness: false
useTemperature: false
fullscreen: true
icon: 'mdi:tablet'
panel: true
path: wallmount
title: Wallmount
Does anyone know how (which css properties) I can change the circle around the state icon?
I need to change the colour or shape or hide it altogether
Hello mate, I just followed your awersome code for the media player card. Thank you for sharing!
I have a question, due to the fact I really don’t know how to manage Style codes: how can I remove those white border on the 4 angles? Thank you!
@DBuit I have this UI issue on Chrome and Firefox when I use the masonry with the weather card. Do you have an idea how to avoid it?
From iOS app it’s all regular…
Can you share your config for media player card
Thx
Sure, I took this from @martheijnen and I added the popup:
- card: 'custom:mini-media-player'
entity: media_player.tv_sala
noPadding: true
wider: true
higher: true
tap_action:
action: navigate
navigation_path: /lovelace/media
hold_action:
action: popup
cardStyle: |
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.5vw !important;
image
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
cardOptions:
artwork: full-cover
entity: media_player.appletv_soggiorno
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
popup:
type: 'custom:media_player-popup-card'
actions:
- service: media_player.appletv_soggiorno
service_data:
entity_id: media_player.appletv_soggiorno
name: previous
icon: 'mdi:skip-previous'
- service: media_player.appletv_soggiorno
service_data:
entity_id: media_player.appletv_soggiorno
name: play/pause
icon: 'mdi:play-pause'
- service: media_player.appletv_soggiorno
service_data:
entity_id: media_player.appletv_soggiorno
name: next
icon: 'mdi:skip-next'
1 Like