Examples: Card usage and customization

[Lateadapter]

Hi, first of all many thanks for that very usefull card. We own a system from E3DC and the card fits very well to our needs. Following I want share my setup and some tweaks which might be usefull for others as well. I have done following dedicated configurations:

1. adding a background picture
2. adding daily-energie-entities as secondary information
3. using the center „card“ configuration and adding money-entities for daily energy purchase and solar earnings
4. tweak for battery-SOC arrows

The card was mainly configured for mobile usage.

1. adding a background picture

The picture is a png with removed background. Precondition for card implementation is the already installed card-mod plugin by Thomas Loven: https://github.com/thomasloven/lovelace-card-mod sample code (to be added at end of YAML-code):

card_mod:
  style: |
    ha-card {
      background: url('/local/E3DC_Pro.png');
      background-size: 350px 420px;
      background-position-x: center;
      background-position-y: -50px;
      background-repeat: no-repeat;
      background-color: var(--card-background-color);
      }

After adjusting size and position the two last lines are required to avoid multiple picture implementation (if the original picture size not exactly fits the space) and to bring back the disappeared card-background-color. Actual it could be used any color, however adding the global variable will adjust the view automatically for dark and light theme. Following screenshot shows the result without mentioned two lines (missing dark-gray card-color and repeated picture part):

2. adding daily-energie-entities as secondary information

All the data from E3DC System I collect via Mod-Bus within a Node-Red integration. But all entities only supply power numbers (W), which are used in the card as primary data showing the energy flow. In order to calculate the real consumed resp. produced energy I use HA helpers:

• helper „Riemann Integration“ for calculating the total energy of an entity please note: the control electronics of the E3DC system sometime generates some power spikes over few seconds, which are resulting in huge energy numbers after „Riemann Integration“ based on „kWh“; workaround: setting Mod-Bus polling time on small number (i.e. 2 sec), doing „Riemann Integration“ on base of „kWs“, building a new entity containing the final calculated number in kWh (in my case I also use Node-Red)
• helper „consumtion counter“ to get the „daily energy“ to be used as „secondary info“ in the card + „replace name“
• for few consumers I realized that the shown precision is not controlled by the „precision parameter“ of the power-distribution- card. Although in Home Assistant 2023.3.1 was introduced the possibility to overwrite the precision of each entity, it doesn’t work with „consumtion counter“ and this card here. In order to overcome that issue I defined for required cases additional helper of type „condition combination of sensors“ and did use as input just the only one „consumtion counter“ with output median and choosen precision.

3. center „card“ configuration

For money-entities again I used Node-Red for calculation and sensor-definition. Via the above mentioned card-mod plugin it’s possible to place and adjust two entities within the existing space. sample code:

center:
  type: card
  content:
    type: grid
    square: false
    columns: 1
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.tageskosten_strom
        name: Bezug
        fill_container: false
        icon: mdi:currency-eur
        icon_color: red
        secondary_info: name
        primary_info: state
        layout: vertical
        card_mod:
          style: |
            ha-card {
              position: absolute;
                top: 50%;
                left: 43%;
                }
      - type: custom:mushroom-entity-card
        entity: sensor.tagesertrag_solarstrom
        icon: mdi:currency-eur
        icon_color: amber
        name: Ertrag
        secondary_info: name
        primary_info: state
        layout: vertical
        card_mod:
          style: |
            ha-card {
              position: absolute;
                top: 70%;
                left: 43%;
                }

4. tweak for battery-SOC arrows

For showing the battery-SOC number originally I switched off the „arrow“ functionality. However in the view on smartphone that was resulting in vertical misalignment of shown entities:

That behavior differs from PC-view, where entities and arrows are placed side by side (as reference below; but here you can also see the graphical mismatch of my setup in the center what actual I don’t care)

What I did is, that I defined the color of arrows like the background color „var(--card-background-color)“ and reactivated the arrows. Now the arrows are there requiring there space, however not visible.

few suggestions

Based on current experiences I would have following suggestions for further card development:

• include precision control for secondary info
• enlarge the middle color threshold to a range (i.e. for defining three different colors for battery-SOC)
• possibility to hide (or recolor) the number of primary entity (originally my idea was to write the SOC-percentage as secondary info instead of the name and nothing at the place of arrows, but that is not possible; the hiding of the number itself would be possible by choosing an alternative attribute, but than the color threshold doesn’t work anymore)

Thanks and best regards, Steffen

[JonahKr]

Thanks alot for your lengthy examples. I really like the way you used the card. 👍

I will close this issue and pin it, and in return open a new issue with your requests, to split things up abit.