TUTO 8 : HOMEY DASHBOARD CUSTOM (Via nas synology)

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 :slight_smile: .

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
9379ec5cc63afa7003ab16b182b813bd34ced1da_2_690x379
b781c752af1eb9c145826c8f79f2ef3c06cbe855_2_690x373

Choisissez un port que vous n’utilisez pas.
6aecb29af086ac1138c1cfa22e999ce30803bd6c_2_690x384

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

Votre dash est bientĂ´t pre :slight_smile:

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: https://github.com/Devstored/homeydash_reborn 5

  • Clonez le projet sur votre machine et installez Python3 (le lien: 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

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

**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 :wink: que la force soit avec vous.
60b87f83147272e2c6d04b2d6e765656c893adeb_2_690x347

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

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

  • 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/
  • Vous aurez besoin du site:: 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 :wink:
" 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… :wink: )

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:

dab0be3ac1ecce122f4bb771c836aa298a9586da_2_690x304

58c25dbebb363f403a1eb656f3b9d5c3735df749_2_690x300
Voilà le résultat :slightly_smiling_face:

43af2404dee792a732e4fcdaf1232961153ea8b9_2_690x348

quelques options ajoutées :

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 :
Homeydash.com , een Homey dashboard

Si les développeurs de 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.

CHANGELOG’s en commentaire.

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…

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

1 Like