NSPanel ui lovelace

Bonjour,
Je souhaite vous présenter mon modeste projet réalisé à l’aide mon NSPanel de chez Sonoff. L’idée de départ était de domotiser ma chaudière qui était pilotée par un thermostat avec un contact sec. Je souhaitais surtout que n’importe qui dans la famille puisse régler le nouveau thermostat connecté de manière simple. Le NSPanel servira à cela dans un premier temps.

première étape : flasher le sonoff avec Tasmota. J’utilise cette clé USB pour flasher tous mes devices sonoff : DSD Tech USB vers TTL Adaptateur Série avec Puce FTDI FT232RL.
cle

On démonte l’écran du NSPanel, on branche 4 fiches :

  • Tx vers Rx
  • Rx vers Tx
  • ground vers ground
  • Vcc vers Vcc
    Pour le flasher, je vais directement sur le github et j’utilise le web Installer qui fonctionne parfaitement.

Il ne reste plus qu’à configurer le NSpanel pour accueillir NSPanel ui lovelace correctement en suivant la doc ici..

Une fois fait, il ne reste plus qu’à l’aide du file editor dans Home Assistant pour modifier le fichier Yaml :
/config/appdaemon/apps/apps.yaml

Ceci m’a permis d’avoir les écrans suivants :
Screensaver :


Il y a :

  • en haut à gauche : un retour visuel si ma machine à laver est en marche
  • en haut à droite : un retour visuel si mon sèche-linge est en marche
  • Date et Heure
  • la météo annoncée pour demain
  • la température que je récupère sur un thermomètre intérieur (il passe en rouge si ma chaudière est allumée)
  • la température que je récupère sur un thermomètre extérieur
  • le temps de trajet en temps réel (waze) pour aller au travail
  • le temps de trajet en temps réel (waze) pour aller à la crèche
    Voici le code de cette carte :
    screensaver:
      theme:
        date: [255,255,255]
        background: [0,0,0]
        time : [255,255,255]
      defaultCard: navigate.menu_principal
      statusIcon1:
          entity: binary_sensor.is_washing_machine_running
          icon:
                "on": mdi:washing-machine
                "off": mdi:washing-machine
          color:
                "on": [255,0,0]
                "off": [0,0,0]
      statusIcon2:
          entity: binary_sensor.is_tumble_dryer_running
          icon:
                "on": mdi:tumble-dryer
                "off": mdi:tumble-dryer
          color:
                "on": [255,0,0]
                "off": [0,0,0]
      entities:
        - entity: weather.forecast_maison
          type: 0
        - entity: sensor.capteur_salon_temperature
          name: Intérieur
          color: '{{iif(states("switch.prise_chaudiere") == "off", "[255,255,255]", "[255,0,0]")}}'
        - entity: sensor.capteur_exterieur_temperature
          name: Dehors
          color: '{{iif(states("sensor.capteur_exterieur_temperature") |float < 20, "[0,0,255]", "[255,165,0]")}}'
        - entity: sensor.waze_travel_time
          name: Travail
          icon: mdi:car
          color: '{{iif(state_attr("sensor.waze_travel_time","distance") < 30, "[0,255,0]", "[255,165,0]")}}'
        - entity: sensor.trajet_creche
          name: Crèche
          icon: mdi:car
          color: '{{iif(state_attr("sensor.trajet_creche","distance") < 15, "[0,255,0]", "[255,165,0]")}}'

Une première carte que je considère comme le menu principal :


J’ai donc 6 menus. En voici le code :

      - type: cardGrid
        title: Menu Principal
        key: menu_principal
        entities:
          - entity: navigate.volume_bouilloire
            icon: mdi:kettle-steam
            name: Bouilloire
          - entity: navigate.cover_nuit
            icon: mdi:window-shutter
            name: Volets chambres
            color: [202, 26, 190]
          - entity: navigate.cover_jour
            icon: mdi:window-shutter
            name: Volets séjour
            color: [202, 26, 190]
          - entity: navigate.chauffage
            icon: mdi:fire-circle
            name: Chauffage
            color: '{{iif(states("switch.prise_chaudiere") == "off", "[255,255,255]", "[255,10,0]")}}'
          - entity: navigate.lumiere_nuit
            icon: mdi:lightbulb-outline
            name: Lum. chambres
            color: [255,128,0]
          - entity: navigate.lumiere_jour
            icon: mdi:lightbulb-outline
            name: Lum. séjour
            color: [255,128,0]

J’ai aussi 2 autres cartes :

  • une pour afficher des températures :
  • une carte pour afficher un QRcode qui permet à mes invités en le scannant de se connecter automatiquement à ma Livebox
    Ces cartes ci-dessus sont positionnées dans le fichier Yaml sous :
    cards:

Alors que celles décrites ci-dessous seront positionnées sous :

    hiddenCards:

Si on rentre dans le premier choix de ma page menu principal, on accède à des programmes pour lancer ma bouilloire avec une temporisation différente en fonction de la quantité d’eau que j’y mets. (oui je sais, ce genre de bouilloire existe mais je ne voulais pas en acheter une alors qu’avec une prise connectée j’obtiens le même résultat et je peux la lancer en auto dès mon réveil :slight_smile: )


