Lovelace: Thermostat card (BETA)


#1

Thermostat Card (BETA)

A simple thermostat implemented in CSS based on Nest Thermostat Control by Dal Hundal
(@dalhundal) on CodePen

Source

TODO

There are many things still missing, but I’ll add below those that I know of

  • Allow canceling of schedules for thermostats like Ecobee
  • Allow settings Away mode
  • Allow changing of Opration mode
  • Add support for multiple entities for different functions (zwave thermostats hot/cold, tado away mode, etc)
  • Title scaling

Options

Name Type Default Description
type string Required custom:thermostat-card
entity string Required The entity id of climate entity. Example: climate.hvac
title string optional Card title
no_card boolean false Set to true to avoid the card background and use the custom element in picture-elements.
hvac object optional Allows mapping of custom states or using a custom attribute for state
step number 0.5 The step to use when increasing or decreasing temperature
highlight_tap boolean false Show the tap area highlight when changing temperature settings
chevron_size number 50 Size of chevrons for temperature adjutment
pending number 3 Seconds to wait in control mode until state changes are sent back to the server
idle_zone number 2 Degrees of minimum difference between set points when thermostat supports both heating and cooling

hvac object

Name Type Default Description
states optional optional A list of states. See examples.
attribute string optional An attribute of the entity to use as state

Example

resources:
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module
name: My Awesome Home
views:
  - title: Home
    cards:
      - type: custom:thermostat-card
        title: Bedroom
        entity: climate.ecobee

Example with custom hvac_states

resources:
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module
name: My Awesome Home
views:
  - title: Home
    cards:
      - type: custom:thermostat-card
        title: Bedroom
        entity: climate.hvac
        chevron_size: 100
        hvac:
          states:
            'Off': 'off'
            'Cooling': 'cool'
            'Heaing': 'heat'
          attribute: operation_mode

:warning:️ Make sure you set type to module when including the resource file.

License

This card uses MIT License as it uses a CodePen gist.

Credits

@silasb
@ciotlosm

FAQ

Please read the FAQ. Best to use tracker-card with custom_updater to receive new versions.

Buy Me A Coffee if you like the cards so much that wish to express your gratitude.


Custom UI: Nest layout climate control
Lovelace badge+notification banner
Nest-like outside wheel control
Heating Setpoint, Schedules and Boost
#2

Thank you for this, excited for updates. Working great in my setup, just have to add a switch above in order to toggle operation mode. I think just tapping on value in middle to toggle cool/off would work great. Been watching for this on your github for a while.

Thanks again.


#3

A panel is in the works to allow flexible services to be added. From operation mode to fan and swing mode.


#4

I need to integrate a thermostat


#5

Hi, i have this error:

2018-08-09 08:51:55 ERROR (MainThread) [frontend.js.latest.201808040] https://XXX.XXX.XXX:PORT/local/custom-lovelace/thermostat-card/thermostat-card.js?v=1:14:27 Uncaught TypeError: Cannot read property ‘state’ of undefined

this is my ui-lovelace.yaml:

resources:
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module

  - icon: mdi:home-assistant
    title: Second view
    cards:
        - type: custom:thermostat-card
          title: Bedroom
          entity: climate.ecobee

#6

Please use code blocks when posting your code (see the banner at the top of the page), this will make it easier for folks to find what’s wrong. Formatting is key.

This is what mine looks like:

    - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.0.2
      type: module
    - type: custom:thermostat-card
      entity: climate.office
      chevron_size: 100
      step: 1
      highlight_tap: true
      no_card: true
      hvac:
        states:
          'Off': 'off'
          'Cooling': 'cool'
          'Heaing': 'heat'
        attribute: operation_mode

#7

Hi, sorry for my latest post.

I copy your code and i have this error:

2018-08-10 10:18:37 ERROR (MainThread) [frontend.js.latest.201808040] https://XXX.XXX.XXX:PORT/local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.0.2:12:27 Uncaught TypeError: Cannot read property ‘attributes’ of undefined

I have home assistan into raspberry with raspbian


#8

EDIT: Solved.


#9

Can this card also be used for a Netatmo thermostat?


#10

It is usable for any thermostat that roughly implements a climate component interface. If you try it and see anomalies, please raise issues against: https://github.com/ciotlosm/custom-lovelace/issues and I’ll try to assist.


#11

Oké, after my holidays I will try your card. Looks very nice!


#12

@ciotlosm Amazing! This is going to get me to waste my weekend to switch everything over to lovelace! For that, you owe me! lol jk


#13

Not sure if I know how to use this card properly. Is there a trick to get the HVAC modes to show?
And is there a way to show the setpoints in white on the dial like in the demo picture?
Below is my card.


#14

My Ecobee shows blue face when in cooling mode (orange? in heat) and black when off.

[edit] One request I have is for something on the dial to change color when in different operations, for example,
blue dial face when operation_mode is set to cool, turns number green when operation=cool, yellow when operation=fan, white when idle.
orange dial face when operation_mode is set to heat, turns number red when operation=heat, yellow when operation=fan, white when idle.
Thank you for the great work.

image


#15

I did try this now for my heat pump controlled by Sensibo/Melcloud. Is just black all the time, does not change to blue or orange when cooling/heating. But it works.


#16

Heaing is a typo? :stuck_out_tongue:


#17

I’m having a problem with using the card because every time i click it (doesn’t matter where) it brings up my climate entity in a window instead of letting me control it through the card. Anyone have any ideas?


#18

@Picnic HVAC modes will not show in the current card version. You could have an attributes custom card stacked with vertical-stack to show missing info underneath. HVAC modes are coming in the next version of the thermostat card.

The setpoints in white are only visible when the thermostat has to do work. For example if you have 18-25 setpoints and current temperature is 22, your thermostat won’t either heat or cool. This is also true for thermostat in heating mode when temperature is higher than setpoint. I chose to do this to allow easier visual cue when thermostat is doing something and where is trying to push the temperature.

@JTPublic I think the blue, orange and black will remain. If you want to see operation mode that will arrive in a future version as on options screen (people don’t change that often operation mode). For the Fan I might include a fan mode show on the main screen to show when a fan is active (similar to away leaf).

@Dennis87 The current implementation uses state to detect the type of running state but you can adjust which attribute is uses for the heat/cool/off/idle etc from the settings. You can also specify custom value, and yes my example contained a typo. You can use dev-info panel to determine exactly how your thermostat reports the state and have it match.

@plz Can you please make a screenshot of the problem? Or maybe a video? I haven’t seen this behaviour and I can’t suggest solutions unless I understand how it behaves.


#19

Eagerly watching this…

Is there any chance to support in future a different entity that can be used for the current room temperature ?

I use MaxEQ3 radiator valves, but they only report current temperature when the valve position moves, so it’s an unreliable reading.
I have temperature sensors in each room to counter this, so would be great to integrate the two into a single thermostat - setpoint/current temp view…


#20

@swifty that can be done easily. Please use the repository to open an issue for this request. If possible with an example. I’ll get to this as well, as it’s quite an easy change :slight_smile: