Sense Solar Energy Power Wheel

If you have the Sense Energy monitor with solar, check out this custom Power Wheel:
sense_button_card

To create this yourself:

  1. Create a template sensor:
  - platform: template
    sensors:
      grid_power_production:
        friendly_name: 'Grid power production'
        unit_of_measurement: 'W'
        value_template: >-
          {{ (states("sensor.energy_usage") | float | int) + (states("sensor.energy_production") | float | int | abs) }}
  1. Install button card through HACS
  2. Add this messy code to your Lovelace code:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: "custom:button-card"
          color_type: label-card
          name: Sense
          styles:
            card:
              - font-size: 35px
              - box-shadow: none
              - background: none
              - padding-top: 30%
        - type: "custom:button-card"
          entity: sensor.energy_usage
          color_type: icon
          show_name: true
          name: Home
          size: 75%
          show_state: true
          show_icon: true
          icon: mdi:home
          styles:
            card:
              - font-size: 14px
              - box-shadow: none
              - background: none
            icon:
              - color: 'rgb(220,69,121)'
        - type: "custom:button-card"
          color_type: label-card
          name: >
            [[[
              return `<table><tr><td>Daily kWh</td></tr>
                    <tr><td>${states['sensor.daily_production'].state} / ${states['sensor.daily_usage'].state}</td></tr>
                    <tr><td>&nbsp;</td></tr>
                    <tr><td>Weekly kWh</td></tr>
                    <tr><td>${states['sensor.weekly_production'].state} / ${states['sensor.weekly_usage'].state}</td></tr>
                    </table>`
            ]]]
          styles:
            card:
              - font-size: 16px
              - margin-top: 10%
              - box-shadow: none
              - background: none
    - type: horizontal-stack
      cards:
        - type: "custom:button-card"
          color_type: blank-card
        - type: "custom:button-card"
          color_type: blank-card
        - type: "custom:button-card"
          entity: sensor.grid_power_production
          color_type: icon
          size: 75%
          show_name: false
          show_state: false
          show_icon: true
          icon: mdi:arrow-top-right-thick
          styles:
            card:
              - box-shadow: none
              - background: none
            icon:
              - color: 'rgb(220,69,121)'
              - animation: blink 2s ease infinite
        - type: "custom:button-card"
          color_type: blank-card
        - type: "custom:button-card"
          color_type: blank-card
        - type: "custom:button-card"
          color_type: blank-card
        - type: "custom:button-card"
          color_type: blank-card                                                
        - type: "custom:button-card"
          color_type: blank-card
    - type: horizontal-stack
      cards:
        - type: "custom:button-card"
          entity: sensor.grid_power_production
          color_type: icon
          size: 55%                
          show_name: true
          name: From Grid
          show_state: true
          show_icon: true
          icon: mdi:transmission-tower
          styles:
            card:
              - font-size: 14px                  
              - box-shadow: none
              - background: none
            icon:
              - color: 'rgb(220,69,121)'                    
        - type: "custom:button-card"
          entity: sensor.grid_power_production
          color_type: icon
          show_name: false
          show_state: false
          show_icon: true
          icon: mdi:arrow-left-thick
          aspect_ratio: 2.5/.8
          styles:
            card:
              - top: 60%
              - box-shadow: none
              - background: none
            icon:
              - color: 'rgb(220,69,121)'
              - animation: blink 2s ease infinite
        - type: "custom:button-card"
          entity: sensor.energy_production
          color_type: icon
          size: 60%
          show_name: true
          name: Solar
          show_state: true
          show_icon: true
          icon: mdi:white-balance-sunny
          styles:
            card:
              - font-size: 14px                  
              - box-shadow: none
              - background: none
            icon:
              - color: 'rgb(220,69,121)'
  1. Replace the entity names (ex. sensor.xyz) appropriately as yours may differ

TIP:
You can (and I will for my personal code) template the Lovelace above with the decluttering card.

NOTE:
Yes I am aware of the Lovelace Power Wheel Card. This method is easier and more closely mimics the Power Wheel in the Sense app (with additional useful data like daily and weekly production/consumption).

ENJOY!

4 Likes

Iā€™m probably missing something, but your math looks like youā€™re adding your total consumption to your solar production. Should that be a ā€˜minusā€™ sign (subtracting solar production from your total consumption to give you how much youā€™re pulling from the grid)?

Also, why the absolute value? Donā€™t you want to know whether youā€™re over-producing and exporting to the grid (negative grid production) vs under-producing and importing from the grid (positive grid production)?

Iā€™m merely copying what the Sense iPhone app does, which seems to be adding the absolute value.
Also I really donā€™t monitor my solar - so this is more for aesthetics.

1 Like

Cool, if it works for you, thatā€™s what matters.

Fyi, I got the ā€˜originalā€™ power wheel working using a variation of your math. See Lovelace: Power wheel card for my sensor template and my Lovelace config.

Looks awesome - but I get a ā€œNo card type configuredā€ error with that card config. I have button-card working elsewhere just fine - any ideas?

At night when I am not producing solar energy i would like the arrow to point from the grid to solar instead of from solar to the grid, is there a way to do this?

Actually I figured this out:

