I was looking fro somethink like this.
Can you show me an example on how to set a card which can contain the “custom:layout-card” and also the “homekit-card”?
EDIT: another question guys: how can I use the icons showd on the screenshots?
@DBuit Thanks so much for your effort, i’ve been using the card a long time and is actually one of my main lovelace custom cards.
Just a quick question, is it possible to somehow disable the tap vibration on mobile?
When i have a popup assigned as a tap action, the phone vibrates twice.
probable once because of browser mod popup, and the second because of the homekit card.
Any ideas?
thanks a lot
Guys, I’m totally lost on how to implement the popup card.
I installed “Browser_mod”, but when I tap a tile it says: failed to call service browser_mod
What I need to set up with this addon to get it work?
Thank you!
Hi,
You have an iphone i think?
I noticed it to on my iphones not really sure why it vibrates it does not do that on android.
You also added browser_mod in your configuration.yaml?
Hi,
It is true it is not as good as it was 
It will get better but it is kinda work in progress.
In your example you are missing the style part to style the pop-up.
But if you use homekit card why use browser_mod service and not just the popup action that homekit card has? this automatically adds the styles.
Check out light popup card readme on github to see an example with the new style part: https://github.com/DBuit/light-popup-card
Hi, does the syling also work with the media and cover popup cards, or do they need to be updated by you first? Still holding out on updating to 113 because of the broken way popups work with browser mod and styling.
Yes, at the end I did it and now popups are working.
But now I have a problem: if I hold tap, popup appears. If I simply tap, lights don’t turn on/off…
HI @DBuit
I see you active even though you just got a baby. Respect for that.
Are you able to help or have you stopped work on the Sonos card?
The style is under it.
Om using browser mod to be able to use dubble tap. If you have a way to still use the normal homekit card to do that ill change to that on the spot.
But i allso do that cause with homekit card i have a hardtime templating code when im not using yaml mode. Im just doing it by interface mode.
like example. =
double_tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
entities:
- actionSize: 4.5em
actions:
- color: '#d8d9e1'
service: light.turn_on
service_data:
color_temp: 153
entity_id: '[[[ return entity.entity_id ]]]'
- color: '#d5b08d'
service: light.turn_on
service_data:
color_temp: 326
entity_id: '[[[ return entity.entity_id ]]]'
- color: '#ce944b'
service: light.turn_on
service_data:
color_temp: 500
entity_id: '[[[ return entity.entity_id ]]]'
- service: browser_mod.popup
service_data:
card:
entities:
- entity: '[[[ return entity.entity_id ]]]'
secondary_info: last-changed
- brightness: false
color_temp: true
entity: '[[[ return entity.entity_id ]]]'
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
type: 'custom:light-entity-card'
show_header_toggle: false
type: entities
deviceID: this
title: '[[[ return entity.attributes.friendly_name ]]]'
actionsInARow: 2
borderRadius: 1.7em
brightnessHeight: 350px
brightnessWidth: 130px
entity: '[[[ return entity.entity_id ]]]'
fullscreen: false
icon: none
sliderColor: '#c7c7c7'
sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
style: >
#popup {
margin: -2.4em 0 1.4em 0; }
#brightnessValue {
color: rgba(255, 255, 255, 0.8); margin: -1em 0 0 0; font-size: 2em; font-weight: 400;
position: absolute; z-index: 100; letter-spacing: 0.02em; pointer-events: none;
mix-blend-mode: difference; text-align:center; width: 3.4em; height: 3.4em; }
#popup > div.action-holder > div:nth-child(2) > div:nth-child(2)
> span {
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%),
conic-gradient(rgb(120,39,230), rgb(230,34,231), rgb(228,5,136), rgb(228,25,25), rgb(229,105,30), rgb(232,226,46),
rgb(125,230,41), rgb(52,232,40), rgb(51,231,92), rgb(52,232,224),rgb(32,125,229), rgb(18,39,229), rgb(120,39,230));
border-width: 2px; border-color: #e6e6e6; --size: 4.4em !important; }
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
type: entities
deviceID: this
title: '[[[ return entity.attributes.friendly_name ]]]'
entity: '[[entity]]'
hold_action:
Think you should revert untill hes able to find the time to help out. Being a dad limits the time.
Agree, not trying to push, was more wondering if the card was not supported/updated anymore.
@DBuit, sorry about that. Was not the meaning at all…
This actually happens on the HA android app. I have not tested with chrome on Android.
Anyway, it is not a problem. I was just curious if you had implemented a vibrate action.
Thanks for the great work!
Hello everybody, finally i got it working and I’m very happy with this UI.
Many thanks to @DBuit for your work!
I have two more questions for this setup:
1- I still not understand very well what can I do in the “home” tile. You say rules, but what if I want to see the weather or, for exaple, a tile with the entity of who is at home?
Something like what i have under the title “In Casa”:
2- Can I break some rows? For example, I whant to add to my “Studio” room 5 Tiles, where one of those is a Light and the other four devices.
Can I set the first row with one tile and the second one with 4 tiles? I don’t want to devide them with another title, just break the line.
Also the possibility to leave empty spaces is fine to me.
Thank you!
1 Like
There are rules discution all over the tread if you search for “rules”
Here is an example of mine.
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 %}
I did exacly what you did and add a weather button and just removed the home part sins it lagged like crasy for me anyway. (and i have supercomputer running my homeassistant setup 
Thanks for your reply!
What about empty spaces? Is there a way to have it?
Another thing I noticed: If my setup has, for example, the option “TilesOnROw:2”, It’s correctly displayed from PC Browser and Tablet, but not from iPhone.
From iPhone all the tiles just “fill” the screen (3 tiles) and they don’t follow the configuration instruction…
I’m trying to use a button-card in a tile so I can resize it using aspect_ratio.
I had this working perfectly in a previous version of my config but it doesn’t seem to work now- it appears like all the other tiles in Homekit panel card.
Here’s my config for the tile in question:
- entity: lock.front_door
type: 'custom:button-card'
color_type: icon
color: 'rgb(255, 0, 0)'
aspect_ratio: 2/1
tap_action:
action: toggle
entity: lock.front_door
Can anyone tell why my aspect_ratio isn’t working?
When using the updated cards i still have that background of popups are Transparent in Ios app.
It works on Chrome for PC. Its transparent in both Homekit Card and the popup light when use stand alone with this code for style as suggested on your github.
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
Cancel that call. for some reason my phone did not release it cashe even after trying number of times.
Works as it should now.
Anyone that knows how to get this code part in to the new style?
#popup {
margin: -2.4em 0 1.4em 0; }
#brightnessValue {
color: rgba(255, 255, 255, 0.8); margin: -1em 0 0 0; font-size: 2em; font-weight: 400;
position: absolute; z-index: 100; letter-spacing: 0.02em; pointer-events: none;
mix-blend-mode: difference; text-align:center; width: 3.4em; height: 3.4em; }
#popup > div.action-holder > div:nth-child(2) > div:nth-child(2)
> span {
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%),
conic-gradient(rgb(120,39,230), rgb(230,34,231), rgb(228,5,136), rgb(228,25,25), rgb(229,105,30), rgb(232,226,46),
rgb(125,230,41), rgb(52,232,40), rgb(51,231,92), rgb(52,232,224),rgb(32,125,229), rgb(18,39,229), rgb(120,39,230));
border-width: 2px; border-color: #e6e6e6; --size: 4.4em !important; }
Thinking of making a Config button with gradiant color.
Back to my custom tile using button-card issue, I can get the properties of button-card to work if I put it inside a ‘card’ and ‘cardOptions’ wrapper but this places my button-card on top of a standard white HomeKit panel card tile. Here’s what it looks like:
and here is my config
Can anyone help tell me what I’m doing wrong?