Try removing the null after popup:, then indent the type: line by two spaces.
entities:
- title: Soggiorno
entities:
- entity: climate.soggiorno
popup:
type: custom:thermostat-popup-card
thanks for reply but not work again
Try using the standard thermostat card instead of the the custom one. Does that work when you long press? If so, perhaps the custom card is not installed properly. To be honest, I prefer the standard card over the custom one anywayâŚ
So my issue was caused by browser_mod not being configured correctly (joys of yaml and white space). Once the white space was fixed, the correct deviceID appeared in the console and things started to popup!
Anyone else having issues getting horizontalScroll working?
No matter what i do it isnt scrollable on phone, instead breaks to a new row.
did you manage to solve this problem ?
still no sorry
hello I wanted to ask you a question, how can I decrease the empty space between the title (luci) and the cards? thanks
I guess you have the page set to home - thatâs why there is so much space.
1 Like
Hello all, can someone point me in the right direction. Looking to get the correct CSS style to have the buttons fill the whole card. Right now there is a fairly sizeable border. Thanks in advance.
I think so and what should I do to change?
@DBuit
Sorry , can you point me to get squared icons , as the sonos config remains rectangular ?
thanks
Iâm having an issue with a fan entity⌠I use it in the latest homekit-panel and it wonât toggle, with no other settings, just a fan entity, clicking the button does nothing⌠it doesnât generate any errors in the browser or HA logs either, just doesnât do anything⌠I then added my own tap_action, I put fan.toggle, fan.turn_on, I get nothing⌠I know the tap_action is working because I put more_info and it worksâŚ
I then used the switch popup card and I was able to make that work, so Iâm feeling crazy hereâŚ
Also, I updated the switch popup for a fan to work on percentage, they are deprecating set_speed and for some reason it will not highlight on âoffâ. high, medium, and low work, and when itâs in the off position the value for percentage is 0, so any ideas on that?
- entity: fan.screen_porch
name: Screen Porch
popup:
type: custom:switch-popup-card
icon: "mdi:fan"
noActiveState: '-'
entity_value_path: attributes.percentage
service: fan.set_percentage
service_data:
entity_id: this
percentage: value
entities:
- fan.screen_porch
buttons:
- icon: "mdi:fan"
value: 100
name: "High"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:fan"
value: 67
name: "Medium"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:fan"
value: 33
name: "Low"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:fan-off"
value: 0
name: "Off"
I fixed the toggle, I must have had something wrong with my tap_action, this is what worked for meâŚ
I still have the issue where the âoffâ state does not highlight even though the value is 0 and the percentage attribute is also 0, the others are working
- entity: fan.screen_porch
name: Screen Porch
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.screen_porch
popup:
type: custom:switch-popup-card
icon: "mdi:fan"
noActiveState: '-'
entity_value_path: attributes.percentage
service: fan.set_percentage
service_data:
entity_id: this
percentage: value
entities:
- fan.screen_porch
buttons:
- icon: "mdi:fan"
value: 100
name: "High"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:fan"
value: 67
name: "Medium"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:fan"
value: 33
name: "Low"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:fan-off"
value: 0
name: "Off"
thanks for this, helped me, thought I was crazy⌠would be nice to do it on a row or even an entity when the default toggle action is all you need, but for now this fixes my issue at least
Np glad to see i could help.
Anyone here that is using the thermostat-popup-card and find that the icons are no longer working since a few HA versions ago. I updated the card. Since Dbuits repo is a bit stale I forked it and posted the fix there. If you read this @DBuit I hope you are well. I can do a PR on your repo if you want.
For anyone else that want this fix today, you can install it below:
You can install it by doing the following:
- Uninstall the current thermostat-popup-card in HACS
- Click on the three dots at the top right corner of HACS
- Add a new repository: https://github.com/jimz011/thermostat-popup-card as lovelace
- Install this card in HACS, make sure you select the one from the
jimz011repo - Done, your thermostats should now show icons again!
3 Likes
Hi everyone.
I am trying for some days to include box-shadow in my card using style (ha-card before :host), but just frying the brain without success, what I am doing wrong?
The card is working perfectly, just the color in the shadow is not appearing.
type: custom:homekit-card
useBrightness: false
useTemperature: true
useRGB: true
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
mansonry: true
panel: true
style: |
ha-card {
box-shadow: 0px 0px 9px 3px var(--paper-item-icon-active-color);
}
:host {
--tile-background: rgba(0, 0, 0, 0.5);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(37, 33, 61, 0.7);
--tile-name-text-color: rgba(255, 255, 255, 0.9);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: var(--disabled-text-color);
--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: var(--disabled-text-color);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 100px;
--tile-height-mobile: 100px;
--tile-icon-size: 30px;
--tile-padding-top: 0;
--tile-image-radius: 0;
}
rows:
- row: 1
columns:
- column 1: null
tileOnRow: 1
entities:
- title: Luzes
popup:
type: custom:light-entity-card
white_value: true
hide_header: true
effects_list: true
persist_features: true
entities:
- entity: light.ty50006075a4cf12e6d8ff
name: Monitor EscritĂłrio
After several minutes studying the HTML code I found the correct variables to set and now I have box-shadow in my card !!
type: custom:homekit-card
useBrightness: false
useTemperature: true
useRGB: true
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
mansonry: true
panel: true
style: |
:host {
--tile-background: rgba(25, 22, 48, 0.7)!important;
--tile-on-background: rgba(25, 22, 48, 0.7)!important;
--tile-name-text-color: rgba(255, 255, 255, 1)!important;
--tile-on-name-text-color: rgba(255, 255, 255, 1)!important;
--tile-state-text-color: var(--disabled-text-color)!important;
--tile-on-state-text-color: var(--paper-item-icon-active-color)!important;
--tile-state-changed-text-color: rgb(255, 255, 255)!important;
--tile-unavailable-state-text-color: rgba(0, 0, 0, 1)!important;
--tile-value-text-color: var(--primary-text-color)!important;
--tile-icon-color: var(--disabled-text-color)!important;
--tile-on-icon-color: var(--paper-item-icon-active-color)!important:
--tile-border-radius: 12px!important;
--tile-width: 100px!important;
--tile-height: 100px!important;
--tile-width-mobile: 100px!important;
--tile-height-mobile: 100px!important;
--tile-icon-size: 30px!important;
--tile-padding-top: 0!important;
--tile-image-radius: 0!important;
--slider-track-color: rgba(255, 255, 255, 1)!important;
}
.button {
box-shadow: 0px 0px 9px 3px var(--disabled-text-color)!important;
font-weight: 700;
}
.button.on {
box-shadow: 0px 0px 9px 3px rgba(255, 255, 255, 1)!important;
font-weight: 700;
}
element.style {
font-weight: 700;
}
.homekit-card {
font-weight: 700;
}
rows:
- row: 1
columns:
- column 1: null
tileOnRow: 1
entities:
- title: Luzes
popup:
type: custom:light-entity-card
white_value: true
hide_header: true
effects_list: true
persist_features: true
entities:
- entity: light.ty50006075a4cf12e6d8ff
name: Monitor EscritĂłrio
Another question, how to adjust the height on mobile but just for an specific tile/card?
I am using a 6x4 card (wider 6 / higher 4) on desktop version for floorplan, but on mobile it gets ugly:
The wider 6 (on desktop) scales down to 3 correctly (on mobile), but higher 4 doesnât scale down to 2.
@DBuit, may it be a bug?
Here is my code:
type: custom:homekit-card
useBrightness: false
useTemperature: true
useRGB: true
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
mansonry: true
style: |
:host {
--tile-background: rgba(25, 22, 48, 0.7)!important;
--tile-on-background: rgba(25, 22, 48, 0.7)!important;
--tile-name-text-color: rgba(255, 255, 255, 1)!important;
--tile-on-name-text-color: rgba(255, 255, 255, 1)!important;
--tile-state-text-color: var(--disabled-text-color)!important;
--tile-on-state-text-color: var(--paper-item-icon-active-color)!important;
--tile-state-changed-text-color: rgb(255, 255, 255)!important;
--tile-unavailable-state-text-color: rgba(0, 0, 0, 1)!important;
--tile-value-text-color: var(--primary-text-color)!important;
--tile-icon-color: var(--disabled-text-color)!important;
--tile-on-icon-color: var(--paper-item-icon-active-color)!important;
--tile-border-radius: 12px!important;
--tile-width: 100px!important;
--tile-height: 100px!important;
--tile-width-mobile: 100px!important;
--tile-height-mobile: 100px!important;
--tile-icon-size: 30px!important;
--tile-padding-top: 0!important;
--tile-image-radius: 0!important;
--tile-border-radius: 12px!important;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 120px;
--slider-height: 120px;
--slider-track-color: rgba(255, 255, 255, 1)!important;
}
.button {
box-shadow: 0px 0px 7px 3px var(--disabled-text-color)!important;
font-weight: 700!important;
font-size: 14px!important;
}
.button.on {
box-shadow: 0px 0px 7px 3px rgba(255, 255, 255, 0.9)!important;
font-weight: 700!important;
font-size: 14px!important;
}
rows:
- row: 1
columns:
- column 1: null
tileOnRow: 6
entities:
- title: Planta
entities:
- card: picture-elements
wider: true
widerSize: 6
higher: true
higherSize: 4
noPadding: true
cardOptions:
image: /local/floorplan/floorplan_t10a263_todas_as_luzes_off.png
elements:
- type: state-badge
entity: sensor.umidade_media_banheiro_social
style:
top: 32%
left: 40%
Thanks in advance if someone could help me.