HA Switch Plate installation

TheD6Bel · Juillet 3, 2020, 2:12

Plublié par : https://hacf.fr/ha-switch-plate-installation/

HA Switch Plate installation et intégration à Home Assistant

Introduction

Je vais vous présenté un projet disponible sur GitHub: HA Switch Plate (de son petit nom HASP)
Il s’agit d’un projet qui a beaucoup de potentiel, que ça soit pour contrôler ou interagir avec votre installation domotique Home Assistant.
A l’origine le projet est construit autour d’un écran Nextion de 2.4″ mais pour un meilleur confort je me suis lancer avec un écran 3.5″.
Cet article sera découpé en trois parties Installation (software), Configuration et enfin la Mise en place (qui n’est pas encore fini chez moi)

Sans plus attendre voici comment faire

Mise à jour : 26/06/2020 – Temps de lecture / réalisation : < 1 / 60/90 min – Difficulté : Faible.

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

Un écran nextion 2.4″ ou comme moi un 3.5″ (Aliexpress)
Le firmware pour l’écran 2.4″ ICI ou 3.5″ ICI
Un wemos D1 mini (Aliexpress)
De quoi l’alimenter, j’ai commandé un HLK-5M05 220v vers 5v (pas encore reçu)(Amazon / Aliexpress)
Une plaque d’essai pour connecter et brancher l’alim en toute sécurité (Amazon / Aliexpress)
PCB pour finaliser votre projet. (Amazon / Aliexpress)
Câbles Dupont (Amazon / Aliexpress)
Avoir installé ces addons:
- Mosquitto broker
- Terminal & SSH
- File editor pour modifier les fichiers YAML
de la patience.

Installation

Etapes 1a, flasher le wemos D1 mini :

Tout d’abord, nous allons nous occuper du flash du wemos avec le dernier firmware disponible sur le github

Téléchargements :

Le firmware qui est disponible ICI
NodeMCU Flasher: win32 ou win64

Ensuite, lancer NodeMCU Flasher, sur le deuxième onglet “config”, cliquer sur la roue crantée et rechercher le .bin téléchargé juste avant. Il faudra ensuite revenir sur le premier onglet “operation” et lancer le flash.

Etapes 1b Configuration du wemos D1 mini:

Donc, quand le flash est fini il vous suffira de vous connecter sur le wifi SSID “HASwitchPlate” avec le mot de passe “hasplate”
Vous pouvez aussi scanner ce QRcode

Puis cliquer sur le bouton Configure WiFi, sur cette nouvelle page, vous devez d’abord configurer votre wifi, le serveur MQTT, le node et pour finir le ota password

MQTT Serveur/Port/User/Password: les infos de votre Mosquitto broker
HASP node: c’est le nom du noeud
OTA password: c’est pour protéger l’accès à l’interface du wemos

Ensuite, cliquer sur save, celui-ci va se connecter à votre réseau wifi puis sur votre serveur MQTT

Etapes 2, flasher l’écran :

Cette partie est très simple, copiez le fichier “HASwitchPlate.tft” sur une carte micro SD (formaté en fat32) et insérer la ensuite dans le port sd du votre écran Nextion. Vous pouvez enfin alimenter votre nextion et flash vas se lancer automatiquement. A la fin du flash, débrancher simplement l’écran et retirer ensuite la carte sd.
/!Prenez le fichier en fonction de la taille de votre écran si non vous allez avoir une erreur à cette étape.

Etapes 3, le branchement :

Quand votre wemos et votre écran sont près il vous suffit de les connecter en suivant ces branchements :

Pin du Wemos	Câble de l’écran
5V	rouge
GND	noir
D7	bleu
D	jaune

Vous pouvez enfin alimenter votre wemos et normalement si vos branchements sont correct vous pouvez voir que votre qu’il se connecte au wifi et à votre serveur mqtt.

Etapes 4, integration dans Home assistant:

Nous y sommes… enfin presque 😉 vous devez maintenant lancer “terminal & ssh” depuis l’add-on store de Home Assistant
Il vous suffira ensuite de copier/coller cette commande et de l’exécuter :

