Make own thermostat card

Hi,

As the new thermostat card is way too big for my dashboard setup I’d like to make my own which suits my needs.
I made a mockup to show the layout and entities. (see attached picture)
I think I’ll be able to make this with a combination of vertical and horizontal stacks.
However I don’t know how I can make those cards fit my layout.
I tried the custom buttoncard but I already ran against my first wall as I can’t make the font of the temperature value bigger.

Any idea’s on how I can make these?

In the meantime an option to revert to the old style of thermostat cards would be great as well… So if anyone would have made this already, feel free to link it!

Have a look here it might do what you want.

Thanks but the custom cards that currently exist don’t meet up to what I need. I want the current temperature to be displayed the biggest, not the other way around.
Otherwise this card would have been an option…

you want to look into the following two HACS cards:

Lovelace-layout-card will give you that layout you want

button-card pretty much allows you to display anything:

This is what I did with them:
Screenshot 2024-01-10 at 14.28.12

Some time ago I made very similar card for my TADO TVRs. It’s based on button-card. Here is the link:

and how it looks:
image

Markdown cards are the way to go.
You can even add html tag in there, like <font size=7>

I actually created my own thermostat control, it controls are 3 thermostats in my house. I used Floorplan actually very easy.

also made this one to look like my Honeywell thermostat

2 Likes

Those both look great! Nice work!

Thanks, however I’m reluctant to use card mod as I’ve had a couple of issues with it before. Without it I don’t think I’ll be able to specify the dimensions of the cards.

I think the only way will be to revert to the old card which was perfect as it was…

Let’s hope that someone will be able to make a custom theme so I can use the old one again.

Thanks, they are the way to go indeed. However I’m still struggling with the dimensions of the individual cards that’ll make up every thermostat card.

Either use horizontal and vertical stacks or use a grid view with the layout_card integration.

Ok, I’m getting close I think…

Code below:

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: auto
  grid-template-areas: |
    "A A B"
    "A A C"
    "D D E"
    "F G H"
cards:
  - type: markdown
    content: >
      # <center><font
      size=7>{{states('sensor.woonkamer_temperatuur')}}°C</center>
    view_layout:
      grid-area: A
  - type: button
    tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
        entity_id: climate.woonkamer
        temperature: '{{state_attr(''climate.woonkamer'', ''temperature'') + 0.5}}'
    icon: mdi:chevron-up
    view_layout:
      grid-area: B
  - type: markdown
    content: >
      # <center><font size=7><span style="font-size: 2em;">{{
      state_attr('climate.woonkamer', 'temperature') }}</span></center>
    view_layout:
      grid-area: C
  - type: markdown
    content: >
      # <center><font
      size=7>{{states('sensor.woonkamer_vochtigheid')}}%</center>
    view_layout:
      grid-area: D
  - type: button
    tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
        entity_id: climate.woonkamer
        temperature: '{{state_attr(''climate.woonkamer'', ''temperature'') - 0.5}}'
    icon: mdi:chevron-down
    view_layout:
      grid-area: E
  - type: button
    tap_action:
      action: call-service
      service: climate.set_hvac_mode
      service_data:
        entity_id: climate.woonkamer
        hvac_mode: heat
    icon: mdi:fire
    view_layout:
      grid-area: F
  - type: button
    tap_action:
      action: call-service
      service: climate.set_hvac_mode
      service_data:
        entity_id: climate.woonkamer
        hvac_mode: 'off'
    icon: mdi:power
    view_layout:
      grid-area: G
  - type: button
    tap_action:
      action: call-service
      service: climate.set_hvac_mode
      service_data:
        entity_id: climate.woonkamer
        hvac_mode: heat
    icon: mdi:fire
    view_layout:
      grid-area: H

Now I’d like to make A, C and D fill the entire card and make them centered vertically.
Any idea’s on how to achieve this?