Lovelace: Simple thermostat card

@sd_dracula

1 Like

That actually get’s rid of the Operation row also which is not what I want, just the Presets one

Feel free to share the code with me in a private message here if that suits you better :slight_smile:

So, since I couldn’t sleep last night and my dumb boiler doesn’t really offer any preset modes, I made this. The idea is to hide the existing preset modes and use these custom instead.
As of now it’s just a few radio-like buttons writting an input_text but I’m posting it anyway.

The boost button is supposed to start a 15-min timer that bypasses the other presets. I wanted to maybe display an animated bar with the remaining time but I came to realize that the timer component does not work as intended. The conditional entity card is just a placeholder.

Could someone point me to the best approach for this moving forward? Should I use scenes for the different modes? For example, after the boost timer ends, I’d like to return to the previous state/mode. I’m thinking scenes. Edit: nervetattoo has already answered this before, it’s scenes.

(I tried the ‘vertical-stack-in-card’ custom component to merge the two cards but it seems a little buggy. I think I’ll just use the vertical-stack card.
I got the idea for this from one of the examples on https://github.com/custom-cards/button-card#examples)



configuration.yaml:

input_text:
  clima_mode:
    initial: custom

timer:
  clima_boost:
    duration: 00:15:00

lovelace:

cards:
  - cards:
      - color: '#dff4fd'
        color_type: card
        entity: input_text.clima_mode
        icon: 'mdi:account-outline'
        name: Custom
        state:
          - color: '#03a9f4'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: custom
        styles:
          card:
            - height: 60px
            - border-radius: 4px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 3px
        tap_action:
          action: call-service
          service: input_text.set_value
          service_data:
            entity_id: input_text.clima_mode
            value: custom
        type: 'custom:button-card'
      - color: '#dff4fd'
        color_type: card
        entity: input_text.clima_mode
        icon: 'mdi:home-outline'
        name: Home
        state:
          - color: '#03a9f4'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: home
        styles:
          card:
            - height: 60px
            - border-radius: 4px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 3px
        tap_action:
          action: call-service
          service: input_text.set_value
          service_data:
            entity_id: input_text.clima_mode
            value: home
        type: 'custom:button-card'
      - color: '#dff4fd'
        color_type: card
        entity: input_text.clima_mode
        icon: 'mdi:sleep'
        name: Night
        state:
          - color: '#03a9f4'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: night
        styles:
          card:
            - height: 60px
            - border-radius: 4px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 3px
        tap_action:
          action: call-service
          service: input_text.set_value
          service_data:
            entity_id: input_text.clima_mode
            value: night
        type: 'custom:button-card'
      - color: '#dff4fd'
        color_type: card
        entity: input_text.clima_mode
        icon: 'mdi:briefcase-outline'
        name: Work
        state:
          - color: '#03a9f4'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: work
        styles:
          card:
            - height: 60px
            - border-radius: 4px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 3px
        tap_action:
          action: call-service
          service: input_text.set_value
          service_data:
            entity_id: input_text.clima_mode
            value: work
        type: 'custom:button-card'
      - color: '#dff4fd'
        color_type: card
        entity: input_text.clima_mode
        icon: 'mdi:map-marker-off'
        name: Away
        state:
          - color: '#03a9f4'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: away
        styles:
          card:
            - height: 60px
            - border-radius: 4px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 3px
        tap_action:
          action: call-service
          service: input_text.set_value
          service_data:
            entity_id: input_text.clima_mode
            value: away
        type: 'custom:button-card'
    type: horizontal-stack
  - color: '#dff4fd'
    color_type: card
    entity: input_text.clima_mode
    name: BOOST
    show_icon: false
    state:
      - color: '#ED6A5A'
        styles:
          card:
            - color: white
        value: boost
    styles:
      card:
        - border-radius: 4px
        - font-size: 20px
        - font-weight: bold
        - color: '#03a9f4'
    tap_action:
      action: call-service
      service: input_text.set_value
      service_data:
        entity_id: input_text.clima_mode
        value: boost
    type: 'custom:button-card'
  - card:
      entities:
        - timer.clima_boost
      type: entities
    conditions:
      - entity: input_text.clima_mode
        state: boost
    type: conditional
type: vertical-stack

automations.yaml:

- id: '1577604511877'
  alias: climate_boost_mode_enable
  description: ''
  trigger:
  - entity_id: input_text.clima_mode
    platform: state
    to: boost
  condition: []
  action:
  - entity_id: timer.clima_boost
    service: timer.start
- id: '1577604781130'
  alias: climate_boost_mode_disable
  description: ''
  trigger:
  - entity_id: input_text.clima_mode
    from: boost
    platform: state
  condition: []
  action:
  - entity_id: timer.clima_boost
    service: timer.cancel
- id: '1577605106260'
  alias: climate_boost_timer_finished
  description: Back to custom. SHOULD BE BACK TO PREVIOUS MODE!!!
  trigger:
  - event_data:
      entity_id: timer.clima_boost
    event_type: timer.finished
    platform: event
  condition: []
  action:
  - data:
      value: custom
    entity_id: input_text.clima_mode
    service: input_text.set_value
1 Like

Hi @nervetattoo

By changing label for the sensor and the units, there’s a fair enough hygrostat card working with dry function of a split AC and the fan_only with a smart plug connected to a humidifier (haven’t found a way of changing labels for dry/fan_only to humidify/dehumidify as these are tied up with the climate component and also the likes of ATTR_TARGET_TEMP_HIGH/LOW/STEP for humidity are currently lacking in order to set for a proper hygrostat component similar to HVAC).

image

Wondering if it would be too difficult to set it as a dual purpose card for temp&hum (the backend component still shows units in °C but this is not a big problem)

1 Like

Hi… first of all, its a great card. Thanks for that.
i know that you are not into different colors and stuff, but i would be great if the functionality could be added. Like the standard card, where the Heat symbol gets a orange color on the icon when heating. For the Sensors (humidity etc), also a color following some schema…
for now as a workaround, i am using the vertical-stack to add the sensors with colors from the custom_ui. Still have to improve it, but helps for now… but it would be great if your card could have this function (like the original one) or a integration with the custom_ui.

Hi all,
is it possible to increase the size or change the layout only of current temperature value?

Thanks

Didn’t see a reply to thermseekr’s post. Has anyone found a way to remove the word “Operation” from the card so that it just leaves the modes spread out to fill the bottom of the card?

I got a question.
How did you get the language or name different for the “Temperature” —> “Temperatuur”
and also for the “State” -----> “Mode”

Would love to also make that a different language or name.

These are both documented here: This is now documented here https://github.com/nervetattoo/simple-thermostat#available-configuration-options

1 Like

I have the same issue. Are you able to share your automation with me to get this to work? Thanks.

For both translations I did have used two template sensors which I configured.
The default tempature and state sensor in Simple Thermostate I hide using the hide label in the configuration.

With the latest update from nervetattoo (great work btw) you can use the label configuration for Temperature and change the text into something else as mentioned by nervetattoo.

For the state I am still using a template sensor. The component seems to use the hvac state values for my Nest thermostat and not the operation states. I fixed that for myself using a template sensor.

My config (in ui-lovelace.yaml):

          - type: 'custom:simple-thermostat'
            entity: climate.living_room
            name: false
            decimals: 1
            icon:
              - off: None
              - heat: None
            step_size: 0.5
            label:
              temperature: Temperatuur
            hide:
              state: true
            control:
              _names bool: true
              _icons: true
              hvac:
                "heat":
                  name: Verwarmen
                  icon: mdi:fire
                "off":
                  name: Uit
                  icon: mdi:power
              preset:
                "none":
                  name: Geen
                  icon: mdi:power
                "away":
                  name: Afwezig
                  icon: mdi:clock-alert-outline
                "eco":
                  name: Eco
                  icon: mdi:leaf
                "Away and Eco":
                  name: Afwezig en Eco
                  icon: mdi:leaf
            sensors:
              - entity: sensor.living_room_thermostat_operation_mode_dutch
                name: Mode
              - entity: sensor.living_room_thermostat_humidity
                name: Vochtigheid
            style: |
              ha-card {
                --sidebar-selected-icon-color: #a2a7a6;
                --st-spacing: 4px;
                --st-mode-active-background: rgba(255, 255, 240, 0.2);
                --st-mode-active-color: #a2a7a6;
                --st-mode-background: rgba(255, 255, 240, 0.05);
              }

My template sensor (under configuration.yaml - sensor:):

# Living Room Thermostat Mode
- platform: template
  sensors:
    living_room_thermostat_operation_mode_dutch:
      friendly_name: 'Mode'
      value_template: >
        {% if is_state("sensor.living_room_thermostat_operation_mode", "off") %}
          Uit
        {% elif is_state("sensor.living_room_thermostat_operation_mode", "heat") %}
          Verwarmen
        {% elif is_state("sensor.living_room_thermostat_operation_mode", "eco") %}
          Eco
        {% else %}
          Onbekend
        {% endif %}
1 Like

Any ideas on how I can hide this?

This have changed in newest HA, at least for Z-Wave thermostats, that when OFF the target temperature is N/A.

I solved it this way:

control:
  - hvac
  - preset: false
entity: climate.eurotronic_eur_spiritz_wall_radiator_thermostat_mode_3
fallback: 'OFF'

So replacing N/A with OFF. Just the °C remained but I can live with that :slight_smile:

Thanks for the reply but I was looking for more of a way to completely hide the up and down arrows along with the N/A (i.e just to leave the on/off and preset buttons remaining)?

I know how to do this using card-mod but just always. I did not manage conditionaly via templating.

OK, I took a look again :wink:

So to hide section in case thermostat is off, you can use this configuration together with card-mod.
Once target temperature is above 0 the controls are displyed otherwise hidden

entity: climate.eurotronic_eur_spiritz_wall_radiator_thermostat_mode_3
step_size: 0.5
style: |
  .main {
    display: {% if not state_attr('climate.eurotronic_eur_spiritz_wall_radiator_thermostat_mode_3','temperature') | float > 0 %} none !important {% endif %}
  }
type: 'custom:simple-thermostat'

obrazek obrazek

1 Like

My Tado thermostats have a hvac mode ‘auto’ where they set the temperature depending on a schedule. When in this mode the corresponding button on the simple-thermostat-card is blue which is correct.
When I change the temperature manually then the button isn’t blue anymore and the target temperature turns red which should be correct, too.
Now when I hit the ‘auto’ mode button, the target temperature doesn’t change back to the predefined temperature of the ‘auto’ mode.
In the background everything works fine. Just the temperature shown by the card doesn’t get refreshed until I refresh the whole site.

Is there a problem on my site or is this a bug?

This does sound like a bug. Does the target temp turn back to black? That signals that the effect have been registered in the entity. I guess you change to auto before the new target temp is set, and the card is waiting for the state change to be verified and it doesn’t accept that a different change happened behind the scenes because of the mode switch.

Ok I figured out that there is only a problem with changing the target temp when in auto mode. Only then the color of the temp stays red and doesn’t turn back to black. When refresh the site after that, the temp is black and I even can change the temp or hit the auto button and the new target temp changes to the correct value and also turns black.
In summary: After changing away from auto mode by adjusting the target temp manually, the auto button behaves correct and turns white while the target temp stays red and doesn’t get refreshed(?).

Edit: I don’t know why but apperantly it is working know. Maybe the last HA update fixed something.