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.
53 commentaires
Merci bonne idée de présentation
Cela veut dire que l’on peut utiliser des Gif dans le design ?
Merci pour ce tuto, cela manquait vraiment concernant les designs.
Quel système utilises-tu concernant la présence des membres de la famille ?
J’utilise blea et des nuc
Salut, c’est possible d’avoir un lien vers les différents widgets utilisés? Surtout l’heure et la température
Oui, horloge HTC et le thermomètre devrait arriver exolique dans un prochain article…
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!
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
Encore merci pour le lien vers le design. Comme tu dis on va pas réinventer la roue et ca fait gagner du temps 😉
je cherche à mettre le même widget horloge mais je ne le trouve pas.
Quelqu’un peut-il me dire où le trouver?
Merci
Horloge htc…
Merci
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 ?
Je ne crois pas, mais je ne suis sûr de rien là…
Bonjour. Peux tu nous décrire comment mettre un widget transparent SVP ?
Merci
Superbe article! Est-il possible d’obtenir le design pour les thermostats (look digital)? Merci d’avance
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. »
😉
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
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
Merci ! Super tutot, comme d’hab.
J’attends avec impatience la partie sur les widgets !
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.
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 !
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
Salut ,
Vous avez le lien du design ??
J ‘ai trouver lol
https://www.jeedom.com/forum/viewtopic.php?f=50&t=14863&start=60#p274114
Pingback: Centre de contrôle : le relooking partie 3 - La Domotique de Sarakha63
merci pour le tuto mais je suis bloquer au niveau des images voila ce que j’ai ceci https://imgur.com/a/dvvG9s4
merci d’avance
Merci Mathieu pour cet article, maintenant que j’ai déjà pas mal de chose dans mon serveur je vais me lancer sur le design.
merci pour le tuto mais je bloque a ce niveau la une idee ?
https://imgur.com/a/lwDbOIm
@GREGORY =>
Les liens vers les images ne fonctionnent pas :
– soit tu as oublié de les copier sur ton Jeedom (voir le début de la vidéo),
– soit le chemin est différent de celui indiqué dans le code HTML,
– ou encore l’affichage des images est désactivé/bloqué dans le navigateur que tu utilises.
merci juste une erreur de frappe
Bonjour
j’ai commencé a installer l’outil de dev, mis les images dans le répertoire, collé le code html, lorsque je vais sur design, il me demande un code …Même en cherchant à aller sur mes ancien « design » (des tests)
Une idée pour solutionner cela (je n’ai pas une grande maitrise de jeedom, mais j’essaye ‘apprendre ..bon là, c’est raté :-))
Help…
merci
C
Bonjour,
elle est la version 01 ?
Noobs bonjour,
Je n’ai pas de racine Jeedom sur PC etant donner que j’ai une box Jeedom ? ou pas ?
Hello, merci pour ce bel article.
J’ai essayé un tuto pour tester la présence mais ça ne réagit pas bien et j’ai des décrochages occasionnels avec mes Nut Mini.
Aurais tu un bon tuto quelque part pour tester la présence des membres de chacun (avec Blea/Nut Mini) ?
Merci 😉
Pareil, ça m’arrive 1 fois par mois d’enlever la pile de mes Nut mini et/ou de relancer les dépendances BT car ils ne sont plus vu par ma Jeedom, je ne comprends pas pourquoi.
Sinon tuto gestion présence y’a : https://vdays.net/fr/2017/10/03/tuto-jeedom-gestion-de-presence/
Purmoka, qu’appels tu racine? il n’y a pas de dossier racine à proprement dit sur PC.
Si tu chercher à gratter dans les dossiers de la Jeedom il faut installer le plugin « Outils de développement (outilsdev) » via le market.
Salut,
J’ai le même problème depuis quelques semaines (ou mois ?) : mes Nut passent en « absent » quelques secondes jusqu’à 2 ou 3 minutes max, puis reviennent quelques minutes (sensiblement la même durée), puis retombent, etc. en permanence.
J’ai acheté des G-Tag car j’en avais marre de changer les piles des Nuts tous les 4 matins : ils font exactement le même problème.
En fait je me suis rendu compte que tous mes modules BLEA font la même chose.
Sur chacune de mes deux antennes déportées (un second R.PI à 10m du principal, puis un troisième à plus de 30m, largement hors de portée), j’ai le même problème avec les équipements qu’elles captent. Ce n’est donc pas un problème de perturbations quelconques.
J’ai ce problème que j’utilise :
– le module BT interne du R.PI,
– une clé USB SENA UD100
– une clé USB Trendnet
Tentative de réinstallation des dépendances : pas mieux.
Tentative de réinstallation du plugin BLEA : pas mieux.
Nota : l’antenne R.PI la plus éloignée est toute « neuve », il s’agit d’un nouveau modèle 3B+ que je viens d’acheter et d’installer avec la toute dernière version de Raspbian.
Toutes mes versions de core et de modules sont à jour.
Je me demande si cela ne date pas de la dernière version du plugin, celle qui a supprimé la possibilité de choisir le délai de rafraîchissement sur les Nut.
Et sur le forum, personne ne semble avoir d’idée, mais du coup je constate que je ne suis pas le seul 😉
Le dossier doit s’appeler images en minuscule et avec un S (c’est du linux, la casse est importante)
Oui excuse moi : voilà, ce que je ne trouve pas c’est le dossier jeedom afin de pouvoir le dossier montheme !! tu indique dans l’outildev mais apres ? (vous allez sur le plugin « outil de développement » puis vous créez un dossier « montheme » à la racine de votre Jeedom)
merci par avance
Salut !
Merci pour le tuto, mais j’aurais regarder ce que vous aviez décrit sur les vues.
Mais sur le blog je ne vois que relooking part 2 et part 3.
La première partie n’est plus dispo ?
Bonjour à tous,
milles mercis pour ce magnifique tutos qui rend jeedom bien plus beau.
Par contre, je n’arrive toujours pas à reproduire le visuel des widgets xiaomi (superbe d’ailleurs). y a t’il une âme charitable pour expliquer à un noob comme moi comment y arriver?
D’avance, je vous en remercie
@++
Bonjour Mathieu.
Je viesn de découvrir ce tuto qui parait excellent et que je garde le jour ou j’ai mon envieronnement jeedom.
Par contre, je ne trouve pas la première partie du tuto.
Existe-t-elle encore?
Une grand merci
Merci…
Il est ici : http://sarakha63-domotique.fr/rendre-jeedom-plus-beau-dashboard-et-vues-partie-1-debutant-et-notions/
Super. Merci beaucoup
Bonjour, allez vous faire un tuto sur l’intégration des widget ?
Salut !
C’est superbe.
J’ai juste une question : les widgets « capteurs temperature rond modèle xiaomi » que tu affiches sont via BLEA (donc physiquement, tu as ce type de capteur rond ?), ou alors tu as de simples capteurs aqara ou xiaomi, et tu choppes le widget quelquepart (et dans ce cas, malgré le fait d’avoir regardé partout, je ne trouve pas où ni comment les avoir !)
Tu me sortirais une épine du pied avec ta réponse !
Stef
Bonjour,
Même question, je suis fan du thermomètre xiaomi blea mais impossible de le trouver, est-ce une création maison ou il est disponible quelquepart ?
Merci.
Salut et merci pour le tuto,
sur les widget thermometre, comment fais tu pour afficher l’icone batterie lorsqu’elle descend en dessous d’une certaine valeur?
Merci!
Salut, merci énormement pour ce tuto! C’est l’un des seuls que j’ai trouvé et de loin le meilleur!
Je n’aurais jamais osé m’aventurer dans cette aventure sans ton article! Merci beaucoup et bravo pour le boulot!
Hello
Merci pour votre tuto, j’ai une petite question de débutant et je bloque: quand vous dite « Soit vous pouvez mettre vos widgets à même le plan, soit vous pouvez les mettre dans un beau cadre » comment insérer un widget dans ces cadres? ça doit êtres très simple mais bizarrement je vois pas la procédure.. j’ai des joli cadre mes vide ^^ En vous remerciant
Bonjour,
Merci de vos, explications juste une question complémentaire, j’essaie de faire une création avec un iPad mais le menu conceptuel clic droit ne s’affiche pas, avez-vous une idée, un grand merci.
Michel
Bonjour,
je suis tomber sur ce tuto et vraiment ça donne envie !!! Mais les liens son mort …. Quelqu’un à t’il une autre source ? merci