Update screenshots

Author: Dan Greco

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/bundle.js

@@ -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",

dist/index.html

@@ -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>

screenshot.png

@@ -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
     },

screenshots/active.png

@@ -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 }}>
                 {