Lovelace: Simple thermostat card

[Sumit]

Thanks for adding the buttons to the card @nervetattoo. They work great!

Is there a reason they show up when viewed from my phone but not my desktop (firefox)? It might be a browser thing.

Firefox:

Phone:

Also, if my wife turns the aircon on using the remote, I have HA setting the respective climate component as “on”. However the bottom in your lovelace card does not slide over to the “on” even though the sate is “on” See my phone screenshot above. Any suggestions? edit - got this to work with an automation!

[kurniawan77]

Hi

Love the buttons, finally!

I dont seem to understand the “modes” part i guess… i would like to remove Holiday.

but when i put this in the cofig, i get nothing at all…

Can someone explain me how to achieve this? also is it possibble to give the buttons an icon and highlight the icon and tekst and delete the square box?

[atomicpapa (Glenn Morrison)]

try:

modes:
  holiday:
    include: false

that’s what worked for me

[kurniawan77]

Thanks!

And i got the icons working too!!!

[gonzotek]

Just updated to .20.0. I like the mode buttons, and have everything tweaked the way I want, there’s just one last thing I’d like to change; but I’m not sure if it’s my config, HA version(0.88.2, preparing to update to .89.2 soon), or the card. I don’t like the look of the selected mode being ‘greyed out’/disabled.
Here’s what it looks like now(notice the greyed “Heat” button):

Here’s what I’d like it to look like(achieved this image using Chrome developer tools to remove ‘disabled’ from the mwc-button for Heat):

Possibly relevant, I have a theme I created many Home Assistant versions ago to make some text items and page elements green (I also have red and blue versions with the same variables modified, but am only really focused on green right now). I haven’t (yet) gone down the path of checking on how/if themes have changed in recent versions. So just shout at me if it’s something easy I can find in the docs :-).

  themes:
    green:
      primary-color: "#406604" 
      paper-toggle-button-checked-ink-color: "#609906" 
      paper-toggle-button-checked-button-color: "#609906" 
      paper-toggle-button-checked-bar-color: "#609906" 
      label-badge-red: "#406604" 

So is it possible for me to change something in my setup to achieve this look permanently, or would the card code need to be modified (and if so, would you please consider this a feature request @nervetattoo?) It’d be cool if the color changed relevant to the current state (red for heating, remain grey just for idle, and blue for cooling), but I’d be satisfied if it just wasn’t greyed out when selected.

[kurniawan77]

I did the same too, with Chrome dev tools. Deleted ‘disabled’ and get what to see the button…
Hmmm, i suppose we have to inject this ‘mwc-button disabled’ into the selected theme. Wonder how to do that…

[woody4165 (Woody)]

Hi @nervetattoo and thank for the latest updates.

Really nice.

I have a Netatmo thermostat, how can I match the various modes to the ones defined in Netatmo?

I saw that in Netatmo the modes are:

I’ve tried this configuration, but I don’t see any icon or text

        card:
          type: custom:simple-thermostat
          entity: climate.termostato
          name: Termostato Netatmo
          step_size: 0.5
          sensors:
            - entity: sensor.patio_temp
              name: Temp. Patio
            - entity: sensor.patio_umidita
              name: Umidità Patio
            - entity: sensor.caldaia_hr
              name: Caldaia accesa oggi
          icon:
            idle: mdi:timer-sand-empty
            heat: mdi:radiator
          hide:
            # mode: true
            temperature: false
            state: false
          modes:
            "heat":
              include: true
              name: false
              icon: mdi:hand-right
            "manual":
              include: true
              name: false
              icon: mdi:hand-right
            "off":
              icon: mdi:close-circle-outline
            "schedule":
              icon: mdi:clock-outline
            "away":
              icon: mdi:airplane
            "hg":
              icon: mdi:snowflake

Thanks

[kurniawan77]

Look a few posts above… Lovelace: Simple thermostat card

Use the modes without the double qoutes.

[woody4165 (Woody)]

Thanks @kurniawan77

I’ve done this

          modes:
            heat:
              include: false
              icon: mdi:hand-right
            manual:
              include: false
              name: false
              icon: mdi:hand-right
            off:
              include: false
              icon: mdi:close-circle-outline
            schedule:
              include: false
              icon: mdi:clock-outline
            away:
              include: false
              icon: mdi:airplane
            hg:
              include: false
              icon: mdi:snowflake

