Beta support for battery in power view.

CHANGELOG.md

@@ -1,5 +1,11 @@
 Changelog
 ====
+## 0.0.16-dev
+### New features
+* **BETA.** Basic support for a battery in the *power view*.
+  * New card parameter `battery_power_entity`.
+  * New card parameter `battery_icon`.
+
 ## 0.0.15
 ### Improvements
 * Removal of support for Customer Updater.

README.md

@@ -10,6 +10,7 @@ Features of the custom power-wheel-card:
 
 * Has different views for showing power values, showing energy values and showing costs/savings: the *power view*, the *energy view* resp. the *money view*.
   The initial view can be set. Click the unit to switch between views.
+* BETA: Has support for a fourth value in 'the wheel': battery. In *power view* only.
 * Has options for a different card title per view.
 * Can auto-toggle between views.
   Click the recycle icon to turn on or off the auto-toggle.
@@ -198,6 +199,7 @@ There are many more card parameters available, but it's advised to start with th
 |solar_power_entity|string|**required**| |Entity id of your solar power sensor. E.g. `sensor.YOUR_SOLAR_POWER_SENSOR`. See requirements above.|
 |grid_power_consumption_entity (A)|string|optional, always together with B| |Entity id of your sensor for power that you are consuming from the grid. E.g. `sensor.YOUR_GRID_POWER_CONSUMPTION_SENSOR`. See requirements above.|
 |grid_power_production_entity (B)|string|optional, always together with A| |Entity id of your sensor for power that you are producing to the grid. E.g. `sensor.YOUR_GRID_POWER_PRODUCTION_SENSOR`. See requirements above.|
+|battery_power_entity|string|optional| |Entity id of your sensor for power you use to charge the battery. Charging should have positive values. Discharging should have negative values.|
 |solar_energy_entity|string|optional|Default the *energy view* will not be enabled.|Entity id of your solar energy sensor. E.g. `sensor.YOUR_SOLAR_ENERGY_SENSOR`. See requirements above.|
 |grid_energy_consumption_entity (D)|string|optional, always together with E|Default the *energy view* will not be enabled.|Entity id of your sensor for energy that's consumed from the grid. E.g. `sensor.YOUR_GRID_ENERGY_CONSUMPTION_SENSOR`. See requirements above.|
 |grid_energy_production_entity (E)|string|optional, always together with D|Default the *energy view* will not be enabled.|Entity id of your sensor for energy that's produced to the grid. E.g. `sensor.YOUR_GRID_ENERGY_PRODUCTION_SENSOR`. See requirements above.|
@@ -208,6 +210,7 @@ There are many more card parameters available, but it's advised to start with th
 |solar_icon|string|optional|The icon of your own customized solar sensor(s). If not available, then `"mdi:weather-sunny"` will be used.|Icon for solar power and energy.|
 |grid_icon|string|optional|The icon of your own customized grid sensor(s) if its entity parameter is set. If not available, then `"mdi:transmission-tower"` will be used.|Icon for grid power and energy.|
 |home_icon|string|optional|The icon of your own customized home sensor(s) if its entity parameter is set. If not available, then `"mdi:home"` will be used.|Icon for home power and energy.|
+|battery_icon|string|optional|The icon of your own customized battery sensor(s) if its entity parameter is set. If not available, then `"mdi:car-battery"` will be used.|Icon for battery power and energy.|
 |power_decimals|integer|optional|`0`|Number of decimals for the power values.|
 |energy_decimals|integer|optional|`3`|Number of decimals for the energy values.|
 |money_decimals|integer|optional|`2`|Number of decimals for the money values.|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-wheel-card",
-  "version": "0.0.15",
+  "version": "0.0.16-dev",
   "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.0.15";
+const __VERSION = "0.0.16-dev";
 
 const LitElement = Object.getPrototypeOf(customElements.get("hui-view"));
 const html = LitElement.prototype.html;
@@ -205,10 +205,18 @@ class PowerWheelCard extends LitElement {
     }
   }
 