bash <(wget -qO- -o /dev/null https://raw.githubusercontent.com/aderusha/HASwitchPlate/master/Home_Assistant/deployhasp.sh)

Pour les installation Home Assistant Core c’est trois lignes à copier/coller:

sudo su -s /bin/bash homeassistant
cd ~/.homeassistant
bash <(wget -qO- -o /dev/null https://raw.githubusercontent.com/aderusha/HASwitchPlate/master/Home_Assistant/deployhasp.sh)

Le terminal vous demandera le taper le nom du node que vous avez configurer sur votre wemos, valider ensuite

HA vous indiquera que l’installation c’est bien dérouler

Et enfin il vous affichera un long code, ceci sert à configurer une nouvelle page dans Home assistant, copier le code

Dans HA allez dans “configurer l’interface utilisateur”, “ouvrir le menu Lovelace UI”, et enfin sur “Editeur de configuration”.

Copier simplement le code en toutes fin de page, cliquez ensuite deux fois sur la crois en haut à gauche et vous devriez avoir une nouvelle page.
Enfin vous devez redémarrer HA

Bravo, vous touchez enfin au but

cliquer sur la nouvelle page, nous allons maintenant configurer une partie de l’écran, les autres configuration seront à faire directement depuis les fichiers YAML (voir la partie Configuration)
Il faut d’abord cliquer sur “click here for HASP “votre node” First_Time Setup” et votre écran va enfin afficher quelques chose d’interessant 🙂

“Active Page” vous indique sur qu’elle numéro de page est affiché à l’écran
“Page” vous servira pour configurer la page en question à vous de choisir selon vos besoin/envie
“Label” vous servira pour configurer le nom à affiché sur les boutons en bas (gauche, centre, droite)
“Font” servira à configurer la taille et la police utilisé

Donc, ici se fini l’installation d’HASP sur Home Assistant, dans la seconde partie ont passe à l’explication et configuration de quelques pages
Accrochez-vous

Configuration :

La partie la plus complexe c’est maintenant, les débutants vont avoir quelques difficultés de compréhension, mais au final rien d’insurmontable 😉

Le script que vous avez exécuté plus haut a installé les fichiers de configuration, ils se trouvent dans config/packages/votre_node
Soit vous modifiez les fichiers avec l’addon File Editor (en mode easy) soit avec un autre éditeur de texte (en mode moins easy), j’ai eu quelques bugs avec File Editor, j’ai donc modifier les fichiers avec NotePad++

Les pages et leurs boutons

Avant de rentrer dans le vif du sujet je dois d’abord vous donner quelques explications sur les boutons des différentes pages

Sur chaque pages vous trouverez des boutons de b1 jusqu’à b15, les boutons b1,b2 et b3 sont les raccourcis pour les 3 différentes pages (configuré depuis Home Assistant), les autres boutons sont configurable à souhait, avec plus au moins de difficulté, c’est à vous de choisir quoi faire 😉 et c’est ce que je vais vous expliquer mais pour ne pas être trop long je ne ferais que quelques exemples, le but est que vous compreniez la base pour modifier les autres pages par vous même.

P0

P1-P3

P4-P5

P6

P7

P8

P9

P10

P11

Configuration des pages

Page3, toggle:

Pour commencer, prenons la pages 3 “hasp_VOTRENODE_p3_toggles.yaml” qui sera en première page (bouton b1):

# Automations for handling toggle state buttons on page 3
automation:
  # Set font and text for toggle buttons on device connection
  - alias: hasp_plate01_p3_ToggleInit
    trigger:
      - platform: state
        entity_id: "binary_sensor.plate01_connected"
        to: "on"
      - platform: homeassistant
        event: start
    action:
      # Set font and justification for the 4 buttons (b4-b7)
      - service: mqtt.publish
        data:
          topic: "hasp/plate01/command/json"
          payload: '["p[3].b[4].font=8","p[3].b[5].font=8","p[3].b[6].font=8","p[3].b[7].font=7","p[3].b[4].xcen=2","p[3].b[5].xcen=2","p[3].b[6].xcen=2","p[3].b[7].xcen=1"]'
      # Set text labels for the top 3 buttons (b4-b6)
      - service: mqtt.publish
        data:
          topic: "hasp/plate01/command/json"
          payload: '["p[3].b[4].txt="Light 1 "","p[3].b[5].txt="Light 2 "","p[3].b[6].txt="Light 3 ""]'

p[X].b[X] Signifie PagesX boutonX donc p[3].b[5] c’est page3 bouton b5

# Set font and justification for the 4 buttons (b4-b7) : vous pouvez configurer la police et la position
# Set text labels for the top 3 buttons (b4-b6) : c’est ici que vous devez configurer les noms que vous voulez affiché

Les lignes de code suivantes sont de simple automation, si vous appuyez sur bX (trigger) alors excécute la commande (action)

  # Toggle light1 when p[3].b[4] pressed
  - alias: hasp_plate01_p3_ToggleLight1
    trigger:
      - platform: mqtt
        topic: "hasp/plate01/state/p[3].b[4]"
        payload: "ON"
    action:
      - service: homeassistant.toggle
        entity_id: light.light_1

Maintenant à vous de modifier les actions, voici se que j’ai mis pour le bouton b4, quand j’appuie sur b4 de la page 3= allume ou éteint l’entité de la salle à manger :

  # Toggle light1 when p[3].b[4] pressed
  - alias: hasp_chambre1_p3_ToggleLight1
    trigger:
      - platform: mqtt
        topic: "hasp/chambre1/state/p[3].b[4]"
        payload: "ON"
    action:
      - service: homeassistant.toggle
        entity_id: light.qubino_led_salle_a_manger_level_10

Maintenant, il ne vous reste plus qu’à faire pareil pour les deux autres boutons mais se n’est pas fini vous devez ensuite configurer quelques lignes de code, repérer light.light_1 et remplacer la par votre entity_id configurer pour le bouton b4, light.light_2 par votre entity_id configurer pour le bouton b5 et enfin light.light_3 par votre entity_id configurer pour le bouton b6, rechargez vos automations et voilà vous avez fini la configuration de votre première page

Pour ceux qui utilise un écran 3.5″

La configuration est la même mais vous devez configurer les positions des icones, pour se faire repérer dans le code “xstr 0,” il y en a 6. remplacer le deuxième chiffre par les valeurs du tableau:

valeurs d’origine	nouvelles valeurs
0,2,…	0,25,…
0,69,…	0,125,…
0,136,…	0,225,…

          payload_template: >-
            [{% if states('light.light_1') == "on" -%}
              "delay=1","xstr 0,2,50,65,8,65280,65535,1,1,3,"""
            {%- else -%}
              "delay=1","xstr 0,2,50,65,8,{{
states('input_number.hasp_plate01_unselectedforegroundcolor')|int }},0,1,1,3,"""
            {%- endif %}]

          payload_template: >-
            [{% if states('light.light_1') == "on" -%}
              "delay=1","xstr 0,25,50,65,8,65280,65535,1,1,3,"""
            {%- else -%}
              "delay=1","xstr 0,25,50,65,8,{{ states('input_number.hasp_plate01_unselectedforegroundcolor')|int }},0,1,1,3,"""
            {%- endif %}]

