https://github.com/kasperlaursen/octoprint-card
All your 3D Printer info in a single Lovelace Card!
https://github.com/kasperlaursen/octoprint-card
home-assistant homeassistant homeassistant-custom-component lovelace lovelace-card lovelace-cards lovelace-custom-card octoprint svelte svelte3 web-components
Last synced: 8 months ago
JSON representation
All your 3D Printer info in a single Lovelace Card!
- Host: GitHub
- URL: https://github.com/kasperlaursen/octoprint-card
- Owner: kasperlaursen
- Archived: true
- Created: 2021-04-07T14:42:01.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-12T07:44:44.000Z (over 1 year ago)
- Last Synced: 2024-12-23T07:25:29.405Z (over 1 year ago)
- Topics: home-assistant, homeassistant, homeassistant-custom-component, lovelace, lovelace-card, lovelace-cards, lovelace-custom-card, octoprint, svelte, svelte3, web-components
- Language: Svelte
- Homepage:
- Size: 129 KB
- Stars: 23
- Watchers: 5
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> [!WARNING]
> **This repository is archived**
> Unfortunately, due to time constraints, this project is no longer maintained.
> Thank you for your interest and support.
Lovelace 3D Printer Card
All your 3D Printer info in one place!
---
**⚠️ Work in progress, use at your own risk ⚠️**
**Contents:**
[🚪 Introduction](#Introduction)
[💽 Intallation](#Intallation)
[📖 Properties](#Properties)
[💻 Development](#Development)
[⌨️ How to Contribute](#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](https://github.com/denysdovhan/vacuum-card) by [Denys Dovhan](https://github.com/denysdovhan).
| Camera (Printing) | Image (Idle) | Camera (Idle) |
| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
|  |  |  |
# 💽 Intallation
## HACS (Not Ready Yet)
## Manual
1. Download the `octoprint-card.js` file from the [Releases Page](https://github.com/kasperlaursen/octoprint-card/releases)
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
```yaml
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](https://svelte.dev) 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](https://github.com/kasperlaursen/octoprint-card/projects/1) 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](#Running-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](#Configuration-example)
## Prerequisite
To run the project locally you need to have [node.js](https://nodejs.org/en/) installed on your machine.