Samsung EcoBubble - Display energy by month and current state in "one" card

Olivier1974 · August 24, 2021, 4:29pm

Hello smart people,

I’ve a ~~stupid~~ samsung washing machine, connected through the SmartThings integrations.
So far, so good.

The integration created 9 entities, out of which, none are realy usable, let me explain:

My washing machine’s name is “Lave-linge” so the entities are

switch.lave_linge (a switch)
sensor.lave_linge_deltaenergy (fluctuating between 0 and 0.1KWh)
sensor.lave_linge_energy (always growing value)
sensor.lave_linge_energysaved (always 0)
sensor.lave_linge_power (always 0)
sensor.lave_linge_powerenergy (always 0)

sensor.lave_linge_washer_completion_time
sensor.lave_linge_washer_job_state
sensor.lave_linge_washer_machine_state

For the last 3, I had to create templates as it is showing irrelevant information when the machine is turned off (see Template, return state as datetime)

But now that HA is Energy-Oriented, I’d like to see like a graph of my consumption by day/week/month

So I want to rely on sensor.lave_linge_energy

sensor.lave_linge_energy         19.1         state_class: measurement
                                              last_reset: 1970-01-01T00:00:00+00:00
                                              unit_of_measurement: kWh 
                                              friendly_name: Lave-linge energy 
                                              device_class: energy

It was 11.1 end of Jully, it will be maybe 23.7 end of August.
What I’d like is a graph like bar/histogram with KWh as Y-axe and Month as X-axe with 11.1KWh for Jully, 12.6KWh for August ands so on.

Is this something that can be done?

Please help.

P.S.: Note that sensor.lave_linge_energy is increased by sensor.lave_linge_deltaenergy somehow but don’t know how (it is computed by Samsung)

Olivier1974 · August 24, 2021, 6:06pm

What sensor.lave_linge_deltaenergy looks like

And sensor.lave_linge_energy

Olivier1974 · August 24, 2021, 6:34pm

One step at a time, I did a utility meter configuration like so

utility_meter:
  lave_linge_energy_monthly:
    source: sensor.lave_linge_energy
    cycle: monthly

Which is good but how do I display it nicely like on the statistic-graph card but by month ?

Olivier1974 · August 26, 2021, 1:27pm

In python, I wrote a piece of code that generates the graphic I want, based on the statistics table of HA.
I’ve setup a camera on local file and it is working but it is not interractive like I would like.

Olivier1974 · September 8, 2021, 6:02pm

I’m still pleased by my graphic

But also still sad of the lack of an integrated solution.

Olivier1974 · October 28, 2021, 8:26am

I rewrote everything using D3.js, it is close to a normal card, with tooltips and stuffs like that, I’d be happy to give my code to whoever feels able to convert it to a real card.

Here is the result so far:

What I see as parameters for the card:

title (obviously)
entity_id (the statistic to graph)
background_color
background_image
some other entities in an yaml array, to display as 3 per row (glance card style)
entities_position: top or bottom

Who wants to do it for me (us)? Nobody?

joeu1998 · October 14, 2022, 9:26pm

This looks really nice man. It’s a shame no one more tech-minded has picked it up, this would be a really nice addition to a lot of dashboards, I’m sure! I’d be curious to know how you got the bar chart up and running, though.

Olivier1974 · October 15, 2022, 10:08am

Thx, I’m a developer but not into Python and HA (yet).
Maybe one day I’ll do it myself.
For now, it is kind of painfull
I’ve a D3.js that takes care of every graphical aspect and calls a PHP that get the data from the HA DB.

Everything is hosted where the HA DB is (I mean the webserver I need for that but it could be dramatically be simplified by using python and the HA primitives directly)

And if you want to see how it is now, more than a year after, it is like so

That’s why it is important to highlight the current month because everything after is from last year.

Olivier1974 · November 18, 2022, 8:54am

I did it using the statistics-graph card (and a bit of card-mod to remove the legend)

  - chart_type: bar
    period: month
    days_to_show: 365
    type: statistics-graph
    entities:
      - entity: sensor.lave_linge_energy_monthly
        name: ' '
    stat_types:
      - state
    card_mod:
      style:
        .: |
          ha-card {
            border: none;
          }
        .content statistics-chart $ ha-chart-base $: |
          .chartLegend {
            display: none;
          }

But I lost functionalities that I liked in the battle:

