How to create a UI for Air Conditioner similar to Sensibo panel?

Hi, I’m working on a custom A/C controller which is able to set temperature, fan speed, mode, etc.
Now I want to integrate into HASS and searching online for a cool template, I found this one used by Sensibo controller:

I like it very much, and I want to create something like this.

Can anyone help me with this?
Or linking something like a guide/tutorial/etc.?
:smiley:

1 Like

I was not sure so I created a demo climate component (https://github.com/avocadosalsa/hass-demo_climate) and found that the image you posted is basically the default control panel for a climate component. In mine the target temperature is a little bit different but I do not know why that is.

As far as a guide/tutorial I just looked at the source for the Sensibo component and the base climate component to figure out what I needed to implement. https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/climate/init.py

Your topic caught my attention because I too am working on creating a new climate platform. I am still working on the backend so I am not to the point where I can get the data into HASS yet. :slight_smile:

The demo you made is very cool!
I watched the code on github and I think it is a little bit advanced topic, I’m quite new to HASS.
As far as I understand, you created a new component, right? And you will add the new component in a similar way as reported in the link at page https://home-assistant.io/developers/creating_components/
Is correct?

I does not understand very well about adding the component file.
In the path
<config directory>/custom_components/<component name>
the <config directory> refers to the .homeasssistant folder where there’s the configuration.yaml file too?

I used both the link you posted as well as this one: https://home-assistant.io/developers/add_new_platform/

As for adding the component, yes you are on the right track with the directory. In this case, because it is a climate platform, it would go in:
<config_directory>/custom_components/climate/<your_climate_component>
You would also need to a the component in your configuration.yaml file.

Yes, the <config_directory> refers to the folder that has the configuration.yaml file is in which in your case sounds like the .homeassistant folder.

I tried with your demo climate component, but I think there’s something wrong with my configuration. This is what I do:

  1. I put the demo.py file into the .homeassistant/custom_components/climate folder

  2. I add to configuration.yaml these lines:

    climate:

    • platform: demo
      name: climate_demo
  3. I add to the room I use as test (so in the groups.yaml) these lines:

    view_room_1:
    view: yes
    name: “Room 1”
    entities:
    - group.room_1
    - climate.climate_demo

but nothing appear on the Web UI. Is there any wrong data?