Home Assistant Interface tutorial: getting started

Today we will see together the handling of the Home Assistant interface in order to understand how this system works and then easily integrate our various sensors, bulbs, sockets and .. Alexa !

Your installation is complete, your user account is created. If this is not the case I invite you to read the previous tutorial.

Some information will be hidden on the screenshots so as not to reveal private data.

Home Assistant interface: the dashboard

First of all the dashboards (or "Preview"): this is the screen that will display all your devices.

This screen will be the main screen, it will allow you to display and control your various sensors.

This screen will be the main screen, it will allow you todisplay as well as control your different sensors. On this example, I have divided my interface into 5 pages (Home, Lights, Camera, Heatzy (Heating) and Sensor Tests) so as not to overload the home page with information.

For example, my page "Home" is dedicated to looking at the weather and controlling the security part of my home with the alarm, motion sensors, etc.

Creation of your Home Assistant dashboard

You can create your dashboards as you see fit! For that nothing very complicated, you must click on the "Three little dots" at the top right of the screen then on "Configure the user interface" :

You can also add devices by clicking on the “+” at the bottom right.

Customizing your Home Assistant Interface

Above I show you a creation of dashboards but this is the default design, you can also add your own theme (there are hundreds of them on the net, on the official Home Assistant website or Awesome HA for example) to make your installation even more beautiful.

Here is for example the personalized interface of a friend:

The Home Assistant card

This card allows you to view zones and position of people in your household.

You can create new zones from the pencil at the top right of the screen. The zones are usable in your scenarios. (Example: If I enter the "House" area, turn on the living room light).

Home Assistant diary

The newspaper allows visualize state changes of your devices and automations.

Hass.io history

History allows to visualize graphically and in detail the state of your devices and automations.

I use it the following days adding an automation to check its proper functioning for example.

Home Assistant Developer Tools

The development tools allow to know the system operation or test actions before integrating them into an automation.

Device states

The "states" page allows you to know the state as well as the attributes of a device.

For example, one of the attributes of a Tracker (phone) is "Battery_level: XX" so we can thanks to this information create a scenario to recharge at night on smartphone and switch off the connected socket when "Battery_level" will be 100%.

Services available in Home Assistant

The development tool 'services' allows you to test any service before integrating it into an automation.

Here is a non-exhaustive list of available services:

Home Assistant logs

Newspapers or "Logs" in English, is an important tool when there is a problem. This tool records every action performed by the system and indicates when it is not accessing an external device or service.

The Supervisor page

This page will allow you, as its name suggests, to monitor your system.

Supervisor dashboard

The page dashboards du supervisor lets at a glance see if we have a Home Assistant update or our add-ons (plugins).

We will see a little later in this article how to add the plugin "File editor" which will help us to install devices like Amazon Alexa.

Hass.io snapshots

This page will allow you to create backups of your system easily.

Once a name has been given to your snapshot, select "Full snapshot" and click on "Create", a few seconds later it will appear below. Click on it and it will download to your PC in .zip

We can automate this action, for example:

Every Monday at 3:00 a.m.> automatic backup to your favorite cloud.

Add-on Store Home Assistant

THEadd-on store, as the name suggests, will allow us toinstall Home Assistant plugins to improve our system. Unfortunately it is only the add-ons official that we find on this page, to get all the plugins created by the community, we will see a next article installing HACS (Home Assistant Community Store) 🙂

We will use this page several times during our tutorials to install for example "Duck dns" which will allow us to access our instance from the outside (in 4g, at work, etc.)

Install a Home Assistant add-on

Now, let's install our first plugin together with the name "File editor". This will allow us to improve and add devices to our instance.

The image below shows the AirSonos plugin because the plugin file editor is already installed on my HA server. The process remains the same. 🙂

For that nothing very complicated, once theadd-on selected, simply click on "Install" then wait a few minutes.

Start a Home Assistant add-on

Once the add-on is installed, it appears in: Supervisor> Dashboard

Click on it then "Start", once the add-on is launched you will see "Uninstall restart stop" as below:

Congratulations you have installed your first add-on (plugin)!

Home Assistant configuration

The page Home Assistant setup mainly allowsadd automatic integrations, create parts and especially create automations !

Cloud Home Assistant, meanwhile, allows you to connect to servers Nabu House (belongs to Home Assistant, those are the same developers). It allowsaccess your instance from outside or to link Alexa and your appliances Amazon Echo to your system. Unfortunately, this one took a lot of work from the developers because this system is very secure and therefore chargeable. The cloud Nabu House is free the first month then 5 € / month (of course, there is a free alternative but a little more complex that we will see in detail shortly)

Other configurations

Here in detail other features made available in configuration:


Allows create virtual sensors that can help us in complex scenarios.

Lovelace dashboards

Allows you to create different Dashboards : ideal for adapting the design to the device.

On the mobile app Home Assistant, I mainly display self-service bicycles on the front page while my Echo Show in the living room displays on the main page the control of smart bulbs and heating (since Amazon Silk or Mozilla Firefox).

Server control

Allows you to control the server: restart, stop the server but also check our configuration automatically.

I recommend that you restart your server in order to finalize the installation of the plugin "File editor".

The File editor add-on

Is your server restarted? Very well ! You should see a new tab: file editor

Once the tab is open, you should have this interface:

You can take a look at the different files, but attention you are touching the heart of your system ! Why talk so much about this plugin? Because it is with this that we go installer Amazon Alexa on Home Assistant and that you are all waiting!

Why not install directly Alexa ? I find Home Assistant a bit complex at first, especially since the official documentation is only in English. Getting to know the system before handling it is therefore more judicious. 🙂

In a future article, we will see how to add your devices from the automatic integration and from the Plugin file editor. Prepare to see your bulbs, sockets and more connected objects in the same interface!

Do not hesitate to indicate in the comments the connected objects in your possession so that the article is as complete as possible. Goodbye ! 🙂

Several feathers of enthusiastsAlexa to concoct articles with 4 or more hands ... Collaborative writing to address the most specialized or transversal subjects, the best home automation and connected home plans on the web, and much more ...