Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.
/ threedy Public archive

Home Assistant card to display 3D printer status and progress

Notifications You must be signed in to change notification settings

dangreco/threedy

Repository files navigation


IMPORTANT: threedy v2.0

I am currently working on a rewrite for this card with preact instead of react.

This will yield a lighter-weight card. I will also be tackling the bugs opened as issues in this rewrite -- using TypeScript from the get-go will help this (versus when I switched mid-development). Thank you for your support and patience!!!




threedy

Home Asssistant card for 3D printers (via OctoPrint integration)

Featured

Buy Me A Coffee

Table of Contents

Features


  • Live animation of 3D printer
  • Live camera view
  • Current states of various OctoPrint sensors
  • Tap to show/hide when printer is idle
  • Power button for a switch entity
  • Light button for a switch entity
  • Adjustable 3D printer graphic scale
  • Themes

Prerequisites


Installation


Method 1: HACS

  1. Open HACS and navigate to Frontend Section
  2. Open the Overflow Menu (⋮) in the top right corner and click on Custom repositories
  3. Paste https://github.com/dangreco/threedy into the input field and select Lovelace from the dropdown
  4. Click the Install Button on the highlighted Card titled threedy

Method 2: Manual

  1. Download threedy-card.js from the releases section.
  2. Either:
  • Move to the www folder of your Home Assistant instance
  • Or copy the ffle's contents via the file editor.
  1. In the Resources section of Lovelace (Configuration -> Lovelace Dashboards -> Resources), add /local/threedy-card.js as a JavaScript Module.
  2. Save
  3. Add a manual card to your lovelace dashboard using the configuration instructions below.
  4. Restart Server management
  5. Reload Browser

Config


Graphical (Recommended)

graphical

Manual

Required

  • type — Always 'custom:threedy-card'
  • base_entity — Take the beginning of one of the OctoPrint sensors of your printer. Example: for sensor.ender_3_v2_current_state it would be sensor_ender_3_v2.
  • name — Can be whatever you want!
  • printer_type — Use a printer style: 'I3' | 'Cantilever'
  • monitored — A list of values to monitor throughout the print; gets displayed to the right of the printer.

Optional

  • theme — Theme of the card: 'Default' | 'Neumorphic' . Screenshots listed below.
  • font — Specify the font used in the card. By default it is sans-serif.
  • scale — The scale factor of the animated 3D printer view. Try different values until you find one you like.
  • round_time — Specify whether to round durations of time. Defaults to false. true | false
  • round_temperature — Specify whether to round decimal numbers for temperatures. Defaults to false. true | false
  • temperature_unit — Specify which unit of temperature measurement to convert to. 'F' | 'C'
  • use_24hr — Use 24 hour time format instead of 12 hour.
  • use_mqtt — Use MQTT integration instead of OctoPrint API.
  • printer_config — Use in with printer_type to set a custom printer style. If omitted, the default for the type will be used. Use this tool to create a custom value.
  • camera_entity — Specify the entity ID of the camera entity you want to display when the printer graphic is clicked.
  • light_entity — Specify the entity ID of a light you want to toggle for the printer.
  • power_entity — Specify the entity ID of a power switch you want to toggle for the printer.

Example Config


# required
type: 'custom:threedy-card'
base_entity: 'sensor.ender_3_v2'
name: 'Ender 3 v2'
printer_type: I3
monitored:
  - Status
  - ETA
  - Elapsed
  - Remaining
  - Hotend
  - Bed
# optionals  
theme: 'Default'
font: 'Roboto'
scale: 1.0
round: false 

Custom Theming


Custom theming can be accomplished using lovelace-card-mod's mod-card. Some styles may require the css keyword !important to override the inline style. Example usage as follows:

type: 'custom:mod-card'
style: |
  threedy-card > div {
    box-shadow: none !important;
  }
card:
  type: 'custom:threedy-card'
    .
    .
    .
    <card config>

Screenshots


Active Print

Active

Idle

Idle

Printer Offline

Offline

Show/Hide Animation

ShowHide