navbar-card : Une barre de navigation mobile pour Home Assistant

Les menus de l’application Home Assistant, ne sont pas terribles par défaut. C’est pourquoi il existe navbar-card, une intégration du Home Assistant Community Store afin d’ajouter une barre de navigation comme n’importe quel autre application.

Tous les détails de la mise en place sont couverts dans la vidéo liée à cet article, je vous laisse y faire un tour. En plus de navbar-card, j’utilise une autre intégration : Kiosk mode, afin de masquer la barre de menu en haut de l’application. Ça me permet de récupérer un peu de pixels pour mon dashboard mobile mais également d’épurer l’interface de mon app.

J’ai une gestion précise de mon dashboard mobile pour Home Assistant, j’ai un dashboard dédié et optimiser pour le mobile, que je mets par défaut dans les préférences de l’application Home Assistant. J’utilise différentes pages, une par défaut qui me permet de centraliser toutes les informations et contrôle de la domotique au quotidien. Mais également d’autres dédiés à l’énergie, la sécurité, la météo ou les lumières.

Les deux intégrations que j’utilise sont toutes deux disponibles dans Home Assistant community store dont j’ai déjà réalisé du contenu pour effectuer son installation si ce n’est pas encore le cas sur votre installation.

Kiosk mode

Kiosk mode me permet très simplement de masquer l’interface par défaut de Home Assistant, particulièrement la hideuse barre bleu en haut. C’est aussi une intégration parfaite pour vos dashboards muraux qui s’appuie sur l’interface web de Home Assistant.

C’est un bout de code à insérer tout en haut de l’éditeur de configuration de votre dashboard : Modifier de dashboard, le menu avec les trois points puis dans l’éditeur de configuration. Avec ce code, la barre de navigation par défaut de Home Assistant est masquée uniquement si le dashboard est consulté depuis un petit écran comme l’application Home Assistant de votre smartphone.

kiosk_mode:
  mobile_settings:
    hide_header: true
    ignore_entity_settings: true
    custom_width: 768

Navbar Card

Navbar Card quant à lui ajouter une barre de navigation selon ce que vous définissez. Moi j’y ai mis les pages cités dans l’introduction de l’article avec un petit menu popup pour avoir un accès rapide aux paramètres mais aussi pour redémarrer rapidement mon serveur Home Assistant.

Le code ci-dessous correspond à mes besoins et doit être adapté avec vos pages de votre dashboard. Ce code se met en même endroit que celui du Kiosk mode. Je trouve l’intégration très simple d’usage, mais au besoin vous pouvez vous appuyer sur ma vidéo qui explique la configuration en détail !

navbar-templates:
  main_nav_bar:
    routes:
      - url: /dashboard-mobile/
        icon: mdi:home
        label: Home
      - url: /dashboard-mobile/weather
        icon: mdi:weather-cloudy
        label: Températures
      - url: /dashboard-mobile/securite
        icon: mdi:video
        label: Sécurité
      - url: /dashboard-mobile/energy
        icon: mdi:home-lightning-bolt-outline
        label: Energy
      - url: /dashboard-mobile/lumieres
        icon: mdi:lightbulb
        label: Lumières
      - icon: mdi:dots-horizontal
        label: More
        tap_action:
          action: open-popup
          haptic: true
        popup:
          - icon: mdi:cog
            url: /config/dashboard
          - icon: mdi:hammer
            url: /developer-tools/yaml
          - icon: mdi:power
            tap_action:
              action: call-service
              service: homeassistant.restart
              service_data: {}
              confirmation:
                text: Are you sure you want to restart Home Assistant?

La somme de mes astuces et de ces deux intégrations vous permet d’avoir une barre de navigation pour Home Assistant. Cependant je suis certain que l’équipe de Nabu Casa a déjà réfléchi à ce problème. J’imagine qu’une évolution de l’application est prévue dans la roadmap de développement.