I’m facing an issue with the tap_action: action: call-service service: honeycomb service_data: in Home Assistant.
Whenever I tap a button meant to trigger a service call inside the honeycomb menu, I get the following error message:
Failed to perform the action honeycomb/undefined. required key not provided @ data['service']. Got None
I assume you have installed Honeycomb and have confirmed it’s working?
Please provide the complete configuration YAML, correctly-formatted with the </> button, for the button that is giving the issue. Your post should look something like this example from the guide:
type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
hold_action:
action: toggle
tap_action:
action: call-service
service: honeycomb
service_data:
buttons:
- icon: mdi:volume-plus #0
- icon: mdi:volume-minus #1
- icon: mdi:volume-mute #2
- icon: mdi:television-classic #3
- icon: mdi:television-classic-off #4
- icon: mdi:play-pause #5
If the formatting of your reply doesn’t look like that, please try again until it does.
type: custom:tabbed-card
styles:
"--mdc-theme-primary": rgb(255, 222, 173)
"--mdc-tab-text-label-color-default": white
"--mdc-tab-stacked-height": 80px
"--mdc-tab-horizontal-padding": 5px
"--mdc-typography-button-font-size": 15px
options: {}
tabs:
- card:
square: false
columns: 1
type: grid
cards:
- square: false
columns: 1
type: grid
cards:
- type: picture-elements
image: /local/images/3d_floor_plan/hall_a/base.png
elements:
- type: image
entity: light.main_sliding_door_lights_cove_light
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": >-
/local/images/3d_floor_plan/hall_a/entrance_cove_lights.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: image
entity: light.main_sliding_door_lights_wall_light
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": >-
/local/images/3d_floor_plan/hall_a/entrance_wall_lights.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.right_chandelier
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/chandlier_right.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.left_chandelier
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/chandlier_left.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.right_pillar_lamp
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/right_pillar_lights.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.spot_lights_over_toilet_passage
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/spot_over_toilet.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_1
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_1.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_2
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_2.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_3
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_3.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_4
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_4.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_5
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_5.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_6
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_6.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_7
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_7.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_8
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_8.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.work_light_9
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/wl_9.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.stage_work_light_1
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/stage_lights_1.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: image
entity: light.stage_work_light_2
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/3d_floor_plan/hall_a/stage_lights_2.png
"off": /local/images/3d_floor_plan/transparent.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: custom:button-card
entity: climate.ac_hall_entrance
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
bottom: 30.5%
right: 33.5%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.hall_ac_a
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 36%
left: 19%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.hall_ac_b
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 15%
left: 46%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.hall_ac_c
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 10%
left: 40%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.ac_backstage_a
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 27%
left: 12%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.ac_backstage_b
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 4%
left: 34%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.ac_kitchen
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 33%
right: 30%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.toilet_a
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
bottom: 26%
right: 42%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
entity: climate.ac_toilet_b
show_name: false
aspect_ratio: 1/1
icon: phu:thermostat
size: 50%
styles:
icon:
- color: orange
style:
top: 43%
right: 32%
width: 5%
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:button-card
icon: mdi:home-outline
color: rgb(255, 152, 67)
color_type: icon
aspect_ratio: 1/1
extra_styles: |
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 152, 67, 0.7);
box-shadow: 0 0 0 0 rgba(255, 152, 67, 0.7);
}
70% {
-moz-box-shadow: 0 0 0 15px rgba(255, 152, 67, 0.7);
box-shadow: 0 0 0 15px rgba(255, 152, 67, 0.7);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 152, 67, 0);
box-shadow: 0 0 0 0 rgba(255, 152, 67, 0);
}
}
styles:
card:
- animation: pulse 2s infinite
- "--mdc-ripple-color": rgb(255, 152, 67)
- "--mdc-ripple-press-opacity": 0.6
- border-radius: 50px
- border: solid 2px rgb(255, 152, 67)
- background-color: var(--card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
top: 10%
left: 5%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- list [0]: skip
- icon: mdi:view-dashboard
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
icon:
- width: 10%
tap_action:
action: navigate
navigation_path: /lovelace/dashboard
- icon: phu:bulb-lightguide-flask
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
width: 1%
tap_action:
action: navigate
navigation_path: /lovelace/lights
- icon: phu:thermostat-v2
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
width: 1%
tap_action:
action: navigate
navigation_path: /lovelace/thermostat
- list [4]: break
- list [5]: break
- type: custom:button-card
icon: mdi:power
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- "--mdc-ripple-color": orange
- "--mdc-ripple-press-opacity": 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(--card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
top: 10%
right: 3%
width: 3%
Are all your referenced images located in a folder in the www?
/local/images/ = www/images/ when using a file editor
Give me a few, I think I see the error.
Your tap action appears to be outdated, but still need to verify
type: custom:button-card
entity: light.xxxxxx
tap_action:
action: fire-dom-event
honeycomb_menu:
template: light
variables:
motion: automation.xxxxxxx
yess tell me
Let’s backup. What Honeycomb version are you using?
This one?
yes i am using Sian-Lee-SA
Test this format
type: custom:button-card
entity: light.night_stand
tap_action:
action: fire-dom-event
honeycomb_menu:
entity: light.night_stand
buttons:
- icon: mdi:lamp
position: 0
show: true
entity: light.night_stand
active: "[[[ return entity.state != \"off\" ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: entity
An easier method is to template described here
Something like this when using the picture element card
type: picture-elements
elements:
- type: custom:button-card
icon: mdi:lamp
show_name: false
styles:
card:
- background: blue
- width: 50px
- height: 50px
- border-radius: 50%
style:
top: 50%
left: 50%
width: 20%
height: 20%
entity: light.night_stand
tap_action:
action: fire-dom-event
honeycomb_menu:
entity: light.night_stand
buttons:
- icon: mdi:lamp
position: 0
show: true
entity: light.night_stand
active: "[[[ return entity.state != \"off\" ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: entity
- type: custom:button-card
show_name: false
styles:
card:
- background: black
- width: 50px
- height: 50px
- border-radius: 50%
style:
top: 20%
left: 60%
width: 20%
height: 20%
entity: light.night_stand
tap_action:
action: fire-dom-event
honeycomb_menu:
entity: light.night_stand
buttons:
- icon: mdi:lamp
position: 0
show: true
entity: light.night_stand
active: "[[[ return entity.state != \"off\" ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: entity
image: https://demo.home-assistant.io/stub_config/floorplan.png
styles:
card:
- animation: pulse 2s infinite
- “–mdc-ripple-color”: rgb(255, 152, 67)
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px rgb(255, 152, 67)
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
top: 10%
left: 5%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- list [0]: skip
- icon: mdi:view-dashboard
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
icon:
- width: 10%
tap_action:
action: navigate
navigation_path: /lovelace/dashboard
- icon: phu:bulb-lightguide-flask
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
width: 1%
tap_action:
action: navigate
navigation_path: /lovelace/lights
- icon: phu:thermostat-v2
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
width: 1%
tap_action:
action: navigate
navigation_path: /lovelace/thermostat
- list [4]: break
- list [5]: break
- type: custom:button-card
icon: mdi:power
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
top: 10%
right: 3%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- list [0]: break
- list [1]: break
- list [2]: break
- type: custom:button-card
icon: mdi:lightbulb-outline
color: tomato
color_type: icon
styles:
card:
- background-color: var(–card-background-off)
tap_action:
action: call-service
service: script.turn_off_hall_a_lights
data: {}
- type: custom:button-card
icon: mdi:lightbulb-on-outline
color: lime
color_type: icon
styles:
card:
- background-color: var(–card-background-off)
tap_action:
action: call-service
service: script.turn_on_hall_a_lights
data: {}
- list [5]: break
- type: custom:button-card
icon: mdi:numeric-1
color: rgb(255, 152, 67)
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 17%
left: 27%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.spot_lights_over_toilet_passage
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.left_chandelier
icon: bha:chandelier
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.right_chandelier
icon: bha:chandelier
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.right_pillar_lamp
icon: bha:xmas-candle-bridge
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.left_pillar_lamp
icon: bha:xmas-candle-bridge
fill_container: true
icon_color: orange
- list [5]: break
- type: custom:button-card
icon: mdi:numeric-2
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 30%
left: 17%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.work_light_1
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_2
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_3
icon: mdi:light-recessed
fill_container: true
- type: custom:mushroom-light-card
entity: light.work_light_4
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_5
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_6
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:button-card
icon: mdi:numeric-3
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 44%
left: 8%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.work_light_7
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_8
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_9
icon: mdi:light-recessed
fill_container: true
- type: custom:mushroom-light-card
entity: light.stage_work_light_1
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.stage_work_light_2
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- list [5]: break
- type: custom:button-card
icon: phu:sliding-barndoor-open
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- animation: bink 3s linear
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 15%
right: 3%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.main_sliding_door_lights_cove_light
icon: mdi:led-strip-variant
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.main_sliding_door_lights_wall_light
icon: bha:xmas-candle-bridge
fill_container: true
icon_color: orange
- list [2]: break
- list [3]: break
- list [4]: break
- list [5]: break
please check my code where I modify my code according to you
Please post it using back ticks ```
on a side note, this stuck out immediately
- animation: bink 3s linear
And you did not change the tap action on the button card to match what I shared.
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
styles:
card:
- animation: pulse 2s infinite
- “–mdc-ripple-color”: rgb(255, 152, 67)
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px rgb(255, 152, 67)
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
top: 10%
left: 5%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- list [0]: skip
- icon: mdi:view-dashboard
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
icon:
- width: 10%
tap_action:
action: navigate
navigation_path: /lovelace/dashboard
- icon: phu:bulb-lightguide-flask
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
width: 1%
tap_action:
action: navigate
navigation_path: /lovelace/lights
- icon: phu:thermostat-v2
color: rgb(255, 152, 67)
show: true
autoclose: true
color_type: card
style:
width: 1%
tap_action:
action: navigate
navigation_path: /lovelace/thermostat
- list [4]: break
- list [5]: break
- type: custom:button-card
icon: mdi:power
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
top: 10%
right: 3%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- list [0]: break
- list [1]: break
- list [2]: break
- type: custom:button-card
icon: mdi:lightbulb-outline
color: tomato
color_type: icon
styles:
card:
- background-color: var(–card-background-off)
tap_action:
action: call-service
service: script.turn_off_hall_a_lights
data: {}
- type: custom:button-card
icon: mdi:lightbulb-on-outline
color: lime
color_type: icon
styles:
card:
- background-color: var(–card-background-off)
tap_action:
action: call-service
service: script.turn_on_hall_a_lights
data: {}
- list [5]: break
- type: custom:button-card
icon: mdi:numeric-1
color: rgb(255, 152, 67)
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 17%
left: 27%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.spot_lights_over_toilet_passage
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.left_chandelier
icon: bha:chandelier
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.right_chandelier
icon: bha:chandelier
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.right_pillar_lamp
icon: bha:xmas-candle-bridge
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.left_pillar_lamp
icon: bha:xmas-candle-bridge
fill_container: true
icon_color: orange
- list [5]: break
- type: custom:button-card
icon: mdi:numeric-2
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 30%
left: 17%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.work_light_1
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_2
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_3
icon: mdi:light-recessed
fill_container: true
- type: custom:mushroom-light-card
entity: light.work_light_4
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_5
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_6
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:button-card
icon: mdi:numeric-3
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 44%
left: 8%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.work_light_7
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_8
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.work_light_9
icon: mdi:light-recessed
fill_container: true
- type: custom:mushroom-light-card
entity: light.stage_work_light_1
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.stage_work_light_2
icon: mdi:light-recessed
fill_container: true
icon_color: orange
- list [5]: break
- type: custom:button-card
icon: phu:sliding-barndoor-open
color: orange
color_type: icon
aspect_ratio: 1/1
styles:
card:
- animation: bink 3s linear
- “–mdc-ripple-color”: orange
- “–mdc-ripple-press-opacity”: 0.6
- border-radius: 50px
- border: solid 2px orange
- box-shadow: none
- padding: 0px 0px
- margin: 0px 0px
- box-shadow: 6px 7px 50px -4px orange
- background-color: var(–card-background-off)
icon:
- margin-bottom: 5%
- width: 70%
style:
bottom: 15%
right: 3%
width: 3%
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
active: true
size: 220
spacing: 2
buttons:
- type: custom:mushroom-light-card
entity: light.main_sliding_door_lights_cove_light
icon: mdi:led-strip-variant
fill_container: true
icon_color: orange
- type: custom:mushroom-light-card
entity: light.main_sliding_door_lights_wall_light
icon: bha:xmas-candle-bridge
fill_container: true
icon_color: orange
- list [2]: break
- list [3]: break
- list [4]: break
- list [5]: break
Pull it from your dashboard, not your previous post. The indentions are incorrect.
You need to start with less code. Work through the button cards, the add the image entities.
Where did you copy the code from?
he definitely copied it from the incorrectly formatted post on the forums. As an admin, I can see what he originally posted. He needs to copy from his config, then format here.
I really appreciate the additional context!
The example code provided was tested and worked well with the custom:button-card and when imbedded in a picture-element card.
That should be enough to start the learning process.