Noob questions about development in HA

Development
1

Hi everybody,

I completely new in HomeAssistant, so please forgive me my noob questions…

I like to develop open-source stuff, and just looking at the possibilities to extend Home Assistant. No specific use case yet!!! Just looking around, like a little boy in a candy store :yum:

Let’s assume I want to develop a (pure hypothetical !!) use case: I want to visualize stuff (entities, automations, or whatever…) somehow in an SVG drawing. And store the changes afterwards on the backend again, after the user somehow manipulated that stuff inside the drawing.

Some questions that popup in my brain:

  1. I think that this kind of stuff should be done not via an integration or addon, but via a custom component? Note that I would not prefer to use an addon, because then it isn’t available for Docker HA users, if I understand correctly. And I don’t need to connect to an external software anyway.

  2. Not sure whether the backend side of my component should call (e.g. to fetch entities, …) the HA API, or is that kind of information directly available via some Python classes perhaps?

  3. Not sure whether there is some documentation/examples available about how to create UI (containing the SVG drawing) for this, so it fits somehow the HA look and feel. I would like to do it in the HA preferred way of working, but not sure what that is yet.

  4. Not sure whether there is some documentation/examples available about how to do the 2-way communication between my backend and my UI.

I would appreciate if we could look at these questions from a pure developer perspective, and not from a user perspective. Because as mentioned above, I have no particular use case in mind yet, so no idea if I will ever end up with something useful for this community. Just having a look in the HA candy store…

Thanks!!
Bart

2 Likes
2

Your hypothetical example would involve the creation of a custom card.

This is your starting point

2 Likes
3

And to do the communication between card and backend (yes a custom component is the right option for the backend for this scenario) is best served by extending the websocket api.

2 Likes
4

@koying, @msp1974
Thanks a lot for the pointers!
Really appreciate the fast feedback to get me started :star_struck:
Will read through that documentation tonight.
Although chances are near 100% I will get back here for other noob questions…

5

To be clear, extending the websocket API is for custom integrations, i.e. the “backend” side.

1 Like
6

The fog is clearing (a little bit) in my head…

So in the custom panel/card you have a hass instance that is automatically updated with lots of useful information. Which is very convenient, because I thought that I had to get all of that information myself via an API call from my frontend code. I like the stuff I have seen so far.

So I can currently get all the available entities very easily like this:

class MyCustomPanel extends HTMLElement {
   set hass(hass) {
      // Get all available states
      const availableStates = hass.states;
      ...
   }

   constructor () {
      ...
   }
}

Via the hass instance I can get the initial data at initial load and also at every entity/state update, if I understand correctly.

But I don’t want to refresh my entire screen all the time, to bring it up to date with the latest hass instance. Instead I would like to:

  1. Use the hass instance only once at the start to to populate my panel (in the constructor?).
  2. Afterwards listen to updates (somehow?) and apply small deltas only to my panel.

Would be nice if somebody could share a small code snippet, or a documentation link, or a link to to the code of an existing custom component.

7

There are bazillions around.
All the builtin cards are open-source, too

1 Like