Page7, alarme:

La configuration ici est vraiment beaucoup plus simple (ouf)

Vous devez commencer par configurer votre alarme. Quand votre alarme est opérationnelle vérifier ensuite le nom de son entité (outils de développement, états recherche alarme) et noter son nom complet

Ouvrer ensuite le page 7 hasp_VOTRENODE_p7_alarm.yaml et remplacer dans toute la page alarm_control_panel.ha_alarm par le nom de votre entité
/!sur toute la page/!

  # set key labels at system start when system is disarmed, or when switching to disarmed
  - alias: hasp_chambre1_p7_AlarmDisarmed
    trigger:
      - platform: state
        entity_id: alarm_control_panel.home_alarm
        to: "disarmed"
      - platform: state
        entity_id: "binary_sensor.chambre1_connected"
        to: "on"
      - platform: homeassistant
        event: start
    condition:
      - condition: state
        entity_id: alarm_control_panel.home_alarm
        state: "disarmed"
    action:
      - service: mqtt.publish
        data:
          topic: "hasp/chambre1/command/json"
          payload: '["p[7].b[13].font=0","p[7].b[13].pco=63488","p[7].b[13].bco=65535","p[7].b[13].txt=" DIS\rARMED"","p[7].b[15].font=1","p[7].b[15].pco=65535","p[7].b[15].bco=63488","p[7].b[15].txt="ARM""]'

