Merge pull request #68 from gurbyz/dev

Release 0.1.5

CHANGELOG.md

@@ -1,5 +1,9 @@
 Changelog
 ====
+## 0.1.5
+### Improvements
+* Extra classes to use for styling with card-mod: `.position-value`, `.arrow-value`, `.icon`, `.position-icon` and `.arrow-icon`. Example in Readme file.
+
 ## 0.1.4
 ### Improvements
 * Documentation improvement. As mentioned in #60.

README.md

@@ -18,6 +18,7 @@ An intuitive way to represent the power and energy that your home is consuming o
     * [Icons](#Icons)
     * [View toggling](#View-toggling)
     * [Advanced configuration example](#Advanced-configuration-example)
+    * [More styling](#More-styling)
 * [BETA battery feature in power view](#BETA-battery-feature-in-power-view)
     * [Configuration instructions battery feature](#Configuration-instructions-battery-feature)
     * [Known issues for the battery feature](#Known-issues-for-the-battery-feature)
@@ -288,6 +289,35 @@ A more advanced example for in the `ui-lovelace.yaml` file:
   auto_toggle_view_period: 5
 ```
 
+### More styling
+You can use another custom integration [card-mod](https://github.com/thomasloven/lovelace-card-mod) to change more of the styling of power-wheel-card.
+Don't forget to install card-mod separately. Then you can put more styling to the classes and id's in the power-wheel-card configuration.
+
+Some classes to start with, are `.icon` (for the icons in the wheel) and `.value` (for the numeric values below the icons). 
+If you want to style icons and values of arrows and positions separately you want to use `.arrow-icon` (for the arrow icons), `.position-icon` (for the icons of the positions Home, Solar and Grid), `.arrow-value` and `.position-value`.
+
+Here is an example where e.g. the values and the position icons (Home, Solar and Grid) in the card have been styled. The values have a larger font and are separated a bit more from the icons.
+The position icons are larger. And there is more space in the bottom of the card.
+
+```yaml
+- type: custom:power-wheel-card
+  title: "Power wheel"
+  solar_power_entity: sensor.YOUR_SOLAR_POWER_SENSOR
+  grid_power_entity: sensor.YOUR_GRID_POWER_SENSOR
+  style: |  # styled with card-mod
+    .value {
+      font-weight: 300;
+      font-size: 20px;
+      margin-top: 5px;
+    }
+    .position-icon {
+      --mdc-icon-size: 56px;
+    }
+    .wheel {
+      margin-bottom: 20px;
+    }
+```
+
 ## BETA battery feature in power view
 Battery support in the power-wheel-card is currently a BETA feature.
 Many people asked for it and many people [helped](https://github.com/gurbyz/power-wheel-card/issues/23) during development. Thx! 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-wheel-card",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "An intuitive way to represent the power and energy that your home is consuming or producing.",
   "directories": {
     "test": "test"

power-wheel-card.js

@@ -5,7 +5,7 @@
  *
  */
 
-const __VERSION = "0.1.4";
+const __VERSION = "0.1.5";
 
 const LitElement = customElements.get('hui-masonry-view')
   ? Object.getPrototypeOf(customElements.get('hui-masonry-view'))
@@ -542,8 +542,8 @@ class PowerWheelCard extends LitElement {
             class="cell ${cellType} ${cellObj.hasSensor && !visibilityClass ? 'sensor' : ''} ${visibilityClass || ''}" 
             @click="${cellObj.hasSensor && !visibilityClass ? () => this._handleClick(cellObj.stateObj) : () => {}}"
             title="${cellObj.hasSensor ? `More info${cellObj.stateObj.attributes.friendly_name ? ':\n' + cellObj.stateObj.attributes.friendly_name : ''}` : ''}">
-        <ha-icon id="icon-${id}" class="${cellObj.classValue}" icon="${cellObj.icon}"></ha-icon>
-        <div id="value-${id}" class="value">
+        <ha-icon id="icon-${id}" class="icon ${cellObj.classValue} ${cellType}-icon" icon="${cellObj.icon}"></ha-icon>
+        <div id="value-${id}" class="value ${cellType}-value">
           ${cellType === 'arrow' && (cellObj.val === 0 || Math.abs(cellObj.val) === Math.abs(hideValue1) || Math.abs(cellObj.val) === Math.abs(hideValue2)) ? '' : cellObj.valueStr}
           ${cellObj.valSoC ? cellObj.valueStrSoC : ''}
         </div>