Make own thermostat card

Configuration Frontend
1

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!

IMG_2502
IMG_2502568×527 47.9 KB

2

Have a look here it might do what you want.

3

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…

4

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

5

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

6

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

7

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

2024-01-05 08.31.04
2024-01-05 08.31.041179×2155 151 KB

also made this one to look like my Honeywell thermostat

thermo1
thermo1680×529 55.6 KB

3 Likes
8

Those both look great! Nice work!

9

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.

10

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.

11

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

13

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?

14

@HaoleBoy Those are both awesome! I don’t have the same devices, but would you be open to sharing some of your yaml so I can get some ideas of where to start? Thanks!

15

With you on this - I’d love to have this on my dash as the simple therm card doesnt scale to the tablet well

16

sure I can share it. I’m not sure how in this forum though. You’ll need to create a couple “helpers” for the input values and a simple script to update. I’ll try to put something together in a zip with some notes

17

that’d be awesome!