# Dashboard personnalisé - Node-Red **URL:** \ **Category:** Apps\ **Created:** [June 15, 2020, 7:41am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277 "2020-06-15T07:41:40Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\ **Post date:** [June 15, 2020, 7:41am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/1 "2020-06-15T07:41:40Z")
![Homey_Dashboard_v1](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/a/6af21504411f78f97dc7c15a7445e8fc24ca6b44.jpeg) ![Screenshot-2020-06-15_1](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/3/f380e50b3d30828b3bdca0e63ed9322645052ba7.png) ![Tools_v1](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/f/6f3b7b9ee8df326c1c65694420fb6b6e6ee55aa7.jpeg) 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 1\] Dashboard Node-Red : installer Raspian sur un Raspberry Pi](https://community.homey.app/t/tutoriel-dashboard-node-red-installer-raspian-sur-un-raspberry-pi/31364): > > Le but final de cette série de tutoriels sera de créer un Dashboard avec Node-Red, histoire d’avoir une interface déportée sympa sur une tablette, avec Homey comme chef d’orchestre. Avant d’attaquer le vif du sujet, j’ai fait un petit croquis pour vous montrer succinctement comment tout ça va communiquer. [Schema-de-connexion] La base est donc Homey, c’est lui qui va gérer tous nos objets connectés. Nous allons ensuite créer un serveur avec le Raspberry Pi, qui sera chargé de récupérer les in… ### Tutoriel 2 : Installation de Node-Red et de MQTT Mosquitto sur un Raspberry > [@\[TUTORIEL 2\] Installer Node-Red et MQTT Mosquitto sur le Raspberry](https://community.homey.app/t/tutoriel-installer-node-red-et-mqtt-mosquitto-sur-le-raspberry/31425): > > Installer Node-Red et MQTT Mosquitto sur le Raspberry Pour continuer, vous devez avoir terminé le tutoriel précédent et donc avoir un Raspberry correctement installé avec IP fixe. Lien vers le TUTORIEL #1 [https://community.homey.app/t/tutoriel-dashboard-node-red-installer-raspian-sur-un-raspberry-pi/31364](https://community.homey.app/t/tutoriel-dashboard-node-red-installer-raspian-sur-un-raspberry-pi/31364) Bien, je ne vous cache pas que ça va se corser un peu, on va commencer à jouer le terminal, à entrer des lignes de commandes Accéder au Raspberry avec le terminal. Votre Raspberry est branc… ### 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\] Installer Node-Red et MQTT Mosquitto sur Synology](https://community.homey.app/t/tutoriel-installer-node-red-et-mqtt-mosquitto-sur-synology/31454): > > Bonjour à tous, En complément des tutoriels de @DeepBlueNine , je vais vous expliquer comment installer Node-Red et le broker MQTT Mosquitto sur un NAS Synology. Pour commencer, ouvrir le centre de paquet sur votre Synology et installé l’application Docker. Ensuite, on va télécharger les images de Mosquitto et Node-Red Ouvrir Docker , onglet Registre , dans la barre de rechercher taper Mosquitto et télécharger l’image « eclipse-mosquitto ». ### Tutoriel 3 : Paramétrer MQTT Hub et MQTT Client avec Homey > [@\[TUTORIEL 3\] Paramétrer MQTT Hub et MQTT Client avec Homey](https://community.homey.app/t/tutoriel-parametrer-mqtt-hub-et-mqtt-client-avec-homey/31502): > > Dernière étape pour que Homey et Raspberry communiquent enfin entre eux ! Notre serveur Rapsberry, avec Node-Red et MQTT Mosquitto, est installé et ronronne gentiment dans un coin de la maison, reste maintenant à paramétrer correctement Homey. Paramétrage de MQTT Client Allez donc dans la liste des applications installées dans votre Homey, choisissez MQTT Client, et allez dans « Configurer l’appli ». C’est ici qu’il faut rentrer les paramètres pour communiquer avec Mosquitto qui est installé … ### Tutoriel 4 : Création d’une interface Node-Red > [@\[Tutoriel 4\] Création basique d’une interface Node-Red](https://community.homey.app/t/tutoriel-4-creation-basique-d-une-interface-node-red/31549/): > > Après avoir suivi les trois premiers tutoriels, nous voici donc arrivés à la dernière phase : comment utiliser Node-Red. Je pars du principe que tout c’est bien déroulé, vous avez installé et configuré correctement MQTT Hub et MQTT Client sur Homey, et que Node-Red et MQTT Client, sont installés sur le Raspberry ou le Synology. Se connecter à Node-Red Pour l’utiliser, il faut bien s’y connecter. Node-Red installé sur le Raspberry, pour y accéder, rien de bien compliqué, avec votre Mac/PC, ouvr… ### BONUS : le CODE CSS de mon interface Node-Red > [@\[BONUS\] Le code CSS de mon Dashboard personnalisé](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679): > > Voici le CSS que j’ai créé pour personnaliser le thème d’origine. Vous pouvez vous en servir de base pour créer votre propre style et l’arranger selon vos besoins. L’idée générale est de ré-écrire par-dessus les définitions du thème « Dark » pour les modifier afin d’obtenir un nouveau design. Voilà mon Dashboard SANS le thème personnalisé. Comme vous pouvez le voir, vous devez avoir sélectionné le thème « Dark », j’ai juste changé dans les options, la couleur de base v… ---
**Author:** ![SVEN\_STOFFELS](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sven_stoffels/32/14438_2.png) [@SVEN\_STOFFELS](https://community.homey.app/u/SVEN_STOFFELS)\ **Post date:** [June 15, 2020, 8:20am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/2 "2020-06-15T08:20:42Z")
Ciao Riko, Jolis boulot, je suis passé aussi par node et c’était plutôt sympa 🙂 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 ---
**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\ **Post date:** [June 15, 2020, 8:39am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/3 "2020-06-15T08:39:55Z")
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 😕 Riko ---
**Author:** ![Anthony\_Quesnel](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/anthony_quesnel/32/17053_2.png) [@Anthony\_Quesnel](https://community.homey.app/u/Anthony_Quesnel)\ **Post date:** [June 15, 2020, 7:25pm UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/4 "2020-06-15T19:25:23Z")
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 ? ---
**Author:** ![Goulven](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/goulven/32/18569_2.png) [@Goulven](https://community.homey.app/u/Goulven)\ **Post date:** [June 15, 2020, 8:08pm UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/5 "2020-06-15T20:08:30Z")
Je suis également très intéressé. ---
**Author:** ![Shadow](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shadow/32/23280_2.png) [@Shadow](https://community.homey.app/u/Shadow)\ **Post date:** [June 15, 2020, 8:29pm UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/6 "2020-06-15T20:29:22Z")
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 ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [June 15, 2020, 9:17pm UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/7 "2020-06-15T21:17:17Z")
Sorry for the English post. My French is really “mauvais” 😉 (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?). > [@DeepBlueNine](#): > > Programmer un ESP8266 pour déverrouiller l’iPad quand un mouvement est détecté, histoire qu’il ne reste pas tout le temps allumé. 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](https://community.homey.app/t/homey-esp32-bluetooth-keyboard-firmware-can-lock-unlock-ipad-remotely-dev-review-needed) ---
**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\ **Post date:** [June 16, 2020, 6:43am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/8 "2020-06-16T06:43:01Z")
Hi Michel! Yes of course, you can showcase it 🙂 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). ---
**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\ **Post date:** [June 16, 2020, 6:44am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/9 "2020-06-16T06:44:00Z")
@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 ---
**Author:** ![Picsou621](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/picsou621/32/15357_2.png) [@Picsou621](https://community.homey.app/u/Picsou621)\ **Post date:** [June 16, 2020, 6:48am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/10 "2020-06-16T06:48:04Z")
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 😉 ) et de code et de moustiques, ça peut devenir chaud 😉 ---
**Author:** ![Shadow](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shadow/32/23280_2.png) [@Shadow](https://community.homey.app/u/Shadow)\ **Post date:** [June 16, 2020, 6:48am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/11 "2020-06-16T06:48:59Z")
Super, on commence par une liste de ce qu’il faut avoir comme hardware? ---
**Author:** ![Shadow](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shadow/32/23280_2.png) [@Shadow](https://community.homey.app/u/Shadow)\ **Post date:** [June 16, 2020, 6:50am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/12 "2020-06-16T06:50:04Z")
Oui la je suis entièrement d’accord ---
**Author:** ![Goulven](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/goulven/32/18569_2.png) [@Goulven](https://community.homey.app/u/Goulven)\ **Post date:** [June 16, 2020, 7:29am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/13 "2020-06-16T07:29:04Z")
Sur un nas synology ça peut le faire…? 😬 ---
**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\ **Post date:** [June 16, 2020, 7:57am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/14 "2020-06-16T07:57:42Z")
@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](https://projetsdiy.fr/installer-mosquitto-nas-synology-fonctionnant-dsm-6-2-docker/) à l’air pas mal, et cet autre [tuto Node-Red](https://vhahwerion.fr/?p=104) peut t’aider. ---
**Author:** ![Goulven](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/goulven/32/18569_2.png) [@Goulven](https://community.homey.app/u/Goulven)\ **Post date:** [June 16, 2020, 8:04am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/15 "2020-06-16T08:04:42Z")
👍 merci, je vais regarder ça 👍 ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [June 16, 2020, 8:23am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/16 "2020-06-16T08:23:34Z")
> [@DeepBlueNine](#): > > but the iPad status bar is a problem, I can’t hide it 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](https://apps.apple.com/us/app/web-app-browser/id995466042#?platform=ipad) ---
**Author:** ![Bounaurel](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bounaurel/32/17808_2.png) [@Bounaurel](https://community.homey.app/u/Bounaurel)\ **Post date:** [June 16, 2020, 8:41am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/17 "2020-06-16T08:41:34Z")
Alors un grand bravo pour ton dashboard, hyper classy ! +1 pour un tutoriel 🙂 ---
**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\ **Post date:** [June 16, 2020, 8:57am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/18 "2020-06-16T08:57:52Z")
Perfect ! Thanks 🙂 ![No_more_status_bar](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/3/03955c3e3de6b505b0350e37d9ee24f83cdd32ed.png) ---
**Author:** ![SVEN\_STOFFELS](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sven_stoffels/32/14438_2.png) [@SVEN\_STOFFELS](https://community.homey.app/u/SVEN_STOFFELS)\ **Post date:** [June 16, 2020, 8:58am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/19 "2020-06-16T08:58:58Z")
@Goulven Oui nas synology et docker fonctionnel 🙂 ---
**Author:** ![VanGilles](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vangilles/32/11478_2.png) [@VanGilles](https://community.homey.app/u/VanGilles)\ **Post date:** [June 16, 2020, 10:04am UTC](https://community.homey.app/t/dashboard-personnalise-node-red/31277/20 "2020-06-16T10:04:35Z")
> [@Bounaurel](#): > > +1 pour un tutoriel 🙂 +1 pour un tutoriel 🙂 ou une opportunité de partager le code Node Red JSON (export) avec nous? 🙂 En attendant, une autre source de mise en forme CSS transparente: > **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/4y8bx2eg/)** > > Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. (source: [javascript - transparent UI box in CSS - Stack Overflow](https://stackoverflow.com/questions/46064501/transparent-ui-box-in-css)) [Next page](https://community.homey.app/t/dashboard-personnalise-node-red/31277.md?page=2)