Améliorer son design Jeedom avec un menu style indus
Jeedom est une solution domotique très puissante qui laisse la place à chacun de créer son propre design. Et autant vous dire que c’est pour moi un vrai plaisir que de revenir à mes premiers amour de développeur web.
Le dashboard standard Jeedom n’est que très peu approprié quand il est casté sur votre Google nest hub ou affiché sur un écran mural. On recherchera dans ces cas là une interface plus travaillée et intuitive.
Un menu simple mais efficace
Aujourd’hui je vous propose un menu simple, personnalisable et qui peut se greffer dans de nombreux thèmes qu’il soit sombre ou clair.
Je vous mets à disposition juste en dessous les sources de ce menu aux couleurs Jeedom en espérant qu’il vous sera utile. Ce menu a été adapté des sources : https://codepen.io/AlbertFeynman/pen/mjXeMV
Télécharger “Archive Menu Indus” Archive_menu_v1.1.zip – Téléchargé 1685 fois – 3 Ko
Comment « installer » ce menu ?
En attendant, il vous faudra le plugin Jeexplorer pour déposer les fichiers css et js dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu/ …
Maintenant rendez vous dans le design en question, il vous faudra passer en mode édition en faisant clic droit au milieu de votre écran :
Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :
Il vous faudra ensuite faire un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres :
Et dans le champs texte vous pourrez copié/collé le contenu du fichier html :
Il vous faudra être vigilant sur les chemins d’accès aux fichiers css et js. Dans mon cas, mytheme/menu/menu.css ou mytheme/menu/menu.js :
Si toutefois vous voulez changer les icônes, en rajouter, ou autres … voici un article dédié à la librairie que j’utilise.
Et voilà, normalement votre menu fonctionnera comme dans la vidéo. N’hésitez pas à me dire si vous rencontrez des problèmes.
A bientôt
/F
32 réflexions sur « Améliorer son design Jeedom avec un menu style indus »
J’ai une erreur personnellement : « https://XXXXXXX.dns3.jeedom.com/index.php?v=d&p=plan&plan_id=31# 8 Uncaught TypeError: Cannot read property ‘classList’ of undefined
Bonjour Klem1,
J’ai mis à jour les sources, peux-tu me dire si ça corrige ton problème ?
En gros, j’ai précisé les sélecteurs dans les 2 premières lignes du code JS.
const lis = document.querySelectorAll(".buttons-container li");const a = document.querySelectorAll(".buttons-container li a");
C’est bon ça fonctionne merci.
Il faut que tu nous explique quel code on doit ajouter pour que l’on puisse changer de page du design en cliquant sur le bouton.
Ou ajouter plus de boutons.
Avec plaisir. Je vais faire un article dédié aux 2 options que je vois pour gérer la navigation entre pages.
En attendant, l’option la plus simple est que dans le code html de ton menu, tu ajoutes l’URL de la page cible juste après href du lien de chaque icône.
Par exemple :
Dans ce cas, quand tu cliquera sur l’icône lampe, ca redirigera vers la page dont l’identifiant est 2.
Modifie ce chiffre en fonction de l’identifiant de la page que tu veux cibler.
Puis une fois que tu as fait tous les liens de ton menu, il te suffira de copier/coller le menu sur chacune des pages de ton design.
C’est un peu fastidieux mais c’est la version la plus simple en attendant l’article qui expliquera plus en détails.
Si jamais, j’ai fait un article plus complet : http://ma-maison-intelligente.fr/2020/03/2-options-pour-la-navigation-dans-votre-design/
Bonjour,
Merci pour le partage.
Je ne suis pas expert , je me suis débrouillé pour mettre 2 icônes supplémentaires et en + je suis allé chercher la librairie d’icônes désignée.
Tout fonctionne parfaitement et c’est joli.
Seul bémol , le temps de réponse n’est pas très rapide .
Est-ce modifiable ?
Merci pour le feedback 🙂
Ah c’est intéressant pour le temps de réponse, on parle de quelle latence chez toi ?
Le fichier css qui peut générer ce problème me semble être celui amenant la librairie d’icônes https://use.fontawesome.com/releases/v5.7.1/css/all.css. Pour améliorer ca, il faudrait télécharger les icônes que tu utilises, les mettre dans le dossier à la racine (dans mon exemple, mytheme/menu) et puis les appeler depuis le fichier menu.css par exemple.
Bonjour Florian,
Merci pour tous ces tutos dans un premier temps 😉
Pour rebondir sur ta réponse d’ajouter l’url de la page => la redirection fonctionne, il faut par contre déplacer » class= »active-text » » sur le symbole correspondant : mais j’ai un petit soucis une fois que j’ai changé de page c’est toujours la même vignette (la première) qui est en arrière plan noir et non gris alors que ça devrait être celle qui « s’allume » (ça ca fonctionne avec « classe=active text ») (je sais pas si je suis très clair, il faudrait une capture d’écran pour être précis).
Et parfois j’ai de la latence, parfois il faut que je double clique (mais j’ai l’impression que cette histoire de double click est peut-être lié au fait que ce n’est pas la bonne case qui est en arrière plan noir)
Bonjour Roman,
Merci pour ton commentaire. Je viens de publier un article pour aborder 2 options que tu as en terme de navigation : soit copier/coller ton menu sur chaque page de ton design, et dans ce cas là il faudra déplacer la classe active sur le bouton de chaque page (je reviens sur ce point juste en dessous) soit de fonctionner avec une iframe et dans ce cas là pas besoin de déplacer la classe. Voici l’article : http://ma-maison-intelligente.fr/2020/03/2-options-pour-la-navigation-dans-votre-design/
Dans le cas numéro 1, il y a 2 classes à déplacer :
Sur le bouton en question, il te faut la classe « active » sur la balise li (li class= »active ») et ensuite la classe « active-text » sur la balise a (a href= »# » class= »active-text »). Et normalement en changeant ces 2 classes en fonction de la page et du bouton, ca devrait bien fonctionner.
N’hésites pas à me dire si ca fonctionne chez toi 🙂
A bientôt
/F
Effectivement j’ai corrigé ça tout seul, je venais pour répondre à mon propre commentaire pour dire c’était OK 😉
Et pour revenir au commentaire de pj66, de mon coté c’est bien réactif et pourtant je n’ai téléchargé les icônes comme tu le préconises (peut-être aussi une question du nombre de fonctionnalités utilisées dans Jeedom + Hardware, pour ma part je suis sur Synology en VM + pas beaucoup de prog effectuée).
je m’en vais de ce pas tester l’option iFrame !! (vue que par les temps qui courent il n’y a pas grand chose d’autre à faire mdr)
Merci !
Bonjour Monsieur,
moi je suis loin d’avoir votre niveau.
J’utilise jeedom depuis plusieurs années maintenant et je travaille toujours sur le dashboard !
Quelles sont les différences entre le dashboard et le mode design ?
merci
Bonjour Christophe,
L’idée du design est de pouvoir structurer l’information de vos équipements comme vous le souhaitez :
– avec un plan 2D ou 3D de votre maison
– avec plusieurs pages
– avec une organisation par étage, par type d’équipement, par fonction dans votre domotique
– et surtout avec un rendu plus travaillé et adapté à un usage tablette murale par exemple
J’espère avoir répondu à la question 🙂
Bonjour,
J’utilise ce menu depuis peu, il fonctionne parfaitement je passe facilement d’une page a l’autre mais chaque fois que j’arrive sur une nouvelle page j’ai ce message d’erreur qui apparaît avec un triangle et un point d’exclamation (erreur Java script):
http://192.168.1.15/index.php?v=d&p=plan&plan_id=8
Uncaught SyntaxError: Identifier ‘lis’ has already been declared
J’ai beau chercher je ne vois pas d’ou ça vient.
Merci
Bonjour Olivier,
Merci pour le feedback. Ca ressemble à plusieurs appels au fichier menu.js, mes questions :
– utilises-tu les iframes pour naviguer d’une page à une autre ?
– n’as-tu pas des appels à ce fichier qui traine ? ou un double appel ?
/F
Bonjour,
Je n’utilise pas les iframes, j’ai également pensé au double appel, mais je n’ai pas trouvé. Lorsque je re-clique sur l’icone du menu en étant sur la page du design correspondant le triangle d’avertissement s’efface puis reviens si je r’appuie une 3e fois.
Cordialement
Olivier
Bonsoir,
Je trouve ce menu très beau et sobre, je pose une une question de novice : comment faire pour mettre ce menu à la verticale ? et subsidiairement, existe-t-il un outil de developpement pour déplacer dynamiquement un élément d’une page lorque l’on modifie le code ?
Bonjour Palou.
Merci pour le feedback.
Pour le mettre à la verticale, ca nécessite un peu de travail, je peux l’ajouter à ma todo list 🙂
Pas vraiment, en tout cas pas dans jeedom. Meme si Jeedom permet déjà pas mal de glisser déposer. Quel serait ton besoin précisément ?
Bonsoir Florian,
Merci pour ta réponse rapide. Pour tout dire je n’y connais rien en programmation et donc google étant un ami :-), j’ai essayé de comprendre la structure du css et surtout les commandes qui m’auraient permis d’arriver à mes fins. Un F12 dans chrome, puis collationner des infos sur le CSS et j’ai finalement réussi à mettre le menu à la verticale !
Mais, il y a toujous un mais… Le menu ne fonctionne pas bien (Clic-hover ???) ou quelque chose du même gout.
Donc , quand je clique sur un item, de façon aléatoire j’obtiens la surbrillance et la bonne page !!! So, so.. Je suis coincé.
Pour information je mets le code css modifié.
Salutations.
.buttons-container {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 600px;
border-radius: 45px;
background: #151515;
box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.buttons-container ul {
margin: 0;
padding: 0;
list-style: none;
width: inherit;
height: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-inline-start: 0px;
}
.buttons-container li {
display: flex;
align-items: center;
justify-content: center;
margin: 1px;
height: 97px;
width: 95px;
background: #202020;
border-top: 1px solid #353535;
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.5);
transition: all .5s;
}
.buttons-container li:nth-of-type(1) {
border-top-left-radius: 46px;
border-bottom-left-radius: 0px;
border-top-right-radius: 46px;
padding: 48px;
}
.buttons-container li:last-of-type {
border-top-right-radius: 0px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
}
.buttons-container li:hover {
cursor: pointer;
}
.buttons-container a {
display: inline-block;
color: gray;
text-decoration: none;
font-size: 40px;
transition: all .5s;
}
.buttons-container .active {
background: #151515;
border-top: none;
border-bottom: 1px solid #252525;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.8);
}
.buttons-container .active-text {
color: #82ba1b !important;
text-shadow: 0 0 15px rgba(130, 186, 27, 1);
}
Bonjour Florian,
Merci pour l’article super détaillé et le partage du code. J’utilise ce design depuis un peu plus de 3 semaines et je souterais ajouter 1 ou plusieurs icone dans le menu.
Les ajouter et les lier à des design, pas de soucis par contre je n’arrive pas à voir ce qu’il faudrait modifier (je pense dans le fichier menu.css) pour agrandir le cadre et conserver des tailles de boutons à peu près identiques à leur taille dans ton exemple.
En gros je cherche à allonger le button-container pour avoir des icones de bouton plus grands avec 7 / 8 / 9 boutons.
Merci de ton aide.
Bonjour Laurent,
Merci pour le feedback.
dans le fichier css, dans les premières lignes, tu as la classe button-container puis width: 600px; passe à width: 800px; ca devrait être un peu mieux pour tes 7/8/9 boutons 🙂
Bonne soirée
Merci pour ton travail et pour ce menu ! Malheureusement, j’ai un souci… J’ai bien les icônes mais je n’ai pas le style des boutons (fond, effets…). Malheureusement, je ne peux pas t’envoyer de capture :/
Merci pour ton aide 🙂
Salut,
vérifie que tu as bien déposé (avec jexplorer) les fichiers .css et .js dans le mếme répertoire que le chemin désigné dans le fichier html.
Si tu as laissé par défaut le contenu du fichier html le chemin est : mytheme/menu/fichier.css et fichier.js
En effet, comme dit Zarak et comme décrit dans l’article il faut bien choisir ou l’on dépose les fichiers puis ensuite renseigner le chemin dans le code html.
Merci Florian pour la réponse, ca marche parfaitement, ca pour le design + organisation menu + Iframe intégré pour la réactivité et c’est parfait
Bonjour, ça fonctionne plutôt pas mal chez moi. Sauf qu’au bout d’un certain temps ma page se rafraichit et il n’apparait plus que l’iframe sans le menu au dessus. Quel est le problème ?
Bonjour,
Merci pour ce tutoriel, c’est vraiment sympa.
Ceci dit, j’ai un problème du à ce module je pense ,voilà ce que j’ai dans les alertes:
http://192.168.1.50/index.php?v=d&p=plan&plan_id=10 1 Uncaught SyntaxError: Identifier ‘lis’ has already been declared
Une idée ?
Merci
Bonjour,
Merci pour le feedback 🙂
L’identifiant lis est utilisé ligne 10 du fichier menu.js. As-tu seulement cette alerte ?
Bonjour,
Bravo pour ce travail! c’est top.
En revanche, j’ai le même problème rencontré par Maxime.
Comment peut-on y palier?
Merci
Bonjour,
Super tuto, j’ai suivi toute tes indications et ça marche comme je veux.
La seul chose , comment faire pour l’avoir en vertical, j’ai pas assez de connaissance pour savoir le faire. Un peu d’aide serait la bienvenue 😉
Merci, mon design prend forme grâce à toi.
Salut j’ai suivi le tuto mais le menu est a la verticale et tout petit.
merci de votre aide
Bonjour,
Bravo pour le travail accompli. J’adore!
En revanche, j’ai la problématique déjà rencontrée : « Identifier ‘lis’ has already been declared »
Comment peut-on y palier?..
Merci
Bonjour,
je suis en pleine structuration de jeedom , et ton menu je l’adore. je souhaite l’utilisé, hors ton tuto est fait pour quelqu’un qui bidouille depuis longtemps sur jeedom , mais un débutant sur du htlm , il n’es pas adapté , y a quasiment pas d’info pour faire les manipulation nécessaire. peut tu faire le même tuto mais pour débutant avec toute les manipulation a faire sur une vidéo , je te remerci d’avance