Understanding custom home assistant frontend

Configuration Frontend
1

For my project i want to visualize data in some kind of graph (with some kind of framework i don’t know yet) in the frontend of homeassistant. The data i want to visualize comes from my own database (not in homeassistant) which i host locally. I can already fetch and store data to this database via homeassistant, but i want to get to the frontend somehow

To get started i have followed the frontend documentation at: https://developers.home-assistant.io/docs/en/frontend_creating_custom_ui.html. When i follow the instruction on that page it will load the frontend without any errors although it is completely empty (presumably because i have no lights entity added to my homeassistant configuration and no bedroom group.

What i want to do is the following:

  1. When i load the frontend i want to send an event to request data.
  2. On a component on the backend i then want to listen for this event. and then send an event with the requested data to the frontend
  3. I then want to continuously send events to the frontend whenever there is new data
  4. Listen to these events on the frontend and update the card accordingly.

my problems:

  1. The example component from the documentation uses the following lines in the configuration.yaml:

     customize: 
     light.bedroom:
         custom_ui_state_card: state-card-my-custom-light

I wan to make a frontend component that doesn’t require an entity or w/e, but when i remove “light.bedroom” it fails. I want to get it to work with a html file called graph-drawer-card.html and a customize field that looks something like this:

customize: 
    custom_ui_state_card: graph-drawer-card

or:

customize: 
    my_component:
        custom_ui_state_card: state-card-my-custom-light

  1. I can find documentation on how to send events on the backend. But i cannot find any documentation on how to do this on the frontend other than i have to use the hass object somehow.

  2. Comments on other topics on this forum have made me confused on whether or not i need to bother with this: https://github.com/andrey-git/home-assistant-custom-ui or if it is something completely seperate from custom ui components mentioned in the homeassistant docs.

thanks in advance.

2

Ok so i’ve been told that it’s a good idea to start in Lovelace, but the same still applies. I still can’t communicate between the frontend and backend with events, which is what i want to do. So if anyone could help me out with this that would be greatly apreciated.

3

Probably you’ll want to look at the source of the history graph card. That’s built with the data in the database, and has a refresh option, so “all” you’ll have to change is where the data comes from (which will probably be less simple than that sounds).