but no changes.

Maybe someone who is using a Netatmo Thermostat can do some test to have some more info.

[gonzotek]

@woody4165

climate.termostato

What do you see under attributes of climate.termostato if you look at the Developer tools>States page in Home Assistant?
E.g. Mine looks like this:

The operation_list variable is (at least for my Honeywell thermostat) the exact list of modes I needed to use in simple-thermostat. Also, fwiw, I did not use quotes, except around the ‘off’ mode.

[woody4165 (Woody)]

This is the netatmo.py that is used in Ha to manage the Netatmo Thermostat.
The states are the same that I used, heat and idle for sure.
I’ve tried also only those two, without quotes, with no success.

[nervetattoo (Raymond Julin)]

I’m not much into theming myself as I prefer to stay as vanilla as possible, but know that HA made a move towards mwc-button over paper-toggle-button in a 0.88, which is what you seem to be targeting. I’m guessing that is the reason why you can’t theme them. The card only uses the provided states of that button so its themability should be intact.

I see a lot of people not liking the fact that the current active mode is set as a disabled button so I’m on the verge of agreeing there. Visually it’s a bit weird that its disabled, but semantically it shouldn’t be possible to click on already-selected mode as that makes no sense.

[nervetattoo (Raymond Julin)]

This seems like it should work really. Are you absolutely sure its not related to browser caching? Try to clear out the cache for HA and see if that helps.

A lot of people are confused by the quotes but the rule of thumb is: no quotes on keys in yaml, the only exception is for the few keywords which the YAML parser will convert to true/false, namely “on” and “off”.

There is a reason the documentation only uses quotes around those

[woody4165 (Woody)]

Thanks for your reply

I’ve tried clearing cache (normally I use a Chrome plugin to clear it, but now I’ve done thru Settings) and tried also Opera as browser, but nothing changed.

This is the configuration I’m trying right now

      - type: custom:simple-thermostat
        entity: climate.termostato
        name: Termostato Netatmo
        step_size: 0.5
        sensors:
          - entity: sensor.patio_temp
            name: Temp. Patio
          - entity: sensor.patio_umidita
            name: Umidità Patio
          - entity: sensor.caldaia_hr
            name: Caldaia accesa oggi
        icon:
          idle: mdi:timer-sand-empty
          heat: mdi:radiator
        hide:
          mode: true                 # tried also false
          temperature: false
          state: false
        modes:
          heat:
            include: true
            icon: mdi:hand-right
          away:
            include: true
            icon: mdi:hand-right
          idle:
            include: true
            icon: mdi:hand-right

I think that most probably the Netatmo Thermostat component have just two states, idle and heat.
Some other states, like away, are not sees as state but are seen as an attribute, as in screenshot below.

In this case, simple-thermostat should show the two button idle and heat?

Thanks

[scfigg (Figg)]

I updated from an older version since I finally got around to upgrading to HassIO 89. I get this error now:

I’ve always had it work before. Thermostat is working just fine. Any suggestions?

[scfigg (Figg)]

It looks like it’s trying to make me set a range (min/max), which I don’t want. Any ideas how to disable this?

When I set it to “auto”, the 2 range temperatures appear. I don’t want that though. I don’t want to have AUTO enabled, just heat or cool. I removed “auto” from the modes, but it still wants to show the 2 temperatures.

[Trouble-51]

updated the file to latest version, but see no change no buttons. Did restart HA, any idea what causes that nothing happens to the card?

[123 (Taras)]

Either clear your browser’s cache to force it to reload the web-page or change the version number here in the Lovelace file:

resources:
  - url: /local/simple-thermostat.js?v=1   <---- Change this to force the browser to refresh the page
    type: module

You can change v=1 to anything just as long as it is different. This causes the browser to skip using whatever cached copy it may have and download a fresh one.

For more information, check out Thomas Loven’s Updating a Lovelace Plugin.

[FutureTense]

This should be added to the official repo and let you apply a class to any thermostat to switch between versions.

[tyrsen (Mikael T)]

I have a feature request of being able to use icons for states and also when Auto is on the big numbers should be smaller so the card can fit on mobile.