Dashboard personnalisé - Node-Red




Bonjour à tous !
J’ai enfin terminé ma version du Dashboard pour Homey, le chemin fut long, mais très intéressant ! Tout d’abord un gros merci @Satoer et tous les autres contributeurs pour avoir partagé leurs idées, sans lui je ne me serais jamais lancé !

Le Dashboard fonctionne parfaitement, tout ce qui est à l’écran est utilisable, l’idée était vraiment d’avoir un regroupement des fonctions dont j’ai le plus l’utilité. À terme, l’iPad sera accroché à l’entrée de la maison au mur, encore quelques travaux, et ce sera bon.

Le matériel utilisé :

  • Homey (Early 2019)
  • Un vieux iPad 2 (iOS 9.3.6).
  • Un Raspberry Pi 3 avec Mosquitto pour le Broker et Node-Red.
  • Et dans Homey, MQTT Hub et MQTT Client.

Le plus long a été la personnalisation du CSS pour avoir un look Homey, je suis assez content du résultat. Le but n’était pas non plus d’avoir un design identique à 100 %. Je suis parti du thème « Dark » de Node-Red pour le modifier à mon gout.

Mais il me reste encore un peu de taf, histoire de fignoler tout ça. J’aimerais bien changer le background en fonction de l’heure de la journée par exemple, ça pourrait être sympa visuellement. Programmer un ESP8266 pour déverrouiller l’iPad quand un mouvement est détecté, histoire qu’il ne reste pas tout le temps allumé. Ajouter une page « Météo » et une autre pour gérer les éclairages de façon plus précise que sur la page « Accueil ».

Bye !

Riko

Pour ceux qui souhaiteraient se lancer dans l’aventure, j’ai commencé une série de tutoriels.

Tutoriel 1 : L’installation des apps sur Homey, et de Raspian sur un Raspberry

Tutoriel 2 : Installation de Node-Red et de MQTT Mosquitto sur un Raspberry

Tutoriel 2a : Installation de Node-Red et de MQTT Mosquitto sur un Synology.

Pour ceux qui possèdent un NAS Synology et qui souhaitent s’en servir à la place du Raspberry.
Tutoriel crée par @Guiro, un grand merci à lui!

Tutoriel 3 : Paramétrer MQTT Hub et MQTT Client avec Homey

Tutoriel 4 : Création d’une interface Node-Red

BONUS : le CODE CSS de mon interface Node-Red

3 Likes

Ciao Riko,

Jolis boulot, je suis passé aussi par node et c’était plutôt sympa :slight_smile:

J’en profite juste pour te demander si tu as des soucis de mqtt hub ? Relance constante et perte de com chez moi. Enfin moi je bascule tt sur home assistant et je n’aurai plus besoin de mqtt mais en attendant ça m’arrangerait de trouver une solution fiable. Pour l’instant je relance le serveur toutes les heures pour rester au point.

Bonne journée,

Sven

Merci Sven, je ne connaissais pas Node-RED avant, entièrement d’accord avec toi, vraiment nickel pour développer une interface !

Non, pas de soucis avec MQTT Hub, j’ai la version 2.1.9 d’installée, et pour MQTT Client, la version 2.2.3. Quelques fois pour des tests, je lance le Broadcast histoire de tout mettre à jour et de vérifier avec MQTT Explorer.
C’est bizarre que tu doives relancer le Hub souvent :confused:

Riko

Tu pense que tu pourrais prendre un peu de ton temps pour nous faire un tuto détaillé, afin d’en faire profiter tout le monde ?

Je suis également très intéressé.

1 Like

Interesser oh que oui, mais le tuto devras etre detailler, je ne connais pas grand chose mais je sais qu’il y a beaucoup de travail.
Sa me donnerais l’occasion de demarrer avec un raspi

Sorry for the English post. My French is really “mauvais” :wink: (I used Google translate). But I just wanted to comment on this. This is looking really awesome thanks for sharing. Can I showcase this customized css dashboard in the Node Red openings post? (with your name as credit?).

I did this by soldering a wire on the hall sensor (magnetic smart cover) and pulling it to gnd with a ESP8266 (Wemos mini). But unless you need to open the iPad2 anyway, I definitely would not recommend it. I needed to replace the broken connector anyway, but it was a nightmare to open up. With Homeyduino I can lock and unlock the iPad.
Another less intrusive method is to put a small magnet on a small servo, and move the servo to the smart cover unlock position. (with an ESP8266 / homeyduino).
Last option I tried (what worked with an old iPad2) is by using an Logitec harmony hub + Homey harmony app and emulating a Bluetooth keyboard. But the Harmony app wasn’t that stable. (maybe now it is).

I’ve also made a more universal solution with an ESP32 that emulates a Bluetooth keyboard. But this sadly does not work with an old iPad 2 since it does not supports BLE:
https://community.homey.app/t/homey-esp32-bluetooth-keyboard-firmware-can-lock-unlock-ipad-remotely-dev-review-needed

Hi Michel!
Yes of course, you can showcase it :slightly_smiling_face: Without your original Node-Red post, I never started this journey. Thanks a lot for having share your work and for your help. I’m following your original Node-Red post, so I could answer in English if needed.

Sad news for the ESP32 and my old iPad. Well, I have 2 solutions, find a newer iPad or trying to make a black screen with CSS (but the iPad status bar is a problem, I can’t hide it).

@Anthony_Quesnel, @Goulven, @Shadow
Pas de soucis, le tutoriel risque d’être un peu long par contre!
Je vais faire ça par étapes, plutôt qu’un énorme tuto en une seule fois. Ça permettra à tout le monde de suivre et de poser des questions au fur et à mesure.

Riko

1 Like

Bonjour! Personnellement je suis aussi très intéressé! En revanche et comme déjà dit plus haut par quelqu’un d’autre, un tuto détaillé ça serait vraiment le top (c’est-à-dire pas sauter des étapes qui semblent évidentes pour vous mais du chinois pour le commun des mortels) car même si la plupart d’entre nous on a certaines connaissances de base en informatique, dès qu’on parle de Raspberry Pi (bon je sais ce que c’est, mais uniquement en photo :wink: ) et de code et de moustiques, ça peut devenir chaud :wink:

Super, on commence par une liste de ce qu’il faut avoir comme hardware?

Oui la je suis entièrement d’accord

Sur un nas synology ça peut le faire…?
:grimacing:

@Goulven
Désolé, je n’ai pas ce matériel, je ne pourrais pas trop t’aider.
Mais il faudra que tu installes Node-Red et MQTT Mosquitto sur ton Synology.
Ce tuto pour Mosquitto à l’air pas mal, et cet autre tuto Node-Red peut t’aider.

:+1: merci, je vais regarder ça :+1:

You can install “webapp browser”. There are several kiosk apps for the iPad2, and that one seems to work the best. (you can hide the statusbar and more).
https://apps.apple.com/us/app/web-app-browser/id995466042#?platform=ipad

1 Like

Alors un grand bravo pour ton dashboard, hyper classy !
+1 pour un tutoriel :slight_smile:

1 Like

Perfect ! Thanks :slightly_smiling_face:

@Goulven

Oui nas synology et docker fonctionnel :slight_smile:

+1 pour un tutoriel :slight_smile:
ou une opportunité de partager le code Node Red JSON (export) avec nous? :slight_smile:

En attendant, une autre source de mise en forme CSS transparente:

(source: javascript - transparent UI box in CSS - Stack Overflow)