Débuter
Protocoles
S'équiper
Matériel recommandé

Vous voulez participer au financement du blog. C’est simple, suivez les liens commerciaux pour faire vos achats. Quelques pourcents qui font toute la différence. Merci à vous !

raspberry pi 4 2019
Raspberry Pi 4 - 4GB
Cartes micro-SD SDHC v90 (x2)
nas synology ds718 plus
NAS Synology 768+
Disque dur de qualité serveur (x2)
Extension RAM 8GB
aeotec controleur usb z-wave plus
Contrôleur Z-Wave+ USB
Emetteur / récepteur radio RFXCom / RFLink
Contrôleur Zigbee ConBee II USB
Onduleur 400VA

Home Assistant. Personnaliser l’interface avec un thème (Raspberry Pi ou NAS Synology)

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Depuis la version 0.89, Home Assistant permet de créer des thèmes pour personnaliser l’interface Lovelace. L’installation est similaire sur Raspberry Pi et le Docker Hassio pour NAS Synology. Cela ne prend que quelques minutes et change vraiment l’aspect de l’interface de Home Assistant. La communauté d’utilisateurs étant vraiment très active, on trouve un grand nombre de thème pour tous les goûts.

 

Il est également possible d’installer très facilement des thèmes (et des composants) à l’aide de l’extension Home Assistant Community Store (HACS).

A LIRE AUSSI :
Home Assistant Community Store (HACS), installer facilement des thèmes et composants
Remarque, il est également possible d’installer les fichiers des thèmes à l’aide de File Editor (ancien Configurator). Cependant, c’est moins pratique lorsqu’on a de nombreux thèmes à installer. En effet, il n’est possible de téléverser qu’un seul fichier à la fois avec File Editor sur le serveur Home Assistant. C’est la raison pour laquelle nous utiliserons pour ce tutoriel l’add-on Samba Share qui permet d’accéder à distance aux dossiers du serveur HASS depuis un PC Windows, macOS ou Linux.

Récupérer des thèmes pour Home Assistant

Il n’existe pas de dépôt officiel ni d’add-on permettant de trouver simplement des thèmes. Il faut chercher un peu partout sur le forum, GitHub ou Home Assistant Awesome pour trouver des thèmes. Voici les principales sources. N’hésitez pas à utiliser les commentaires pour me signaler d’autres sources intéressantes

Pour ce tutoriel, nous utiliserons les thèmes gérés par Maarten Paauw. Aller sur GitHub et cliquer sur Clone or Download puis Download ZIP pour récupérer l’archive contenant tous les thèmes. Décompressez l’archive avec votre logiciel favori.

download home assistant themes github maarten

Un exemple de thème

Comme d’habitude avec Home Assistant, tout se fait à l’aide d’un fichier de configuration au format YAML. Voici le script du thème Amoled.

Ce qu’il faut retenir :

  • L’étiquette permet de définir le nom du thème. Attention, pas de caractères accentués, d’espaces ou de caractères spéciaux
  • Les principaux styles disponibles sont listés ici.
  • Chaque style définit une couleur d’affichage. On pourra indiquer la couleur par son code Hexa. On trouve des dizaines de sélecteurs de couleur en ligne comme celui-ci. On pourra appliquer un couleur à plusieurs styles à l’aide de la commande var(–NOM_DE_LA_COULEUR)
amoled:
  primary-color: "#484A4C"
  accent-color: "#E45E65"
  dark-primary-color: "var(--accent-color)"
  light-primary-color: "var(--accent-color)"
  primary-text-color: "#FFFFFF"
  text-primary-color: "var(--primary-text-color)"
  secondary-text-color: "#5294E2"
  disabled-text-color: "#7F848E"
  label-badge-border-color: "green"
  primary-background-color: "#000000"
  secondary-background-color: "#383C45"
  sidebar-text-color: "var(--primary-color)"
  sidebar-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-selected-icon-color: "var(--primary-text-color)"
  divider-color: "rgba(0, 0, 0, .12)"
  table-row-background-color: "#353840"
  table-row-alternative-background-color: "#3E424B"
  paper-listbox-color: "#FFFFFF)"
  paper-listbox-background-color: "#000000"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-200: "#414A59"
  paper-card-header-color: "var(--accent-color)"
  paper-card-background-color: "#000000"
  paper-dialog-background-color: "#000000"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-icon-active-color: "#F9C536"
  paper-item-icon_-_color: "green"
  paper-item-selected_-_background-color: "#434954"
  paper-tabs-selection-bar-color: "green"
  label-badge-red: "var(--accent-color)"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-background-color: "#2E333A"
  paper-button-ink-color: "#5294E2"
  paper-button-color: "#5294E2"
  paper-toggle-button-checked-button-color: "var(--accent-color)"
  paper-toggle-button-checked-bar-color: "var(--accent-color)"
  paper-toggle-button-checked-ink-color: "var(--accent-color)"
  paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
  paper-slider-knob-color: "var(--accent-color)"
  paper-slider-knob-start-color: "var(--accent-color)"
  paper-slider-pin-color: "var(--accent-color)"
  paper-slider-active-color: "var(--accent-color)"
  paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
  paper-slider-secondary-color: "var(--secondary-background-color)"
  paper-slider-disabled-active-color: "var(--disabled-text-color)"
  paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
  google-red-500: "#E45E65"
  google-green-500: "#39E949"
  card-background-color: var(--paper-card-background-color)

