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
  - platform: template
        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
        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.

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
  - type: horizontal-stack
      - type: custom:threedy-card
        base_entity: sensor.octoprint
          - Status
          - Bed
          - Hotend
        printer_type: I3
        name: Ender 3 S1
        theme: Default
        temperature_unit: C
        round_temperature: true
  - type: horizontal-stack
      - 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
      - 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 )
          action: call-service
          service: button.press
            entity_id: button.octoprint_resume_job
      - type: custom:button-card
        icon: mdi:pause-box-outline
        show_name: false
        color: rgb(158, 54, 52)
          action: call-service
          service: button.press
            entity_id: button.octoprint_pause_job
      - type: custom:button-card
        entity: input_boolean.octoprint_webcam
          - value: 'off'
            color: rgb(179, 179, 45)
            icon: mdi:webcam-off
          - value: 'on'
            color: rgb(250, 250, 62)
            icon: mdi:webcam
                - 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}
          action: toggle
        show_name: false
  - type: conditional
      - entity: input_boolean.octoprint_webcam
        state: 'on'
      camera_view: live
      type: picture-glance
      title: Ender 3 S1
      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.

My Favorite Home Assistant Devices

Below are some of the Home Assistant-compatible devices I personally use in my home. I highly recommend each of them.

The full list of all Home Assistant compatible & recommended devices I use can be found on my Equipment List page.

Similar Posts


  1. Trying to get the custom button card but your link returns a 404 error.

    1. Thanks for letting me know. I just fixed the link.

  2. Any idea on how to make this work with 2 separate Octoprint instances? I have both instances added to Home Assistant, also have created 2 separate templates, etc as above using different names but when one machine is running both cards display the same data vs independent data.

  3. Took a few tries to get the template sensors to work due to the different formatting between your YAML and mine, but I got it. Might move away from the Mushroom cards due to my current theme. I’m not a fan of animated icons anyway. Other than that little niggle, great job.

Leave a Reply

Your email address will not be published. Required fields are marked *