Ofcourse, you need to use the 2.0 version of the ios App. It is currently in beta. I will not advise people to use beta versions though. However the app is pretty much production ready.
1 Like
Hello again Jim!
Iām a little bit confused about one thing and I hope to get some help from You!
I personalised for example a light in customize.yaml with a custom icon, but it doesnāt appear on frontend, only in state mode.
I attach some printscreens:
1 Like
Could you send me the code of that specific button? Also the code of the button template that you use (if you use that ofc).
At the same time I also have a question for you. Where did you get that icon?
Jim, I use for the button your button template and the code inside the view is:
- type: custom:decluttering-card
template: button
variables:
- entity: light.candelabru
- name: Candelabru
- icon:
- color: auto
- size: 38%
- grid:
!include ../includes/light-devices-grid.yaml
For the icons I highly recommend https://www.flaticon.com/home
L.E: Jim, it is possible in your button template inside notification area to show the state?
Hello! Im glad that you like what Ive done with the help of this community!
For temperature and humidity I used mini-graph-card with a gradient, gradient that you can personalize on https://cssgradient.io/ . This is my code:
- type: custom:mini-graph-card
style: |
ha-card {
background: rgb(255,70,70);
background: linear-gradient(349deg, rgba(255,70,70,1) 24%, rgba(249,208,124,1) 100%);
color: white;
}
ha-icon {
color: white;
}
name: TemperaturÄ
name_adaptive_color: true
icon_adaptive_color: true
align_icon: right
entities:
- sensor.veranda_airpurifier_temp
hours_to_show: 24
points_per_hour: 1
animate: true
hour24: true
extrema: true
line_width: 3
font_size: 75
line_color: '#fff'
show:
points: hover
fill: fade
and for the buttons I used Jim`s template button.yaml
3 Likes
Thank you! can you share also the buttons ?
Can you tell me what is the color of the button?
Just white? If not can you share the code of the color?
And also can you share the background you use?
Yes it should be possible to show the state in the notification area. ( you mean the badges in the right corner right?) you might need to adjust the template with the border radius though.
Also in your code, try removing this line:
- icon:
It might be your icon problem
Edit: it could also be the version of the template you are using. Are you using my latest template? Because the older templates have mdi hardcoded so default icons set in customize.yaml will not work with those. Only way to solve that is to either use my newer templates or remove the mdi from the code yourself.
Hi @jimz011,
First, I wanted to say thank you, I love the project and I use it a lot.
Second thing, I have problem with āpopup-cardsā [Homekit Infused (HKI) v0.13.3].
After the last update it stopped appearing to me
views:
02.frontpage.yaml
- title: Home
path: home
# Popup cards are used for actionable notifications on the frontpage
popup_cards:
!include ../popup-cards/notification-popup.yaml
cards:
# Weather Card and Quick Access Menu, These are
# Conditional and the conditions are set on the
# alarm. If you have a different alarm entity,
# use that instead.
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: alarm_control_panel.home_alarm
state: 'disarmed'
card:
!include ../includes/simple-weather-card.yaml
- type: conditional
conditions:
- entity: alarm_control_panel.home_alarm
state_not: 'disarmed'
card:
type: custom:decluttering-card
template: quick-access-menu
variables:
- name1: Security
- icon1: mdi:cctv
- path1: security
- entity3: alarm_control_panel.home_alarm
- name3: Alarm
- icon3: mdi:shield-check
- path3: alarm
- hold_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.simple_alarm
# Frontpage Picture Elements, For variables options please
# check the decluttering templates. These cards are conditional
# the conditions are set on a person being home or away. Use
# your own person entities here.
# Left Photo (condition home)
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: conditional
conditions:
- entity: person.talia
state_not: "home"
card:
type: custom:decluttering-card
template: person
variables:
- person: person.talia
# - email: !secret taliasensor
- direction: left
- image: '/local/images/TaliaProfile1.png'
# - postnl: sensor.postnl_stephanie_packages
- travel_time: sensor.travel_time_talia
- battery: sensor.talias_iphone_battery_level
- icon: mdi:home
- tap_action:
action: navigate
navigation_path: /lovelace/talia
# Left Photo (condition not_home)
- type: conditional
conditions:
- entity: person.talia
state: "home"
card:
type: custom:decluttering-card
template: person
variables:
- person: person.talia
# - email: !secret taliasensor
- direction: left
- image: '/local/images/TaliaProfile1.png'
# - postnl: sensor.postnl_stephanie_packages
- travel_time: sensor.travel_time_talia_work
- battery: sensor.talias_iphone_battery_level
- icon: mdi:office-building
- tap_action:
action: navigate
navigation_path: /lovelace/talia
# Right Photo (condition home)
- type: conditional
conditions:
- entity: person.dor
state_not: "home"
card:
type: custom:decluttering-card
template: person
variables:
- person: person.dor
- email: sensor.email_dorko87
- direction: right
- image: '/local/images/DorProfile1.png'
# - postnl: sensor.postnl_jimmy_packages
- travel_time: sensor.travel_time_dor
- battery: sensor.dorkonviser_s_iphone_battery_level
- icon: mdi:home
- tap_action:
action: navigate
navigation_path: /lovelace/dor
# Right Photo (condition not_home)
- type: conditional
conditions:
- entity: person.dor
state: "home"
card:
type: custom:decluttering-card
template: person
variables:
- person: person.dor
- email: sensor.email_dorko87
- direction: right
- image: '/local/images/DorProfile1.png'
# - postnl: sensor.postnl_jimmy_packages
- travel_time: sensor.travel_time_dor_work
- battery: sensor.dorkonviser_s_iphone_battery_level
- icon: mdi:office-building
- tap_action:
action: navigate
navigation_path: /lovelace/dor
- !include ../includes/blank-card.yaml
# Middle Photo (This is the dog in my config)
# - type: horizontal-stack
# cards:
# - !include ../includes/blank-card.yaml
# - type: picture-elements
# style: |
# ha-card {
# border-radius: {{ states('input_select.border_radius') }};
# box-shadow: {{ states('input_select.box_shadow') }};
# overflow: hidden;
# }
# image: '/local/images/tala2.png'
# elements:
# - type: image
# entity: person.tala
# image: '/local/images/tala2.png'
# tap_action:
# action: navigate
# navigation_path: /lovelace/dog
# hold_action:
# action: navigate
# navigation_path: /lovelace/dog
# style:
# left: 50%
# top: 50%
# width: 100%
# heigth: 100%
# - type: state-label
# entity: person.tala
# style:
# left: 0
# bottom: 0
# pointer-events: none
# font-size: 16px
# line-height: 24px
# color: white
# background-color: rgba(0, 0, 0, 0.3)
# width: 100%
# transform: initial
# padding: 0 8px
# - !include ../includes/blank-card.yaml
# Frontpage Shortcut Buttons, These are once again conditional
# If the alarm is set to anything but disarmed these buttons
# will hide and only the quick access menu will be accessible.
# Remember to change the alarm entity to match your own.
# First Row
- type: conditional
conditions:
- entity: alarm_control_panel.home_alarm
state: 'disarmed'
card:
type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: button
variables:
- name: Climate
- label: Control
- icon: mdi:air-conditioner
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/climate
haptic: light
- hold_action:
action: more-info
haptic: light
- entity: input_boolean.notification_current_climate
- margin-right: 40px
- opacity: 0.8
- notification: "[[[ if (states['sensor.current_climate_on'].state > 0) return `${states['sensor.current_climate_on'].state}`; else return ' ' ]]]"
- custom_fields:
notification:
- background-color: "[[[ if (states['sensor.current_climate_on'].state == 0) return 'var(--card-color-off)'; else return 'var(--label-color-off)'; ]]]"
- color: var(--notification-badge-color)
- border-radius: 50%
- overflow: visible
- position: absolute
- right: 7%
- top: 7%
- height: 22px
- width: 22px
- font-size: 11px
- line-height: 20px
# Button 2
- type: custom:decluttering-card
template: button
variables:
- name: Lights
- label: Control
- icon: mdi:floor-lamp
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/lights
haptic: light
- hold_action:
action: more-info
haptic: light
- entity: input_boolean.notification_current_lights
- margin-right: 40px
- opacity: 0.8
- notification: "[[[ if (states['sensor.current_lights_on'].state > 0) return `${states['sensor.current_lights_on'].state}`; else return ' ' ]]]"
- custom_fields:
notification:
- background-color: "[[[ if (states['sensor.current_lights_on'].state == 0) return 'var(--card-color-off)'; else return 'var(--label-color-off)'; ]]]"
- color: var(--notification-badge-color)
- border-radius: 50%
- overflow: visible
- position: absolute
- right: 7%
- top: 7%
- height: 22px
- width: 22px
- font-size: 11px
- line-height: 20px
# Button 3
- type: custom:decluttering-card
template: button
variables:
- name: Devices
- label: Control
- icon: mdi:power-plug
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/devices
haptic: light
- hold_action:
action: more-info
haptic: light
- entity: input_boolean.notification_current_devices
- margin-right: 40px
- opacity: 0.8
- notification: "[[[ if (states['sensor.current_devices_on'].state > 0) return `${states['sensor.current_devices_on'].state}`; else return ' ' ]]]"
- custom_fields:
notification:
- background-color: "[[[ if (states['sensor.current_devices_on'].state == 0) return 'var(--card-color-off)'; else return 'var(--label-color-off)'; ]]]"
- color: var(--notification-badge-color)
- border-radius: 50%
- overflow: visible
- position: absolute
- right: 7%
- top: 7%
- height: 22px
- width: 22px
- font-size: 11px
- line-height: 20px
# Button 4
- type: custom:decluttering-card
template: button
variables:
- name: Security
- label: Panel
- icon: mdi:cctv
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/security
haptic: light
- hold_action:
action: more-info
haptic: light
- entity: input_boolean.notification_current_sensors
- margin-right: 40px
- opacity: 0.8
- notification: "[[[ if (states['sensor.current_sensors_on'].state > 0) return `${states['sensor.current_sensors_on'].state}`; else return ' ' ]]]"
- custom_fields:
notification:
- background-color: "[[[ if (states['sensor.current_sensors_on'].state == 0) return 'var(--card-color-off)'; else return 'var(--label-color-off)'; ]]]"
- color: var(--notification-badge-color)
- border-radius: 50%
- overflow: visible
- position: absolute
- right: 7%
- top: 7%
- height: 22px
- width: 22px
- font-size: 11px
- line-height: 20px
- !include ../includes/blank-card.yaml
# Second Row
- type: conditional
conditions:
- entity: alarm_control_panel.home_alarm
state: 'disarmed'
card:
type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: conditional
conditions:
- entity: media_player.yamaha_receiver_salon
state: 'off'
card:
type: custom:decluttering-card
template: button
variables:
- name: Cleaning
- label: Lists
- icon: mdi:broom
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/cleaning
haptic: light
- hold_action:
action: navigate
navigation_path: /lovelace/cleaning
haptic: light
- entity: input_boolean.dummy1
- margin-right: 40px
- opacity: 0.8
# Button 1 (condition receiver on)
- type: conditional
conditions:
- entity: media_player.yamaha_receiver_salon
state_not: 'off'
card:
type: custom:decluttering-card
template: button
variables:
- name: Remote
- label: Control
- icon: mdi:remote
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/remote
haptic: light
- hold_action:
action: navigate
navigation_path: /lovelace/remote
haptic: light
- entity: input_boolean.dummy1
- margin-right: 40px
- opacity: 0.8
# Button 2
- type: custom:decluttering-card
template: button
variables:
- name: Scenes
- label: Presets
- icon: mdi:arrange-send-backward
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/scenes
haptic: light
- hold_action:
action: navigate
navigation_path: /lovelace/scenes
haptic: light
- entity: input_boolean.dummy1
- margin-right: 40px
- opacity: 0.8
# Button 3
- type: custom:decluttering-card
template: button
variables:
- name: Vacuum
- label: Bobot
- icon: mdi:robot-vacuum
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/vacuum
haptic: light
- hold_action:
action: navigate
navigation_path: /lovelace/vacuum
haptic: light
- entity: input_boolean.dummy1
- margin-right: 40px
- opacity: 0.8
# Button 4
- type: custom:decluttering-card
template: button
variables:
- name: Menu
- label: All Options
- icon: mdi:menu
- show_state: false
- tap_action:
action: navigate
navigation_path: /lovelace/menu
haptic: light
- hold_action:
action: navigate
navigation_path: /lovelace/menu
haptic: light
- entity: input_boolean.dummy1
- margin-right: 40px
- opacity: 0.8
- !include ../includes/blank-card.yaml
# The following config is for notifications on the frontpage
# For ease of use it is in a separate file.
- !include ../notifications/notifications.yaml
05.devices.yaml:
- title: Devices
path: devices
popup_cards:
!include ../popup-cards/device-popup.yaml
cards:
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: quick-access-menu
- type: custom:decluttering-card
template: header
variables:
- content: '## šŗ Devices'
- type: custom:decluttering-card
template: header
variables:
- content: '##### Salon'
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.salon_tv
- name: Salon TV
- icon: mdi:television
- on_state_color: green
- off_state_color: red
- color: black
- lock: false
- grid:
!include ../includes/light-devices-grid.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.yamaha_receiver_salon
- name: Receiver Salon
- icon: mdi:set-top-box
- on_state_color: green
- off_state_color: red
- color: black
- lock: false
- grid:
!include ../includes/light-devices-grid.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.receiver_zone_2
- name: Receiver Zone 2
- icon: mdi:set-top-box
- on_state_color: green
- off_state_color: red
- color: black
- lock: false
- grid:
!include ../includes/light-devices-grid.yaml
- !include ../includes/blank-card.yaml
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.apple_tv
- name: Apple TV
- icon: mdi:apple
- color: black
- lock: false
- on_state_color: green
- off_state_color: red
- variable: icon
- grid:
!include ../includes/light-devices-grid.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.salon_speaker
- name: Salon Speaker
- icon: mdi:cast-audio
- lock: false
- color: blue
- on_state_color: green
- off_state_color: red
- variable: icon
- grid:
!include ../includes/light-devices-grid.yaml
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 1/1
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: header
variables:
- content: '##### Office'
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.office_speaker
- name: Office Speaker
- icon: mdi:cast-audio
- color: blue
- on_state_color: green
- off_state_color: red
- variable: icon
- grid:
!include ../includes/light-devices-grid.yaml
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 1/1
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 1/1
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: header
variables:
- content: '##### Bedroom'
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: button
variables:
- entity: switch.bedroom_speaker
- name: Bedroom Speaker
- icon: mdi:cast-audio
- color: blue
- on_state_color: green
- off_state_color: red
- variable: icon
- grid:
!include ../includes/light-devices-grid.yaml
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 1/1
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 1/1
- !include ../includes/blank-card.yaml
popup-cards:
device-popup.yaml:
#Devices
switch.salon_media_system:
title: Media System Salon
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.salon_tv
- !include ../includes/blank-card.yaml
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.yamaha_receiver_salon
- !include ../includes/blank-card.yaml
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.apple_tv
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.yamaha_receiver_salon:
title: Yamaha Receiver Salon
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.yamaha_receiver_salon
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.salon_tv:
title: TV Salon
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.salon_tv
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.apple_tv:
title: Apple TV
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.apple_tv
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.salon_speaker:
title: Salon Speaker
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.salon_speaker
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.bedroom_speaker:
title: Bedroom Speaker
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.bedroom_speaker
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.office_speaker:
title: Office Speaker
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: more-info-popup
variables:
- entity: switch.office_speaker
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
#Climate
switch.salon_cool:
title: Salon AC Fan Mode
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: climate.salon_ac
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state: low
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Low
- label: Mode
- icon: mdi:fan
- off_spin: true
- size: 15%
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: low
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state_not: low
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Low
- label: Mode
- icon: mdi:fan
- size: 15%
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: low
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state: mid
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Mid
- label: Mode
- icon: mdi:fan
- size: 20%
- off_spin: true
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: mid
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state_not: mid
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Mid
- label: Mode
- icon: mdi:fan
- size: 20%
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: mid
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state: high
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: High
- label: Mode
- icon: mdi:fan
- off_spin: true
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: high
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state_not: high
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: High
- label: Mode
- icon: mdi:fan
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: high
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.salon_heat:
title: Salon AC Fan Mode
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: climate.salon_ac
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state: low
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Low
- label: Mode
- icon: mdi:fan
- off_spin: true
- size: 15%
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: low
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state_not: low
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Low
- label: Mode
- icon: mdi:fan
- size: 15%
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: low
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state: mid
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Mid
- label: Mode
- icon: mdi:fan
- size: 20%
- off_spin: true
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: mid
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state_not: mid
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Mid
- label: Mode
- icon: mdi:fan
- size: 20%
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: mid
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state: high
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: High
- label: Mode
- icon: mdi:fan
- off_spin: true
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: high
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.salon_ac_fan_mode
state_not: high
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: High
- label: Mode
- icon: mdi:fan
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: high
entity_id: input_select.salon_ac_fan_mode
haptic: light
- hold_action:
action: none
- !include ../includes/blank-card.yaml
- !include ../includes/bottom-card.yaml
switch.office_cool:
title: Office AC Fan Mode
style:
color: white
background: var(--background-image)
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: climate.office_ac
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: conditional
conditions:
- entity: input_select.office_ac_fan_mode
state: low
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Low
- label: Mode
- icon: mdi:fan
- off_spin: true
- size: 15%
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: low
entity_id: input_select.office_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.office_ac_fan_mode
state_not: low
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Low
- label: Mode
- icon: mdi:fan
- size: 15%
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: low
entity_id: input_select.office_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.office_ac_fan_mode
state: mid
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Mid
- label: Mode
- icon: mdi:fan
- size: 20%
- off_spin: true
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: mid
entity_id: input_select.office_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.office_ac_fan_mode
state_not: mid
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: Mid
- label: Mode
- icon: mdi:fan
- size: 20%
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: mid
entity_id: input_select.office_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.office_ac_fan_mode
state: high
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: High
- label: Mode
- icon: mdi:fan
- off_spin: true
- show_state: false
- ha-card-background: var(--homekit-card-on)
- off_icon_color: Dodgerblue
- off_name_color: black
- off_label_color: gray
- opacity: 1.0
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: high
entity_id: input_select.office_ac_fan_mode
haptic: light
- hold_action:
action: none
- type: conditional
conditions:
- entity: input_select.office_ac_fan_mode
state_not: high
card:
type: 'custom:decluttering-card'
template: button
variables:
- entity: input_boolean.dummy1
- name: High
- label: Mode
- icon: mdi:fan
- show_state: false
- color: gray
- opacity: 0.4
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: high
entity_id: input_select.office_ac_fan_mode
haptic: light
- hold_action:
action: none
- !include ../includes/blank-card.yaml
Thank again
Yes it seems popup cards no longer work in HA 101.3. Which is too badā¦ I will look into it, however I think I will need to rewrite it to use browser mod instead as popup cards are deprecated.
For the time being, If you rely on those cards, I will suggest reverting to a version prior to 101.3
I am currently rewriting a lot of stuff (hence the long delay between updates) and it might take a while before I finish it. I might release a hotfix for the cards if it takes too long for me to finish up the next update. But notifications are undergoing a massive rewrite at the moment.
A preview of what has changed below in the screenshot. Notifications will scroll automatically in the new version and ofc popup cards will all be replaced with browser mod. Srry for the inconvenience!
Edit to the post above, I have looked into it and it seems that card-tools is the culprit here. If you revert card-tools to a version below 2.0 (donāt forget to refresh) it should work again. As popup cards are deprecated and card-tools is moving forward I will remove popup cards in any upcoming versions! For now you can just revert card-tools to an older version.
After hours and hours I found the problem. In your button template it must be a variable:
show_entity_picture: true
1 Like
So I love this and have spent the last couple days converting my setup ā¦ all of a sudden today after resetting the frontend cache for another issue every button has the lock which I have to unlock (iOS beta 2.0) the regular app seems to work fine. I havenāt had the lock on any buttons (although they would show up in Firefox but I just ignored it because I donāt normally use it)
Any ideas what happened or how to get them back to normal l?
looks like you have button-card 3.0 and an older template of mine. Please use the latest button card template from my repo.
I have the one that lists changes from 0.13.3ā¦ I recopied it from repo again for good measure, but still same issue. In the meantime I noticed they donāt appear in safari on my Mac.
EDIT
ā¦ I reinstalled button-card and restarted HA and Iām all good again!
Thanks this is amazing work youāve done. I love my new setup!
Anyone know how to change the logbook text color for the item itselfā¦ Iāve tried a few changes under this section, but im not sure if they arenāt applying or if im in the wrong section all-together. (my css skills are limitedā¦ I got out of the webpage game around the time when flash because a thingā¦ 
)
# History/Logbook
lumo-primary-text-color: 'var(--light-primary-color)'
lumo-secondary-text-color: 'var(--light-primary-color)'
lumo-primary-color: 'var(--light-primary-color)'
lumo-body-text-color: 'AliceBlue' # Calendar Day
lumo-base-color: 'var(--mdc-grey-darken-4)' #Calendar/Date-Picker Background
lumo-header-text-color: 'var(--lumo-body-text-color)' #Month/Year header