Skip to content
This repository was archived by the owner on May 1, 2024. It is now read-only.

Commit 1cd477a

Browse files
author
Dan Greco
committed
Initial commit
0 parents  commit 1cd477a

File tree

30 files changed

+3465
-0
lines changed

30 files changed

+3465
-0
lines changed

‎.babelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["@babel/env", "@babel/react"],
3+
"plugins": ["@babel/plugin-proposal-class-properties"]
4+
}
5+
6+
7+
8+

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
![Screenshot](https://github.com/dangreco/threedy/raw/master/screenshot.png)
2+
3+
# Threedy
4+
## Home Asssistant card for 3D printers (via OctoPrint integration)
5+
6+
7+
8+
## Prerequisites
9+
---
10+
- [OctoPrint](https://octoprint.org/)-enabled 3D printer
11+
- [Home Assistant](https://www.home-assistant.io/) instance
12+
- Home Assistant [OctoPrint integration](https://www.home-assistant.io/integrations/octoprint/)
13+
- *** Make sure to expose all available data entities for your printer! ***
14+
15+
16+
## Installation
17+
---
18+
### ~~Method 1: HACS~~
19+
20+
### ~~Method 2: Manual~~
21+
22+
23+
## Config
24+
---
25+
26+
- ```type``` — Always ```'custom:threedy-card'```
27+
- ```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```.
28+
- ```name``` — Can be whatever you want!
29+
- ```theme``` — Theme of the card: ```'Default' | 'Material' | 'Neumorphic' ```. Screenshots listed below.
30+
- ```scale``` — The scale factor of the animated 3D printer view. Try different values until you find one you like.
31+
- ```printer_type``` — Use a printer style: ```'I3' | 'Cantilever' | 'Boxy' | 'Delta' ```
32+
- ```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](https://google.com) to create a custom value.
33+
- ```monitored``` — A list of values to monitor throughout the print; gets displayed to the right of the printer.
34+
35+
## Example Config
36+
---
37+
38+
```yaml
39+
type: 'custom:threedy-card'
40+
base_entity: 'sensor.ender_3_v2'
41+
name: 'Ender 3 v2'
42+
theme: 'Default'
43+
scale: 0.5
44+
printer_type: I3
45+
monitored:
46+
- Status
47+
- ETA
48+
- Elapsed
49+
- Hotend
50+
- Bed
51+
```
52+
53+

‎dist/bundle.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle.js.LICENSE.txt‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
object-assign
3+
(c) Sindre Sorhus
4+
@license MIT
5+
*/
6+
7+
/*! *****************************************************************************
8+
Copyright (c) Microsoft Corporation.
9+
10+
Permission to use, copy, modify, and/or distribute this software for any
11+
purpose with or without fee is hereby granted.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19+
PERFORMANCE OF THIS SOFTWARE.
20+
***************************************************************************** */
21+
22+
/** @license React v0.20.1
23+
* scheduler.production.min.js
24+
*
25+
* Copyright (c) Facebook, Inc. and its affiliates.
26+
*
27+
* This source code is licensed under the MIT license found in the
28+
* LICENSE file in the root directory of this source tree.
29+
*/
30+
31+
/** @license React v17.0.1
32+
* react-dom.production.min.js
33+
*
34+
* Copyright (c) Facebook, Inc. and its affiliates.
35+
*
36+
* This source code is licensed under the MIT license found in the
37+
* LICENSE file in the root directory of this source tree.
38+
*/
39+
40+
/** @license React v17.0.1
41+
* react.production.min.js
42+
*
43+
* Copyright (c) Facebook, Inc. and its affiliates.
44+
*
45+
* This source code is licensed under the MIT license found in the
46+
* LICENSE file in the root directory of this source tree.
47+
*/
48+
49+
//! moment.js
50+
51+
//! moment.js locale configuration

‎dist/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<script>
8+
9+
function setHass()
10+
{
11+
document.getElementsByTagName('threedy-card')[0].hass = {
12+
states: {
13+
'sensor.ender_3_v2_current_state' : {
14+
state: "Printing"
15+
},
16+
'sensor.ender_3_v2_job_percentage' : {
17+
state: 52.12
18+
},
19+
'sensor.ender_3_v2_actual_tool0_temp' : {
20+
state: 214.7,
21+
attributes: {
22+
unit_of_measurement: "°C"
23+
}
24+
},
25+
'sensor.ender_3_v2_actual_bed_temp' : {
26+
state: 65.1,
27+
attributes: {
28+
unit_of_measurement: "°C"
29+
}
30+
},
31+
'sensor.ender_3_v2_time_elapsed' : {
32+
state: 5734,
33+
},
34+
'sensor.ender_3_v2_time_remaining' : {
35+
state: 5734,
36+
},
37+
}
38+
}
39+
}
40+
41+
function setConfig()
42+
{
43+
document.getElementsByTagName('threedy-card')[0].setConfig({
44+
type: 'custom:threedy-card',
45+
base_entity: 'sensor.ender_3_v2',
46+
name: "Ender 3 v2",
47+
theme: "Neumorphic",
48+
scale: 0.85,
49+
printer_type: 'I3',
50+
monitored: [
51+
"Status",
52+
"Hotend",
53+
"Bed",
54+
"Elapsed",
55+
"ETA"
56+
]
57+
})
58+
}
59+
60+
function load()
61+
{
62+
setHass();
63+
setConfig();
64+
}
65+
66+
</script>
67+
68+
<style>
69+
70+
:root {
71+
--primary-background-color: #ffffff;
72+
--primary-text-color: #282828;
73+
}
74+
75+
html, body {
76+
margin: 0;
77+
background-color: #ffffff;
78+
font-family: 'Assistant', sans-serif;
79+
}
80+
81+
body {
82+
width: 100vw;
83+
height: 100vh;
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
}
88+
89+
.FauxColumn {
90+
width: 492px;
91+
}
92+
93+
#Loader {
94+
position: fixed;
95+
top: 16px;
96+
left: 16px;
97+
}
98+
99+
</style>
100+
101+
<script src='./bundle.js'></script>
102+
103+
</head>
104+
105+
<body id="root">
106+
107+
<div class="FauxColumn">
108+
<threedy-card>
109+
110+
</threedy-card>
111+
</div>
112+
113+
<button id="Loader" onclick="load()">
114+
Load Data
115+
</button>
116+
117+
</body>
118+
119+
</html>

‎package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "threedy",
3+
"version": "1.0.0",
4+
"description": "Home Assistant card for 3D printer status and management.",
5+
"main": "src/index.js",
6+
"repository": "https://github.com/dangreco/threedy",
7+
"author": "Dan Greco",
8+
"license": "MIT",
9+
"dependencies": {
10+
"framer-motion": "^3.2.2-rc.1",
11+
"moment": "^2.29.1",
12+
"react": "^17.0.1",
13+
"react-dom": "^17.0.1"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.12.10",
17+
"@babel/plugin-proposal-class-properties": "^7.12.1",
18+
"@babel/preset-env": "^7.12.11",
19+
"@babel/preset-react": "^7.12.10",
20+
"babel-loader": "^8.2.2",
21+
"css-loader": "^5.0.1",
22+
"sass": "^1.32.5",
23+
"sass-loader": "^10.1.1",
24+
"style-loader": "^2.0.0",
25+
"webpack": "^5.17.0",
26+
"webpack-cli": "^4.4.0"
27+
},
28+
"scripts": {
29+
"build": "webpack --mode production"
30+
}
31+
}

‎screenshot.png‎

21.6 KB
Loading

‎src/Components/Card/Card.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, {useContext} from 'react';
2+
import ThreedyContext from '../../Contexts/ThreedyContext';
3+
import PrinterView from '../PrinterView';
4+
import Stats from '../Stats';
5+
6+
import './styles.scss';
7+
8+
const Card = ({}) => {
9+
10+
const {
11+
config
12+
} = useContext(ThreedyContext);
13+
14+
const theme = config.theme;
15+
16+
return (
17+
<div className={`ThreedyCard ${theme || "Default"}Card`}>
18+
<div className="ThreedySection">
19+
<PrinterView />
20+
</div>
21+
<div className="ThreedySection">
22+
<Stats />
23+
</div>
24+
</div>
25+
)
26+
27+
}
28+
29+
export default Card;

‎src/Components/Card/styles.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.ThreedyCard {
2+
3+
display: flex;
4+
flex-direction: row;
5+
justify-content: center;
6+
align-items: stretch;
7+
8+
box-sizing: border-box;
9+
10+
11+
background: var( --ha-card-background, var(--card-background-color, white) );
12+
13+
.ThreedySection {
14+
15+
box-sizing: border-box;
16+
17+
width: 50%;
18+
padding: 32px 16px;
19+
20+
}
21+
22+
23+
}
24+
25+
26+
.DefaultCard {
27+
border-radius: var(--ha-card-border-radius, 4px);
28+
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
29+
color: var(--primary-text-color);
30+
}
31+
32+
.NeumorphicCard {
33+
border-radius: 32px;
34+
box-shadow: 20px 20px 60px #d9d9d9,
35+
-20px -20px 60px #ffffff;
36+
37+
38+
}

0 commit comments

Comments
 (0)