Installer des thèmes sur l’image Docker Hassio pour Raspberry Pi

Depuis que Home Assistant est livré sous la forme d’une image à copier sur une carte microSD pour le Raspberry Pi, il est plus difficile d’installer de nouveaux fichiers. La console d’administration en ligne de commande (CLI) de l’image peut rebuter les débutant et les anglophobes. Voici comment faire.

A LIRE AUSSI :
Home Assistant. Installation et prise en main sur Raspberry Pi 4. Procédure 2020

Installer l’Add-on (plugin) Samba Share

Pour accéder facilement aux fichiers de Home Assistant à distance, le plus facile est d’installer l’add-on Samba Share. Ce plugin permet d’accéder aux fichiers du Raspberry Pi depuis un PC Windows depuis l’explorateur de fichiers ou d’un Mac depuis le Finder.

Ouvrez le Superviseur

Supervisor Home Assistant

Ouvrez l’onglet Add-on Store et faites une recherche sur le mot clé samba.

Chercher l'add-on Samba share pour Home Assistant

Cliquer sur la carte du plugin et lancer l’installation (install)

Installer l'add-on Samba Share pour Hassio

 

Une fois l’installation terminée, ouvrez l’onglet configuration et modifiez les paramètres suivants :

  • username utilisateur. Sans caractères accentués ni d’espaces
  • password mot de passe de connexion à Samba

Cliquez sur Save pour enregistrer la configuration

Configurer Samba share

Cocher Start on Boot et Auto update puis démarrer le Samba en cliquant sur Start

5 home assistant start samba add on

Ouvrez le journal (log) pour vérifier que tout se passe bien. Vous pouvez également connaître le nom du dossier de partage qui va apparaître dans l’explorateur de fichier ou le Finder.

4b log samba share

Ouvrez le dossier config avec Samba

Une fois que le service Samba est correctement démarré, quelques instants après le démarrage du service, vous devriez voir apparaître un nouveau dossier sur le réseau nommé homeassistant.

Ouvrez ce dossier en indiquant votre nom d’utilisateur et éventuellement le mot de passe (conseillé)

6 hassio open config folder docker raspberrypi samba

Allez dans le dossier config et créez un nouveau répertoire nommé themes (sans accent). Collez les thèmes précédemment récupérés sur GitHub dans ce nouveau dossier.

Installer des thèmes pour Hassio sur un NAS Synology

Pour les utilisateurs de Home Assistant sur NAS Synology, l’installation des thèmes est beaucoup plus facile. Connectez-vous au NAS depuis le gestionnaire de fichier sous Windows ou le Finder sur macOS. Tous les fichiers de configuration du container Docker Hassio sont stockés dans un dossier partagé.

A LIRE AUSSI :
Home Assistant. Installation et configuration du package Docker Hassio (NAS Synology DS718+)

Ouvrez le dossier partagé (ici HASS) et naviguer jusqu’au dossier homeassistant, c’est le dossier config !. Créez un nouveau dossier themes (sans accents)

Dossier config Home Assistant sur NAS Synology

Copiez les fichiers des thèmes précédemment récupérés sur GitHub dans ce nouveau dossier. C’est tout !

Modifier le fichier configuration.yaml

Maintenant que les thèmes sont installés dans le dossier config, il ne reste plus qu’à les déclarer dans le fichier configuration.yaml. Pour cela, vous pouvez utiliser l’add-on Visual Studio Code sur un NAS ou un éditeur de code (NodePad++, sublimetext…) sur PC ou macOS.

Coller à la fin du fichier ce nouveau bloc. Attention à respecter les 2 espaces avant themes (formalisme YAML)

frontend:
  themes: !include_dir_merge_named themes

Enregistrer et redémarrer Home Assistant en allant dans Configuration -> Contrôle du Serveur -> Redémarrer (en bas de la page)

Redémarrer le serveur HomeAssistant manuellement

Changer de thème

La sélection du thème se fait depuis le menu utilisateur. Cliquez sur l’icône utilisateur situé en bas de la barre latérale. Sélectionner le thème dans la liste. Le thème est appliqué à chaud sans avoir à redémarrer ou actualiser l’affichage.

Sélectionner un thème

Et voilà, c’est aussi simple que ça !

Thème iOS pour Home Assistant

D’autres tutoriels et projets pour exploiter tout le potentiel de Home Assistant

Mises à jour

18/06/2020Publication du tutoriel

Avez-vous aimé cet article ?
[Total: 0 Moyenne: 0]

Vous rencontrez un problème avec ce sujet ?

Peut-être que quelqu’un a déjà trouvé la solution, visitez le forum avant de poser votre question

Accéder directement aux forums

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Vous avez aimé ce projet ? Ne manquez plus aucun projet en vous abonnant à notre lettre d’information hebdomadaire!

Nous serions ravis de connaître votre avis

      Laisser un commentaire

      Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

      Domotique et objets connectés à faire soi-même