All your 3D Printer info in one place!
Contents:
🚪 Introduction
💽 Intallation
📖 Properties
💻 Development
⌨️ How to Contribute
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) |
---|---|---|
![]() |
![]() |
![]() |
- Download the
octoprint-card.js
file from the Releases Page - Upload the file to your Home Assistant
config/local
folder - Add a reference to the card to your lovelace instance
Go toConfiguration
→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 - 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.
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/
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) |
I though I would give som technical background about the project, and also let you know how you can contribute.
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.
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!
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.
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.
I Would love to wee what ideas you have. Any contributions are happily welcomed!
- Fork the repo.
- Make your changes on your fork (How to run locally)
- Open a Pull Request from your fork against the main branch.
- Remember to add a nice description of what your changes are intended to do.
- I will get back to you as soon as possible!
- Clone this repository to your local machine
git clone https://github.com/kasperlaursen/octoprint-card.git
- Go to the folder
cd octoprint-card
- Install dependencies
npm install
- Start the local development server, which will recompile the code on file changes.
npm run dev
-
Add the dev card to your Lovelace resources using the url
http://localhost:5000/octoprint-card-dev.js
-
Add the card to your dashboard with
type: 'custom:octoprint-card-dev'
and the rest of the config
To run the project locally you need to have node.js installed on your machine.