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?
Itās just a stolen mix of everything in this thread.
Printer part:
type: vertical-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
icon: phu:bambu-lab
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_current_stage
- type: light
icon: mdi:lightbulb
entity: light.x1c_chamber_light
- type: entity
entity: binary_sensor.x1c_hms_errors
icon: mdi:alert-circle
- type: custom:mod-card
card:
camera_view: live
type: picture-glance
entities: []
camera_image: camera.x1c_camera
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: icon
entity: button.a1_resume_printing
icon: mdi:play
name: Resume
layout: icon_name
card_mod:
style: |
ha-card {
height: 60px;
}
- type: custom:button-card
color: "#C46641"
color_type: icon
entity: button.a1_pause_printing
icon: mdi:pause
name: Pause
card_mod:
style: |
:host {
--paper-item-icon-color: red}
ha-card {
height: 60px;
}
layout: icon_name_state
confirmation:
text: "[[[ return `Pause the print?` ]]]"
- type: custom:button-card
color: rgb(255, 0, 0)
color_type: icon
entity: button.a1_stop_printing
icon: mdi:stop
name: Stop
card_mod:
style: |
:host {
--paper-item-icon-color: red}
ha-card {
height: 60px;
}
layout: icon_name_state
confirmation:
text: "[[[ return `Stop the Print?` ]]]"
- type: horizontal-stack
cards:
- camera_view: auto
type: picture-glance
entities: []
image_entity: image.x1c_cover_image
hold_action:
action: none
- type: vertical-stack
cards:
- type: markdown
content: >-
<font size="5">{{ states.sensor.x1c_task_name.state }}</font>
<table width=100%><tr><td align=left>Printed layers<td
align=right><font color=#C46641 ; size="4">{{
states.sensor.x1c_current_layer.state}}</font>/{{states.sensor.x1c_total_layer_count.state}}</td></tr></table>
<table width=100%><tr> <td align=left><font
size="5";color=#C46641>{{
states.sensor.x1c_print_progress.state}}%<td align=right> {% if
(states.sensor.x1c_remaining_time.state | int) == 0 %}
Success
{% else %}
<font color=#959595>-{{(states.sensor.x1c_remaining_time.state | int/60) | int }}h{{ states.sensor.x1c_remaining_time.state| int % 60 }}m
{% endif %} </td> </tr></table>
- type: custom:bar-card
icon: "off"
name: Progress
positions:
icon: "off"
indicator: "off"
title: inside
value: inside
severity:
- color: null
from: 0
to: 100
entities:
- entity: sensor.x1c_print_progress
- type: custom:mod-card
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fan
entity: binary_sensor.x1c_online
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
icon: mdi:printer-3d-nozzle-heat
entity: sensor.x1c_heatbreak_fan_speed
- type: entity
entity: sensor.x1c_cooling_fan_speed
icon: mdi:select-group
- type: entity
icon: mdi:fan-auto
entity: sensor.x1c_aux_fan_speed
- type: entity
entity: sensor.x1c_chamber_fan_speed
icon: phu:extractor-fan
- type: custom:mod-card
card:
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.x1c_nozzle_temperature
icon: mdi:printer-3d-nozzle-heat
- entity: sensor.x1c_bed_temperature
icon: mdi:train-car-flatbed
- entity: sensor.x1c_chamber_temperature
icon: mdi:minus-box-outline
- entity: sensor.x1c_speed_profile
state_color: false
AMS part:
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :last-child > * {
width: 100%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS A
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_ams_1_ams_temperatur
- type: entity
entity: sensor.x1c_ams_1_fugtighedsindeks
icon: mdi:water-opacity
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 10px;
--external_spool_color: {{state_attr('sensor.x1c_ext_external_spool', 'color') }};
--tray_1_color: {{state_attr('sensor.x1c_ams_1_bakke_1', 'color') }};
--tray_2_color: {{state_attr('sensor.x1c_ams_1_bakke_2', 'color') }};
--tray_3_color: {{state_attr('sensor.x1c_ams_1_bakke_3', 'color') }};
--tray_4_color: {{state_attr('sensor.x1c_ams_1_bakke_4', 'color') }};
--external_spool_bg: {% if is_state_attr('sensor.x1c_ext_external_spool', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_1_bg: {% if is_state_attr('sensor.x1c_ams_1_bakke_1', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_ams_1_bakke_2', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_ams_1_bakke_3', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_ams_1_bakke_4', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
}
card:
card_mod:
style: |
.entities {
align-items: start !important;
}
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.x1c_ams_1_bakke_1
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_1_color);
}
state-badge {
background-color: var(--tray_1_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_1_bakke_2
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_2_color);
}
state-badge {
background-color: var(--tray_2_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_1_bakke_3
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_3_color);
}
state-badge {
background-color: var(--tray_3_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_1_bakke_4
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_4_color);
}
state-badge {
background-color: var(--tray_4_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.x1c_ams_1_bakke_1
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 1";
let filamentType = states['sensor.x1c_ams_1_bakke_1'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_1_bakke_1'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_1_bakke_1'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_1_bakke_2
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 2";
let filamentType = states['sensor.x1c_ams_1_bakke_2'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_1_bakke_2'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_1_bakke_2'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_1_bakke_3
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 3";
let filamentType = states['sensor.x1c_ams_1_bakke_3'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_1_bakke_3'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_1_bakke_3'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_1_bakke_4
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 4";
let filamentType = states['sensor.x1c_ams_1_bakke_4'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_1_bakke_4'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_1_bakke_4'].attributes.color || '#FFFFFF';
]]]
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :last-child > * {
width: 100%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS B
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_ams_2_ams_temperatur
- type: entity
entity: sensor.x1c_ams_2_fugtighedsindeks
icon: mdi:water-opacity
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 10px;
--tray_1_color: {{state_attr('sensor.x1c_ams_2_bakke_1', 'color') }};
--tray_2_color: {{state_attr('sensor.x1c_ams_2_bakke_2', 'color') }};
--tray_3_color: {{state_attr('sensor.x1c_ams_2_bakke_3', 'color') }};
--tray_4_color: {{state_attr('sensor.x1c_ams_2_bakke_4', 'color') }};
--tray_1_bg: {% if is_state_attr('sensor.x1c_ams_2_bakke_1', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_ams_2_bakke_2', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_ams_2_bakke_3', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_ams_2_bakke_4', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
}
card:
card_mod:
style: |
.entities {
align-items: start !important;
}
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.x1c_ams_2_bakke_1
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_1_color);
}
state-badge {
background-color: var(--tray_1_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_2_bakke_2
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_2_color);
}
state-badge {
background-color: var(--tray_2_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_2_bakke_3
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_3_color);
}
state-badge {
background-color: var(--tray_3_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_2_bakke_4
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_4_color);
}
state-badge {
background-color: var(--tray_4_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.x1c_ams_2_bakke_1
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 1";
let filamentType = states['sensor.x1c_ams_2_bakke_1'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_2_bakke_1'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_2_bakke_1'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_2_bakke_2
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 2";
let filamentType = states['sensor.x1c_ams_2_bakke_2'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_2_bakke_2'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_2_bakke_2'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_2_bakke_3
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 3";
let filamentType = states['sensor.x1c_ams_2_bakke_3'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_2_bakke_3'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_2_bakke_3'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_2_bakke_4
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 4";
let filamentType = states['sensor.x1c_ams_2_bakke_4'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_2_bakke_4'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_2_bakke_4'].attributes.color || '#FFFFFF';
]]]
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :last-child > * {
width: 100%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS C
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_ams_3_ams_temperatur
- type: entity
entity: sensor.x1c_ams_3_fugtighedsindeks
icon: mdi:water-opacity
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 10px;
--tray_1_color: {{state_attr('sensor.x1c_ams_3_bakke_1', 'color') }};
--tray_2_color: {{state_attr('sensor.x1c_ams_3_bakke_2', 'color') }};
--tray_3_color: {{state_attr('sensor.x1c_ams_3_bakke_3', 'color') }};
--tray_4_color: {{state_attr('sensor.x1c_ams_3_bakke_4', 'color') }};
--tray_1_bg: {% if is_state_attr('sensor.x1c_ams_3_bakke_1', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_ams_3_bakke_2', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_ams_3_bakke_3', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_ams_3_bakke_4', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
}
card:
card_mod:
style: |
.entities {
align-items: start !important;
}
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.x1c_ams_3_bakke_1
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_1_color);
}
state-badge {
background-color: var(--tray_1_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_3_bakke_2
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_2_color);
}
state-badge {
background-color: var(--tray_2_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_3_bakke_3
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_3_color);
}
state-badge {
background-color: var(--tray_3_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.x1c_ams_3_bakke_4
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_4_color);
}
state-badge {
background-color: var(--tray_4_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.x1c_ams_3_bakke_1
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 1";
let filamentType = states['sensor.x1c_ams_3_bakke_1'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_3_bakke_1'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_3_bakke_1'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_3_bakke_2
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 2";
let filamentType = states['sensor.x1c_ams_3_bakke_2'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_3_bakke_2'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_3_bakke_2'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_3_bakke_3
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 3";
let filamentType = states['sensor.x1c_ams_3_bakke_3'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_3_bakke_3'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_3_bakke_3'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.x1c_ams_3_bakke_4
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 4";
let filamentType = states['sensor.x1c_ams_3_bakke_4'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.x1c_ams_3_bakke_4'].attributes.remain) || 0;
let remainingMeters = (percentage / 100) * 335;
return percentage.toFixed(0) + '% | ' + remainingMeters.toFixed(0) + 'm';
]]]
styles:
card:
- height: 22px
- font-size: 12px
grid:
- grid-template-areas: "\"i\" \"n\" \"filament_name\" \"status\""
- grid-template-rows: auto auto auto auto
- grid-template-columns: 1fr
status:
- justify-self: center
- font-size: 10px
- color: var(--primary-text-color)
icon:
- color: |
[[[
return states['sensor.x1c_ams_3_bakke_4'].attributes.color || '#FFFFFF';
]]]
Jonas,
Thank you very much for your work.
Would you please tell me about the switch you have in the dashboard?
entity: switch.0xa4c138c1ddcf344d
What is this?
Thank you
It is just a smart plug that I use to turn the printer on and off.
Roger that.
Thanks
BalooDK,
Amazing work. The printer part transitioned over to my P1S very nicely. All I literally did was replace the instances of X1C to the name of my printer. Kudos!
For those wanting to do the same with the AMS, what Iāve found is that the AMS for the P1S has virtually none of the sensing capability of the X1, thus AMS code is not very useful.
cheers
chris
1 Like
Thank you.
Most of the stuff for the AMS are attributes hidden in each tray entity. You should be able to use the AMS part, just by changing to the corresponding tray entities
I really like that new look, could you share your code please ?
I have created a helper for each AMS tray.
This is the code for configuration.yaml
sensor:
- platform: template
sensors:
bams_a_1:
unique_id: "BambuAmsA1"
friendly_name: "{{ state_attr('sensor.x1c_ams_1_tray_1', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_1_tray_1', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_1_tray_1', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_a_2:
unique_id: "BambuAmsA2"
friendly_name: "{{ state_attr('sensor.x1c_ams_1_tray_2', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_1_tray_2', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_1_tray_2', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_a_3:
unique_id: "BambuAmsA3"
friendly_name: "{{ state_attr('sensor.x1c_ams_1_tray_3', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_1_tray_3', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_1_tray_3', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_a_4:
unique_id: "BambuAmsA4"
friendly_name: "{{ state_attr('sensor.x1c_ams_1_tray_4', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_1_tray_4', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_1_tray_4', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_b_1:
unique_id: "BambuAmsB1"
friendly_name: "{{ state_attr('sensor.x1c_ams_2_tray_1', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_2_tray_1', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_2_tray_1', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_b_2:
unique_id: "BambuAmsB2"
friendly_name: "{{ state_attr('sensor.x1c_ams_2_tray_2', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_2_tray_2', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_2_tray_2', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_b_3:
unique_id: "BambuAmsB3"
friendly_name: "{{ state_attr('sensor.x1c_ams_2_tray_3', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_2_tray_3', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_2_tray_3', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_b_4:
unique_id: "BambuAmsB4"
friendly_name: "{{ state_attr('sensor.x1c_ams_2_tray_4', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_2_tray_4', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_2_tray_4', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_c_1:
unique_id: "BambuAmsC1"
friendly_name: "{{ state_attr('sensor.x1c_ams_3_tray_1', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_3_tray_1', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_3_tray_1', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_c_2:
unique_id: "BambuAmsC2"
friendly_name: "{{ state_attr('sensor.x1c_ams_3_tray_2', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_3_tray_2', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_3_tray_2', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_c_3:
unique_id: "BambuAmsC3"
friendly_name: "{{ state_attr('sensor.x1c_ams_3_tray_3', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_3_tray_3', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_3_tray_3', 'remain')/100)*335) | round(0) }}m"
- platform: template
sensors:
bams_c_4:
unique_id: "BambuAmsC4"
friendly_name: "{{ state_attr('sensor.x1c_ams_3_tray_4', 'name') | replace('Bambu ', '') | replace('For PLA/PETG', '')}}"
value_template: "{{ (state_attr('sensor.x1c_ams_3_tray_4', 'remain')*10) }}g | {{ ((state_attr('sensor.x1c_ams_3_tray_4', 'remain')/100)*335) | round(0) }}m"
and this is the code for the card:
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :last-child > * {
width: 100%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS A
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_ams_1_ams_temperature
- type: entity
entity: sensor.x1c_ams_1_humidity_index
icon: mdi:water-opacity
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 12px;
--tray_1_color: {{state_attr('sensor.x1c_ams_1_tray_1', 'color') [0:7]+'FF' }};
--tray_2_color: {{state_attr('sensor.x1c_ams_1_tray_2', 'color') [0:7]+'FF' }};
--tray_3_color: {{state_attr('sensor.x1c_ams_1_tray_3', 'color') [0:7]+'FF' }};
--tray_4_color: {{state_attr('sensor.x1c_ams_1_tray_4', 'color') [0:7]+'FF' }};
--tray_1_bg: {% if is_state_attr('sensor.x1c_ams_1_tray_1', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_ams_1_tray_2', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_ams_1_tray_3', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_ams_1_tray_4', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
}
card:
card_mod:
style: |
.entities {
align-items: start !important;
}
show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.bams_a_1
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_1_color);
}
state-badge {
background-color: var(--tray_1_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_a_2
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_2_color);
}
state-badge {
background-color: var(--tray_2_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_a_3
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_3_color);
}
state-badge {
background-color: var(--tray_3_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_a_4
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_4_color);
opacity: 0.8
}
state-badge {
background-color: var(--tray_4_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :last-child > * {
width: 100%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS B
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_ams_2_ams_temperature
- type: entity
entity: sensor.x1c_ams_2_humidity_index
icon: mdi:water-opacity
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 12px;
--tray_1_color: {{state_attr('sensor.x1c_ams_2_tray_1', 'color') [0:7]+'FF' }};
--tray_2_color: {{state_attr('sensor.x1c_ams_2_tray_2', 'color') [0:7]+'FF' }};
--tray_3_color: {{state_attr('sensor.x1c_ams_2_tray_3', 'color') [0:7]+'FF' }};
--tray_4_color: {{state_attr('sensor.x1c_ams_2_tray_4', 'color') [0:7]+'FF' }};
--tray_1_bg: {% if is_state_attr('sensor.x1c_ams_2_tray_1', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_ams_2_tray_2', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_ams_2_tray_3', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_ams_2_tray_4', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
}
card:
card_mod:
style: |
.entities {
align-items: start !important;
}
show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.bams_b_1
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_1_color);
}
state-badge {
background-color: var(--tray_1_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_b_2
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_2_color);
}
state-badge {
background-color: var(--tray_2_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_b_3
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_3_color);
}
state-badge {
background-color: var(--tray_3_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_b_4
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_4_color);
}
state-badge {
background-color: var(--tray_4_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :last-child > * {
width: 100%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS C
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_ams_3_ams_temperature
- type: entity
entity: sensor.x1c_ams_3_humidity_index
icon: mdi:water-opacity
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 12px;
--tray_1_color: {{state_attr('sensor.x1c_ams_3_tray_1', 'color') [0:7]+'FF' }};
--tray_2_color: {{state_attr('sensor.x1c_ams_3_tray_2', 'color') [0:7]+'FF' }};
--tray_3_color: {{state_attr('sensor.x1c_ams_3_tray_3', 'color') [0:7]+'FF' }};
--tray_4_color: {{state_attr('sensor.x1c_ams_3_tray_4', 'color') [0:7]+'FF' }};
--tray_1_bg: {% if is_state_attr('sensor.x1c_ams_3_tray_1', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_ams_3_tray_2', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_ams_3_tray_3', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_ams_3_tray_4', 'active', true) %} rgba(200,100,50, 0.5); {% else %} rgba(111,111,111, 0.1) {% endif %};
}
card:
card_mod:
style: |
.entities {
align-items: start !important;
}
show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.bams_c_1
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_1_color);
}
state-badge {
background-color: var(--tray_1_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_c_2
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_2_color);
}
state-badge {
background-color: var(--tray_2_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_c_3
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_3_color);
}
state-badge {
background-color: var(--tray_3_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- entity: sensor.bams_c_4
icon: phu:3d-filament
card_mod:
style: |
:host {
--paper-item-icon-color: var(--tray_4_color);
}
state-badge {
background-color: var(--tray_4_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
Iām not a programmer, so this is probably not the smartest or prettiest way of doing it.
Hello everyone!!! Already a big thank you for sharing.
I canāt get the color of my AMS reelsā¦ Can someone help me?
A big thank you in advance 
In case you havenāt noticed it yet, newer versions of the custom BambuLab integration now includes ready made cards to be used in your dashboard.
1 Like