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 .
