Designs dans Jeedom : le relooking partie 2Temps de lecture : 4 minutes

Salut à tous, c’est Mathieu. Nous avions commencé à vous expliquer le dashboard et les vues dans le précédent article. Aujourd’hui, nous allons poursuivre le relooking et parler des designs dans Jeedom. C’est un formidable outil qui va me permettre de mettre mon centre de contrôle en place. 

Designs dans Jeedom : c’est quoi ?

Le design dans Jeedom c’est un formidable outil qui permet d’afficher presque tout ce que vous voulez sur une page. Vous allez pouvoir configurer tout l’affichage de votre domotique de manière très pointue. Vous partez d’une ou plusieurs pages vierges, et vous ajoutez des zones dans lesquelles vous pouvez mettre tout et n’importe quoi !!!

Designs dans Jeedom : on attaque par quoi ?

Vous venez de créer votre nouveau design. Dans un premier temps nous allons le configurer.

Vous renseignez sa taille, et vous pouvez mettre une image de fond. Ensuite, nous allons commencer à créer des zones. Ces zones peuvent être :

• Un graphique
• Une zone texte / html
• Un scenario
• Un lien (vers une vue ou un autre design)
• Un équipement
• Une commande
• Une image d’une caméra
• Une zone
• Un résumé

Nous n’allons pas tout détailler ici, mais vous voyez que vous avez de quoi faire. Dès lors, vous avez deux possibilités. Soit vous êtes un dieu du code html, et vous partez de 0 pour créer votre propre design, vous pouvez lier vos différentes pages, et faire exactement ce que vous voulez. Soit vous partez sur quelque chose qui existe déjà (pourquoi réinventer la roue). Ne connaissant pas assez les codes, j’ai opté pour la deuxième solution avec un design qui a déjà était réalisé par F$B33, et partagé sur le blog Jeedom ici.

Félicitations à lui, car ce design est très évolutif, et reste très complet.

Designs dans Jeedom : mise en place d’un design déjà fait.

Un tutoriel est disponible sur Youtube  pour la mise en place de ce design, mais je vais essayer de vous l’expliquer ici. Dans un premier temps, il va falloir télécharger et installer le plugin « outil de développement » pour pouvoir transférer des fichiers dans notre Jeedom. Ensuite, nous téléchargeons le design partagé par F$B33 ici.

Il ne vous reste plus qu’à transférer les fichiers et dossiers aux bons endroits. Tout d’abord, vous allez sur le plugin « outil de développement » puis vous créez un dossier « montheme » à la racine de votre Jeedom. Ensuite, vous faites pareil dans le dossier « montheme » vous créez le dossier « Images ». Puis vous copiez toutes les images présentes dans le dossier image (sauf le .psd) de votre archive téléchargée dans votre dossier « image ». Ce sont les futures icones de votre design. Ensuite, vous copiez les deux fichiers .css dans le dossier « montheme ». Et vous voilà prêts à travailler.

Designs dans Jeedom : création de votre première page et mise en place du menu.

Maintenant que nous avons presque tout mis dans notre Jeedom, allons l’utiliser. Vous venez de créer votre première page, et vous avez configuré vos dimensions. Vous avez inséré l’image que vous souhaitiez en fond d’écran. Maintenant, nous allons mettre un menu puisque nous allons faire plusieurs pages. Vous allez récupérer le code html du fichier menu.html de votre archive précédemment téléchargée. Pour ça, j’utilise le logiciel Notepad++, mais vous faites ce que vous voulez.

Une fois revenu sur votre design, vous faites ajouter texte/html. Puis, vous cliquez droit, pour aller modifier les paramètres d’affichage.

Ici, vous collez votre code html dans la zone texte.

Et normalement vous obtenez ceci.

Le fichier menu.html est fait pour un menu horizontal, et le fichier m_menu.html pour un menu vertical.

Maintenant, il va nous falloir configurer ce menu. A vous de choisir ce que vous voulez comme pages. Une fois que vous avez fait votre choix, et créé les x pages dont vous avez besoin, nous allons renseigner le tout dans notre code html du menu.

Ici, vous remplissez l’ID de votre plan que vous trouvez dans votre barre d’adresse, et vous mettez l’icône qui correspond à ce que vous voulez. Pour rappel, les icônes disponibles sont dans le dossier montheme/image de votre Jeedom. Bien sûr, vous pouvez en modifier certains pour qu’ils correspondent à vos besoins.

Designs dans Jeedom : les cadres

Maintenant que vous avez les menus de vos pages, il vous reste à les remplir. Soit vous pouvez mettre vos widgets à même le plan, soit vous pouvez les mettre dans un beau cadre. Et pour cette dernière manipulation, il vous suffit de récupérer le code hmtl du fichier cadre.html de votre archive et le coller dans une nouvelle zone de texte que nous allons modifier pour nos besoins.

Ici, trois éléments à modifier. Dans un premier temps, vous pouvez une nouvelle changer l’icone que vous souhaitez voir apparaître. Ensuite, il vous faudra changer le titre de cette fenêtre (MON TITRE). Et enfin, vous pouvez régler la hauteur de ce cadre tout en bas du code.

Normalement, vous savez tout. Il ne vous reste plus qu’à trouver de beaux widgets à mettre. Vous allez pouvoir nous faire un superbe design. Je viens juste de commencer mais je vous mets deux des miens.

Designs dans Jeedom : la conclusion

J’ai fait cet article car je trouve que dans nos installations domotiques, nous n’avons pas assez de retours. En affichant ces designs sur une tablette accrochée au mur, je trouve que la domotique interagit plus avec nous. Les retours sont plus explicites, et nous avons facilement plus de données intéressantes sur notre maison. Par contre, il faut savoir que cette partie prend pas mal de temps. J’espère qu’avec cet article, je vous en aurais fait gagner un peu.

La prochaine fois, on parle des widgets, car vous avez peut-être remarqué qu’il a fallu que j’en modifie certains pour pouvoir « rentrer » dans mon design.