I’ve also been researching how to create a threedy-style mushroom printer card and came across this post. To your question about temp sensors, you should look into using the mushroom chips card. The border progress bar is created using card-mod and templating. The percentage as part of the secondary info can also be done using templates.
I have been putting together a card. It uses mushroom cards, card-mod, and stack-in-card. I added a tap action to pull up my printer camera and hold action to go to a more detailed dashboard. I also added a chip to show the estimated time of completion.
Useful Links:
Card mod styling guide
Specific post creating threedy-like mushroom card - I would suggest reading through the whole thread for tips on creating animations.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: camera.octoprint_camera
primary: Prusa MK3S+
secondary: |-
{% if is_state('sensor.octoprint_print_status','Printing') %}
{{ (states('sensor.octoprint_print_progress') | round(0) )}}% {{states('sensor.octoprint_print_status')}}
{% else %}
{{states('sensor.octoprint_print_status')}}
{% endif %}
icon: mdi:printer-3d-nozzle
icon_color: black
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: /lovelace/3d-printer
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(252,109,9) {{ states('sensor.octoprint_print_progress') | round(0) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.1);
}
.: |
ha-card {
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ (((states('sensor.octoprint_actual_tool0_temp') | float - 32) * 5 /
9) | round(1) )}} °C
icon: mdi:printer-3d-nozzle-heat
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-{{ config.icon_color }}), 0.1);
border: none;
}
- type: template
content: >-
{{ (((states('sensor.octoprint_actual_bed_temp') | float - 32) * 5 /
9) | round(1) )}} °C
icon: mdi:heating-coil
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-{{ config.icon_color }}), 0.1);
border: none;
}
- type: conditional
conditions:
- condition: state
entity: binary_sensor.octoprint_printing
state: 'on'
chip:
type: template
content: >-
{{ states('sensor.octoprint_estimated_finish_time') | as_timestamp |
timestamp_custom ('%H:%M') }}
icon: mdi:timer-sand-complete
card_mod:
style: |
ha-card {
--chip-background: --chip-background: rgba(var(--rgb-{{ config.icon_color }}), 0.1);
border: none;
}
- type: conditional
conditions:
- condition: state
entity: binary_sensor.octoprint_printing
state: 'on'
chip:
type: template
content: >-
{% set time = (states('sensor.octoprint_print_time') | int) | int %}
{% set minutes = ((time % 3600) / 60) | int %} {% set hours = ((time
% 86400) / 3600) | int %} {% set days = (time / 86400) | int %}
{%- if time < 60 -%}
Less than a minute
{%- else -%}
{%- if days > 0 -%}
{{ days }}d
{%- endif -%}
{%- if hours > 0 -%}
{%- if days > 0 -%}
{{ ' ' }}
{%- endif -%}
{{ hours }}h
{%- endif -%}
{%- if minutes > 0 -%}
{%- if days > 0 or hours > 0 -%}
{{ ' ' }}
{%- endif -%}
{{ minutes }}m
{%- endif -%}
{%- endif -%}
icon: mdi:timer
card_mod:
style: |
ha-card {
--chip-background: --chip-background: rgba(var(--rgb-{{ config.icon_color }}), 0.1);
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.octoprint_pause_job
icon_color: white
icon: mdi:pause
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-grey' }}), 0.7);
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.octoprint_emergency_stop
icon_color: white
icon: mdi:alert-octagon
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' }}), 1);
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
EDIT 1: 02 Jan 2024 My latest code revision as of
EDIT 2: 30 Jan 2024 Changed the Today/Tomorrow estimated finished time template, which wasn’t working for me using utcnow().
EDIT 3: 07 Feb 2025 I moved hosting the latest version of my card to GitHub - chrisml0601/printer_card: 3D Printer Lovelace Card for Home Assistant