arasco85
June 24, 2020, 8:00pm
720
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
1 Like
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!!
DBuit
June 25, 2020, 7:09am
722
Hi @asierralozano ,
Not sure what this is: [[[ return entity.entity_id ]]]entity_id: this try if that works.
It looks that it works! Thanks!
DBuit
June 30, 2020, 11:54am
724
Hello Guys,
Just released small update: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.4.9.5
Fix for useBrightness and useTemperature
Add option to replace icon by image and offImage for when the tile is in off state
Add missing style graph tile for unit of measurement,
Brightness slider in tile is now also be used on larger tiles with the wider / higher options
1 Like
capstan1
July 1, 2020, 5:25am
725
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!
DBuit:
ello Guys
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
tomerbs
July 1, 2020, 1:43pm
727
Hi Dbuit,
and one more thing, I ask you in the past if there is an option to use custom picture instead of icon and I will appriciate of you can please check if you can enable this kind of change.
Thanks in advanced.
Is there anyone that has problem that the Rules part wont load untill clicked on?@DBuit
Can it be some Java thing of homeassistant causing this? Want me to make a video of it?
1 Like
Is there a way of getting the image in the card to take up the whole card?
- 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!
DBuit
July 2, 2020, 4:54am
730
Hi @Eldudemeister ,
at the moment it is no option but maybe not a bad idea.
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%;
}
DBuit
July 2, 2020, 4:57am
731
Hi @tomerbs ,
What you could try to do is use browser_mod (maybe you already have it?)
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.
DBuit
July 2, 2020, 4:59am
732
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
DBuit
July 2, 2020, 11:21am
735
Really stange i never had problems…
spudje
July 2, 2020, 3:11pm
736
Mmm, I can’t find this in HACS, how is it exactly called there?
OK, I better properly read the github
Thanks for this, when I try to input it as you have put it above, it doesnt like the location of the first } and tells me there is an indention issue? If I allign them nothing happens to the card?
DBuit
July 2, 2020, 8:42pm
738
Strange, can you share tour config maybe i can find what is going on.
IF i klick home they apear or if i wait.
sorry