Code Monkey home page Code Monkey logo

threedy's Introduction


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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.