Hereā€™s what the card looks like both getting power from the grid and sending power to the grid.
Screen Shot 2021-05-26 at 10.12.39 AM

Screen Shot 2021-05-26 at 9.10.05 AM

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: label-card
        name: ''
        styles:
          card:
            - font-size: 35px
            - box-shadow: none
            - background: none
            - padding-top: 30%
            - color: 'rgb(255,255,255)'
      - type: 'custom:button-card'
        entity: sensor.energy_usage
        color_type: icon
        show_name: true
        name: Home
        size: 75%
        show_state: true
        state_display: |
          [[[
            var retVal = Math.abs(states['sensor.energy_usage'].state);
            var retUnit = 'W'
            if (retVal > 1000) {
              retVal = retVal / 1000;
              retUnit = 'kW';
            }
            return  retVal + ' ' + retUnit
          ]]]
        show_icon: true
        icon: 'mdi:home'
        styles:
          card:
            - font-size: 14px
            - box-shadow: none
            - background: none
          icon:
            - color: 'rgb(10,255,84)'
      - type: 'custom:button-card'
        color_type: label-card
        name: |
          [[[
            return `<table><tr><td>Daily kWh</td></tr>
                  <tr><td>${states['sensor.daily_production'].state} / ${states['sensor.daily_usage'].state}</td></tr>
                  <tr><td>&nbsp;</td></tr>
                  <tr><td>Weekly kWh</td></tr>
                  <tr><td>${states['sensor.weekly_production'].state} / ${states['sensor.weekly_usage'].state}</td></tr>
                  </table>`
          ]]]
        styles:
          card:
            - color: 'rgb(255,255,255)'
            - font-size: 16px
            - margin-top: 10%
            - box-shadow: none
            - background: none
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        entity: sensor.grid_power_production
        color_type: icon
        size: 75%
        show_name: false
        show_state: false
        show_icon: true
        icon: |
          [[[
            if (states['sensor.grid_power_production'].state > 0) return 'mdi:arrow-top-right-thick';
          ]]]
        styles:
          card:
            - box-shadow: none
            - background: none
          icon:
            - color: 'rgb(10,255,84)'
            - animation: blink 1s ease infinite
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        size: 75%
        show_name: false
        show_state: false
        show_icon: true
        icon: |
          [[[
            if (states['sensor.energy_production'].state > 0) return 'mdi:arrow-top-left-thick';
            if (states['sensor.energy_production'].state > states['sensor.energy_usage'].state) return '';
            return ''
          ]]]
        styles:
          card:
            - box-shadow: none
            - background: none
          icon:
            - color: 'rgb(10,255,84)'
            - animation: blink 1s ease infinite
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        color_type: blank-card
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: sensor.grid_power_production
        color_type: icon
        size: 55%
        show_name: true
        name: |
          [[[
            if (states['sensor.grid_power_production'].state < 0) return 'To Grid<br/>';
            return 'From Grid'
          ]]]
        show_state: true
        state_display: |
          [[[
            var retVal = Math.abs(states['sensor.grid_power_production'].state);
            var retUnit = 'W'
            if (retVal > 1000) {
              retVal = retVal / 1000;
              retUnit = 'kW';
            }
            return  retVal + ' ' + retUnit
          ]]]
        show_icon: true
        icon: 'mdi:transmission-tower'
        styles:
          card:
            - font-size: 14px
            - box-shadow: none
            - background: none
          icon:
            - color: 'rgb(10,255,84)'
      - type: 'custom:button-card'
        entity: sensor.energy_production
        color_type: icon
        show_name: false
        show_state: false
        show_icon: true
        icon: |
          [[[
            if (states['sensor.grid_power_production'].state < 0) return 'mdi:arrow-left-thick';
            return ''
          ]]]
        aspect_ratio: 2.5/.8
        styles:
          card:
            - top: 60%
            - box-shadow: none
            - background: none
          icon:
            - color: 'rgb(10,255,84)'
            - animation: blink 1s ease infinite
      - type: 'custom:button-card'
        entity: sensor.energy_production
        color_type: icon
        size: 60%
        show_name: true
        name: Solar
        show_state: true
        state_display: |
          [[[
            var retVal = Math.abs(states['sensor.energy_production'].state);
            var retUnit = 'W'
            if (retVal > 1000) {
              retVal = retVal / 1000;
              retUnit = 'kW';
            }
            return  retVal + ' ' + retUnit
          ]]]
        show_icon: true
        icon: 'mdi:white-balance-sunny'
        styles:
          card:
            - font-size: 14px
            - box-shadow: none
            - background: none
          icon:
            - color: 'rgb(10,255,84)'
1 Like

Iā€™ve also modified the sensor logic:

- platform: template
  sensors:
    grid_power_production:
        friendly_name: 'Grid power production'
        unit_of_measurement: 'W'
        value_template: >-
            {% if ((states("sensor.energy_production") | float) >= 0) %}
                {{ (states("sensor.energy_usage") | float | int ) - (states("sensor.energy_production") | float | int ) }}
            {% else %}
                {{ (states("sensor.energy_usage") | float | int ) + (states("sensor.energy_production") | float | int | abs ) }}
            {% endif %}
1 Like