Thanks for all the feedback and kind words on this card folks, its really motivating to read! I’m not overly active on this forum so I’m grateful when you step in and help out your fellow HA hackers 
I know there have been a lot of thoughts around how modes should work and be possible to configure/tweak so I wanted to ask if anyone have concrete input on the changes to this handling that I’m planning. Please read the writeup in the github issue and ideally comment there if you have an account:
Hi, maybe you can help a newbie, I have my HA running in a virtual box, all the config files are at /config/ and the custom controls should go at /config/custom_components so created a subfolder there and copied the javascript file and a dummy init.py file too
I can’t find the right path to put in the configuration.yaml
tried many ways, all failed with error: Configuration invalid CHECK CONFIG Component not found: resources
this is what I entered:
resources:
- url: /config/custom_components/termocustom/simple-thermostat.js
type: module
Thanks
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:
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!
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
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.
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…
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
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:
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 
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