Dans mon exemple vous pouvez constater que mon entité se nomme “alarm_control_panel.home_alarm”

Ensuite, C’EST FINI, il faut recharger les automations de HA et rebooter votre wemos pour prendre en compte toutes les modifications aux fichiers.

Dans les pages suivante vous trouverez d’autres exemples

p9_hvac.yaml

J’ai un airco dans ma chambre, je me suis dit pourquoi pas une page pour le contrôler mais comme vous pouvez le constater la page d’origine ne convient pas (température max-min) j’ai donc dû la modifier pour qu’elle soit le plus simple possible, à gauche les différents mode, la température de consigne et enfin les boutons pour augmenter ou diminuer la température de consigne, voici le résultat

Ici il y a trop de modifications à faire, je vous met le code complet vous devrez remplacer “chambre1” par le nom de votre noeud et remplacer “climate.office_ac” pour le nom de votre entité de l’airco

##############################################################################
# Automations for handling climate controls on page 9
automation:

Set font and text labels for scene buttons on device connection

alias: hasp_chambre1_p9_HVACInit

trigger:

platform: state

entity_id: « binary_sensor.chambre1_connected »

to: « on »
platform: homeassistant

event: start

action:
service: mqtt.publish

data:

topic: « hasp/chambre1/command/json »

payload_template: >-

[« p[9].b[4].font=8 »,« p[9].b[4].txt="" »,

« p[9].b[5].font=8 »,« p[9].b[5].txt="" »,

« p[9].b[6].font=10 »,« p[9].b[6].ycen=2 »,

« p[9].b[7].font=8 »,« p[9].b[7].txt="" »,

« p[9].b[8].font=8 »,« p[9].b[8].txt="" »,

« p[9].b[9].font=10 »,« p[9].b[9].bco=63488 »,« p[9].b[9].txt="" »,

« p[9].b[10].font=8 »,« p[9].b[10].txt="" »,

« p[9].b[11].font=8 »,« p[9].b[11].txt="" »,

« p[9].b[12].font=10 »,« p[9].b[12].bco=31 »,« p[9].b[12].txt="" »]
service: mqtt.publish

data:

topic: « hasp/chambre1/command/p[9].b[6].txt »

payload_template: ‹ «   {{ state_attr(« climate.office_ac », « temperature ») }}° » ›




Display current HVAC temp on HASP when updated in Home Assistant

alias: hasp_chambre1_p9_UpdateHVACTemp

trigger:

platform: state

entity_id: « climate.office_ac »

condition:

condition: template

value_template: ‹ {{ trigger.from_state and trigger.to_state.attributes.temperature != trigger.from_state.attributes.temperature }} ›

action:

service: mqtt.publish

data:

topic: « hasp/chambre1/command/p[9].b[6].txt »

payload_template: ‹ «   {{ state_attr(« climate.office_ac », « temperature ») }}° » ›




Catch either of the « mode » buttons, iterate through the list of supported modes, and

select the next one in the list or loop back to the beginning if it’s the last item


alias: hasp_chambre1_p9_HVACModeB4

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[4] »

payload: « ON »

action:
service: climate.set_hvac_mode

data:

entity_id: « climate.office_ac »

hvac_mode: « off »



alias: hasp_chambre1_p9_HVACModeB5

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[5] »

payload: « ON »

action:
service: climate.set_hvac_mode

data:

entity_id: « climate.office_ac »

hvac_mode: « heat »



alias: hasp_chambre1_p9_HVACModeB7

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[7] »

payload: « ON »

action:
service: climate.set_hvac_mode

data:

entity_id: « climate.office_ac »

hvac_mode: « cool »



alias: hasp_chambre1_p9_HVACModeB8

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[8] »

payload: « ON »

action:
service: climate.set_hvac_mode

data:

entity_id: « climate.office_ac »

hvac_mode: « dry »



alias: hasp_chambre1_p9_HVACModeB10

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[10] »

payload: « ON »

action:
service: climate.set_hvac_mode

data:

entity_id: « climate.office_ac »

hvac_mode: « fan_only »



alias: hasp_chambre1_p9_HVACModeB11

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[11] »

payload: « ON »

action:
service: climate.set_hvac_mode

data:

entity_id: « climate.office_ac »

hvac_mode: « heat_cool »




Increment HVAC high temp set point when p[9].b[9] is pressed

alias: hasp_chambre1_p9_SetHVACTempPlus

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[9] »

payload: « ON »

action:
service: climate.set_temperature

entity_id: « climate.office_ac »

data_template:

temperature: ‹ {{ state_attr(« climate.office_ac », « temperature ») + 1 | int}} ›




Decrement HVAC high temp set point when p[9].b[12] is pressed

alias: hasp_chambre1_p9_SetHVACTempMinus

trigger:

platform: mqtt

topic: « hasp/chambre1/state/p[9].b[12] »

payload: « ON »

action:
service: climate.set_temperature

entity_id: « climate.office_ac »

data_template:

temperature: ‹ {{ state_attr(« climate.office_ac », « temperature ») - 1 | int}} ›



##############################################################################

Automations to set colors on HASP Page 9


alias: hasp_chambre1_p9_ColorConfig_selectedforegroundcolor

trigger:

platform: state

entity_id: « binary_sensor.chambre1_connected »

to: « on »
platform: homeassistant

event: start
platform: state

entity_id: input_number.hasp_chambre1_selectedforegroundcolor

action:
service: mqtt.publish

data:

topic: « hasp/chambre1/command/json »

payload_template: >-

[« p[9].b[4].bco={{ states(‹ input_number.hasp_chambre1_selectedforegroundcolor ›)|int }} »,

« p[9].b[5].pco={{ states(‹ input_number.hasp_chambre1_selectedforegroundcolor ›)|int }} »,

« p[9].b[6].pco={{ states(‹ input_number.hasp_chambre1_selectedforegroundcolor ›)|int }} »]


alias: hasp_chambre1_p9_ColorConfig_selectedbackgroundcolor

trigger:

platform: state

entity_id: « binary_sensor.chambre1_connected »

to: « on »
platform: homeassistant

event: start
platform: state

entity_id: input_number.hasp_chambre1_selectedbackgroundcolor

action:
service: mqtt.publish

data:

topic: « hasp/chambre1/command/json »

payload_template: >-

[« p[9].b[4].pco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »,

« p[9].b[5].pco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »,

« p[9].b[6].bco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »,

« p[9].b[7].pco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »,

« p[9].b[8].pco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »,

« p[9].b[10].pco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »,

« p[9].b[11].pco={{ states(‹ input_number.hasp_chambre1_selectedbackgroundcolor ›)|int }} »]


alias: hasp_chambre1_p9_ColorConfig_unselectedforegroundcolor

trigger:

platform: state

entity_id: « binary_sensor.chambre1_connected »

to: « on »
platform: homeassistant

event: start
platform: state

entity_id: input_number.hasp_chambre1_unselectedforegroundcolor

action:
service: mqtt.publish

data:

topic: « hasp/chambre1/command/json »

payload_template: >-

[{%- for i in range(4,13) -%}« p[9].b[{{i}}].pco2={{ states(‹ input_number.hasp_chambre1_unselectedforegroundcolor ›)|int }} »{% if not loop.last %},{% endif %}{%- endfor -%}]

alias: hasp_chambre1_p9_ColorConfig_unselectedbackgroundcolor trigger:
- service: mqtt.publish data: topic: « hasp/chambre1/command/json » payload_template: >- [{%- for i in range(4,13) -%}« p[9].b[{{i}}].bco2={{ states(‹ input_number.hasp_chambre1_unselectedbackgroundcolor ›)|int }} »{% if not loop.last %},{% endif %}{%- endfor -%}]

p4_dimmers.yaml

Depuis cette page vous pourrez configurer vos dimmer simplement. Dans cette partie du code vous devez configurer les noms des 3 sliders

# Automations to configure slider controls on page 4 as light dimmers
automation:
  - alias: hasp_chambre1_p4_DimmersInit
    trigger:
      - platform: state
        entity_id: "binary_sensor.chambre1_connected"
        to: "on"
      - platform: homeassistant
        event: start
    action:
      - service: mqtt.publish
        data:
          topic: "hasp/chambre1/command/p[4].b[4].txt"
          payload: '"Chambre"'
      - service: mqtt.publish
        data:
          topic: "hasp/chambre1/command/p[4].b[5].txt"
          payload: '"Couloir"'
      - service: mqtt.publish
        data:
          topic: "hasp/chambre1/command/p[4].b[6].txt"
          payload: '"Salle de Bain"'

il faudra aussi configurer se qui suit et compléter avec le nom de votre entité à contrôler, dans mon cas c’est “light.qubino_chambre_parentale_level”

  # when the user moves the slider, change the light in Hass
  - alias: hasp_chambre1_p4_Dimmer7UpdateHass
    trigger:
      - platform: mqtt
        topic: "hasp/chambre1/state/p[4].b[7].val"
    action:
      - service: light.turn_on
        data_template:
          entity_id: light.qubino_chambre_parentale_level
          brightness: "{{ trigger.payload }}"

When the light is changed in Hass, update HASP to move the dimmer

alias: hasp_chambre1_p4_Dimmer7UpdateHASP trigger:
- service: mqtt.publish data_template: topic: « hasp/chambre1/command/p[4].b[7].val » payload_template: « {{states.light.qubino_chambre_parentale_level.attributes.brightness|default(0)|int}} »

Et vous pouvez continuer sur votre lancé pour configurer les deux autres dimmer.

Depuis cette page vous pouvez aussi contrôler vos volets, il faudra pour ça modifier un peut le code, voici un exemple :

  # when the user moves the slider, change the light in Hass
  - alias: hasp_chambre1_p4_Dimmer7UpdateHass
    trigger:
      - platform: mqtt
        topic: "hasp/chambre1/state/p[4].b[8].val"
    action:
      - service: cover.set_cover_position
        data_template:
          entity_id: cover.fibaro_volet_principale_level
          position: "{{ ((trigger.payload | int) * 0.392156862745) | int}}"

When the light is changed in Hass, update HASP to move the dimmer

alias: hasp_chambre1_p4_Dimmer7UpdateHASP trigger:
- service: mqtt.publish data_template: topic: « hasp/chambre1/command/p[4].b[8].val » payload_template: « {{states.cover.fibaro_volet_principale_level.attributes.current_position|default(0)|int * 2.55 | round(0) }} »

Ici j’ai du compenser le fait qu’à la base pour le brightness est sur 255 niveaux mais les volets sont seulement sur 100 niveaux. J’ai donc du changer “brightness” par “position” et faire un petit calcul pour pour que la valeur final soit comprise entre 0 et 100

p2_status.yaml

La page météo, je travaille encore dessus pour tout traduire en français, je mettrais à jours quand la page sera à 100% en FR

Petites astuces de configuration

Icônes

Vous pouvez changer les icônes affiché à l’écran ce n’est pas compliqué,
aller en premier lieu sur le site https://fontawesome.com/cheatsheet/free/solid, sélectionner ensuite l’icône que vous souhaitez et faite un CTRL+C (copier), repérer ensuite dans le code le nom de votre bouton

          topic: "hasp/chambre1/command/p[1].b[7].txt"
          payload: '" Machine A Café"'

Juste avant le nom du bouton vous avez un carré, supprimer le et faite un CTRL+V (coller), un autre carré apparaitra (c’est l’icône que vous aviez copiée juste avant) il vous suffit ensuite de redémarrer HA

Tous les carrés dans les différentes pages sont des icônes.

Couleurs de fond

Vous pouvez modifier la couleur de fond des différent boutons (le background) comme j’ai fait sur la page P9 pour contrôler l’air-co. Vous pouvez trouver les différent code couleur sur le site de Nextion.

Pour ce qui est du code, c’est dans la première partie

"p[9].b[12].font=10","p[9].b[12].bco=31","p[9].b[12].txt=\"\""]

“p[9].b[12].bco=31” : ici c’est le code couleur pour du bleu