+  _calculateBatteryValue(battery_entity) {
+    const batteryStateObj = this.hass.states[battery_entity];
+    return batteryStateObj ? parseFloat(batteryStateObj.state) : undefined;
+  }
+
   _calculateHomeValue(home_entity) {
     if (this.views[this.view].twoGridSensors || this.view === 'power') {
-      return typeof this.data.solar.val !== 'undefined' && typeof this.data.grid.val !== 'undefined'
+      let home = typeof this.data.solar.val !== 'undefined' && typeof this.data.grid.val !== 'undefined'
         ? this.data.grid.val - this.data.solar.val : undefined;
+      home = this.view === 'power' && typeof this.data.battery.val !== 'undefined'
+        ? home + this.data.battery.val : home;
+      return home;
     } else {
       const homeStateObj = this.hass.states[home_entity];
       return homeStateObj ? parseFloat(homeStateObj.state) * this.config.production_is_positive : undefined;
@@ -224,6 +232,11 @@ class PowerWheelCard extends LitElement {
     }
   }
 
+  _calculateHome2BatteryValue() {
+    return typeof this.data.battery.val !== 'undefined'
+      ? this.data.battery.val : undefined;
+  }
+
   static _logConsole(message) {
     // if (this.config.debug) {
       console.info(`%cpower-wheel-card%c\n${message}`, "color: green; font-weight: bold", "");
@@ -241,6 +254,8 @@ class PowerWheelCard extends LitElement {
       grid: {},
       grid2home: {},
       home: {},
+      home2battery: {},
+      battery: {},
     };
     this.messages = [];
     this.sensors = [];
@@ -404,8 +419,10 @@ class PowerWheelCard extends LitElement {
       this.data.grid2home.val = this._calculateGrid2HomeValue(this.config.grid_power_consumption_entity, this.config.grid_power_entity);
       this.data.solar2grid.val = this._calculateSolar2GridValue(this.config.grid_power_production_entity, this.config.grid_power_entity);
       this.data.grid.val = this._calculateGridValue(this.config.grid_power_entity);
+      this.data.battery.val = this._calculateBatteryValue(this.config.battery_power_entity);
       this.data.home.val = this._calculateHomeValue();
       this.data.solar2home.val = this._calculateSolar2HomeValue();
+      this.data.home2battery.val = this._calculateHome2BatteryValue();
 
       this.data.solar = this._makePositionObject(this.data.solar.val, this.config.solar_power_entity, this.config.solar_icon,
           'mdi:weather-sunny', this.config.power_decimals);
@@ -416,6 +433,9 @@ class PowerWheelCard extends LitElement {
       this.data.solar2grid = this._makeArrowObject(this.data.solar2grid.val, this.config.grid_power_production_entity, 'mdi:arrow-bottom-left', 'mdi:arrow-top-right', this.config.power_decimals);
       this.data.solar2home = this._makeArrowObject(this.data.solar2home.val, false, 'mdi:arrow-bottom-right', 'mdi:arrow-top-left', this.config.power_decimals);
       this.data.grid2home = this._makeArrowObject(this.data.grid2home.val, this.config.grid_power_consumption_entity, 'mdi:arrow-right', 'mdi:arrow-left', this.config.power_decimals);
+      this.data.home2battery = this._makeArrowObject(this.data.home2battery.val, false, 'mdi:arrow-bottom-left', 'mdi:arrow-top-right', this.config.power_decimals);
+      this.data.battery = this._makePositionObject(this.data.battery.val, this.config.battery_power_entity, this.config.battery_icon,
+          'mdi:car-battery', this.config.power_decimals);
     }
 
     if (this.autoToggleView) {
@@ -457,6 +477,15 @@ class PowerWheelCard extends LitElement {
             ${this._cell('grid2home', this.data.grid2home, 'arrow', this.data.grid.val, this.data.home.val)}
             ${this._cell('home', this.data.home, 'position')}
           </div>
+          ${this.views[this.view].battery ? html`
+            <div class="row">
+              <div class="cell"></div>
+              ${this._cell('home2battery', this.data.home2battery, 'arrow', this.data.home.val, this.data.battery.val)}
+            </div>
+            <div class="row">
+              ${this._cell('battery', this.data.battery, 'position')}
+            </div>
+          ` : undefined}
         </div>
       </ha-card>
     `;
@@ -526,6 +555,7 @@ class PowerWheelCard extends LitElement {
       "grid_power_consumption_entity",
       "grid_power_production_entity",
       "grid_power_entity",
+      "battery_power_entity",
       "solar_energy_entity",
       "grid_energy_consumption_entity",
       "grid_energy_production_entity",
@@ -601,6 +631,7 @@ class PowerWheelCard extends LitElement {
       title: config.title_power,
       oneGridSensor: !!config.grid_power_entity,
       twoGridSensors: !!config.grid_power_consumption_entity && !!config.grid_power_production_entity,
+      battery: !!config.battery_power_entity,
     };
     this.views.power.capable = (this.views.power.oneGridSensor || this.views.power.twoGridSensors) && !!config.solar_power_entity;
     this.views.energy = {