Disclaimer: The code provided here is for an A1 printer, sensor names etc all reflect that.
The code here uses some custom mods, such as custom:mushroom-chips-card, custom:mod-card, custom:button-card, custom:bar-card you have to have these before hand. The code is working fine. Make sure the code you put in your yaml is the same as the code provided here.
Here is my code:
- icon: mdi:alpha-a-box-outline
title: Bambu A1
id: bambua1
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: '{{ states.sensor.a1_printer_name.state }}'
alignment: start
- type: custom:mod-card
card:
# camera_view: live
type: picture-glance
entities: []
camera_image: camera.a1_camera
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: picture-entity
entity: image.a1_cover_image
camera_view: auto
show_name: false
show_state: false
- type: vertical-stack
cards:
- type: markdown
content: >
<font size="5">{{ states.sensor.a1_task_name.state }}</font>
<table width=100%><tr><td align=left>Printed layers<td align=right><font color=#77fc54 ; size="4">{{ states.sensor.a1_current_layer.state}}</font>/{{states.sensor.a1_total_layer_count.state}}</td></tr></table>
<table width=100%><tr>
<td align=left><font size="5";color=#77fc54>{{ states.sensor.a1_print_progress.state}}%<td align=right>
{% if (states.sensor.a1_remaining_time.state | int) == 0 %}
Success
{% else %}
<font color=#959595>-{{(states.sensor.a1_remaining_time.state | int/60) | int }}h{{ states.sensor.a1_remaining_time.state| int % 60 }}m
{% endif %}
</td>
</tr></table>
- type: 'custom:bar-card'
entity: sensor.a1_print_progress
icon: 'off'
name: Progress
positions:
icon: 'off'
indicator: 'off'
title: inside
value: inside
severity:
- color: green #'#77fc54'
from: 0
to: 100
- type: horizontal-stack
cards:
- type: custom:button-card
# color: rgb(0, 255, 0)
color_type: icon
entity: button.a1_resume_printing
icon: mdi:play
name: Resume
layout: icon_name
card_mod:
style: |
:host {
--paper-item-icon-color: green}
ha-card {
height: 60px;
}
- type: custom:button-card
# color: rgb(0, 255, 0)
color_type: icon
entity: button.a1_pause_printing
icon: mdi:pause
name: Pause
card_mod:
style: |
:host {
--paper-item-icon-color: rgreen}
ha-card {
height: 60px;
}
layout: icon_name_state
confirmation:
text: '[[[ return `Are you sure you want to 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 `Are you sure you want to stop the print?` ]]]'
- 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.a1_online
content: EXT.
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.a1_online
content: AMS
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
# - type: entity
# entity: sensor.a1_ams_1_temperature
- type: entity
entity: sensor.a1_ams_1_humidity_index
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;
--external_spool_color: {{state_attr('sensor.a1_externalspool_external_spool', 'color') }};
--tray_1_color: {{state_attr('sensor.a1_ams_1_tray_1', 'color') }};
--tray_2_color: {{state_attr('sensor.a1_ams_1_tray_2', 'color') }};
--tray_3_color: {{state_attr('sensor.a1_ams_1_tray_3', 'color') }};
--tray_4_color: {{state_attr('sensor.a1_ams_1_tray_4', 'color') }};
--external_spool_bg: {% if is_state_attr('sensor.a1_externalspool_external_spool', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.2) {% endif %};
--tray_1_bg: {% if is_state_attr('sensor.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_externalspool_external_spool
icon: mdi:circle-slice-8
card_mod:
style: |
:host {
--paper-item-icon-color: var(--external_spool_color);
}
state-badge {
background-color: var(--external_spool_bg);
border-radius: 50%;
}
div {
white-space: unset !important;
text-wrap: balance !important;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
font-size: 10px;
--external_spool_color: {{state_attr('sensor.a1_externalspool_external_spool', 'color') }};
--tray_1_color: {{state_attr('sensor.a1_ams_1_tray_1', 'color') }};
--tray_2_color: {{state_attr('sensor.a1_ams_1_tray_2', 'color') }};
--tray_3_color: {{state_attr('sensor.a1_ams_1_tray_3', 'color') }};
--tray_4_color: {{state_attr('sensor.a1_ams_1_tray_4', 'color') }};
--external_spool_bg: {% if is_state_attr('sensor.a1_externalspool_external_spool', 'active', true) %} rgba(255,254,249, 0.25); {% else %} rgba(111,111,111, 0.2) {% endif %};
--tray_1_bg: {% if is_state_attr('sensor.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_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.a1_ams_1_tray_4
icon: mdi:circle-slice-8
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.a1_online
content: Printer
card_mod:
style: |
ha-card {
background: none !important;
border: none;
font-size: 4rem !important;
}
- type: spacer
- type: entity
entity: sensor.a1_current_stage
- type: light
icon: mdi:lightbulb
entity: light.a1_chamber_light
- type: entity
entity: sensor.a1_wi_fi_signal
- type: entity
entity: binary_sensor.a1_hms_errors
icon: mdi:alert-circle
- type: custom:mod-card
card:
show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.a1_nozzle_temperature
icon: mdi:printer-3d-nozzle-heat
- entity: sensor.a1_bed_temperature
icon: mdi:radiator #mdi:train-car-flatbed
# - entity: sensor.a1_chamber_temperature
# icon: mdi:minus-box-outline
- entity: sensor.a1_speed_profile
icon: mdi:speedometer
state_color: false
- type: custom:mushroom-chips-card
chips:
# - type: entity
# entity: sensor.a1_print_progress
- type: entity
entity: sensor.a1_end_time
alignment: justify