Slightly changed since last post, using the new inline feature of the tile card for sliders to reduce space.
Most cards are tile cards, some with custom features row for the sliders. Some mushroom cards for the fans
Printer on:
Printer off:
5 Likes
Would you be willing to share the yaml of this please? 
Sure:
- title: 3D Printer
path: 3d-printer
icon: mdi:printer-3d
type: sections
max_columns: 3
sections:
- type: grid
cards:
- type: heading
heading: Camera
heading_style: title
icon: mdi:camera
badges: []
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.k1c_camera
camera_image: camera.k1c_camera
grid_options:
columns: full
rows: 12
theme: simons_theme
tap_action:
action: none
hold_action:
action: none
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
column_span: 3
- type: grid
cards:
- type: heading
heading: 3D Printer
heading_style: title
icon: mdi:printer-3d
badges: []
- type: custom:mushroom-entity-card
entity: switch.3d_printer_power_relay
icon: mdi:power
name: Switch
secondary_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: binary_sensor.3d_printer_smoke_detector_smoke_alarm
primary: Smoke Detector
secondary: >-
{% if states
('binary_sensor.3d_printer_smoke_detector_smoke_alarm') == "on" %}
Smoke Detected
{% elif states
('binary_sensor.3d_printer_smoke_detector_smoke_alarm') == "off"
%}
Clear
{% else %}
Unavailable
{% endif %}
icon: m3sf:detector-smoke
icon_color: >-
{% if states
('binary_sensor.3d_printer_smoke_detector_smoke_alarm') == "on" %}
red
{% else %}
grey
{% endif %}
grid_options:
columns: 6
rows: 1
- type: tile
entity: sensor.k1c_current_print_state
name: Status
icon: mdi:printer-3d
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: custom:mushroom-template-card
entity: binary_sensor.k1c_filament_sensor
primary: Filament
secondary: |-
{% if states('binary_sensor.k1c_filament_sensor') == "on" %}
Loaded
{% elif states('binary_sensor.k1c_filament_sensor') == "off" %}
Unloaded
{% else %}
Unavailable
{% endif %}
icon: |-
{% if states('binary_sensor.k1c_filament_sensor') == "on" %}
mdi:printer-3d-nozzle-outline
{% else %}
mdi:printer-3d-nozzle-off-outline
{% endif %}
icon_color: |-
{% if states('binary_sensor.k1c_filament_sensor') == "on" %}
blue
{% elif states('binary_sensor.k1c_filament_sensor') == "off" %}
red
{% else %}
grey
{% endif %}
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
grid_options:
columns: 6
rows: 1
- type: horizontal-stack
cards:
- type: tile
entity: device_tracker.k1c_3d_printer
name: Network
vertical: false
- type: custom:mushroom-template-card
primary: Fluidd
icon: mdi:web
icon_color: blue
tap_action:
action: url
url_path: http://192.168.1.130:4408/#/
fill_container: true
- type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sensor.3d_printer_power
name: Power
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.3d_printer_power
name: Power
- type: custom:mushroom-entity-card
entity: sensor.3d_printer_plug_voltage
name: Voltage
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.3d_printer_total_daily_energy
name: Today's Use
- type: custom:mushroom-entity-card
entity: sensor.3d_printer_total_daily_cost
name: Today's Cost
- type: heading
heading: Print Job
heading_style: title
icon: mdi:printer-3d
badges: []
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: tile
entity: sensor.k1c_filename
icon: mdi:file
name: Print File
layout_options:
grid_columns: 4
grid_rows: 1
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.k1c_thumbnail
image: https://demo.home-assistant.io/stub_config/bedroom.png
camera_image: camera.k1c_thumbnail
tap_action:
action: none
hold_action:
action: none
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: horizontal-stack
cards:
- type: tile
entity: sensor.k1c_print_duration
name: Duration
vertical: false
- type: tile
entity: sensor.k1c_print_eta
name: ETA
vertical: false
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_progress
range:
- 0
- 100
tap_action:
action: none
step: 1
thumb: flat
type: tile
name: Progress
color: teal
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
entity: sensor.k1c_progress
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- type: horizontal-stack
cards:
- type: tile
entity: sensor.k1c_toolhead_position_z
name: Current Height
vertical: true
- type: custom:mushroom-template-card
entity: sensor.k1c_current_layer
icon: mdi:layers-triple
icon_color: blue
primary: Layers
secondary: >-
{{ states('sensor.k1c_current_layer') | float(0) | round(0) }}
/ {{ states('sensor.k1c_total_layer') | float(0) | round(0) }}
layout: vertical
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: grid
cards:
- type: heading
heading: Control
heading_style: title
icon: mdi:printer-3d
badges: []
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Pause
icon: mdi:pause
icon_color: orange
layout: vertical
tap_action:
action: call-service
service: button.press
target:
entity_id: button.k1c_pause_print
- type: custom:mushroom-template-card
primary: Resume
icon: mdi:play
icon_color: teal
layout: vertical
tap_action:
action: call-service
service: button.press
target:
entity_id: button.k1c_resume_print
- type: custom:mushroom-template-card
primary: Cancel
icon: mdi:cancel
icon_color: green
layout: vertical
tap_action:
action: call-service
service: button.press
target:
entity_id: button.k1c_cancel_print
- type: custom:mushroom-template-card
primary: Stop
icon: mdi:stop
icon_color: red
layout: vertical
tap_action:
action: call-service
service: button.press
target:
entity_id: button.k1c_emergency_stop
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: heading
heading: Lights
heading_style: title
icon: mdi:lightbulb
badges: []
- type: tile
entity: light.3d_printer_enclosure_light
name: Enclosure
vertical: false
features_position: bottom
grid_options:
columns: 12
rows: 1
- features:
- type: light-brightness
type: tile
entity: light.k1c_lights
name: Chamber
vertical: false
features_position: inline
grid_options:
columns: 12
rows: 1
state_content: brightness
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: heading
heading: Fans
heading_style: title
icon: mdi:fan
badges: []
- type: custom:mushroom-fan-card
name: Enclosure
icon_animation: true
show_percentage_control: false
layout: horizontal
collapsible_controls: false
tap_action:
action: toggle
entity: fan.3d_printer_enclosure_extractor
- type: custom:mushroom-fan-card
name: Chamber
icon_animation: true
show_percentage_control: false
layout: horizontal
collapsible_controls: false
tap_action:
action: toggle
entity: fan.k1c_chamber_fan
grid_options:
columns: 6
rows: 1
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: custom:mushroom-fan-card
entity: fan.k1c_hot_end_fan
name: Hot End
icon_animation: true
show_percentage_control: false
layout: horizontal
collapsible_controls: false
tap_action:
action: toggle
grid_options:
columns: 6
rows: 1
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: custom:mushroom-fan-card
name: Part
icon_animation: true
show_percentage_control: false
layout: horizontal
collapsible_controls: false
tap_action:
action: toggle
entity: fan.k1c_part_fan
grid_options:
columns: 6
rows: 1
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: custom:mushroom-fan-card
name: MCU
icon_animation: true
show_percentage_control: false
layout: horizontal
collapsible_controls: false
tap_action:
action: toggle
entity: fan.k1c_mcu_fan
grid_options:
columns: 6
rows: 1
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: heading
heading: Heaters
heading_style: title
icon: mdi:heating-coil
badges: []
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: custom:mushroom-template-card
secondary: |
{% if states('sensor.k1c_extruder_power')|float(0) != 0 -%}
Heating
{%- else -%}
Idle
{%- endif %}
primary: Extruder
fill_container: true
icon: mdi:printer-3d-nozzle
icon_color: |-
{% if states('sensor.k1c_extruder_power')|float(0) != 0 -%}
red
{%- else -%}
grey
{%- endif %}
grid_options:
columns: 6
rows: 1
entity: sensor.k1c_extruder_power
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: custom:mushroom-template-card
secondary: |
{% if states('sensor.k1c_bed_power')|float(0) != 0 -%}
Heating
{%- else -%}
Idle
{%- endif %}
primary: Bed
fill_container: true
icon: mdi:heating-coil
icon_color: |-
{% if states('sensor.k1c_bed_power')|float(0) != 0 -%}
red
{%- else -%}
grey
{%- endif %}
grid_options:
columns: 6
rows: 1
entity: sensor.k1c_bed_power
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
- type: heading
heading: Temperatures
heading_style: title
icon: mdi:thermometer
badges: []
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.3d_printer_enclosure_temperature
range:
- 0
- 40
tap_action:
action: none
thumb: flat
step: 1
type: tile
entity: sensor.3d_printer_enclosure_temperature
name: Enclosure
color: green
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_chamber_temp
range:
- 0
- 40
tap_action:
action: none
thumb: flat
step: 1
unit_of_measurement: °C
type: tile
entity: sensor.k1c_chamber_temp
color: yellow
hide_state: false
name: Chamber
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_mcu_temp
range:
- 0
- 100
tap_action:
action: none
thumb: flat
step: 1
unit_of_measurement: °C
type: tile
color: orange
hide_state: false
name: MCU
entity: sensor.k1c_mcu_temp
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_extruder_temperature
range:
- 0
- 300
tap_action:
action: none
thumb: flat
step: 1
label: Current - {{ value | float | round(0) }}°C
unit_of_measurement: °C
type: tile
color: blue
hide_state: false
name: Extruder Current
entity: sensor.k1c_extruder_temperature
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_extruder_target
range:
- 0
- 300
tap_action:
action: none
thumb: default
step: 1
label: Target - {{ value | float | round(0) }}°C
unit_of_measurement: °C
type: tile
color: blue
hide_state: false
name: Extruder Target
entity: number.k1c_extruder_target
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_bed_temperature
range:
- 0
- 100
tap_action:
action: none
thumb: flat
step: 1
label: Current - {{ value | float | round(0) }}°C
unit_of_measurement: °C
type: tile
color: deep-purple
hide_state: false
name: Bed Current
entity: sensor.k1c_bed_temperature
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.k1c_bed_target
range:
- 0
- 100
tap_action:
action: none
thumb: default
step: 1
label: Target - {{ value | float | round(0) }}°C
unit_of_measurement: °C
type: tile
color: deep-purple
hide_state: false
name: Bed Target
entity: number.k1c_bed_target
visibility:
- condition: state
entity: switch.3d_printer_power_relay
state: 'on'
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- type: grid
cards:
- type: heading
heading: Filament Dryer
heading_style: title
icon: mdi:movie-roll
badges: []
- type: tile
entity: switch.filament_dryer_switch
name: Power
features_position: bottom
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- style: slider
type: numeric-input
type: tile
entity: input_number.filament_dryer_duration
name: Timer Duration
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
- features:
- type: custom:service-call
entries:
- type: toggle
entity_id: input_boolean.filament_dryer_start
tap_action:
action: toggle
target:
entity_id: input_boolean.filament_dryer_start
data: {}
thumb: default
icon: ''
unchecked_icon: mdi:play
checked_icon: mdi:stop
allow_list: false
checked_values: []
check_numeric: false
autofill_entity_id: true
type: tile
entity: timer.filament_dryer_duration
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
state_content: remaining_time
name: Timer
color: red
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.filament_dryer_status
primary: State
secondary: '{{ states(''sensor.filament_dryer_status'') }}'
icon: mdi:radiator
icon_color: >-
{% if states ('sensor.filament_dryer_status') == "Heating" %}
red
{% elif states ('sensor.filament_dryer_status') ==
"Recirculating" %}
orange
{% else %}
grey
{% endif %}
layout: vertical
- type: tile
entity: sensor.filament_dryer_sensor_temperature
name: Temperature
vertical: true
- type: tile
entity: sensor.filament_dryer_sensor_humidity
name: Humidity
vertical: true
- type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sensor.filament_dryer_power
name: Power
- type: horizontal-stack
cards:
- type: tile
entity: sensor.filament_dryer_power
name: Power
- type: tile
entity: sensor.filament_dryer_voltage
name: Voltage
- type: horizontal-stack
cards:
- type: tile
entity: sensor.filament_dryer_total_daily_energy
name: Today's Use
- type: tile
entity: sensor.filament_dryer_total_daily_cost
name: Today's Cost
2 Likes
Hi, how did you do the climate card and the filament and bed temp cards? I really like them. And how did you get your camera that big and on the top? i am new to the whole dashboard design stuff
any 1 already made a version for a x1c or got a template to use
@Holdestmade can you maybe explane wy i get this error
type: custom:service-call
entries:
- type: slider
entity_id: sensor.x1c_kamertemperatuu
range:
- 0
- 40
tap_action:
action: none
thumb: flat
step: 1
unit_of_measurement: °C
its part of this code
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.x1c_kamertemperatuu
range:
- 0
- 40
tap_action:
action: none
thumb: flat
step: 1
unit_of_measurement: °C
type: tile
entity: sensor.x1c_kamertemperatuur
color: yellow
hide_state: false
name: Kamer
visibility:
- condition: state
entity: switch.x1c_powerswitch_stopcontact_1
state: "on"
features_position: inline
vertical: false
grid_options:
columns: 12
rows: 1
still learning all of Homeassitant so dont know alot
You need to install this
2 Likes
Thanks to your post, this is what I ended up with:
I’d love to have a visual progress bar with some extra stats, but I’m happy with this so far.
1 Like
@fugley, that’s a nice compact card .
Hello,
@Sawtaytoes your bambu dashboard is very nice and compact. Could you please share your code.
Thanks
1 Like
I have changed this dashboard a million times, but I think this is what I’m going to settle on for now 
1 Like
That is a phenomenal dashboard!
Did you create a custom integration for your filament dryer? How are you monitoring the power usage of each separate component (extruder/bed)?
No, its just a shelly with power monitoring, aqara temp sensor and some HA timers (its just a converted fruit dehydrator)
I use the Moonraker integration, running fluuid on my creality K1C, it exposes all sorts of info
How do i install this ring card dashboard with yaml ?
Not sure what you mean, you install it with HACS, see above
Hello, could someone tell me how to get the stl thumbnail through octoprint? It was working for me through url and generic camera, but stopped working and Im not able to get this integration working
I’ve managed to create a card that looks like this:
Here is yaml for Sovol:
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: unavailable
card:
type: custom:bubble-card
card_type: button
entity: switch.dronownia_drukarki_socket_3
name: Sovol SV08
double_tap_action:
action: more-info
hold_action:
action: more-info
button_action:
double_tap_action:
action: more-info
tap_action:
action: call-service
target:
entity_id: script.dronownia_sovol_sv08_toggle
service: script.turn_on
sub_button:
- entity: sensor.sovol_sv08_current_print_state
show_icon: false
show_state: true
show_name: false
tap_action:
action: none
visibility:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state_not: unavailable
- type: conditional
conditions:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state_not: unavailable
card:
type: custom:mod-card
style: |
ha-card {
--ha-card-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
--ha-card-border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
}
card:
type: custom:stack-in-card
card_mod:
style: >-
ha-card {--ha-card-border-width: 0; --vertical-stack-card-gap: 0px;
}
visibility:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state_not: unavailable
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
primary: Sovol SV08
icon: phu:3dprinter-printing
entity: switch.dronownia_drukarki_socket_3
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
secondary: >-
{{ state_translated("sensor.sovol_sv08_current_print_state")
}} • {{ states("sensor.sovol_sv08_progress", with_unit=true)}}
icon_color: >-
{% if states("sensor.sovol_sv08_current_print_state") ==
"printing" -%}
green
{% elif states("sensor.sovol_sv08_current_print_state") ==
"paused" -%}
amber
{% elif states("sensor.sovol_sv08_current_print_state") ==
"stopped" -%}
red
{% else -%}
light-blue
{% endif -%}
- type: grid
columns: 3
square: false
cards:
- type: horizontal-stack
cards: []
- type: horizontal-stack
cards: []
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
icon: mdi:pause
icon_color: amber
entity: button.sovol_sv08_pause_print
layout: vertical
visibility:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: printing
secondary_info: none
primary_info: none
- type: custom:mushroom-entity-card
icon: mdi:play
icon_color: green
entity: button.sovol_sv08_resume_print
layout: vertical
visibility:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: paused
secondary_info: none
primary_info: none
- type: custom:mushroom-entity-card
icon: mdi:stop
icon_color: red
entity: button.sovol_sv08_cancel_print
layout: vertical
tap_action:
action: none
double_tap_action:
action: none
secondary_info: none
primary_info: none
visibility:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: paused
- type: custom:mushroom-entity-card
icon: mdi:power
icon_color: red
entity: sensor.sovol_sv08_current_print_state
layout: vertical
tap_action:
confirmation:
text: >-
Czy na pewno chcesz włączyć/wyłączyć drukarkę
Sovol SV08?
action: call-service
target:
entity_id: script.dronownia_sovol_sv08_toggle
service: script.turn_on
visibility:
- condition: not
conditions:
- condition: or
conditions:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: printing
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: paused
secondary_info: none
primary_info: none
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: repeat(4, 1fr)
grid-template-rows: repeat(2, auto)
grid-template-areas: |
"a b b b"
"a c c c"
width: 100%
margin: 0
padding: 0
justify-items: stretch
align-items: stretch
visibility:
- condition: or
conditions:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: printing
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: paused
cards:
- type: picture-entity
show_state: false
show_name: false
entity: camera.sovol_sv08_thumbnail
camera_image: camera.sovol_sv08_thumbnail
view_layout:
grid-area: a
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
show_icon: false
view_layout:
grid-area: b
primary: "{{ states(\"sensor.sovol_sv08_filename\") }}"
secondary: >-
Layer: {{ states("sensor.sovol_sv08_current_layer") }} of {{
states("sensor.sovol_sv08_total_layer") }}
fill_entity: sensor.sovol_sv08_current_layer
- type: custom:entity-progress-card
view_layout:
grid-area: c
hide:
- icon
- name
- value
- secondary_info
disable_unit: true
bar_size: large
min_value: 0
entity: sensor.sovol_sv08_current_layer
max_value: sensor.sovol_sv08_total_layer
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.sovol_sv08_sovol
camera_image: camera.sovol_sv08_sovol
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sovol_sv08_print_eta
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.sovol_sv08_progress
icon: mdi:chart-donut
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.sovol_sv08_toolhead_position_z
icon: mdi:gantry-crane
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.sovol_sv08_fan1
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: center
visibility:
- condition: or
conditions:
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: printing
- condition: state
entity: sensor.sovol_sv08_current_print_state
state: paused
alignment: center
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sovol_sv08_extruder_temperature
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.sovol_sv08_bed_temperature
icon: mdi:chart-donut
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.sovol_sv08_host_temp
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
visibility:
- condition: state
entity: sensor.sovol_sv08_host_temp
state_not: unavailable
- type: entity
entity: sensor.sovol_sv08_raspberry_pi_temp
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
visibility:
- condition: state
entity: sensor.sovol_sv08_raspberry_pi_temp
state_not: unavailable
alignment: center
I also created custom card “dirty way” that can simplify things, but I was unable to win with editor so it’s kinda basic, maybe someone will pick this up and make HACS component out of this (with proper multi language and such):
/* Orginal author: Grzegorz Russek
MIT License */
console.info("%c PRINTER-MONITOR-CARD loading", "color: white; background: #4caf50; padding: 4px;");
class PrinterMonitorCardEditor extends HTMLElement {
set hass(hass) {
this._hass = hass;
this.querySelectorAll('ha-entity-picker').forEach(picker => {
if (picker.hass !== hass) {
picker.hass = hass;
}
});
}
setConfig(config) {
this._config = config;
this._initializeEditor();
}
_getFields() {
return [
{ key: "printer_name", label: "1. Nazwa drukarki (Printer name)", type: "text" },
{ key: "printer", label: "2. Prefiks encji (Entity prefix, np. 'tevo_tarantula')", type: "text" },
{ key: "printer_switch", label: "3. Włącznik drukarki (Switch)", type: "entity", domain: "switch" },
{ key: "toggle_script", label: "4. Skrypt włącz/wyłącz (Toggle Script)", type: "script", domain: "script" },
{ key: "live_camera", label: "5. Kamera na żywo (Live camera - Opcj.)", type: "entity", domain: "camera" },
{ key: "live_camera_rotation", label: "6. Obrót kamery (Rotation - Opcj.)", type: "number", min: 0, max: 360, step: 1, default: 0 },
];
}
_initializeEditor() {
if (!this.shadowRoot) {
this.attachShadow({ mode: 'open' });
const style = document.createElement("style");
style.textContent = `
.field-wrapper { margin-bottom: 16px; border-top: 1px solid var(--divider-color); padding-top: 8px; }
label { font-weight: bold; display: block; margin-bottom: 4px; color: var(--primary-text-color); }
input, ha-entity-picker { width: 100%; box-sizing: border-box; }
ha-entity-picker { padding: 4px 0; }
h4 { margin-top: 0; }
`;
this.shadowRoot.appendChild(style);
const container = document.createElement("div");
container.innerHTML = '<h4>Konfiguracja Drukarki (Prefix + Jawne Encje)</h4>';
this.shadowRoot.appendChild(container);
this._getFields().forEach(f => {
const wrapper = document.createElement("div");
wrapper.className = "field-wrapper";
const label = document.createElement("label");
label.textContent = f.label;
wrapper.appendChild(label);
let input;
const value = this._config[f.key] || "";
if (f.type === "text" || f.type === "number") {
input = document.createElement("input");
input.type = f.type;
input.value = value;
if (f.type === "number") {
input.min = f.min;
input.max = f.max;
input.step = f.step;
}
} else if (f.type === "entity" || f.type === "script") {
input = document.createElement("input");
input.type = "text";
input.value = value;
input.className = "ha-form-entity-select";
input.placeholder = `entity_id.${f.domain} (Opcjonalnie)`;
input.title = `Wprowadź Entity ID, np. ${f.domain}.moj_sprzet`;
}
const eventName = f.type === "entity" ? "change" : "input";
input.addEventListener(eventName, (ev) => {
const newValue = ev.target.value || ev.target.entityId || "";
this._config = {
...this._config,
[f.key]: newValue
};
this.dispatchEvent(new CustomEvent('config-changed', {
detail: { config: this._config },
bubbles: true,
composed: true
}));
});
wrapper.appendChild(input);
container.appendChild(wrapper);
});
}
}
}
customElements.define("printer-monitor-card-editor", PrinterMonitorCardEditor);
class PrinterMonitorCard extends HTMLElement {
constructor() {
super();
this._hass = null;
this._config = null;
this._card = null;
}
set hass(hass) {
this._hass = hass;
if (this._card) this._card.hass = hass;
else if (this._config) this._renderCard();
}
setConfig(config) {
if (!config.printer || !config.printer_name) {
throw new Error('Musisz zdefiniować "printer" i "printer_name".');
}
this._config = config;
if (this._hass) this._renderCard();
}
getCardSize() { return 5; }
async _renderCard() {
if (!this._hass || !this._config) return;
if (!this._helpers) this._helpers = await window.loadCardHelpers();
const cardConfig = this._buildCardConfig();
if (!this._card) {
this._card = this._helpers.createCardElement(cardConfig);
this.appendChild(this._card);
}
this._card.hass = this._hass;
}
_buildCardConfig() {
const p = this._config.printer;
return {
type: "vertical-stack",
cards: [
{
type: 'conditional',
conditions: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'unavailable' }
],
card: {
type: 'custom:bubble-card',
card_type: 'button',
entity: this._config.printer_switch,
name: this._config.printer_name,
double_tap_action: { action: 'more-info' },
hold_action: { action: 'more-info' },
button_action: {
tap_action: {
action: 'call-service',
service: 'script.turn_on',
target: { entity_id: this._config.toggle_script }
},
double_tap_action: { action: 'more-info' }
},
sub_button: [
{
entity: `sensor.${p}_current_print_state`,
show_icon: false,
show_state: true,
show_name: false,
tap_action: { action: 'none' },
visibility: [
{
condition: 'state',
entity: `sensor.${p}_current_print_state`,
state_not: 'unavailable'
}
]
}
]
}
},
{
type: 'conditional',
conditions: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state_not: 'unavailable' }
],
card: {
type: 'custom:mod-card',
style: `
ha-card {
--ha-card-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
--ha-card-border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
}
`,
card: {
type: 'custom:stack-in-card',
card_mod: { style: 'ha-card {--ha-card-border-width: 0; --vertical-stack-card-gap: 0px;}' },
visibility: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state_not: 'unavailable' }
],
cards: [
{
type: 'grid',
columns: 2,
square: false,
cards: [
{
type: 'custom:mushroom-template-card',
primary: this._config.printer_name,
tap_action: { action: 'none' },
hold_action: { action: 'more-info' },
double_tap_action: { action: 'none' },
icon: 'phu:3dprinter-printing',
entity: this._config.printer_switch,
secondary: `{{ state_translated("sensor.${p}_current_print_state") }} • {{ states("sensor.${p}_progress", with_unit=true) }}`,
icon_color: `
{% if states("sensor.${p}_current_print_state") == "printing" %}
green
{% elif states("sensor.${p}_current_print_state") == "paused" %}
amber
{% elif states("sensor.${p}_current_print_state") == "stopped" %}
red
{% else %}
light-blue
{% endif %}
`
},
{
type: 'grid',
columns: 3,
square: false,
cards: [
{ type: 'horizontal-stack', cards: [] },
{ type: 'horizontal-stack', cards: [] },
{
type: 'horizontal-stack',
cards: [
{
type: 'custom:mushroom-entity-card',
icon: 'mdi:pause',
icon_color: 'amber',
entity: `button.${p}_pause_print`,
layout: 'vertical',
visibility: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'printing' }
],
secondary_info: 'none',
primary_info: 'none'
},
{
type: 'custom:mushroom-entity-card',
icon: 'mdi:play',
icon_color: 'green',
entity: `button.${p}_resume_print`,
layout: 'vertical',
visibility: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'paused' }
],
secondary_info: 'none',
primary_info: 'none'
},
{
type: 'custom:mushroom-entity-card',
icon: 'mdi:stop',
icon_color: 'red',
entity: `button.${p}_cancel_print`,
layout: 'vertical',
tap_action: { action: 'none' },
double_tap_action: { action: 'none' },
secondary_info: 'none',
primary_info: 'none',
visibility: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'paused' }
]
},
{
type: 'custom:mushroom-entity-card',
icon: 'mdi:power',
icon_color: 'red',
entity: `sensor.${p}_current_print_state`,
layout: 'vertical',
tap_action: {
confirmation: { text: `Czy na pewno chcesz włączyć/wyłączyć drukarkę ${this._config.printer_name}?` },
action: 'call-service',
target: { entity_id: this._config.toggle_script },
service: 'script.turn_on'
},
visibility: [
{
condition: 'not',
conditions: [
{ condition: 'or', conditions: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'printing' },
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'paused' }
]}
]
}
],
secondary_info: 'none',
primary_info: 'none'
}
]
}
]
}
]
},
{
type: 'custom:layout-card',
layout_type: 'grid',
layout: {
"grid-template-columns": "repeat(4, 1fr)",
"grid-template-rows": "repeat(2, auto)",
"grid-template-areas": `"a b b b" "a c c c"`,
width: '100%',
margin: 0,
padding: 0,
justify_items: 'stretch',
align_items: 'stretch'
},
visibility: [
{ condition: 'or', conditions: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'printing' },
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'paused' }
]}
],
cards: [
{
type: 'picture-entity',
show_state: false,
show_name: false,
tap_action: { action: 'none' },
hold_action: { action: 'none' },
double_tap_action: { action: 'none' },
entity: `camera.${p}_thumbnail`,
camera_image: `camera.${p}_thumbnail`,
view_layout: { 'grid-area': 'a' }
},
{
type: 'custom:mushroom-template-card',
show_icon: false,
view_layout: { 'grid-area': 'b' },
primary: `{{ states("sensor.${p}_filename") }}`,
secondary: `Layer: {{ states("sensor.${p}_current_layer") }} of {{ states("sensor.${p}_total_layer") }}`,
fill_entity: `sensor.${p}_current_layer`,
tap_action: { action: 'none' },
hold_action: { action: 'none' },
double_tap_action: { action: 'none' }
},
{
type: 'custom:entity-progress-card',
view_layout: { 'grid-area': 'c' },
entity: `sensor.${p}_current_layer`,
max_value: `sensor.${p}_total_layer`,
hide: ['icon', 'name', 'value', 'secondary_info'],
disable_unit: true,
bar_size: 'large',
tap_action: { action: 'none' },
hold_action: { action: 'none' },
double_tap_action: { action: 'none' }
}
]
},
{
type: 'picture-entity',
show_state: false,
show_name: false,
camera_view: 'live',
entity: this._config.live_camera,
camera_image: this._config.live_camera,
card_mod: { style: `ha-card { transform: rotate(${this._config.live_camera_rotation || 0}deg) !important; transition: none !important; }` },
tap_action: { action: 'none' },
hold_action: { action: 'none' },
double_tap_action: { action: 'none' }
},
{
type: 'horizontal-stack',
cards: [
{
type: 'custom:mushroom-chips-card',
chips: [
{ type: 'entity', entity: `sensor.${p}_print_eta`, tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } },
{ type: 'entity', entity: `sensor.${p}_progress`, icon: 'mdi:chart-donut', tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } },
{ type: 'entity', entity: `sensor.${p}_toolhead_position_z`, icon: 'mdi:gantry-crane', tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } },
{ type: 'entity', entity: `sensor.${p}_fan1`, tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } }
],
alignment: 'center'
}
],
visibility: [
{ condition: 'or', conditions: [
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'printing' },
{ condition: 'state', entity: `sensor.${p}_current_print_state`, state: 'paused' }
]}
],
alignment: 'center'
},
{
type: 'horizontal-stack',
cards: [
{
type: 'custom:mushroom-chips-card',
chips: [
{ type: 'entity', entity: `sensor.${p}_extruder_temperature`, tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } },
{ type: 'entity', entity: `sensor.${p}_bed_temperature`, icon: 'mdi:chart-donut', tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } },
{
type: 'entity', entity: `sensor.${p}_host_temp`,
tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' } ,
visibility: [
{ condition: 'state', entity: `sensor.${p}_host_temp`, state_not: 'unavailable' }
]
},
{
type: 'entity', entity: `sensor.${p}_raspberry_pi_temp`,
tap_action: { action: 'none' }, hold_action: { action: 'none' }, double_tap_action: { action: 'none' },
visibility: [
{ condition: 'state', entity: `sensor.${p}_raspberry_pi_temp`, state_not: 'unavailable' }
]
}
],
alignment: 'center'
}
],
alignment: 'center'
}
]
}
}
}
]
};
}
static getStubConfig() {
return {
printer_name: "My Printer",
printer: "my_printer",
live_camera: "camera.my_printer",
live_camera_rotation: 0,
printer_switch: "switch.my_printer",
toggle_script: "script.my_printer_toggle"
};
}
static async getConfigElement() {
if (typeof customElements.get('ha-entity-picker') === 'undefined') {
const help = await window.loadCardHelpers();
await help.createCardElement({ type: 'entity' });
}
return document.createElement("printer-monitor-card-editor");
}
}
customElements.define("printer-monitor-card", PrinterMonitorCard);
window.customCards = window.customCards || [];
window.customCards.push({
type: "printer-monitor-card",
name: "Printer Monitor Card",
description: "3D printer status card with live camera, progress and conditional cards",
preview: true
});
console.info("%c PRINTER-MONITOR-CARD loaded", "color: white; background: #4caf50; padding: 4px;");
If someone want to tinker with this… feel free to do so:
