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