I’m looking to create a dashboard for my 3D printers that displays the camera feed, essential information, and basic controls (stop, pause, resume). Some of my printers use the Moonraker integration, while others rely on OctoPrint.
I appreciate any ideas or suggestions you may have. Thank you!
Mine is very simple, I don’t want hundreds of numers I never really look at so I created a simple one with only the stuff I feel I need. My printer is connected through Octoprint.
The camera feed is what I am interested most, so I can see on my wall tablet the print. Then I have the status, power consumption, percentage of progress, bed temperature and nozzle temperature (those colors gradient based on the temperature to show how hot they are). File currently printing, Time passed, Time left.
Power, connection to octoprint, stop/pause/start.
It is available as a popup like in the screenshot I posted or as a dashboard of my wall tablet.
Sharing my setup for my Bambu A1 Mini 3D printer.
This gives me the ability to view the current print, stop/pause/resume printing, see print status and print errors, and view other stats about my printer.
Dashboard code:
- icon: mdi:printer-3d
path: ''
cards:
- type: vertical-stack
cards:
- camera_view: live
type: picture-glance
entities: []
camera_image: camera.a1mini_0309ca410600282_camera
- type: glance
entities:
- entity: sensor.a1mini_bed_temperature
name: Bed Temp
- entity: sensor.a1mini_nozzle_temperature
name: Nozzle Temp
icon: mdi:printer-3d-nozzle
- entity: sensor.a1mini_0309ca410600282_cooling_fan_speed
name: Cooling Fan
icon: mdi:fan
state_color: false
columns: 3
show_name: true
show_icon: true
show_state: true
- type: glance
entities:
- entity: sensor.a1mini_0309ca410600282_gcode_filename
name: Print File
icon: mdi:layers
- entity: sensor.a1mini_0309ca410600282_print_status
name: Print Status
icon: mdi:file-question
state_color: false
columns: 2
show_name: true
show_icon: true
show_state: true
- type: glance
entities:
- entity: sensor.a1mini_0309ca410600282_current_layer
name: Current Layer
icon: mdi:layers
- entity: sensor.a1mini_0309ca410600282_print_progress
name: Print %
icon: mdi:progress-upload
- entity: sensor.a1mini_0309ca410600282_current_stage
name: Print Stage
icon: mdi:stairs
state_color: false
columns: 3
show_name: true
show_icon: true
show_state: true
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: button.a1mini_0309ca410600282_pause_printing
name: Pause Print
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: button.a1mini_0309ca410600282_resume_printing
name: Resume Print
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: button.a1mini_0309ca410600282_stop_printing
name: Stop Print
- type: entities
entities:
- entity: binary_sensor.a1mini_0309ca410600282_firmware_update
name: Firmware Update
- entity: sensor.a1mini_0309ca410600282_total_usage
name: Total Usage
- entity: sensor.a1mini_0309ca410600282_wi_fi_signal
name: WiFi Signal
- entity: sensor.a1mini_0309ca410600282_nozzle_size
name: Nozzle Size
- entity: binary_sensor.a1mini_0309ca410600282_print_error
name: Print Errors
- entity: sensor.a1mini_0309ca410600282_ams_1_humidity_index
name: Humidity Index
title: Bambu A1 Mini
I had to create a couple of template sensors in order to get the temperatures to show in Celsius.
Is it handled through Octoprint ?
I update my dashborard adding the thumbnail of the gcode in print and 3 buttons to home all axis, remove filament and load filament
Thank you all for your replies!
I currently have 8 printers, so i have some work to do.
sick dashboard!
here’s my desktop one:
I use a popup-card to hide the controls because I’m too click happy
I like it! Nice and simple. Can you share the YAML?
The popup is called by bubble-card, here it is
hope you like it!
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#printer"
show_header: false
- square: false
type: grid
columns: 1
cards:
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.octoprint_camera
camera_image: camera.octoprint_camera
aspect_ratio: "4:3"
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.stampante_3d_current_state
show_state: true
show_name: false
show_label: false
icon: mdi:printer-3d
tap_action:
action: toggle
state:
- value: Printing
styles:
card:
- background-color: rgba(0, 128, 0, 0.7)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
- value: "off"
styles:
card:
- background-color: rgba(20, 20, 20, 0.5)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: sensor.stampante_3d_job_percentage
show_state: true
show_name: false
show_label: false
icon: mdi:percent
tap_action:
action: toggle
styles:
card:
- border-radius: 5px
- padding: 5px
- background: |
[[[
const percentage = entity.state ? parseInt(entity.state, 10) : 0;
const progress = Math.min(Math.max(percentage, 0), 100);
// Gestione dello sfondo con due sezioni ben definite
return `linear-gradient(to right, rgba(0, 255, 0, 0.7) ${progress}%, rgba(38, 50, 56, 0.7) ${progress}%, rgba(38, 50, 56, 0.7) 100%)`;
]]]
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: sensor.octoprint_bed_temperature
show_state: true
show_name: false
show_label: false
icon: mdi:bed-empty
tap_action:
action: toggle
styles:
card:
- border-radius: 5px
- padding: 5px
- background-color: |
[[[
// Ottieni il valore della temperatura
const temp = entity.state ? parseFloat(entity.state) : 0;
// Sotto i 30 gradi: colore di base
if (temp < 30) return 'rgba(20, 20, 20, 0.5)';
// Da 30 a 110 gradi: calcolo del gradiente
const gradient = Math.min((temp - 30) / 80, 1); // Normalizza il valore tra 0 e 1
const red = Math.round(38 + gradient * (255 - 38)); // Da blu scuro a rosso
const green = Math.round(50 + gradient * (0 - 50)); // Da blu scuro a 0
const blue = Math.round(56 + gradient * (0 - 56)); // Da blu scuro a 0
return `rgba(${red}, ${green}, ${blue}, 0.7)`;
]]]
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: sensor.octoprint_tool_0_temperature
show_state: true
show_name: false
show_label: false
icon: mdi:printer-3d-nozzle-heat
tap_action:
action: toggle
styles:
card:
- border-radius: 5px
- padding: 5px
- background-color: |
[[[
// Ottieni il valore della temperatura
const temp = entity.state ? parseFloat(entity.state) : 0;
// Sotto i 30 gradi: colore di base
if (temp < 30) return 'rgba(20, 20, 20, 0.5)';
// Da 30 a 250 gradi: calcolo del gradiente
const gradient = Math.min((temp - 30) / 220, 1); // Normalizza il valore tra 0 e 1
const red = Math.round(38 + gradient * (255 - 38)); // Da blu scuro a rosso
const green = Math.round(50 + gradient * (0 - 50)); // Da blu scuro a 0
const blue = Math.round(56 + gradient * (0 - 56)); // Da blu scuro a 0
return `rgba(${red}, ${green}, ${blue}, 0.7)`;
]]]
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.octoprint_print_file
show_state: true
show_name: true
show_label: false
show_icon: false
name: "File in stampa:"
styles:
card:
- border-radius: 5px
- padding: 5px
- margin: 0
grid:
- grid-template-areas: |
"n s"
- grid-template-columns: auto 1fr
- grid-template-rows: auto
name:
- justify-self: start
- align-self: center
- font-size: 14px
state:
- justify-self: center
- align-self: center
- font-size: 14px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.octoprint_print_time
show_state: true
show_name: true
show_label: false
show_icon: false
name: "Trascorso:"
styles:
card:
- border-radius: 5px
- padding: 5px
- margin: 0
grid:
- grid-template-areas: |
"n s"
- grid-template-columns: auto 1fr
- grid-template-rows: auto
name:
- justify-self: start
- align-self: center
- font-size: 14px
state:
- justify-self: center
- align-self: center
- font-size: 14px
- type: custom:button-card
entity: sensor.octoprint_print_time_left
show_state: true
show_name: true
show_label: false
show_icon: false
name: "Restante:"
styles:
card:
- border-radius: 5px
- padding: 5px
- margin: 0
grid:
- grid-template-areas: |
"n s"
- grid-template-columns: auto 1fr
- grid-template-rows: auto
name:
- justify-self: start
- align-self: center
- font-size: 14px
state:
- justify-self: center
- align-self: center
- font-size: 14px
- type: custom:button-card
entity: sensor.octoprint_thumbnail_url
tap_action:
action: toggle
show_state: false
show_name: false
show_label: false
styles:
card:
- border-radius: 10px
- padding: 0
- background-image: >
[[[ return
`url("${states['sensor.octoprint_thumbnail_url'].state}")`;
]]]
- background-size: cover
- background-position: center
- height: 80px
- width: 80px
grid:
- grid-template-areas: "\"i\""
- grid-template-rows: 1fr
- grid-template-columns: 1fr
icon:
- display: none
state:
- display: none
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.presa_stampante_3d
show_state: false
show_name: false
show_label: false
icon: mdi:power
tap_action:
action: toggle
state:
- value: "on"
styles:
card:
- background-color: rgba(0, 128, 0, 0.7)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
icon:
- color: white
- value: "off"
styles:
card:
- background-color: rgba(20, 20, 20, 0.5)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: switch.octoprint_connect_to_printer
show_state: false
show_name: false
show_label: false
icon: mdi:toggle-switch-off
tap_action:
action: toggle
state:
- value: "on"
styles:
card:
- background-color: rgba(0, 128, 0, 0.7)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
icon:
- color: white
- value: "off"
styles:
card:
- background-color: rgba(20, 20, 20, 0.5)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: button.stampante_3d_stop_job
show_state: false
show_name: false
show_label: false
icon: mdi:stop
tap_action:
action: toggle
state:
- value: "on"
styles:
card:
- background-color: rgba(38, 50, 56, 0.7)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
- value: "off"
styles:
card:
- background-color: rgba(20, 20, 20, 0.5)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: button.stampante_3d_pause_job
show_state: false
show_name: false
show_label: false
icon: mdi:pause
tap_action:
action: toggle
state:
- value: "on"
styles:
card:
- background-color: rgba(38, 50, 56, 0.7)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
- value: "off"
styles:
card:
- background-color: rgba(20, 20, 20, 0.5)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: button.stampante_3d_resume_job
show_state: false
show_name: false
show_label: false
icon: mdi:play
tap_action:
action: toggle
state:
- value: "on"
styles:
card:
- background-color: rgba(38, 50, 56, 0.7)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
- value: "off"
styles:
card:
- background-color: rgba(20, 20, 20, 0.5)
img_cell:
- align-self: center
- justify-self: center
state:
- font-size: 12px
- text-align: center
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"s"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
state:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.stampante3d_home_axis
show_state: false
show_name: true
show_label: false
name: Home Axis
icon: mdi:home
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.stampante3d_home_axis
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"n"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
name:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: script.stampante3d_retract
show_state: false
show_name: true
show_label: false
name: Retract
icon: phu:3d-filament
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.stampante3d_retract
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"n"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
name:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
- type: custom:button-card
entity: script.stampante3d_extrude
show_state: false
show_name: true
show_label: false
name: Extrude
icon: phu:3d-filament
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.stampante3d_extrude
styles:
card:
- border-radius: 5px
- padding: 5px
grid:
- grid-template-areas: |
"i"
"n"
- grid-template-columns: auto
- grid-template-rows: auto auto
icon:
- justify-self: center
- align-self: center
- width: 30px
- height: 30px
name:
- justify-self: center
- align-self: center
- font-size: 12px
- padding-top: 2px
- padding-bottom: 2px
What cards did you use for the printing progress?
Lots of Picture Elements.
Top is the camera ,
Then Dryer (with power button, timer, temp and humidity), AMS (Filament colours and Type, active spool, Temp and Humidity)
Printer (status, remaining time, percentage, Hot-end temp and fan%, switches for inbuilt light and extra LED strip, Aux and Cabinet fan %, printer controls, total print time)
