Update v1.0.1

Update v1.0.1

CHANGELOG.md

@@ -1,6 +1,15 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-## 1.0.0
+## 1.0.1
+- add the attributes of the body score "body" (for the moment on the left)
+example customize:
+body:
+ water:
+ label: 'Water: '
+
+- add the customize icon
 
+## 1.0.0
 - **Initial release**
+

README.md

@@ -45,6 +45,9 @@ to `<config>/www/img/` or configure your own preferred path.
 
 Default bodymiscale attributes under each list:
 - `attributes` (**right list**) include `weight`, `impedance` (Optional), `height`, `age` and `gender`.
+- `body` (**left list**) include `water` (miscale 181B), `visceral_fat`, `body_fat` (miscale 181B), `bmi`, `muscle_mass` (miscale 181B), 
+ `protein` (miscale 181B), `basal_metabolism`, `bone_mass` (miscale 181B), `metabolic_age` (miscale 181B),
+ `ideal`, `body_type`.
 
 See [examples](#examples) on how to customize, hide or add custom attributes.
 
@@ -171,7 +174,7 @@ Translations:
  label: Siham
  show: true
 ```
-## Acknowledgment
+## Credits
 The card is based on the work of Ben Tomlin https://github.com/benct/lovelace-xiaomi-vacuum-card
 
 ## Disclaimer

body-miscale-card.js

@@ -1,34 +1,100 @@
 ((LitElement) => {
  console.info(
- '%c BODYMISCALE-CARD %c 1.0.0 ',
+ '%c BODYMISCALE-CARD %c 1.0.1 ',
  'color: cyan; background: black; font-weight: bold;',
  'color: darkblue; background: white; font-weight: bold;',
  );
 
  const attributes = {
  weight: {
  key: 'weight',
- label: 'weight: ',
+ label: 'Weight: ',
  unit: ' kg',
  },
  impedance: {
  key: 'impedance',
- label: 'impedance: ',
+ label: 'Impedance: ',
  unit: ' ohm',
  },
  height: {
  key: 'height',
- label: 'height: ',
+ label: 'Height: ',
  unit: ' cm',
  },
  age: {
  key: 'age',
- label: 'age: ',
+ label: 'Age: ',
  unit: ' years',
  },
  gender: {
  key: 'gender',
- label: 'gender: ',
+ label: 'Gender: ',
+ },
+ };
+
+ const body = {
+ water: {
+ key: 'Water',
+ label: 'Water: ',
+ icon: 'file:water',
+ unit: ' %',
+ },
+ visceral_fat: {
+ key: 'Visceral fat',
+ label: 'Visceral fat: ',
+ icon: 'file:visceral_fat',
+ },
+ body_fat: {
+ key: 'Body fat',
+ label: 'Body fat: ',
+ icon: 'file:body_fat',
+ unit: ' %',
+ },
+ bmi: {
+ key: 'BMI',
+ label: 'BMI: ',
+ icon: 'file:bmi',
+ },
+ muscle_mass: {
+ key: 'Muscle mass',
+ label: 'Muscle mass: ',
+ icon: 'file:muscle_mass',
+ unit: ' kg',
+ },
+ protein: {
+ key: 'Protein',
+ label: 'Protein: ',
+ icon: 'file:protein',
+ unit: ' %',
+ },
+ basal_metabolism: {
+ key: 'Basal metabolism',
+ label: 'Basal metabolism: ',
+ icon: 'file:basal_metabolism',
+ unit: ' kcal',
+ },
+ bone_mass: {
+ key: 'Bone mass',
+ label: 'Bone mass: ',
+ icon: 'file:bone_mass',
+ unit: ' kg',
+ },
+ metabolic_age: {
+ key: 'Metabolic age',
+ label: 'Metabolic age: ',
+ icon: 'file:metabolic_age',
+ unit: ' years',
+ },
+ ideal: {
+ key: 'Ideal',
+ label: 'Ideal: ',
+ icon: 'file:ideal',
+ unit: ' kg',
+ },
+ body_type: {
+ key: 'Body type',
+ label: 'Body type: ',
+ icon: 'file:body_type',
  },
  };
 
@@ -85,6 +151,19 @@
  age: {key: 'age'},
  gender: {key: 'gender'},
  },
+ body: {
+ water: false,
+ visceral_fat: {key: 'Visceral fat'},
+ body_fat: false,
+ bmi: {key: 'BMI'},
+ muscle_mass: false,
+ protein: false,
+ basal_metabolism: {key: 'Basal metabolism'},
+ bone_mass: false,
+ metabolic_age: false,
+ ideal: {key: 'Ideal'},
+ body_type: {key: 'Body type'},
+ },
  },
  '181B': {
  attributes: {
@@ -94,6 +173,19 @@
  age: {key: 'age'},
  gender: {key: 'gender'},
  },
+ body: {
+ water: {key: 'Water'},
+ visceral_fat: {key: 'Visceral fat'},
+ body_fat: {key: 'Body fat'},
+ bmi: {key: 'BMI'},
+ muscle_mass: {key: 'Muscle mass'},
+ protein: {key: 'Protein'},
+ basal_metabolism: {key: 'Basal metabolism'},
+ bone_mass: {key: 'Bone mass'},
+ metabolic_age: {key: 'Metabolic age'},
+ ideal: {key: 'Ideal'},
+ body_type: {key: 'Body type'},
+ },
  },
  };
 
@@ -127,19 +219,25 @@
 }
 .flex {
  display: flex;
- align-items: right;
+ align-items: center;
  justify-content: space-evenly;
 }
 .grid {
  display: grid;
- grid-template-columns: repeat(1, auto);
+ grid-template-columns: repeat(2, auto);
  cursor: pointer;
 }
 .grid-content {
  display: grid;
- align-content: right;
+ align-content: space-between;
  grid-row-gap: 6px;
 }
+.grid-left {
+ text-align: left;
+ font-size: 110%;
+ padding-left: 10px;
+ border-left: 2px solid var(--primary-color);
+}
 .grid-right {
  text-align: right;
  padding-right: 10px;
@@ -153,8 +251,12 @@
  ${this.config.show.name ?
  html`<div class="title">${this.config.name || this.stateObj.attributes.friendly_name}</div>`
  : null}
- ${(this.config.show.attributes) ? html`
+ ${(this.config.show.body || this.config.show.attributes) ? html`
  <div class="grid" style="${this.config.styles.content}" @click="${() => this.fireEvent('hass-more-info')}">
+ ${this.config.show.body ? html`
+ <div class="grid-content grid-left">
+ ${Object.values(this.config.body).filter(v => v).map(this.renderAttribute.bind(this))}
+ </div>` : null}
  ${this.config.show.attributes ? html`
  <div class="grid-content grid-right">
  ${Object.values(this.config.attributes).filter(v => v).map(this.renderAttribute.bind(this))}
@@ -170,6 +272,7 @@
  renderAttribute(data) {
  const computeFunc = data.compute || (v => v);
  const isValidAttribute = data && data.key in this.stateObj.attributes;
+ const isValidEntityData = data && data.key in this.stateObj;
 
  const value = isValidAttribute
  ? computeFunc(this.stateObj.attributes[data.key]) + (data.unit || '')
@@ -180,14 +283,14 @@
 
  const hasDropdown = `${data.key}_list` in this.stateObj.attributes;
 
- return (hasDropdown && (isValidAttribute))
+ return (hasDropdown && (isValidAttribute || isValidEntityData))
  ? this.renderDropdown(attribute, data.key)
  : attribute;
  }
 
  renderIcon(data) {
- const icon = (this.stateObj.attributes)
- ? this.stateObj.attributes
+ const icon = (data.key === 'Water' && 'water_icon' in this.stateObj.attributes)
+ ? this.stateObj.attributes.water_icon
  : data.icon;
  return html`<ha-icon icon="${icon}" style="margin-right: 10px; ${this.config.styles.icon}"></ha-icon>`;
  }
@@ -238,10 +341,12 @@
  entity: config.entity,
  show: {
  name: config.name !== false,
+ body: config.body !== false,
  attributes: config.attributes !== false,
  buttons: config.buttons !== false,
  },
  buttons: this.deepMerge(buttons, model.buttons, config.buttons),
+ body: this.deepMerge(body, model.body, config.body),
  attributes: this.deepMerge(attributes, model.attributes, config.attributes),
  styles: {
  background: config.image ? `background-image: url('${config.image}'); color: white; text-shadow: 0 0 10px black;` : '',

icon/file-loader.js

@@ -0,0 +1,26 @@
+// Adjust these params to your needs
+const SVG_FOLDER_LOCATION = "/svg"
+
+// Usage: file:yourSvgName (no file extensions)
+const NAMESPACE = "file"
+
+async function loadFile(path) {
+ const response = await fetch(`/local${SVG_FOLDER_LOCATION}/${path}.svg`)
+ if (response.ok) {
+ const svgString = await response.text()
+ return /d="(.*?)"/.exec(svgString)[1]
+ } else {
+ return "M18.677,15.975 C17.922,16.509 17.489,17.269 17.489,18.059 C17.489,18.881 16.822,19.548 16,19.548 C15.179,19.548 14.512,18.881 14.512,18.059 C14.512,16.29 15.404,14.645 16.957,13.544 C17.399,13.233 17.803,12.605 17.615,11.776 C17.482,11.189 16.996,10.704 16.408,10.571 C15.698,10.409 15.198,10.7 14.964,10.886 C14.567,11.204 14.338,11.677 14.338,12.186 C14.338,13.008 13.672,13.674 12.85,13.674 C12.029,13.674 11.362,13.008 11.362,12.186 C11.362,10.768 11.998,9.446 13.107,8.56 C14.217,7.673 15.661,7.349 17.067,7.667 C18.776,8.056 20.13,9.41 20.519,11.119 C20.941,12.98 20.217,14.886 18.677,15.975 M16,24.5 C15.172,24.5 14.5,23.829 14.5,23 C14.5,22.172 15.172,21.5 16,21.5 C16.828,21.5 17.5,22.172 17.5,23 C17.5,23.829 16.828,24.5 16,24.5 M16,4 C9.372,4 4,9.373 4,16 C4,22.627 9.372,28 16,28 C22.627,28 28,22.627 28,16 C28,9.373 22.627,4 16,4"
+ }
+}
+
+async function getIcon(name) {
+ const svgString = await loadFile(name)
+ return {
+ path: svgString,
+ viewBox: "0 0 32 32"
+ };
+}
+
+window.customIconsets = window.customIconsets || {};
+window.customIconsets[NAMESPACE] = getIcon;

icon/readme_icon.md

@@ -0,0 +1,23 @@
+# icon customize
+
+## Installation
+Manually copy svg folder to your `<config>/www/` folder
+Manually copy file-loader.js to your `<config>/www/` folder
+Add the Resource to Home Assistant
+
+
+Follow the creator's instructions. I thank him in passing. (https://github.com/mozziemozz/home-assistant-svg-file-loader)
+
+# Official instructions
+
+1. Download & Copy Files
+
+ copy ```file-loader.js``` to your ```/config/www``` folder and create a new folder ```svg``` inside ```www```. 
+ Place your custom icons in ```svg```.
+
+2. Add the Resource to Home Assistant
+
+ Go to Configuration\Lovelace Dashboards\Resources and add a new resource. Enter ```/local/file-loader.js``` as URL.
+
+## Credits
+The personalized icons are implemented thanks to the work of Martin HEUSSER