did you install custom brand icons in HACS ? i had the same issue and that made it so the spools appeared
Hello, I love itā¦ Is it possible to share your Code?
Well done !!
Looks great
1 Like
Here you go 
but you need to copy some code in configuration.yaml from BalooDK for the remain filament to be displayed 
Code for the card :
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.imprimante_3d_switch
content_info: name
icon_color: green
name: BambuLab
icon: phu:bambulab-alt
alignment: center
card_mod:
style: |
ha-card {
zoom: 1.3 !important;
- type: custom:mod-card
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.p1s_reprendre_l_impression
icon: mdi:play
content_info: false
- type: entity
entity: button.p1s_mettre_en_pause_l_impression
icon: mdi:pause
content_info: false
- type: entity
entity: button.p1s_arreter_l_impression
icon: mdi:stop
content_info: false
alignment: center
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
zoom: 1.1 !important;
}
- type: picture-elements
elements:
- type: state-label
entity: sensor.p1s_progression_de_l_impression
tap_action:
action: more-info
entity: camera.p1s_camera
style:
top: 90%
left: 9%
- type: state-label
entity: sensor.p1s_grammage_de_limpression
tap_action:
action: more-info
entity: camera.p1s_camera
style:
top: 90%
left: 88%
- type: state-icon
entity: light.p1s_lumiere_de_la_chambre
tap_action:
action: toggle
style:
top: 10%
left: 8%
- type: state-icon
entity: select.p1s_vitesse_d_impression
style:
top: 10%
left: 89%
camera_image: camera.p1s_camera
camera_view: live
tap_action:
action: more-info
entity: camera.p1s_camera
- type: custom:mod-card
card:
type: custom:timer-bar-card
entities:
- entity: sensor.p1s_etat_de_l_impression
guess_mode: true
active_icon: mdi:printer-3d
start_time:
entity: sensor.p1s_heure_de_debut
end_time:
entity: sensor.p1s_heure_de_fin
layout: full_row
text_width: 5em
bar_radius: 4px
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.p1s_etape_actuelle
icon: mdi:cube
- type: entity
entity: binary_sensor.p1s_erreurs_hms
icon: mdi:alert-circle
- type: entity
entity: sensor.p1s_utilisation_totale
icon: mdi:clock
- type: entity
entity: sensor.p1s_temperature_de_la_buse
icon_color: orange
icon: mdi:printer-3d-nozzle-heat
alignment: center
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.p1s_etat
content: AMS
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ams_temp_sensor_temperature
icon: mdi:thermometer
icon_color: orange
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ams_temp_sensor_humidite
icon_color: blue
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ams_indice_d_humidite
icon: mdi:water-opacity
icon_color: blue
alignment: start
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- 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.ams_emplacement_1', 'color') [0:7]+'FF' }};
--tray_2_color: {{state_attr('sensor.ams_emplacement_2', 'color') [0:7]+'FF' }};
--tray_3_color: {{state_attr('sensor.ams_emplacement_3', 'color') [0:7]+'FF' }};
--tray_4_color: {{state_attr('sensor.ams_emplacement_4', 'color') [0:7]+'FF' }};
--tray_1_bg: {% if is_state_attr('sensor.ams_emplacement_1', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.ams_emplacement_2', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.ams_emplacement_3', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.1) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.ams_emplacement_4', 'active', true) %} rgba(255,254,249, 0.25); {% 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: mdi:circle-slice-8
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: mdi:circle-slice-8
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: mdi:circle-slice-8
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: mdi:circle-slice-8
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;
}
1 Like
So,
Iām fiddling with BalooDKās AMS code from my P1S with AMS.
Here is the Dashboard code:
views:
- title: AMS
sections:
- type: grid
cards:
- 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.frog_p1s_online
content: AMS A
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.frog_p1s_ams_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: 10px;
--external_spool_color: {{state_attr('sensor.x1c_ext_external_spool', 'color') }};
--tray_1_color: {{state_attr('sensor.frog_p1s_ams_tray_1', 'color') }};
--tray_2_color: {{state_attr('sensor.frog_p1s_ams_tray_2', 'color') }};
--tray_3_color: {{state_attr('sensor.frog_p1s_ams_tray_3', 'color') }};
--tray_4_color: {{state_attr('sensor.frog_p1s_ams_tray_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.frog_p1s_ams_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.frog_p1s_ams_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.frog_p1s_ams_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.frog_p1s_ams_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: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.frog_p1s_ams_tray_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.frog_p1s_ams_tray_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.frog_p1s_ams_tray_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.frog_p1s_ams_tray_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.frog_p1s_ams_tray_1
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 1";
let filamentType = states['sensor.frog_p1s_ams_tray_1'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.frog_p1s_ams_tray_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.frog_p1s_ams_tray_1'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.frog_p1s_ams_tray_2
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 2";
let filamentType = states['sensor.frog_p1s_ams_tray_2'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.frog_p1s_ams_tray_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.frog_p1s_ams_tray_2'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.frog_p1s_ams_tray_3
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 3";
let filamentType = states['sensor.frog_p1s_ams_tray_3'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.frog_p1s_ams_tray_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.frog_p1s_ams_tray_3'].attributes.color || '#FFFFFF';
]]]
- type: custom:button-card
entity: sensor.frog_p1s_ams_tray_4
icon: mdi:printer-3d-nozzle
name: |
[[[
let tray = "Tray 4";
let filamentType = states['sensor.frog_p1s_ams_tray_4'].attributes.type || 'Unknown Type';
return tray + " | " + filamentType;
]]]
show_icon: false
show_name: false
custom_fields:
status: |
[[[
let percentage = parseFloat(states['sensor.frog_p1s_ams_tray_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.frog_p1s_ams_tray_4'].attributes.color || '#FFFFFF';
]]]
It works, mostly but the colors displayed are wonky:
The colors, currently are
- Empty
- Green
- White
- Black
Any thoughts about what is going on?
Is there a list of āattributesā somewhere?
Thanks!
Itās not showing the colors at all. The icons will show the color, but you donāt have any icons.
You need to install the āCustom brand Iconā pack from HACS, or change the icons for your filament, Itās set to phu:3d-filament in my code.
You can see the attributes under states in the developer tools .
And thank you for the inspiration to my dashboard @benji.
All the code and the installation instructions are at My Home Assistant Dashboard for my Bambulab P1S Printer Ā· GitHub
2 Likes
Any chance you could share youāre findings? I got it working, kinda but itās a little bit off.
Hey, thanks @eodabas for the config. Iāve switched my personal setup to this It looks great. A couple issues: I have no idea where the errors are coming from, the model preview isnāt working, missing temp icon, line through the progress card, etcā¦ But Iāll eventually get around to fixing them.
Like @Cornmeister, I also found the camera was flaky as anything in the ha-bambulab integration. Itās been rock solid since pulling it into go2RTC (and disabling the ha-bambulab one).
On a side note, has anyone found a good way to pull the time lapses/SD card into home assistant?
Iām trying to send notification when job finished and attach the timelapse, but HAss seems to only support Samba and NFS natively, not FTPS, so I canāt work out how to link the SD card as a media locationā¦
Pardon my coding ignorance.
I downloaded your yaml file and change all the necessary code.
But when I go to a new dashboard to put it in, it says
Unknown type: sections
I am thinking it refers to the first line.
type: sections
I do not know how to fix it, or am I going about this the wrong way. I created a new dashboard, clicked the pencil, selected manual, then pasted the changed code.
Any help appreciated.
Where did you get the remaing filament sensor from? I canāt find those.
Yes and still no filament color 
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Bambu Lab X1C
alignment: start
- type: custom:mod-card
card:
camera_view: live
type: picture-glance
entities: []
camera_image: camera.x1c_00m09d511701118_camera
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child > * {
width: 20%;
flex: auto;
}
div#root > :last-child > * {
width: 80%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: AMS
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_00m09d511701118_ams_1_temperature_de_la_ams
- type: entity
entity: sensor.x1c_00m09d511701118_ams_1_indice_d_humidite
icon: mdi:water-opacity
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child > * {
width: 20%;
flex: auto;
}
div#root > :last-child > * {
width: 80%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 10px;
--tray_1_color: {{state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_1', 'color') }};
--tray_2_color: {{state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_2', 'color') }};
--tray_3_color: {{state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_3', 'color') }};
--tray_4_color: {{state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_4', 'color') }};
--tray_1_bg: {% if is_state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_1', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.2) {% endif %};
--tray_2_bg: {% if is_state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_2', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.2) {% endif %};
--tray_3_bg: {% if is_state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_3', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.2) {% endif %};
--tray_4_bg: {% if is_state_attr('sensor.x1c_00m09d511701118_ams_1_emplacement_4_4', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.2) {% 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_00m09d511701118_ams_1_emplacement_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_00m09d511701118_ams_1_emplacement_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_00m09d511701118_ams_1_emplacement_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_00m09d511701118_ams_1_emplacement_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:
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.x1c_online
content: Impression
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.x1c_00m09d511701118_etat_de_l_impression
- type: light
icon: mdi:lightbulb
entity: light.x1c_00m09d511701118_lumiere_de_la_chambre
- type: entity
entity: sensor.x1c_00m09d511701118_signal_wi_fi
- type: entity
entity: binary_sensor.x1c_00m09d511701118_erreurs_hms
icon: mdi:alert-circle
- type: custom:mod-card
card:
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.x1c_00m09d511701118_temperature_de_la_buse
icon: mdi:printer-3d-nozzle-heat
- entity: sensor.x1c_00m09d511701118_temperature_du_lit
icon: mdi:train-car-flatbed
- entity: sensor.x1c_00m09d511701118_temperature_de_la_chambre
icon: mdi:minus-box-outline
- entity: sensor.x1c_00m09d511701118_profil_de_vitesse
state_color: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.x1c_00m09d511701118_progression_de_l_impression
- type: entity
entity: sensor.x1c_00m09d511701118_heure_de_fin
- type: entity
entity: sensor.x1c_00m09d511701118_temps_restant
alignment: justify
I have the same problem and I canāt find a solutionā¦
I found a solution:
Iāve changed āāpaper-item-icon-color:ā to āācard-mod-icon-color:ā
This worked for me.
5 Likes
I just tested it and thereās no changeā¦ Can you share your code?
Thanks in advance
would you mind share yours please?
Same issue here, did you find a solution?