Understanding custom home assistant frontend

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.

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.

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).