Lovelace: Simple thermostat card

Share your Projects! Dashboards & Frontend
1

Driven by a want for a simpler thermostat card in terms of interactions and usability, that would also be more flexible and make information clearer I’ve built this card for Lovelace, simple-thermostat.

I need to give a lot of credit to @magnus.overli as a faithful tester and having at least 50% of the needs that we’ve tried to cover with this card :slight_smile:

59
59774×450 10.9 KB

As you can see the main difference is that it replaces the round dial with simple buttons and it presents relevant entity attributes as well as custom sensor values in a simple-to-read table format.

With configuration you can hide all of the information pairs as well as add custom sensor values (like humidity) that is relevant. Examples of sensor values can be humidity, outdoor temperature, energy usage today and so on.

Hope someone else finds value in the card, and please add issues at Github if you have ideas or bug reports. Its wildly untested in terms of different climate devices so I’ve no idea yet how it performs across all possible setups – I can’t wait for feedback on that!

61 Likes
2

Thanks! Using it with this custom component and after adding the custom states to const STATE_ICONS in your custom card this is working great :smiley:

Screenshot_6

3

You should be able to just pass custom state icons in the configuration, no need to modify the source code:

icon:
  idle: mdi:some-icon
  weird_state: mdi:weird-icon
  ...and so on
1 Like
4

You’re absolutely right. I got a false message instead of the icon, which made me dive into the code instead of the manual :smirk:

5

awesome card! thanks for sharing.
have one propose - can you make config for translations (see screenshot)?

termo_card

6

Looks great, thanks!

7

Nice, I like it! Thanks!

8

looks like this breaks when my Nest goes into a mode with target temp high and target temp low, instead of just temperature (for me that’s Eco and Auto modes).

maybe need a check to see if climate.entity.temperature == null, and if so display two setpoint controls.

9

Yeah, there is an issue at Github for it as well. I haven’t had the time to look into it and I don’t have any thermostats like that myself so wasn’t even aware of the feature. I hope to be able to look into it early next week

10

Hi mate, you can change this on line 262 and 264 :slight_smile: in the file simple-thermostat.js

image
image852×56 3.61 KB

*already changed it to: Temperatuur and Status

Great thermostat btw!! TNX!

2 Likes
11

For me i also get NULL if the thermostat is in the off state, I got ecobee, but i dont think it matters since other thermostat cards work fine. I assume it should say “off”. Also would it be possible to show an icon in the corner depending what state it is in so from far away you can just glance at it and see that it’s heating etc. Similar to how the native card works.

12

i like this card a lot! however, it seems like it does not work within fully kiosk browser - anyone else noticed that issue?

13

Yeah if you have Fire HD tablet and Fully kiosk it won’t work. Their web view is outdated and does not support the “module” type. Changing it to js might make it work (if he compiled it right)

14

seems like he didn´t…

15

This looks really good, simple & clean.
Nice one!

16

I’ve got a Radiothermostat CT-80 thermostat connected using zwave with a parent entity ID like: zwave.entity_id

This automatically produces four climate entities, like:

climate.hallway_thermostat_heating_normal
climate.hallway_thermostat_heating_econ
climate.hallway_thermostat_cooling_normal
climate.hallway_thermostat_cooling_econ

These each have the ability to select

off, auto, cool, heat, heat econ, and cool econ

modes. Both heating modes produce a “heat” state on all of the climate entities, similarly for cooling, auto and off. I can get the card working by specifying any of the four “climate” entities.

What I need is to hide identified Modes.

Maybe another option:

hide:
modes: <string>, <string>

where string is a mode-name like ‘heat econ’ that is otherwise shown on the “mode” drop down’s pick-list.

This is just the card I’ve been looking for otherwise. THANKS

17

I also like this card. Like others I found it works with desktop firefox, but not using firefox on android.
Edit: After update to 64.0.1 Firefox for Android, it works on android as well.

I’m using it with Nest.
Issues I have are:
“state” always shows same value as “mode”, not “heating” or "cooling or “off”
Eco and Auto modes shows null.0. instead of temperature range
I can’t modify “off” state icon

Thanks for making this. It has great potential.
Here is my setup
st

1 Like
18

Really like your thermostat card but i have a problem, it always opens the more info popup box even when i want to use its own dropdown menu for selecting the mode.

A few other questions and wishes:

  • Why is the external sensor data underlined?
  • allow to modify the modes dropdown list and icons, i would love to remove 2 modes in the card
19

I have a strange problem with this card. On my tablet (Win 10, Chrome 71) on the wall, it works perfectly, as it does on my phone. Yet on my laptop (running Win 10, Chrome 71), I get the following:

Any ideas?

Custom element doesn't exist: simple-thermostat.

{
  "type": "custom:simple-thermostat",
  "entity": "climate.main_floor",
  "step_size": 1,
  "sensors": [
    {
      "entity": "sensor.dark_sky_apparent_temperature",
      "name": "Feels like"
    }
  ],
  "hide": {
    "mode": true
  }
}
22

I am having problems styling the card with the custom card-modder by @thomasloven
Here it is the screenshot:

01

Is this issue related to your card or to the card-modder?

2 Likes