In a previous post we discussed the HAOS Architecture. In this post we will discuss the HA frontend in detail.

The HA frontend is a HA application component served by a webserver and accessed through the HA WAC: homeassistant.local:8123, or any of the HA mobile apps (Android, iOS), for the sole purpose of displaying a user interface to allow you to interact with the rest of the HA system.

HA = Home Assistant

HAOS = Home Assistant Operating System (OS)

UI = User Interface

WAC = Web Admin Console (web browser GUI to administer a server)

The frontend is basically a web page, which changes appearance based on your selections. The screenshot below shows the default HA UI, following a fresh HA installation, with a logged in user named "admin" and home location in "Dubai, UAE".

The web page is split in two distinct areas:

The web page can be as long (scrollable) as you design it.

The sidebar can be expanded or collapsed by just clicking on the hamburger menu at the top left.

The sidebar is populated with different entries (tabs). When you select any of the sidebar tabs, the Panel on the right changes. The Panel has a Header and a View, as illustrated below.

A header can have different entries (tabs), which are used to display different views. An example of such a panel is the Developer Tools. As you can see in the screenshot below, the Developer Tools is a panel which has different tabs=views (STATES, SERVICES, TEMPLATE, EVENTS, STATISTICS). Also notice the Developer Tools is a scrollable panel, depicted by the orange/green scrollbar on the right.

The most important panel is the Dashboard. The Overview panel your see in the screenshots above is the default HA Dashboard. The Dashboard is the UI for home control, the canvas you will use to design your perfect home and later use to interact with every day (e.g. lights on/off).

The HA UI is named Lovelace and the Dashboard is based on Lovelace.

A Dashboard consists of actionable and non-actionable Cards (consider them as the dashboard canvas-elements), which are used to connect the UI to the HA integrations (devices & entities), areas, automations, etc.

The default Dashboard is populated with 3 cards. As you add integrations you will see the default dashboard being populated with cards from devices and entities created by the HA integrations.

Let's take a look at the other panels.

Energy; this is also a configurable dashboard, but not with the same freedom of design choice as an ordinary dashboard. By default it comes with a setup wizard to guide you through the configuration process.

Map; displays a map around your home location.

Logbook; displays all the changes taken place to all the entities or for a selected entity for a specific period of time. You can interact with this panel to specify date(s) and entity.

History; by default shows a history of all events in the system for all entities for today's date. You can interact with this panel to only display events for a specific entity for specific date(s).

Media; HA can be used as a media centre and this panel is where you will find all information pertaining to your media files and be able to play them. It requires configuration to make good use of it and I will cover this in a future post.

Developer Tools; this panel has several views to allow you to troubleshoot as well as find tons of useful system information.

Configuration; this is the panel you use to configure, customise and manage HA to your requirements.

Notifications; the area (in UI parlance, this is a modal panel) HA is using to alert you of important findings.

"Username"; in our example: admin; this is the user currently logged into the system; this panel displays the properties associated with the logged in user (as you might have noticed it is a scrollable panel).

The sidebar can be customised in three major ways:

Dashboards: add multiple dashboards (they can be, for example, rooms in a house or a service covering multiple locations in a house)
Add-ons: when you add add-ons in HA, some have an associated panel allowing you to interact/interface with the add-on
Web Consoles: define you own iframe panels, which can be web consoles accessing systems outside HA

Header

The header can be just a description with a single view or it can have multiple tabs, allowing different views of the same topic (e.g. sensors: temp - motion - light - smoke) or different topics (e.g. the different functions in your house).

For example, a Dashboard can be designed to have all the rooms in the house appear as tabs in the header (displayed as icons below).

Hopefully by now you have a good understanding of the HA UI architecture. If you would like to dive deeper consult the following HA references. In future posts, complemented by youtube videos, I will explore dashboard design in detail.

User Interface (UI)