“p[9].b[12].txt=\”\” : c’est pour afficher le nom ou dans se cas ci une icône

Dans la partie suivante, nous allons traiter du placement de l’écran

Mise en place

Je n’ai pas encore reçu tout mon matériel (en général je dit que mes colis viennent à dos de pigeons voyageur, mais la il a eu le temps de faire 2 fois le tour du monde le pigeon…), je ne sais pour l’instant pas faire le placement, de plus je n’est pas d’imprimante 3D et je dois faire avec les moyens du bord pour le set de finition

Je vais profité d’un emplacement vide au dessus de l’interrupteur de ma chambre pour placer l’écran. j’ai utilisé un petit transfo qui va convertir le 220V en 5V assez puissant pour alimenter le Wemos et une plaque d’essai pour faire propre

Conclusion.

Donc comme vous avez pu le constater, il y a beaucoup de potentiel dans se projet, pour à peu près tous les niveaux, du débutant++ (comme moi) aux experts en YAML (comme vous peut être) avec plein d’intégrations possible de l’écran à coté d’un interrupteur ou directement sur un mur, la communauté anglaise est grande avec beaucoup de support de la part du créateur mais j’espère vous lire sur notre forum avec vos questions, vos réponses et vos photos de réalisation.

Voici au final les 3 pages que j’ai choisit d’afficher dans ma chambre

Vous souhaitez signaler un erreur, partager votre configuration ou bénéficier d’une aide ? Cliquez sur les boutons ci-dessous.

Aides (Forum).

Vous souhaitez signaler un erreur, partager votre configuration, ajouter un matériel fonctionnant, ou bénéficier d’une aide ? Cliquez sur les boutons ci-dessous.

Partager une config.

Signaler une faute.

Ajouter un matériel.

Trucs & astuces.

Mise à jour : (détails)

26/06/2020 :

Publication Officielle. (McFly)

26/05/2020 :

Mise en page & Ajout des liens (McFly)

08/05/2020 :

Création de l’article

Sources.

GitHub
DrzZz discord
Forum officiel Home Assistant
Forum HACF

DcJona · Juillet 6, 2020, 12:18

Hé ben on peut dire que c’est détaillé tout çà !
j’utilise des nextions mais j’ai trouvé plus simple de passé par un design diy , esp easy, recupérer l’idx et le gérer en mqtt… Il faudrait que je fasse un test sous esphome tiens

TheD6Bel · Juillet 6, 2020, 2:08

Merci c’est mon 1er article pour le site, j’ai essayé d’être le plus complet possible pour qu’un maximum de personnes puissent faire pareil.

Maintenant les possibilités avec HASP sont vraiment énormes faut juste comprendre de fonctionnement avec les automations

N’hésite pas à partager ta réalisation ça peut servir a d’autre

DcJona · Juillet 7, 2020, 7:56

En fait c’est tout simple je récupère la valeur d’un bouton via son info unique (idx) et je traité par mqtt cette info sur node red directementsui attaque mosquitto .
Voici deux vidéos

TheD6Bel · Juillet 8, 2020, 6:39

C’est vrai que ta version à un beau design et merci pour ta chaîne youtube, tu m’a donné des idées avec les balles de ping-pong en horloge

manu_67 · Juillet 8, 2020, 9:10

Super style vos deux projets! Top l’article!

DcJona · Juillet 8, 2020, 9:43

c’était surtout plus simple pour la gestion … le design apres tu passes par photoshop tu fais ce que tu veux

cadetjc · Septembre 8, 2020, 5:44

Bravo pour ce tuto en français. Beaucoup de chose en anglais… mais quand on ne maitrise pas la langue, ça devient très compliqué!
Étant un débutant plus que plus c’était le tuto pour comprendre.
Pour la meteo j’ai pas mal cherché, et suis rendu compte qu’il fallait changer tout les « weather.nws » par notre entité perso.
Et la traduction se fait en indiquant en français toutes les conditions météo dans toutes ces lignes ou on trouve « |replace(« partlycloudy »,« partly cloudy »)| et ajouter les conditions qu’il manquent
exemple: »|replace(« sunny »,« soleil »)|"