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

Designs dans Jeedom : on attaque par quoi ?

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

Designs dans Jeedom

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.

Designs dans Jeedom

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

Designs dans Jeedom

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

Designs dans Jeedom

Et normalement vous obtenez ceci.

Designs dans Jeedom

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.

Designs dans Jeedom

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.

Designs dans Jeedom

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

Designs dans Jeedom

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.



Partager sur :

Infos de l'auteur

Je m'appelle Mathieu, j'ai 35 ans, et je vis à Limoges. Je suis prof d'EPS, et passionné de domotique. Amateur de DIY et de bricolage, j'aime aussi la cuisine, le bon vin.

25 commentaires

  1. Super! je vais suivre ton tuto, j’aime beaucoup ce design que j’avais deja vu sur le forum de jeedom mais je n’avais pas reussi a le mettre en place sur ma config. Merci!

  2. Bonjour Mathieu,
    Je suis d’Angoulême et aussi fan de domotique…. super tutoriel encore une fois… on pourrait se voir pour partager nos solutions et problématiques si cela t’intéresse ?
    Bonne journée

  3. Merci Mathieu pour cet article, depuis le temps que je dis qu’il faut que je m’y mettre….
    Pour un même équipement, peut-on avoir 2 widgets différents, un pour le dashboard et un pour le design ?

  4. Hello,
    Merci pour ce nouveau tuto 🙂
    Je pense qu’il manque un lien dans la phrase :
    « Ensuite, nous téléchargeons le design partagé par F$B33 ici. »
    😉

  5. Bonjour et merci pour ce tuto. J’ai aussi vu votre pseudo sur différents plugin ^^.
    J’adore le visuel des chronomètres Xiaomi. Comment avez vous fait car je recherche partout mais je suis en galère ;/.
    Cordialement

  6. Dans « configuration commande » « affichage » le choix de widget est commun entre Dashboard, Design et Vue
    C’est un peu dommage de ne pas avoir le choix d’un widget différent entre Dashboard et Design
    On peut contourner le problème en créant un virtuel avec import d’un équipement ou en dupliquant un équipement virtuel

  7. Bonjour, enfin des choses intéressantes pour les designs, facile à mettre en place,
    pouvez-vous ajouter les widgets de volets, pour la prochaine présentation,
    on sort enfin de la logique « développeur je te noie » que représente jeedom pour les newbies.
    entre les mises à jours et les lectures assidus du forum,
    cela parait peu pour vous, mais cela aide tellement d’avoir des éléments beaucoup plus claires !
    tel que cet article.
    bonne continuation.

  8. Sympa mais quelle adresse doit appeler ma tablette (qui n’est pas logger sur mon Jeedom) pour afficher ce design et interagir avec ma domotique ?

    Merci d’avance !

  9. Sans être logué je ne pense pas que tu puisse aller sur cet espace vu qu’il faut soit passer par le logiciel tier de Jeedom ou directement dans le deisn et/ou vue de Jeedom aussi.
    Quoi qu’il en soit faut passer par l’ip local ou passer par le DNS.
    Perso j’utilise soit mon IP locale pour ma tablette

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.