Voici le code de cette carte :

      - type: cardGrid
        title: Volume bouilloire
        entities:
          - entity: input_button.bouilloire1
            icon: mdi:fraction-one-half
            name: "0.5"
          - entity: input_button.bouilloire2
            icon: mdi:circle-small
            name: "0.75"
          - entity: input_button.bouilloire3
            icon: mdi:numeric-1
            name: "1"
          - entity: input_button.bouilloire4
            icon: mdi:dots-horizontal
            name: "1.25"
          - entity: input_button.bouilloire5
            icon: mdi:mdi:kettle-steam-outline
            name: "1.5"
          - entity: input_button.bouilloire6
            icon: mdi:kettle-alert
            color: [255,0,0]
            name: "Max"
        key: volume_bouilloire

J’ai ensuite une carte pour gérer une famille de volets roulants :

      - type: cardEntities
        title: Volets Séjour
        entities:
          - entity: cover.cuisine1
          - entity: cover.cuisine2
          - entity: cover.salon
          - entity: cover.sejour
        key: cover_jour

Une carte pour certaines lumières :

      - type: cardGrid
        title: Lumières Séjour
        entities:
          - entity: light.lampe_buffet
            icon: mdi:floor-lamp
            name : Lampe buffet
          - entity: light.lampe_canape
            icon: mdi:floor-lamp
            name : Lampe canapé
          - entity: light.lumiere_salon
            icon: mdi:ceiling-light
            name : Lum salon
          - entity: light.lumiere_salle_a_manger
            icon: mdi:ceiling-light
            name : Lum salle à manger
          - entity: light.lumiere_balcon
            icon: mdi:ceiling-light
            name : Lum Balcon
        key: lumiere_jour

Une carte qui joue le rôle de thermostat :

      - type: cardThermo
        title: Chauffage
        entity: climate.chauffage
        key: chauffage

Je souhaitais simplement partager mon projet et peut-être aussi prendre des conseils mais aussi peut-être découvrir d’autres projets autour du NSPanel.

Merci pour votre lecture.

15 « J'aime »

Merci pour le partage :grinning:
J’y pense, mais se ne sera pas pour tout de suite…
@+ Guy

Bonjour

Merci pour le partage, du coup j’avais commencé à mettre esphome et j’ai continué avec la procédure pour esphome, j’arrive au même résultat.

Fred

Merci pour le partage et beau résultat.
Content de la réactivité ?
Je trouve la sensibilité de l’écran pas tip top. Tu en penses quoi ?

Effectivement, il y a quelques lags de temps à autre lorsque je clique dessus (voire parfois écran noir, je dois attendre une mise en veille auto pour que ça revienne à la normale).
Sinon, j’aime beaucoup avoir sous les yeux qq infos directement (température, temps de trajets et les popups pour les fins de machine à laver)
Aussi, ma fille de 6 ans est autonome sur pas mal de commande grâce à ce panel. (ouverture des volets, allumage ou extension des lumières…)
J’en suis globalement content.
Le nec plus ultra serait :

  • avoir des retours de vidéos (caméra porte d’entrée par exemple)
  • une meilleure fluidité comme tu l’as dit
  • des sons plus forts et personnalisables pour les popups
  • la date en français (cf message de @frederic34 ci-dessous)

Bonjour

J’ai la date en français sur le mien. Est ce que tu as babel ?

Fred

Effectivement, merci pour l’astuce, je ne connaissais pas. J’ai mis babel et c’est en français :grinning:

Merci pour ce tuto. Ca marche niquel :slight_smile:

1 « J'aime »

Bonjour,

vraiment top ce tuto merci.
J’ai une question est ce que c’est possible de le faire venir directement au menu principal après la sortie de veille car si on est dans le menu volet par exemple et que l’on reclique dessus il se met sur volet et non menu principal.

Excellente idée d’optimisation. Alors il faut rajouter 2 lignes (les dernières dans ces blocs) :

screensaver:
      theme:
        date: [255,255,255]
        background: [0,0,0]
        time : [255,255,255]
      defaultCard: navigate.menu_principal

et

- type: cardGrid
  title: Menu Principal
  key: menu_principal

Merci pour ta réponse mais je dois louper un truc

 type: screensaver2
  entities:
    - entity: weather.forecast_maison
    - entity: sensor.nspanel_analog_temperature1
    - entity: delete
    - entity: delete
    - entity: weather.forecast_maison
      type: 1
    - entity: weather.forecast_maison
      type: 2
    - entity: weather.forecast_maison
      type: 3
    - entity: alarm_control_panel.maison
      icon: mdi:shield-home
    - entity: switch.ac
      icon: mdi:home-thermometer
defaultCard: navigate.menu_principal
cards:
  - type: cardGrid
    title: Menu Principal
    key: menu_principal
    entities:
      - entity: navigate.alarme
        icon: mdi:shield-home
        name: Alarme

ensuite mes cartes :

   - type: cardAlarm
    entity: alarm_control_panel.maison
    title: Alarme
    supportedModes: ['arm_away','arm_custom_bypass']
    key: alarme
  - type: cardEntities
    entities:
      - entity: cover.volets_rdc
      - entity: cover.volets_suite_parentale
      - entity: cover.volets_etage
    title: Volets
    key: volets

Voici mon code, je me suis arrêté a ma première carte mais j’en ai d’autre après.

il reste sur le meme menu

Essaie de mettre le defautCard au même niveau que entities en terme d’indentation pour voir.

C’était simplement ça. Merci

1 « J'aime »