highlight of current month (darker and last but not quite the same)
figures at the top of the bars
Nice tooltip (the existing one is not clear)

By the way, if someone knows how to change the current month color using card-mod, I’ll be very grateful.

Ildar_Gabdullin · February 20, 2023, 6:43pm

It’s a big mistake - waiting for a card-mod solution in “non-card-mod” threads )))

Olivier1974 · February 20, 2023, 6:59pm

I know but my first intention was to do it without card-mod. Now that I gave up on my solution as well as the help of someone to implement it, I’m using that standard card and tried card-mod to get closer to my liking.

Olivier1974 · February 25, 2023, 12:12pm

I want to break down what I did to get to the last step (mostly in French but you should get to the point).

Prerequistes: SmarThings integration up and running

First, create some utility meters

utility_meter:
  lave_linge_energy_monthly:
    source: sensor.lave_linge_energy
    cycle: monthly
  lave_linge_energy_daily:
    source: sensor.lave_linge_energy
    cycle: daily
  lave_linge_energy_weekly:
    source: sensor.lave_linge_energy
    cycle: weekly

Second, create some templates to display the current status, time and more (I’m aware that it is old style, I was young, please forgive me, one day I’ll come back to those and simplify)

sensor:
  - platform: template
    sensors:
      samsung_prog_state:
        friendly_name: 'Etape du programme'
        value_template: >-
          {% set statuses = { 'weightSensing':'Détection du poids', 'wash':'Lavage', 'rinse':'Rinçage', 'spin':'Essorage', 'finish':'Terminé' } %}
          {% set status = states('sensor.lave_linge_washer_job_state') %}
          {{ statuses[status] if status in statuses.keys() }}
        availability_template: >-
          {{ iif(is_state('sensor.lave_linge_washer_job_state', 'none') or is_state('sensor.lave_linge_washer_job_state', 'unavailable'), 'false', 'true') }}
      samsung_machine_state:
        friendly_name: 'Machine à laver'
        value_template: >-
          {% if is_state('sensor.lave_linge_washer_machine_state', 'run') %}
            Marche
          {% elif is_state('sensor.lave_linge_washer_machine_state', 'pause') %}
            Pause
          {% else %}
            Arrêt
          {% endif %}
        icon_template: >-
          {% if is_state('sensor.lave_linge_washer_machine_state', 'run') %}
            mdi:power-plug-outline
          {% elif is_state('sensor.lave_linge_washer_machine_state', 'pause') %}
            mdi:pause
          {% else %}
            mdi:power-plug-off-outline
          {% endif %}
      samsung_washing_time:
        friendly_name: 'Fin du programme'
        device_class: timestamp
        value_template: >-
          {{ states('sensor.lave_linge_washer_completion_time') }}
        availability_template: >-
          {{ iif(is_state('sensor.lave_linge_washer_job_state', 'none') or is_state('sensor.lave_linge_washer_job_state', 'unavailable'),'false','true') }}

Finally, everything is there to do the card:
It is a vertical-stack-in-card, a custom card that is available in HACS

To ease my work, I always start with a vertical-stack as it is UI compatible:

Glance card

type: glance
title: Samsung EcoBubble
entities:
  - entity: sensor.samsung_machine_state
    name: État
  - entity: sensor.samsung_washing_time
    icon: mdi:clock-outline
    name: Fin estimée
  - entity: sensor.samsung_prog_state
    icon: mdi:debug-step-over
    name: Étape

statistics-graph

chart_type: bar
period: month
days_to_show: 365
type: statistics-graph
entities:
  - entity: sensor.lave_linge_energy_monthly
    name: ' '
stat_types:
  - state

If, like me, you dont like the legend of the statistics-graph card, use card-mod to remove this part (you can find the full card above)

card_mod:
  style:
    .content statistics-chart $ ha-chart-base $: |
      .chartLegend {
        display: none;
      }

Another glance for the energy summary

type: glance
entities:
  - entity: sensor.lave_linge_energy_daily
    name: Aujourd'hui
    icon: mdi:calendar-today
  - entity: sensor.lave_linge_energy_weekly
    name: Cette semaine
    icon: mdi:calendar-week
  - entity: sensor.lave_linge_energy_monthly
    name: Ce mois-ci
    icon: mdi:calendar-month

Then, to convert the vertical-stack into the vertical-stack-in-card, edit the card in yaml and replace type: vertical-stack with type: custom:vertical-stack-in-card