Update screenshots

README.md

@@ -3,7 +3,7 @@
 ## Home Asssistant card for 3D printers (via OctoPrint integration)
 
 
-![Screenshot](https://github.com/dangreco/threedy/raw/master/screenshot.png)
+![Featured](https://github.com/dangreco/threedy/raw/master/screenshots/active.png)
 
 
 
@@ -25,31 +25,61 @@
 ## Config
 ---
 
+### Required
+
 - ```type``` — Always ```'custom:threedy-card'```
 - ```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```.
 - ```name``` — Can be whatever you want!
+- ```printer_type``` — Use a  printer style: ```'I3' | 'Cantilever' | 'Boxy' | 'Delta' ```
+- ```monitored``` — A list of values to monitor throughout the print; gets displayed to the right of the printer.
+
+### Optional
+
 - ```theme``` — Theme of the card: ```'Default' | 'Material' | 'Neumorphic' ```. Screenshots listed below.
+- ```font``` — Specify the font used in the card. By default it is ```sans-serif```.
 - ```scale``` — The scale factor of the animated 3D printer view. Try different values until you find one you like.
-- ```printer_type``` — Use a  printer style: ```'I3' | 'Cantilever' | 'Boxy' | 'Delta' ```
+- ```round``` — Specify whether to round decimal numbers in the card. Defaults to true. ```true | false```
 - ```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.
-- ```monitored``` — A list of values to monitor throughout the print; gets displayed to the right of the printer.
 
 ## Example Config
 ---
 
 ```yaml
+# required
 type: 'custom:threedy-card'
 base_entity: 'sensor.ender_3_v2'
 name: 'Ender 3 v2'
-theme: 'Default' 
-scale: 0.5
 printer_type: I3
 monitored:
   - Status
   - ETA
   - Elapsed
   - Hotend
   - Bed
+# optionals  
+theme: 'Default'
+font: 'Roboto'
+scale: 0.5
+round: false 
 ```
 
 
+## Screenshots
+---
+
+### Active Print
+
+![Active](https://github.com/dangreco/threedy/raw/master/screenshots/active.png)
+
+### Idle
+
+![Idle](https://github.com/dangreco/threedy/raw/master/screenshots/idle.png)
+
+### Printer Offline
+
+![Offline](https://github.com/dangreco/threedy/raw/master/screenshots/offline.png)
+
+### Show/Hide Animation
+
+![ShowHide](https://media.giphy.com/media/14VgtFSulJkOaRiZFo/giphy.gif)
+

dist/index.html

@@ -44,9 +44,11 @@
                     type: 'custom:threedy-card',
                     base_entity: 'sensor.ender_3_v2',
                     name: "Ender 3 v2",
-                    theme: "Neumorphic",
+                    theme: "Default",
                     scale: 1,
                     printer_type: 'I3',
+                    round: false,
+                    font: 'Assistant',
                     monitored: [
                         "Status",
                         "Hotend",

src/Components/Card/index.js

@@ -19,14 +19,16 @@ const Card = ({ }) => {
     const state = hass.states[`${config.base_entity}_current_state`].state
     const hidden = state !== 'Printing'
     const statusColor = state === 'Printing' ? "#4caf50" : state === "Unknown" ? "#f44336" : state === "Operational" ? "#00bcd4" : "#ffc107" 
+    const borderRadius = styles[theme].borderRadius;
 
     return (
         <motion.div
-            animate={{ borderRadius: hidden ? 16 : 32 }}
+            animate={{ borderRadius: hidden ? borderRadius : borderRadius * 2 }}
             transition={{ ease: "easeInOut", duration: 0.25 }}
             style={{
                 ...styles.Card,
-                ...styles[theme]
+                ...styles[theme],
+                fontFamily: config.font || 'sans-serif'
             }}
         >
             <div style={{ ...styles.Root }}>
@@ -47,7 +49,7 @@ const Card = ({ }) => {
                     <div style={{ ...styles.Section }}>
                         <PrinterView />
                     </div>
-                    <div style={{ ...styles.Section, paddingLeft: 32, paddingRight: 32 }}>
+                    <div style={{ ...styles.Section, paddingLeft: 16, paddingRight: 32 }}>
                         <Stats />
                     </div>
                 </motion.div>

src/Components/Card/styles.js

@@ -15,12 +15,12 @@ const styles = {
         padding: '0 16px 32px 16px'
     },
     Default: {
-        borderRadius: 'var(--ha-card-border-radius, 4px)',
+        borderRadius: 4,
         boxShadow: '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) )',
         color: 'var(--primary-text-color)'
     },
     Neumorphic: {
-        borderRadius: 32,
+        borderRadius: 16,
         boxShadow: '20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff',
         margin: 24
     },

src/Components/Stats/index.js

@@ -16,6 +16,8 @@ const Stat = ({ condition }) => {
         config
     } = useContext(ThreedyContext);
 
+    const round = config.round === undefined ? true : config.round;
+
     const entityEnding = (() => {
         switch (condition) {
             case 'Status':
@@ -56,9 +58,9 @@ const Stat = ({ condition }) => {
             case 'Elapsed':
                 return format_seconds_elapsed(entity.state)
             case 'Hotend':
-                return `${entity.state}${entity.attributes.unit_of_measurement}`
+                return `${round ? Math.round(entity.state) : entity.state}${entity.attributes.unit_of_measurement}`
             case 'Bed':
-                return `${entity.state}${entity.attributes.unit_of_measurement}`
+                return `${round ? Math.round(entity.state) : entity.state}${entity.attributes.unit_of_measurement}`
             default:
                 return '<unknown>'
         }
@@ -80,12 +82,14 @@ const Stats = () => {
         config,
     } = useContext(ThreedyContext);
 
+    const round = config.round === undefined ? true : config.round
+
     const percentComplete = hass.states[`${config.base_entity}_job_percentage`].state;
 
     return (
         <div style={{ ...styles.Stats }}>
             <div style={{ ...styles.Percent }}>
-                <p style={{ ...styles.PercentText }}>{ percentComplete }%</p>
+                <p style={{ ...styles.PercentText }}>{ round ? Math.round(percentComplete) : percentComplete }%</p>
             </div>
             <div style={{ ...styles.Monitored }}>
                 {

src/Configurator/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './styles';
+
+const Configurator = ({ }) => {
+
+    return (
+        <div>
+
+        </div>
+    )
+
+}
+
+export default Configurator;

src/Configurator/styles.js

@@ -0,0 +1,5 @@
+const styles = {
+
+};
+
+export default styles;

src/index.js

@@ -3,51 +3,83 @@ import ReactDOM from 'react-dom';
 import NotConfigured from './Components/NotConfigured';
 import ThreedyWrapper from './Components/ThreedyWrapper';
 
+class ThreedyEditor extends HTMLElement {
+
+    _config;
+
+    setConfig(config) {
+        this._config = config;
+    }
+
+    configChanged(newConfig) {
+        const event = new Event("config-changed", {
+            bubbles: true,
+            composed: true
+        });
+        event.detail = { config: newConfig };
+        this.dispatchEvent(event);
+    }
+
+    connectedCallback() {
+        this._render();
+    }
+
+    render() {
+
+    }
+
+}
+
+customElements.define('threedy-editor', ThreedyEditor);
+
+
 class ThreedyCard extends HTMLElement {
 
     _hass;
     _config;
 
 
-    connectedCallback()
-    {
+    connectedCallback() {
         this._render();
     }
 
-    disconnectedCallback()
-    {
+    disconnectedCallback() {
         ReactDOM.unmountComponentAtNode(this);
     }
 
 
-    _render()
-    {
+    _render() {
         if (this._hass === undefined || this._config === undefined)
-            return ReactDOM.render( <NotConfigured />, this );
+            return ReactDOM.render(<NotConfigured />, this);
 
         ReactDOM.render(
             <ThreedyWrapper hass={this._hass} config={this._config} />,
             this
         );
     }
 
-    set hass(hass)
-    {
+    set hass(hass) {
         this._hass = hass;
         this._render();
     }
 
-    setConfig(config)
-    {
+    setConfig(config) {
         this._config = config;
         this._render();
     }
 
-    getCardSize()
-    {
+    getCardSize() {
         return 2;
     }
 
 }
 
-customElements.define('threedy-card', ThreedyCard);
+customElements.define('threedy-card', ThreedyCard);
+
+window.customCards = window.customCards || [];
+window.customCards.push({
+    type: 'threedy-card',
+    name: "Threedy Card",
+    preview: false,
+    description: "OctoPrint 3D Printer Card"
+})