Lovelace: Power wheel card

Hi @Mariusthvdb

Awesome, that card updater and the tracker card. I will look into that. Great suggestion. Didn’t know that this was around.

For the colors I want to have a first time right solution when steering it by card parameters. That will take some time figuring out the right colors, what to color and behavior. But your suggestion to rely also on the theme customization is fine. Will look into that. (And I learned something about the dynamic icons. Thx!)

cool! looking forward to that, and if you need some further customization assistance, please let me know!

might I suggest a change in your example configuration for the template sensors:

you could change this:

sensor:
  - platform: template
    sensors:
      solar_power:
        friendly_name: 'Solar power production'
        unit_of_measurement: 'W'
        value_template: '{{ states.sensor.youless.attributes.pwr }}'
      grid_power:
        friendly_name: 'Grid power consumption'
        unit_of_measurement: 'W'
        value_template: '{{ (1000 * (states.sensor.power_consumption.state | float - states.sensor.power_production.state | float)) | int }}'

in to:

sensor:
  - platform: template
    sensors:
      solar_power:
        friendly_name: 'Solar power production'
        unit_of_measurement: 'W'
        value_template: >
          {{ state_attr('sensor.youless','pwr' }}
      grid_power:
        friendly_name: 'Grid power consumption'
        unit_of_measurement: 'W'
        value_template: >
          {{ (1000 * (states('sensor.power_consumption') | float -
                      states.('sensor.power_production') | float)) | int }}

using multi-line notation > makes it more readable and takes away the sometimes confusing use of quotes. The states() notation it is safer to use and prevents errors in case the state hasn’t been initialized yet.
Since I don’t have these sensors, I can’t test them, but you might be able to simplify the float and int filters, not are if they are necessary this way?

1 Like

Nice job! I can now choose the number of decimals, and its working as expected.

1 Like

0.0.3 has been released

New features

  • Added color_power_icons as optional boolean card parameter to color the power icons or not (=default). Yellow for consuming, green for producing.
    With the new optional card parameters consuming_color and producing_color you can choose your own colors.
  • Click on the power icons to open the more-info modals of your sensors.
  • Support for custom_updater custom component to check for new releases via the custom tracker-card.

Improvements

  • Performance. Moved some code to run it only after config changes.
  • Better syntax for ‘Example requirements configuration’ in readme.
  • Icon for home power can also be set via customize: sensor settings now.

A note: there were some contradictory feature requests for coloring the icons and/or arrows. I chose to only color the icons in the end depending on if there is a consuming or producing situation at the moment. It’s there for all three icons. (And, sorry @Mariusthvdb, it’s not checking any color customization that’s already set up by making use of another custom component, the custom ui thing. But on the other hand, you can choose your own colors for consuming and producing if you want.)

Start by setting the color_power_icons card parameter to true.

1 Like

I don’t see the card showing up in the custom_updater. What do I have to change for that? For some of my cards I had to add a card_url or a component_url, but I don’t see any instructions for that.

I have this in configuration.yaml, see the card_urls entry you have to add:

# Custom updater for the tracker card
custom_updater:
  track:
    - cards
    - components
  card_urls:
    - https://raw.githubusercontent.com/gurbyz/custom-cards-lovelace/master/custom_updater.json

and this in ui-lovelace.yaml, it’s the second tracker that you should add:

      - type: "custom:tracker-card"
        title: Custom element updates
        trackers:
          - sensor.custom_card_tracker
          - sensor.power_wheel_tracker
          - sensor.custom_component_tracker

Hope this helps.

Yes, Thanks. Works perfectly. I think it would be good to add this to the first post and github.

1 Like

HI Gerben,

Seems I’ve run into issues with the latest…
The icons don’t colorize, but that 's not the main issue. All of a sudden (and since I upgraded to 0.84.1, so that might be it also) I see this in the inspector:

could that be caused by your card?

also, why is your card a module, and not js? could that cause any irregularities in the Lovelace setup?

Hi Marius,

My HA is also on 0.84.1 and I don’t see the error. Maybe you could temporarily switch off the power-wheel-card to see if the error stays there?

It’s a module because (at least I think it’s a module because) it imports stuff and not just extends the HTMLElement. I import the LitElement first and then extend it. See this example (look for ‘advanced example’) which I used as a base.

FYI an update has broke the card:

Error:

http://<IP>:8123/local/custom_ui/power-wheel-card.js:1:8 Uncaught SyntaxError: Unexpected token {

I had this error before when I used type of js rather than module when importing into the ui-lovelace.yaml. You sure that update is what broke it?

My Resources:

resources:
  - type: js
    url: /local/lovelace/monster-card/monster-card.js?v=0.2.3
  - type: js
    url: /local/lovelace/tracker-card/tracker-card.js?v=0.1.5
  - type: js
    url: /local/lovelace/upcoming-media-card/upcoming-media-card.js?v=0.3.3
  - type: module
    url: /local/lovelace/power-wheel-card/power-wheel-card.js?v=0.0.3

Very sure:

resources:
  - url: /local/custom_ui/dark-sky-weather-card.js
    type: js
  - url: /local/custom_ui/weather-card.js
    type: js
  - url: /local/custom_ui/power-wheel-card.js
    type: module
  - url: /local/custom_ui/bg-card.js
    type: module

Looks like there was a CORS error in the console about the request being blocked. Tried to investigate and it started working again… ¯\_(ツ)_/¯

1 Like

Version 0.0.4 is released

There are some breaking changes, but they are very easy to fix. See changes below to see what card parameters you have to rename if you use them.

Major feature in this release is the new energy view where you can show values of your energy sensors (in kWh). The view you had till now is known as the power view (in W). See the updated readme file or the first post in this topic.

E.g. there is this in the readme:

Decide what kind of energy sensors you want to use. You could use your smart meter counters directly, but using self made sensors for e.g. energy consumed or produced since last midnight could provide more meaningful information on your power-wheel-card.
Especially since a future release will be able to convert the values into costs and savings. Then you would be able to see the actual energy costs/savings today.

New features

  • New optional card parameters solor_energy_entity, grid_energy_entity and home_energy_entity to feed the new energy view of the wheel.
    If you want to use the energy view the first two are required.
    The third one for home energy will be calculated if omitted.
  • A button to toggle between power view and the new energy view. The button is visible only when the energy view is available.
  • A card parameter initial_view to set the initial view to power view or energy view. Valid values are "power" (default) and "energy".
  • A card parameter energy_decimals to set the number of decimals used in the energy view.

Improvements

  • Rewrite of the code.
  • Preparations in the code for showing values near arrows in a future release.
  • A slightly better positioning of the icons.
  • BREAKING. Renamed card parameter decimals to power_decimals.
  • BREAKING. Renamed card parameter solar_power_icon to solar_icon.
  • BREAKING. Renamed card parameter grid_power_icon to grid_icon.
  • BREAKING. Renamed card parameter home_power_icon to home_icon.
  • BREAKING. Renamed card parameter color_power_icons to color_icons.

Do you want to prepare for future releases? I’ll probably split all grid sensors in 2 sensors (one for consuming and one for producing). This will be a BREAKING change again. This is needed to be able to show values near the arrows and color the arrows in energy view.

Note that the toggle button responds as quick as the next update cycle of lovelace happens. This could take a few seconds.

1 Like

must be something off, the icons stopped coloring, and no recycle button top right to switch between views…

33

using:

  - type: 'custom:power-wheel-card'
    title: 'Power distribution'
    solar_power_entity: sensor.zp_actuele_opbrengst
    grid_power_entity: sensor.netto_verbruik
    color_icons: true
    power_decimals: 2

The toggle button isn’t there if you don’t have sensor id’s for the energy view. If you supply a solar_energy_entity and a grid_energy_entity it should enable the extra view and the button.

For the coloring of icons, I can’t reproduce the issue. Could you try reverting to the old parameter name color_power_icons: true and see what happens?

EDIT: I’m pretty your you are experiencing a caching problem. Looking at the position of the bottom arrow, I know that your browser is still using the old javascript file. Compare your image with my images and note the position of the bottom arrow between the other icons. It should be a bit higher. Please increase the number in ?v=xxxx in your ui-lovelace.yaml and you should be fine.

thanks for your reply.

I am not sure what you want for these energy sensors. Are they simply calculated kWh sensors from the watt sensors, or are you looking for sensors that calculate the difference between daystart and now()?

I have these sensors:
40

these are actual sensors for current use/production and not cumulative for the day. Directly from my smart meter.

If I create 2 templates adding the 3 import (consuming) and 3 exports (producing) would that be the correct sensors for your power wheel?

I can also use daystart sensors, so maybe a template calculating daystart - current would be the one I am looking for?

29

and what about solar-energy? Is always 0 a daystart … :wink:

but could again calculate the difference between daystart and now():

53 ?

about the coloring: a restart did the trick, I had refreshed window, cleared cache et all a few times, and still nothing changed. Now they are colored nicely.

1 Like

I don’t think so, because you’ll still end up with something that’s measured in kW, meaning that it’s power, not energy (kWh). You have to use something that’s measured in kWh or Wh. Does your smart meter give you the actual counter values?

EDIT: I saw your EDIT and the last image. There are some good values in kWh which you could use. If you make a new sensor that calculates e.g. ZP Export minus ZP Export Daystart, you’ll end up with the energy that your solar panels produced since midnight. That’s nice input for the energy view, but you still have to find the equivalent for grid energy.

EDIT2:

a restart did the trick, I had refreshed window, cleared cache et all a few times, and still nothing changed.

Don’t know if you did, but next time please try first the ?v=xxxx number increase trick. That should save you cleaning caches, reloading and/or restarting. :wink: After the number increase it’s clicking the Refresh option in the upper right menu only. You let the browser think it’s another file, so it reloads it from server.

was just finishing this one:

  value_template: >
    {{ (states('sensor.zp_export')|int)
     - (states('sensor.zp_export_daystart')|int) }}

these are in kWh i think, its me that created the incorrect unit i fear…

and yes, I get the actual counters also:

even think I have most of these in daystart version also. If you point me to the sensors you need for the wheel, ill create them :wink:

btw, I can also have a direct rest sensor to the solar panels and read the power of last day, last month last year etc. Id rather not through, since these rest sensors burden the system. ( and frustrate my Hue Hub out of the system constantly …)
SO creating a template sensor might be best here.

(I think you chose the right units for those L1/L2/L3 things. Those should be in kW.)

You could use the value of Teller1 + Teller2 - Teller1terug - Teller2terug as sensor for grid_energy. If you also make a daystart for this, you could make the same sensor input for grid as you could make for solar.

Please use float instead of int when calculating with energy (kWh). Then you are more precise.