Découvrir Lovelace UI.

Introduction.

Lovelace UI est l’interface de Home Assistant.

Elle est très puissante mais peut s’utiliser simplement pour les débutant ou de manière plus pointue pour les experts.

Son avantage est de réunir en une seule interface :

  • différentes cartes pré-configurées,
  • la possibilité de créer différentes vues pour organiser votre interface,
  • la possibilité de personnaliser des cartes existantes,
  • de créer votre propre carte à partir de cartes existantes ou même en partant de zéro,
  • Elle est aussi complètement responsive ce qui vous évitera de créer une interface pour chacun de vos appareils.

Vous l’avez compris l’interface de Home Assistant est complète.

Vous pouvez aussi lui ajouter du contenu créer par la communauté, nous verrons cela dans une mise a jour de cet article.

Nous allons voir dans cet article la base pour bien commencer avec Lovelace UI, il y aura des mise a jour de cet article pour compléter les explications sur l’étendu des possibilités de Lovelace UI.

Mise à jour : 26/06/2020 – Temps de lecture / alisation : 6 / 05 min – Difficulté : Faible.

To do :

  • Descriptions des cartes.
  • Éditeur Raw
  • Carte manuelle les bases.

Prérequis, matériels nécessaires & utilisés :

  • Version de HA : V110.

Présentation.

Interface Home Assistant

Voici l’interface complète de votre Home Assistant.

Pour faire simple elle est composée :

  • d’un menu latéral (encadré rouge) dans lequel se trouve les différents accès aux interface des plugins, au paramétrage de votre installation, etc etc. (Nous détaillerons cette partie dans un autre article).
  • D’une barre horizontale (encadré vert) qui contient le nom de votre instance et les vus.
  • d’une deuxième barre Horizontale (encadré bleu) contenant les badges.
  • d’un espace (encadré marron) qui contient les cartes.

C’est trois derniers éléments forment votre interface.

Modifier l’interface utilisateur.

Pour modifier l’interface, il vous suffit de vous rendre dans aperçu cliquer sur en haut a droite puis de sélectionner Configurer l'interface utilisateur .

Votre interface devrait passer en gris et se munir d’un + orange en bas a droite.

Elle se compose en 3 parties.
la première est composée :

  • du nom qui apparaîtra sur toutes vos vues (Maison) vous pouvez l’éditer en cliquant sur le crayon jaune.
  • d’une icône Aide qui vous renvoie vers la page Lovelace UI de Home Assistant (EN)
  • d’une icône … qui vous permet d’accéder à deux choses :
    • rentrer en mode ROW, ce qui vous permet d’éditer en ligne de code votre interface.
    • Sélectionner les entités non utilisées (dans l’interface) et les ajouter en cliquant sur le bouton + , une suggestion de carte vous est proposée mais vous pouvez la changer.

La deuxième se situe elle aussi dans la barre horizontale du haut de la page. Elle vous permet de créer d’autres “vues”.

Cliquer sur le +.

Onglet paramètres.

  • Titre : donne un nom à votre vue.
  • Icône : donne une icône à votre vue et remplace le nom. Les icônes sont sous la forme mdi:nomicone (sur le site de material design).
  • Url : Une url par défaut sera mise, mais vous pouvez la personnaliser. Si vous souhaitez qu’elle devienne votre vue par défaut, il faut mettre default_view.
  • Thème : vous permet d’appliquer un thème différent à cette vue
  • Mode panneau : Si vous activez cette option, vous ne pourrez afficher qu’une seule carte qui prendra donc toute la largeur de la page.

Onglet Badge.

Vous permet de sélectionner les entités que vous souhaitez mettre en badge en haut de votre page.

Onglet Visibilité.

Vous permet de choisir qui a accès à cette vue.

Ensuite il ne vous reste qu’à enregistrer.

Pour quitter le mode édition, il vous suffit de cliquer sur la X en haut a gauche.

Conclusion.

Nous venons de voir comment modifier notre interface Lovelace UI, c’est une base simple, nous essaierons de détailler les différentes cartes et vous parler des cartes manuelles lors d’une prochaine mise à jour.


Vous souhaitez signaler un erreur, partager votre configuration ou ajouter un matériel fonctionnant ? Cliquez sur les boutons ci-dessous.


Trucs & astuces.

Mise à jour : (détails)

26/06/2020 :

  • Publication Officielle. (McFly)

24/06/2020 :

  • Correction & Mise à jour. (McFly)

27/05/2020 :

  • Correction (evenisse)

26/05/2020 :

  • Création de l’article.

Sources.

Découvrir Lovelace UI.