Lovelace: Simple thermostat card

Hi,

These are the color I see in my instance:

image
image

These are the colors I want to have. Any idea how to change it?

image

Thx

Following what is explained here: https://github.com/nervetattoo/simple-thermostat#css-vars-for-theming, these css entry for those are:

            --heat-color: blue;
            --cool-color: blue;
            --off-color: blue;

Assuming you want all three being blue when selected.

I am using card-mod. So in my thermostat card I have:

      style: |
          ha-card .mode-item {
            border-radius: 8px;
            background: rgba(200,200,200,0.5);
            color: rgba(120,120,120, 1.0);
            --heat-color: red;
            --cool-color: blue;
            --dry-color: grey;
          }
          ha-card .mode-item.active {
            border-radius: 8px;
            background: rgba(002,136,209,1.0);
          }
          ha-card .mode-item:hover {
            border-radius: 8px;
            background: rgba(150,150,150,0.5);
           }

Which are “my” states and colors.

1 Like

Hi,

Seems my climate is very capable of heating :)) How can I repair the display?

type: 'custom:simple-thermostat'
entity: climate.livingroom_ac
name: Daikin
decimal: '0'
step_size: '1'
hvac_modes:
  fan_only: false
  dry: false
  auto: false
ha-card-border-radius: 10px
icon: '[object Object]'
sensors:
  - entity: sensor.immax_temperature
    name: Temperatura Living
  - entity: sensor.immax_humidity
    name: Umiditate living
  - entity: sensor.openweathermap_temperature
    name: Temperatura afara
hide:
  temperature: true
style: |
  ha-card {
  border-radius: 15px;
  }
  '--st-spacing': 7px
  '--st-font-size-title': 24px
  '--st-font-size-xl': 80px
  '--iron-icon-fill-color': none
  '--iron-icon-stroke-color': '#fff'
  '--primary-text-color': '#5294E2'
  '--st-spacing': 7px
  '--st-font-size-title': 24px
  '--st-font-size-xl': 80px
  '--iron-icon-fill-color': none
  '--iron-icon-stroke-color': '#fff'
  '--primary-text-color': '#5294E2'

I want also to hide presets auto/dry/fan_only and to enlarge a bit the card in order to have name of sansor and unit of measure on same row:

2020-12-27 19_08_33-Microsoft Store

states show following

 climate.livingroom_ac 	off 	hvac_modes: off, auto, heat, cool, dry, fan_only
min_temp: 16
max_temp: 28
target_temp_step: 1
fan_modes: auto, low, medium, high, silent
swing_modes: swing, up, mid, down
current_temperature: null
temperature: 186
fan_mode: low
swing_mode: off
friendly_name: Livingroom AC
supported_features: 41

thank you

1 Like

See my comment above where this was replied :slight_smile:

2 Likes

thank you. skipped that post. can you help me with the other issues? want to hide hvac_modes. only heat and cool needed and unit of temperature to stay on same row.
also i noticed that card doesn’t keep mdi icon settings and drops every time i open the view. Although they are recognised when i open once again, the icon settings are dissapearing and I wanna see what status is climate to not turn in wrong mode.
L.E. got something ok-ish for now
2020-12-28 00_07_00-Microsoft Store

I really can’t help there, as I only have heat mode.
But I believe that the repo documentation is clear on that. I suggest having a few tries.

Regarding the icons, I believe you would need to use card-mod:

I can’t get this installed. I have installed it the recommended way (hacx).
Running a fresh Home Assistant OS install on a nuc.

Skjermbilde 2020-12-29 233819

Is there a way to change the icon color next to the Name/Room/etc at the left hand top?

Found out my own problem, had to use url: /hacsfiles/simple-thermostat/simple-thermostat.js instead. I made a pull request to update the github installation manual.

Stupid question…where is the configuration file at to make changes to the card? I want to add my humidity sensors to the card but can’t figure out where the configuration file is.

Thanks, Robert

Just add it your sensor to your thermostat card like so:

type: 'custom:simple-thermostat'
entity: climate.livingroom
sensors:
  - entity: sensor.living_temp
    icon: 'mdi:thermometer'
  - entity: sensor.living_humid
    icon: 'mdi:water'
  - entity: sensor.living_press
    icon: 'mdi:gauge'
...

Thanks, worked perfectly.

Love this card but trying to add one additional bit of info.

For my climate entity climate.th6320zw2003_t6_pro_series_thermostat_mode, I would like to be able to display the fan_action attribute. Since I have the fan set to circulate mode, I would like to be able to see when it is actually running and when it isn’t.

Any help is appreciated.

This is a stupid question, but I went from YAML mode to UI mode, and copied everything over properly - the only thing not looking right is the thermostat card. It’s missing the up/down arrows to actually control the thermostat. If I click there, it works - just can’t see it.

Any ideas?

Capture

Hello folks,

I have a problem styling the simple thermostat cards. As you can see below the ‘’’setpoint’’’ attribute/control has different sizes on ipad and iphone. It does enlarge the setpoint control part also in webbrowser if I scale the window down. Any ideas why the css setting the size of font does not work?

Hi did you ever get this timer working (to show the remaining boost)
I’m trying to have it display it on my card.
Thanks

No, back then it was not possible. I don’t know if there were any changes made so that it would work now.

Thanks for the reply.
I’ve actually just found THIS and i’m trying to set it up as a small side button.

Let me know if it works!

Hiya thanks to Tom on that page I linked he created a template sensor that works as a timer when my boolean switch turns on.
I just need to linkk it to the boost button on this card now… I’ve not looked into that bit yet :slightly_smiling_face:

sensor:
  - platform: template
    sensors:
      boost_time_remaining:
        friendly_name: 'Time Remaining'
        unit_of_measurement: "min"
        value_template: >
          {% if is_state('input_boolean.boost_toggle', 'on') %}
            {{ [ (30 - (as_timestamp(now()) - as_timestamp(states.input_boolean.boost_toggle.last_changed))/60)|round(0) ,0 ] | max }}
          {% else %}
            0
          {% endif %}