# TUTO 8 : HOMEY DASHBOARD CUSTOM (Via nas synology)

**URL:** <https://community.homey.app/t/tuto-8-homey-dashboard-custom-via-nas-synology/29918>\
**Category:** 🇫🇷 Français (French)\
**Created:** [May 15, 2020, 6:21pm UTC](https://community.homey.app/t/tuto-8-homey-dashboard-custom-via-nas-synology/29918 "2020-05-15T18:21:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**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:** [May 15, 2020, 6:21pm UTC](https://community.homey.app/t/tuto-8-homey-dashboard-custom-via-nas-synology/29918/1 "2020-05-15T18:21:49Z")

</div>

> TUTO 8 : HOMEY DASHBOARD CUSTOM

**Introduction** :

Salut les pirates. Aujourd’hui nous allons passer à une étape supérieure dans la configuration de votre dashboard Homey 🙂 .

En effet, grâce au travail acharné des développeurs de la communauté, vous avez pu précédemment installer votre dashboard via la plateforme homey.ink ou encore en suivant mon tutoriel visant à l’installer localement sur votre Nas Synology en utilisant les créations de @DaneedeKruyff ou encore celle de cornelisse qui nous permettait déjà de faire pas mal de choses.

Mais vous le savez tout comme moi, un peu de custom ne fait de mal à personne. C’est donc, et avec grand plaisir, que je vous guiderai à travers cette nouvelle piraterie fraîchement crée par @DinoRayn.

```
**Attention :**
Ce tutoriel est uniquement compatible avec **Docker** ou une machine prenant en charge **Python**.
Un backend à été mis en place pour pouvoir augmenter les fonctionnalités ! C'est un pré-requis obligatoire (compatible avec tous les NAS, Raspberry…).
Gardez s'il vous plait à l'esprit qu'il s'agit d'une première version qui sera enrichie au fur et à mesure (WSGI, gunicorn…).

```

c’est parti mon kiki ^^

`ETAPE 1`

Commençons par ouvrir notre synology et ensuite rdv dans le docker pour installer le paquet **homeydash\_reborn**

![514cddbef8c7c5768ff0fdcda76e9e7baf4d800d_2_690x378](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/f/9f9be758ca52b5e31f246b7b11d74002e59ffcc0.png)  
 ![9379ec5cc63afa7003ab16b182b813bd34ced1da_2_690x379](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/4/e4ffe876f620d936eefb945e87bcb54995ee58b6.png)  
 ![b781c752af1eb9c145826c8f79f2ef3c06cbe855_2_690x373](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/b/1b5cbde8fca23dae4fc602f40bb8058de38820f4.png)

**Choisissez un port que vous n’utilisez pas.**  
 ![6aecb29af086ac1138c1cfa22e999ce30803bd6c_2_690x384](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/1/41b169e6e5e85250c26467c008de250497aa284c.png)

Voila, Laissez le reste des paramètres par défaut et cliquez sur le bouton Appliquer.

Votre dash est bientôt pre 🙂

**ETAPE 2**

Lancez le docker en accèdant à l’adresse suivante :

- http: // \< **IPDEVOTRENAS:PORT** \>

**ETAPE 2 BIS**

Pour l’installation locale:

- Accédez au Github: [GitHub - Devstored/homeydash\_reborn](https://github.com/Devstored/homeydash_reborn) 5

- Clonez le projet sur votre machine et installez Python3 (le lien: [Download Python | Python.org](https://www.python.org/downloads/))

- Accédez au terminal et accédez au dossier «homeydash\_reborn» que vous venez de cloner, puis exécutez la commande suivante:  
**pip install -r requirements.txt ou pip3 install -r requirements.txt**

- ensuite démarrez le terminal: **python3 app.py**

- Allez à l’adresse suivante : **http: // localhost: 5000**

Vous n’avez plus besoin de saisir de token! Vous pouvez trouver le menu en y accédant: **/ confi**

**`ETAPE 3`**

**- les paramètres -**

![2c8d4a5c941014e4dfed71c52e7b3cad6ffa454f_2_690x348](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/0/306561487432478b432e1e084e00baf3fd449e5c.jpeg)

ici rien de bien compliqué, il suffit de complèter 🙂

` **Bonus** : Avant de valider, mettez le son de votre tablette, pc, smartphone au maximum ;)`

Validez ensuite.

**Surpriiiiise, vous devriez être sur cet écran (avec de la musique de Star Wars nan ? ^^):** si vous n’avez pas entendu, suffit de faire un refresh 😉 que la force soit avec vous.  
 ![60b87f83147272e2c6d04b2d6e765656c893adeb_2_690x347](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/5/e5defcc86dd7e0e1d9e4354041475d5512230a2b.jpeg)

**Vous êtes sur le thème par défaut. Si vous souhaitez changer de thème, cliquez simplement sur l’icône «Thème» pour accéder au nouveau menu:**

![4983cef58ac234b41b668fd5a7d3f380e93e092a_2_690x351](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/4/a45565338b77dcb2409957dd735b67c8b581b3b7.jpeg)

Ici, vous aurez le choix entre la sélection de votre thème ou de l’importer. Vous pouvez importer autant de nouveaux thèmes que vous le souhaitez ! **Cependant, il y à des choses importantes, à savoir** :

- Ne supprimez jamais le thème “par défaut” car il risque de tout compromettre
- Si vous n’avez pas de fond d’écran, vous ne pouvez pas changer l’opacité (normale)
- Les thèmes que vous souhaitez importer doivent tous répondre aux normes de dossier ci-dessous. Sinon, vous risquez de tout foutre en l’air.

**ETAPE 4** – _importer un theme_ –

Veuillez télécharger le fichier «sample\_theme.zip» que vous devez ensuite décompresser. [https://drive.google.com/open?id=1ubDOt42d8IKtnMpQj2iUCi8AB2qZojqF](https://drive.google.com/open?id=1ubDOt42d8IKtnMpQj2iUCi8AB2qZojqF)

- Dans le dossier «audios», vous pouvez importer un son «clic» et un son «démarrage». Évitez les fichiers trop volumineux et privilégiez le format .mp3.

- Dans le dossier «backgrounds», vous pouvez y mettre autant de fonds d’écran que vous le souhaitez. L’outil le détectera automatiquement. Si vous ne le mettez pas, il faut absolument que vous indiquiez des couleurs (nous le verrons plus tard).

- Dans le dossier «header\_icons» vous devez mettre toutes les images relatives aux icônes de menu.

**ETAPE 5** – _settings.json_ –

- Vous aurez besoin de ce site pour choisir vos couleurs et vos transparences (en code couleur) à cette adresse: [https://www.hexcolortool.com/](https://www.hexcolortool.com/)
- Vous aurez besoin du site:: [https://fonts.google.com/](https://fonts.google.com/) pour choisir la police (nb: si la police a des espaces dans le nom, remplacez les par un «\_».

Il vous suffit de changer les couleurs à votre guise. Si les fichiers audio / arrière-plans / icônes n’ont pas le même titre que ce thème, vous devez modifier le nom du fichier dans les lignes correspondantes.

Exemple: si vous importez un fichier pour l’icône des paramètres qui le nomme «settings123.png», vous devrez le remplacer 😉  
`" name ":" settings.svg ",`  
par  
`" name ":" settings123.png ",`  
à la ligne 44.

Si vous ne souhaitez pas ajouter d’images au fond d’écran, il est **obligatoire** d’ajouter de la couleur à l’arrière-plan.

remplacer la ligne 30 - 34  
`"gradientColors": { "color1": "", "color2": "", "color3": "" },`

par celle-ci :  
`"gradientColors": { "color1": "red", "color2": "red", "color3": "red" },` (dans notre exemple, le rouge), si vous desirez un fond d’écran avec une couleur unique.

Mais si vous voulez personnaliser la transparence, il faudra modifier la ligne comme ceci:  
`"gradientColors": { "color1": "rgba (51,204,204,0.7)", "color2": "rgba (33, 114, 255, 0.9)", "color3": "rgba (255, 242, 0.0.8)" },`

N’oubliez pas que c’est la couleur qui prend le dessus. Si vous indiquez une couleur, vous ne verrez pas vos images ! Mais bon, certains préfères des fonds noirs pour préserver la batterie (color1 = black etc… 😉 )

Vous avez la possibilité de personnaliser le lien du créateur du thème en indiquant votre nom, la date et le lien de votre profil HomeyCommunity dans le fichier settings

Lorsque vous avez terminé, vous devez renommer le dossier sample\_theme avec le nom de votre choix, puis le compresser en .zip.

**Vous pouvez maintenant importer votre thème:**

 ![import_1](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/3/f397b405507da749e7236f5fcc7aa229a9bacaff.jpeg)

![dab0be3ac1ecce122f4bb771c836aa298a9586da_2_690x304](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/6/166d34def0fbf25e40e372c75603a8119af00eaf.jpeg)

![58c25dbebb363f403a1eb656f3b9d5c3735df749_2_690x300](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/c/6c53d242cbb58efc0b7101aa7b1613616a06aad2.jpeg)  
**Voilà le résultat** 🙂

![43af2404dee792a732e4fcdaf1232961153ea8b9_2_690x348](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/8/f89049591626ef4a8e29da4dab760b098750ae61.jpeg)

**quelques options ajoutées :**

 ![theme menu part 2](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/5/45aa76bee56f83c85cacd37422a1f7b3a3efdabc.png)

Désolé les amis mais c’est la fin du tutoriel, \<\< enfin \>\> me diriez vous.

je vous laisse vous amuser. Mais n’oubliez pas une chose, **c’est une version beta**.

Vos retours feront avancer le projet, alors n’hésitez plus, hissé-ho !!!

Remerciements à :

@DinoRayn -  
@Rocodamelshekima  
@DaneedeKruyff  
@Homey-Cornelisse  
@SVEN_STOFFELS

Et à tous ceux qui soutiennent le projet.

N’hésitez pas à aller soutenir l’équipe [HomeyDash.com](http://HomeyDash.com) :  
[Homeydash.com , een Homey dashboard](https://community.homey.app/t/homeydash-com-een-homey-dashboard/17436)

Si les développeurs de [Homeydash.com](http://Homeydash.com) souhaitent intégrer ces changements, ce serait un plaisir.

Et si vous voulez acheter une bonne petite bière à son developpeur, vous pouvez le faire car ça motive énormément.

> **[Pay Rayn Concept using PayPal.Me](https://www.paypal.com/paypalme/raynconcept)**
>
> Go to paypal.me/raynconcept and type in the amount. Since it’s PayPal, it's easy and secure. Don’t have a PayPal account? No worries.

**CHANGELOG’s en commentaire.**

---

<div class="post-metadata">

**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:** [May 15, 2020, 6:29pm UTC](https://community.homey.app/t/tuto-8-homey-dashboard-custom-via-nas-synology/29918/2 "2020-05-15T18:29:23Z")

</div>

CHANGELOG:

1.0.0 (version bêta)

- Défilement automatique de plusieurs fonds d’écran
- Intervalle (en heures) pour faire défiler le fond d’écran
- Nom d’utilisateur ajouté
- Ajout de musique personnalisable pour l’ouverture de HomeyDash Reborn
- Ajout de bruit pour cliquer sur les boutons personnalisables
- Ajout d’un bouton marche / arrêt pour la musique
- Ajout de nouvelles icônes pour le menu
- Effet lueur HomeyCornelisse ajouté
- Changer la formulation «thème» en «format»
- Ajout d’un favicon transparent
- Correction de quelques petites anomalies
- Ajout d’un menu de démarrage pour la configuration
- Menu à thème ajouté
- Importation automatique de nouveaux thèmes
- Gestion des thèmes importés
- Aperçu du thème importé
- Modification de la police, des couleurs des boutons, des icônes, des couleurs du texte…

---

<div class="post-metadata">

**Author:** ![DinoRayn](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/dinorayn/32/24471_2.png) [@DinoRayn](https://community.homey.app/u/DinoRayn)\
**Post date:** [May 16, 2020, 3:37pm UTC](https://community.homey.app/t/tuto-8-homey-dashboard-custom-via-nas-synology/29918/3 "2020-05-16T15:37:55Z")

</div>

Merci @SVEN_STOFFELS pour ce tuto et merci pour les trads en + de 🙂 . En espérant que ça plaise.