hello @Patty37
can I also ask for the code for A1
Thanks
hello I have a problem.
this is my uodated code, it works but don’t change color on filament icons.
can someone try to help me find the error?
type: custom:tabbed-card
options: {}
tabs:
- card:
type: picture-elements
elements:
- type: conditional
conditions:
- condition: state
state_not: unavailable
entity: sensor.bambu_a1_ams_0_id
- condition: state
state_not: unknown
entity: sensor.bambu_a1_ams_0_id
elements:
- type: state-label
entity: sensor.bambu_a1_ams_0_id
tap_action:
action: none
style:
top: 77%
left: 30%
text-align: center
font-size: 0.8em
background-color: rgba(0,0,0,0)
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0)
border-radius: 10px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_1
element:
type: state-icon
entity: sensor.a1_ams1_slot_1
icon: >-
${states['sensor.a1_ams1_slot_1'].state.toLowerCase() != 'empty'?
'fapro:filament-1' : 'mdi:tray' }
style:
top: 27%
left: 45%
"--paper-item-icon-color": var(--tray_0_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_0_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_1
attribute: type
tap_action:
action: none
style:
top: 40%
left: 45%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_0_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_2
element:
type: state-icon
entity: sensor.a1_ams1_slot_2
icon: >-
${states['sensor.a1_ams1_slot_2'].state.toLowerCase() != 'empty'?
'fapro:filament-1' : 'mdi:tray' }
style:
top: 62%
left: 12%
"--paper-item-icon-color": var(--tray_1_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_1_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_2
attribute: type
tap_action:
action: none
style:
top: 77%
left: 12%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_1_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_3
element:
type: state-icon
entity: sensor.a1_ams1_slot_3
icon: >-
${states['sensor.a1_ams1_slot_3'].state.toLowerCase() != 'empty'?
'fapro:filament-1' : 'mdi:tray' }
style:
top: 63%
left: 63%
"--paper-item-icon-color": var(--tray_2_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_2_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_3
attribute: type
tap_action:
action: none
style:
top: 77%
left: 63%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_2_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_4
element:
type: state-icon
entity: sensor.a1_ams1_slot_4
icon: >-
${states['sensor.a1_ams1_slot_4'].state.toLowerCase() != 'empty'?
'fapro:filament-1' : 'mdi:tray' }
style:
top: 27%
left: 88%
"--paper-item-icon-color": var(--tray_3_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_3_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_4
attribute: type
tap_action:
action: none
style:
top: 41%
left: 88%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--tray_3_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
image: /local/media/bambuprinter/ams_lite.png
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
box-shadow: none !important;
--tray_0_color: {% if is_state_attr('sensor.a1_ams1_slot_1', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_1', 'color') }}; {% endif %}
--tray_1_color: {% if is_state_attr('sensor.a1_ams1_slot_2', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_2', 'color') }}; {% endif %}
--tray_2_color: {% if is_state_attr('sensor.a1_ams1_slot_3', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_3', 'color') }}; {% endif %}
--tray_3_color: {% if is_state_attr('sensor.a1_ams1_slot_4', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_4', 'color') }}; {% endif %}
--tray_0_bg: {% if is_state_attr('sensor.a1_ams1_slot_1', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
--tray_1_bg: {% if is_state_attr('sensor.a1_ams1_slot_2', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
--tray_2_bg: {% if is_state_attr('sensor.a1_ams1_slot_3', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
--tray_3_bg: {% if is_state_attr('sensor.a1_ams1_slot_4', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
}
attributes:
label: AMS
- card:
type: picture-elements
elements:
- type: custom:config-template-card
entities:
- sensor.a1_externalspool_bobina_esterna
element:
type: state-icon
entity: sensor.a1_externalspool_bobina_esterna
icon: >-
${states['sensor.a1_externalspool_bobina_esterna'].state.toLowerCase()
!= 'empty' ? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 50%
left: 50%
transform: translate(-50%, -50%) scale(200%)
"--paper-item-icon-color": var(--tray_vt_color)
background-color: rgba(0,0,0,0.5)
box-shadow: 0 0 5px 5px var(--tray_vt_bg)
border-radius: 50px
"--mdc-icon-size": 1.8em
- type: state-label
entity: sensor.a1_externalspool_bobina_esterna
attribute: type
tap_action:
action: none
style:
top: 50%
left: 85%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.4)
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.4)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- entity: button.bambu_a1_clear_external_spool
icon: mdi:delete
service: button.press
style:
top: 40%
color: rgb(180,33,50)
"--mdc-icon-size": 3.5em
left: 2%
transform: initial
tap_action:
action: call-service
service: button.press
target:
entity_id: button.bambu_a1_clear_external_spool
type: icon
image: /local/media/bambuprinter/spool.png
card_mod:
style: |
ha-card {
margin-left: auto;
margin-right: auto;
width: 60%;
height: 60%;
background: none !important;
border: none !important;
box-shadow: none !important;
--tray_vt_color: {{state_attr('sensor.a1_externalspool_bobina_esterna', 'color') }};
--tray_vt_bg: {% if is_state_attr('sensor.a1_externalspool_bobina_esterna', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0.5); {% endif %}
}
attributes:
label: External
Can someone explain to me like I’m 6 or provide a link on how I would actually install this dashboard in HA? I’ve got ha runing on my Odroid N2+ and have both of my Bambu printers connected (A1 Mini and P1S)… I just need a better dashboard
Under icon:
add something like this
icon_color: '{{ state_attr(entity, ''color'') }}'
This is a great looking and well functioning dashboard.
I have added my extra AMS units, and changed some other stuff to my needs.
Really wish I could figure out how to add the remaining filament under each spool in the same card, but I keep messing everything up. So I had to do it like this
That’s a sweet UI! Care to share your yaml?
Wow - can you share your yaml file?