Toon Climate - change the GUI

Share your Projects! Dashboards & Frontend
1

I’m using Home Assistant 2022.11.5 and I am trying to add a custom template for my rooted Toon (Eneco) like:

github: cyberjunky/home-assistant-toon_climate

I already installed HACS and I have installed the “Toon Climate” integration. My Toon thermostat is now added to the dashboard and looks like:

HA-toon

I can adjust the temperature within HA without any issues. But now I want to implement the layout as described at:

Now I get lost… The part of this page that starts with “Toon with simple-thermostat in Lovelace” is something I don’t understand.

What and where can I perform this step:

Install Javascript from: GitHub - nervetattoo/simple-thermostat: A different take on the thermostat card for Home Assistant ♨️

And where can I add the codes to change the card? Can someone please guide me a little around to get this done?

2

I don’t know if this issue still is relevant for you, but here’s to sollution for other people who came across the same issue:

  • Install Simple Thermostat via HACS
  • Add the following to resources:
url: /hacsfiles/simple-thermostat/simple-thermostat.js
type: module

Now go to your dashboard and change the current yaml into

- type: 'custom:simple-thermostat'
     entity: <device name of your toon>
     control:
       - preset

This is what did the trick for me.

Bonus suggestion:
Hide everything but sensors and temperature control:

- type: custom:simple-thermostat
     entity: <device name of your toon>
layout:
  step: row
header: false
control: false