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

Commit 92c1656

Browse files
author
Dan Greco
committed
Finish advanced config
1 parent 5f5c094 commit 92c1656

File tree

7 files changed

+202
-0
lines changed

7 files changed

+202
-0
lines changed

.idea/.gitignore

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

.idea/modules.xml

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

.idea/threedy.iml

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

.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { useRef, useState, useEffect } from 'react';
2+
import { motion } from 'framer-motion';
3+
4+
import styles from './styles';
5+
6+
const Button = ({ onClick, children, style }) => {
7+
8+
const [active, setActive] = useState(false);
9+
10+
const ref = useRef();
11+
12+
const handleClick = e => {
13+
14+
if (!ref.current.contains(e.target)) {
15+
setActive(false);
16+
}
17+
18+
}
19+
20+
return (
21+
<motion.button
22+
ref={ref}
23+
style={{ ...styles.Button, ...style }}
24+
animate={{
25+
scale: active ? 0.9 : 1.0
26+
}}
27+
onClick={onClick}
28+
onMouseDown={() => setActive(true)}
29+
onMouseUp={() => setActive(false)}
30+
onMouseLeave={() => setActive(false)}
31+
>
32+
{ children }
33+
</motion.button>
34+
)
35+
36+
};
37+
38+
export default Button;
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const styles = {
2+
Button: {
3+
border: 'none',
4+
outline: 'none',
5+
padding: '0 32px',
6+
boxSizing: 'border-box',
7+
fontSize: 16,
8+
fontWeight: 'bold',
9+
lineHeight: '48px',
10+
borderRadius: 8,
11+
textAlign: 'center',
12+
cursor: 'pointer',
13+
backgroundColor: 'rgba(0,0,0,0.05)',
14+
color: 'var(--primary-text-color)'
15+
}
16+
};
17+
18+
export default styles;

src/Configurator/utils.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
const conditions = [
2+
'Status',
3+
'ETA',
4+
'Elapsed',
5+
'Hotend',
6+
'Bed'
7+
];
8+
9+
const printerTypes = {
10+
"I3": "I3",
11+
"Cantilever": "Cantilever"
12+
}
13+
14+
const themes = {
15+
'Default': 'Default',
16+
'Neumorphic': 'Neumorphic'
17+
}
18+
19+
20+
/* Printer Entity ID -> Name; E.G. sensor.printer_name_current_state -> Printer Name */
21+
const printerName = ( entityId ) => {
22+
23+
if ( !entityId ) {
24+
return undefined;
25+
}
26+
27+
return entityId
28+
.replace('_current_state', '')
29+
.replace('sensor.', '')
30+
.split("_")
31+
.map(s => s.charAt(0).toUpperCase() + s.substring(1))
32+
.join(" ");
33+
34+
}
35+
36+
/* Printer Entity ID -> Base Entity; E.G. sensor.printer_name_current_state -> sensor.printer_name */
37+
const printerBase = ( entityId ) => {
38+
39+
if ( !entityId ) {
40+
return undefined;
41+
}
42+
43+
return entityId
44+
.replace('_current_state', '');
45+
46+
}
47+
48+
const getPrinters = ( hass ) => {
49+
50+
const printers = {};
51+
52+
Object.keys( hass.states ).filter(
53+
entityId => (/sensor\..*_current_state/g).test(entityId)
54+
).map(
55+
entityId => {
56+
57+
const name = printerName(entityId);
58+
const base = printerBase(entityId);
59+
60+
printers[name] = base;
61+
62+
}
63+
)
64+
65+
66+
return printers;
67+
}
68+
69+
const getToggleables = ( hass ) => {
70+
71+
const toggleables = {};
72+
73+
Object.keys(hass.states).filter(
74+
entityId => (/^(switch|light)/g).test(entityId)
75+
).map( toggleable => toggleables[toggleable] = toggleable );
76+
77+
return toggleables;
78+
79+
}
80+
81+
/* Updates the Threedy Card config given updates */
82+
const updateConfig = ( threedy, modifiedConfig, updates ) => {
83+
84+
const event = new Event("config-changed", {
85+
bubbles: true,
86+
composed: true
87+
});
88+
event.detail = {
89+
config: {
90+
...modifiedConfig,
91+
...updates
92+
}
93+
};
94+
threedy.dispatchEvent(event);
95+
96+
return event.detail.config;
97+
}
98+
99+
const updateValue = ( _updateConfig, key, value ) => {
100+
_updateConfig({
101+
[key]: value
102+
})
103+
}
104+
105+
106+
export {
107+
conditions,
108+
printerTypes,
109+
themes,
110+
printerName,
111+
getPrinters,
112+
getToggleables,
113+
updateConfig,
114+
updateValue
115+
}

0 commit comments

Comments
 (0)