Compact 3D Printer Card Dashboard in Home Assistant

Earlier today I posted a short video of my 3D printer card on Reddit, and you guys loved it so much that you voted it to the #1 spot in the /r/HomeAssistant subreddit. A lot of you were asking for the YAML or how I created this, so I’m going to share everything I did to set this up.

It’s honestly too much info to put into a single Reddit comment, and plus formatting code snippets on Reddit is pretty painful, so it’ll be easier for me to post on my blog that way I can give reasons why I did things the way I did them.

So let’s get started!

---

Integrations & Cards Needed

If you’re looking to create a “card” exactly like how I’ve done mine, you’ll need the following integrations and custom cards setup. Hopefully you have HACS installed already because you’ll need it.

• Octoprint integration – This is the default Octoprint integration; not the MQTT Octoprint integration from HACS.
• Threedy – This is the moving image card at the top. (Installed via HACS)
• Mushroom Card – This is for the purple Print Time Elapsed and Print Time Remaining entities. (Installed via HACS)
• Custom:button-card – This is for the 4 buttons at the bottom. (Installed via HACS)

---

Hardware Needed

1. You’ll need to have Octoprint already up and running (I have mine running on a Raspberry pi 3B+ connected via USB-C to my Ender 3 S1 3D printer (AMAZING printer by the way. It’s the first one I’ve ever used, and I highly recommend it!).
2. You’ll also need a smart plug (I’m using a Sonoff S31 Lite Zigbee) so you can toggle the printer on and off from the card. I keep the switch on my 3D printer always set to ON, and then simply toggle it on/off via the smart plug.
3. Webcam for Octoprint: I’m using a NexiGo N60 1080p

---

Step 1: Install Octoprint Integration

The first thing you’ll need to have done is install the official Octoprint integration. This gets installed like any other default integration, but I do have a How To Configure Octoprint in Home Assistant guide you can follow if needed.

---

Step 2: Install Remaining Integrations

After Octoprint is integrated, go ahead and install the remaining 3 from above. Mushroom Card is optional, but in my opinion it looks better than using the default entity card.

---

Step 3: Create 2 Template Sensors

The default Octoprint integration in HA doesn’t include sensors for “Time Remaining” or “Time Elapsed”, so I had to create two template entities for those. I can’t take the credit for these; I found them on the HA forums but unfortunately I don’t remember where. But they are just doing math to calculate the time estimates based on the entities the Octoprint integration does provide.

File Editor > Configuration.yaml. Then add the following sensors.

The newly created entity names will be:

• octoprint_time_elapsed_friendly
• octoprint_time_remaining_friendly

sensor:
  - platform: template
    sensors:
      octoprint_time_elapsed_friendly:
        value_template: >
          {{ ( as_timestamp(now()) - as_timestamp(states.sensor.octoprint_start_time.state) ) | int (0)| timestamp_custom('%H:%M:%S', false) }}
        friendly_name: 'OctoPrint Time Elapsed'
  - platform: template
    sensors:
      octoprint_time_remaining_friendly:
        value_template: >
           {{ ( as_timestamp(states.sensor.octoprint_estimated_finish_time.state) - as_timestamp(now()) ) | int (0)| timestamp_custom('%H:%M:%S', false) }}
        friendly_name: 'OctoPrint Time Remaining' 

---

Step 4: Create Toggle Helper (for toggling webcam visibility)

Next, I needed to create a Toggle Helper. This is because in my card, I’m using a Conditional card to display the webcam connected to my Octoprint Raspberry Pi. The conditional card basically states if this helper is ON, then show the webcam stream.

Settings > Devices & Services > Helpers tab > Create Helper > Toggle.

Name it “Octoprint Webcam“. The entity created will be called input_boolean.octoprint_webcam.

---

Step 5: Find Stream URL of Octoprint

If you’d like to display the webcam stream, you will use this URL: http://octopi.local/webcam/?action=stream

You could also use the IP address if you can grab that from your router. I don’t think the IP is displayed anywhere within the Octoprint UI. You’ll need to replace my IP in the YAML below with your own.

http://192.168.68.145/webcam/?action=stream

---

Step 6: Full YAML

The easiest way for you to set this up yourself is to just paste my YAML below into a Manual card on one of your dashboards. From there, you can just edit the entity names.

I’ll highlight the areas you need to edit.

If you followed this guide with the same naming conventions I gave you, you only need to change out the entity name of your smart plug and the stream URL under the camera: section.

square: false
columns: 1
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:threedy-card
        base_entity: sensor.octoprint
        monitored:
          - Status
          - Bed
          - Hotend
        printer_type: I3
        name: Ender 3 S1
        theme: Default
        temperature_unit: C
        round_temperature: true
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.octoprint_time_elapsed_friendly
        icon_color: purple
        name: Elapsed
      - type: custom:mushroom-entity-card
        entity: sensor.octoprint_time_remaining_friendly
        name: Remaining
        icon_color: purple
  - square: false
    columns: 2
    type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:power
        color: rgb(39, 176, 89)
        show_name: false
        entity: switch.ender3_s1
      - type: custom:button-card
        icon: mdi:play-box-outline
        color: rgb(252, 148, 30 )
        tap_action:
          action: call-service
          service: button.press
          service_data:
            entity_id: button.octoprint_resume_job
      - type: custom:button-card
        icon: mdi:pause-box-outline
        show_name: false
        color: rgb(158, 54, 52)
        tap_action:
          action: call-service
          service: button.press
          service_data:
            entity_id: button.octoprint_pause_job
      - type: custom:button-card
        entity: input_boolean.octoprint_webcam
        state:
          - value: 'off'
            color: rgb(179, 179, 45)
            icon: mdi:webcam-off
          - value: 'on'
            color: rgb(250, 250, 62)
            icon: mdi:webcam
            styles:
              icon:
                - animation:
                    - twister .9s linear 6
        extra_styles: |
          @keyframes twister {
                    0% {transform: rotatez(0deg): top: 10px}
                    25% {transform: rotatez(15deg)}
                    50% { top: 0px}
                    75% {transform: rotatez(-15deg)}
                    100% {transform: roatatez(0deg): top: 10px}
            }
        tap_action:
          action: toggle
        show_name: false
  - type: conditional
    conditions:
      - entity: input_boolean.octoprint_webcam
        state: 'on'
    card:
      camera_view: live
      type: picture-glance
      title: Ender 3 S1
      image: http://192.168.68.145/webcam/?action=stream
      entities: []

---

Wrapping Up

Good luck! This one was a lot of fun to set up. It’s actually very similar to my Clean Robot Vacuum+Mop Card, so if you have a robot vacuum, you should set that one up, too.