Here is code for my card:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: picture-elements
title: null
image: /local/images/devices/p1p.png
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
elements:
- entity: switch.licznik_bambu_lab_p1p
show_state: false
show_name: false
state:
- color: rgb(0, 153, 51)
icon: mdi:power-standby
value: 'on'
- color: rgba(255, 0, 0, 0)
icon: mdi:power-standby
value: null
styles:
card:
- height: 54px
- background-color: rgba(0, 0, 0, 0.0)
- width: 150px
- box-shadow: 0px 0px 0px 0px
name:
- font-size: 13px
style:
'--paper-item-icon-color': red
'--paper-item-icon-active-color': green
'--iron-icon-height': 60px
'--iron-icon-width': 60px
font-size: 10%
font-weight: bold
left: 11%
top: 14%
type: custom:button-card
icon: mdi:power-standby
- type: custom:button-card
entity: sensor.bambu_lab_p1p_nozzle_temperature
state_display: |
[[[
return Math.round(Number(entity.state)).toFixed(0) + '°C';
]]]
name: null
show_name: false
show_state: true
show_icon: false
icon: mdi:printer-3d-nozzle-heat-outline
aspect_ratio: 9/7
style:
top: 29%
left: 45%
width: 60px
height: 35px
styles:
card:
- background-color: rgba(255, 255, 255, 0.3)
- height: 20px
- type: custom:button-card
entity: sensor.bambu_lab_p1p_bed_temperature
state_display: |
[[[
return Math.round(Number(entity.state)).toFixed(0) + '°C';
]]]
name: null
show_name: false
show_state: true
show_icon: false
icon: mdi:heating-coil
aspect_ratio: 9/7
style:
top: 84%
left: 50%
width: 45px
styles:
card:
- background-color: rgba(255, 255, 255, 0.3)
- height: 20px
- type: custom:mushroom-light-card
entity: light.bambu_lab_p1p_chamber_light
name: LED
icon: mdi:lightbulb-outline
secondary_info: none
style:
top: 60%
left: 82%
width: 50px
'--ha-card-background': rgba(0, 0, 0, 0.0)
'--ha-card-box-shadow': none
'--mush-icon-size': 45px
- type: custom:mushroom-template-card
primary: Pauza
icon: mdi:pause
icon_color: |-
{% if is_state('button.bambu_lab_p1p_pause_print', 'unknown') %}
orange
{% else %}
grey
{% endif %}
layout: vertical
secondary: ''
style:
top: 40%
left: 11%
width: 70px
height: null
'--ha-card-background': rgba(0, 0, 0, 0.0)
'--ha-card-box-shadow': none
'--mush-icon-size': 35px
hold_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.bambu_lab_p1p_pause_print
- type: custom:mushroom-template-card
primary: Wzów
icon: mdi:play
icon_color: |-
{% if is_state('button.bambu_lab_p1p_resume_print', 'unknown') %}
green
{% else %}
grey
{% endif %}
layout: vertical
secondary: ''
style:
top: 63%
left: 11%
width: 70px
'--ha-card-background': rgba(0, 0, 0, 0.0)
'--ha-card-box-shadow': none
'--mush-icon-size': 35px
hold_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.bambu_lab_p1p_resume_print
- type: custom:mushroom-template-card
primary: Anuluj
icon: mdi:stop
icon_color: |-
{% if is_state('button.bambu_lab_p1p_stop_print', 'unknown') %}
red
{% else %}
grey
{% endif %}
layout: vertical
secondary: ''
style:
top: 86%
left: 11%
width: 70px
'--ha-card-background': rgba(0, 0, 0, 0.0)
'--ha-card-box-shadow': none
'--mush-icon-size': 35px
styles:
card:
- height: 30px
- background-color: rgba(0, 0, 0, 0.0)
- width: 10px
- box-shadow: 0px 0px 0px 0px
name:
- font-size: 13px
hold_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.bambu_lab_p1p_stop_print
- type: vertical-stack
cards:
- entities:
- entity: select.bambu_lab_p1p_speed
icon: mdi:speedometer
style:
ha-paper-dropdown-menu:
$:
paper-input:
$:
paper-input-container: |
label {
font-size: 16px;
color: white;
type: entities
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.bambu_lab_p1p_subtask
name: Model
icon: mdi:printer-3d
icon_color: yellow
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
- type: custom:mushroom-entity-card
entity: sensor.bambu_lab_p1p_print_progress
name: Postęp
icon: mdi:rotate-3d-variant
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.bambu_lab_p1p_print
icon: mdi:cog
icon_color: green
name: Tryb
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
- type: custom:mushroom-entity-card
entity: sensor.bambu_lab_p1p_print_remaining_time
name: Pozostały czas
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.bambu_lab_p1p_hms
name: Błędy HMS
icon: mdi:alert-circle-outline
icon_color: grey
style: |
ha-card { ;
--ha-card-background: "rgba(0, 0, 0, 0.6)";
--ha-card-box-shadow: 'none';
}
And PNG: