kasperlaursen/octoprint-card

All your 3D Printer info in a single Lovelace Card!

Lovelace 3D Printer Card

All your 3D Printer info in one place!

---

⚠️ Work in progress, use at your own risk ⚠️

Contents:

🚪 Introduction
💽 Intallation
📖 Properties
💻 Development
⌨️ How to Contribute

🚪 Introduction

This lovelace card is created for the purpose of collecting all relevant data about your 3D Printer.
For the design I have been heavily inspired by the awesome vacuum-card by Denys Dovhan.

Camera (Printing)	Image (Idle)	Camera (Idle)

💽 Intallation

HACS (Not Ready Yet)

Manual

1. Download the octoprint-card.js file from the Releases Page
2. Upload the file to your Home Assistant config/local folder
3. Add a reference to the card to your lovelace instance
   Go to Configuration → Lovelace Dashboards → Resources Tab → Click Plus button.
   Url: /local/vacuum-card.js
   Resource type: JavaScript Module
   Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile
4. Add the custom:octoprint-card to Lovelace UI as you normally would!

There are currently no Configuration UI, copy the yaml from below to and modify the properties to fit your installation.

Configuration example

type: "custom:octoprint-card"
bedActual: sensor.octoprint_actual_bed_temp
bedTarget: sensor.octoprint_target_bed_temp
toolActual: sensor.octoprint_actual_tool0_temp
toolTarget: sensor.octoprint_target_tool0_temp
currentState: sensor.octoprint_current_state
timeElapsed: sensor.octoprint_time_elapsed
timeRemaining: sensor.octoprint_time_remaining
jobPercentage: sensor.octoprint_job_percentage
printing: binary_sensor.octoprint_printing
imageUrl: /local/printer.svg
videoSource: camera.prusa_3d_printer
octoPrintUrl: http://192.168.50.116/

📖 Properties

Name	Type	Default	Description
type	string	Required	custom:octoprint-card
bedActual	string	Required	The entity_id for your printers Current Bed Temperature
bedTarget	string	Required	The entity_id for your printers Target Bed Temperature
toolActual	string	Required	The entity_id for your printers Current Tool Temperature
toolTarget	string	Required	The entity_id for your printers Target Tool Temperature
currentState	string	Required	The entity_id for your printers current state
timeElapsed	string	Required	The entity_id for the time elapsed on the current print job
timeRemaining	string	Required	The entity_id for the time remaining on the current print job
jobPercentage	string	Required	The entity_id for the print job percentage sensor
printing	string	Required	The entity_id for the printing binary sensor
imageUrl	string	Optional	Path to image of your printer.
videoSource	string	Optional	The entity_id for a camera
octoPrintUrl	string	Optional	An url for the link button (Meant for link to Octoprint UI)

💻 Development

I though I would give som technical background about the project, and also let you know how you can contribute.

Why Svelte?

The most common framework used for Lovelace cards seems to be lit-element but I chose to jump on the Svelte hype train and learn something different.

This is my first "Real project" using Svelte and I think it is a simple and easy framework to use.

Goals

Short Term

The project has just begun, and I have a lot of ideas for improvement!
On the project board you can see the planed tasks for the v1 release!

Mid term

Custom actions based on Home Assistant Scripts.
Some sort of nice looking Temperature Charts.
Making a custom animated svg progress indicator resembling a printer printing a Benchy.

Long term

The current Octoprint integration in Home Assistant does not really seem complete to me.
I think there are a lot of possible improvements and additions. So in the long run i hope to be able to contribute to that as well, and update this Card to have even more functionality.

Adding Printer Play/Pause/Stop actions.
Starting a print for existing g-code.

⌨️ How to Contribute

I Would love to wee what ideas you have. Any contributions are happily welcomed!

1. Fork the repo.
2. Make your changes on your fork (How to run locally)
3. Open a Pull Request from your fork against the main branch.
4. Remember to add a nice description of what your changes are intended to do.
5. I will get back to you as soon as possible!

Running locally

1. Clone this repository to your local machine

git clone https://github.com/kasperlaursen/octoprint-card.git

2. Go to the folder

cd octoprint-card

3. Install dependencies

npm install

3. Start the local development server, which will recompile the code on file changes.

npm run dev

4. Add the dev card to your Lovelace resources using the url http://localhost:5000/octoprint-card-dev.js

5. Add the card to your dashboard with type: 'custom:octoprint-card-dev' and the rest of the config

Prerequisite

To run the project locally you need to have node.js installed on your machine.

octoprint-card's Issues

Investigate HACS

I have no idea how to get the card on HACS.
Investigate the possibility and create issues for the needed steps.

Error Handling

To minimise issues like #14 lets get some better error handling, with helpful messages for the users!

Installation

Hi,

First, I want to say thank you for tyour job, it seems promising 💯

In second, I sorry to ask this, but I may need some hel to install it on my own HA ...

I followed the guide, but but when I create the card manualy with the cod it's not wroking...
I have check, I have the entities present and working

(My printer was not on at this time, so some of the entity are not found)

Thanks in advance if you have an idea of what I'm doing wrong, and again, thansk for your works ! ;)

Repository setup and settings

Setup the git repository in a way where others can contribute!

Adding temperature graphs for the tool(s) and bed

It would be nice to se the temperature changes over time in a graph.
Both the target and current temperature should be visible (atlas during heat-up).

Inspiration:

Better Types

Some types have not been assigned correctly, lets get real types for as much as possible!

• window.customCards
• the config object
• any others!

Error on use: `s.states[(intermediate value)] is undefined`

Home Assistant 2023.6.2 Frontend 20230608.0 - latest 

Developer Documentation

Add some Developer documentation to the Readme for others to help out!

Component Splitting and Clean up

The current has just been thrown together, and need to be split up and cleaned for junk!

Installing problem

I 've try to install your interresting card , following steps dscribed in the installation section . But i can't get any result . The js file is well loaded , I get the blus frame of your card , but all information, included the image SVG are replaced by 'undefined .
thanks for your help

Hide progress indicator after completed print

The progress indicator does not look too nice, let's hide it when the printer has finished the print-job.

Visual Lovelace Editor

Add a Visual editor to make it easier to configure the card.

Automatic Releases through Github Actions

Setup Releases through GitHub Actions and a separate Production branch

Handle multiple Tools

Currently only on tool temperature is possible, look at handling multiple tools instead.