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

💻 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.