Lovelace: Simple thermostat card

Lovelace custom cards don’t belong in the custom components folder. They need to be accessible by the web-based frontend, so they go into the {config dir}/www folder (or a subdirectory of it). See the manual installation directions here: https://github.com/nervetattoo/simple-thermostat#installation-manual

Lovelace custom cards are different than Home Assistant Custom Components. Conceptually, Lovelace content is the frontend (like a content you see on a webpage) and components are the backend (database, server, etc.).

I’m using this card to control my heated floors. The temperature that’s displayed is showing as “70.0” instead of just “70”. I’d like to get rid of the unnecessary “.0”. Is it possible to format the number to just a whole number?

Not at the moment. I live in a metric world so a decimal number always made sense to me. I realise now that for fahrenheit you might be better off without it. I guess if step size gets set to 1 we can opt in for pure integer formatting. Will keep that in mind, or you can add an issue at github if you have an account.

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:
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!

1 Like

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?

try:

modes:
  holiday:
    include: false

that’s what worked for me

1 Like

Thanks!

And i got the icons working too!!!

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):
01%20AM

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):
31%20AM

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.

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…

image

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

46

Thanks

Look a few posts above… Lovelace: Simple thermostat card

Use the modes without the double qoutes.

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.

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.

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.

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.

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 :wink:

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.

54

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

Thanks

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

temp1

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

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.

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?