Tuto

Design Jeedom – Comment le créer pas à pas

design jeedom tuto

Jeedom

Jeedom est un outil très puissant comme solution domotique. C’est une des références sur le marché des solutions domotiques. Cependant, il peut être assez compliqué pour une personne non initiée à la domotique et à la technologie en général. Dans ce tuto, je vais tenter d’éclairer toutes vos zones d’ombre sur les designs Jeedom.

Le dashboard de jeedom est très complet et intéressant mais il peut être trop compliqué et pas assez intuitif. C’est pour quoi, le mode design a été créé pour personnaliser votre installation domotique à votre façon. Il permet de créer une interface utilisateur simplifiée et qui reprend uniquement les éléments importants de celle-ci

Les designs sont parfaits pour intégrer, par exemple sur une tablette murale et en faire votre station domotique.

 Etape 1 : Les widgets

Avant toute création de design, on ne peut pas passer à côté des widgets. Les widgets sont des éléments qui vont permettre de personnaliser toutes vos commandes sous Jeedom (commande d’action, d’info, commande d’alarme, thermostat,…).

Jeedom embarque nativement plusieurs widgets pour habiller la plupart des plugins officiel (thermostat, alarme,…). Pour personnaliser vos commandes avec des widgets de base (core) ou des widgets que avez déjà téléchargé, il suffit de vous rendre sur la commande que vous souhaitez personnaliser, de la configurer et de vous rendre sous l’onglet affichage. Vous y trouverez une liste déroulante avec tous les widgets qui peuvent être appliqués à cette commande (seuls les widgets qui correspondent à la commande sont affichés).

Mais ça ne s’arrête pas là. Effectivement, si vous êtes un féru de personnalisation avancée, Jeedom a pensé à vous. La solution domotique permet à ses utilisateurs de créer ses propres widgets et même de les partager à la communauté. Pour ce faire, il vous faut tout d’abord télécharger le plugin widget dans le market.

Ensuite rendez vous dans Plugin > Programmation > Widget pour arriver sur la page de création et de téléchargement de widgets

widget jeedom

Vous y retrouver tous les widgets que vous avez déjà téléchargé ou créer. Vous y trouverez plusieurs menu.

  • Market = Un marché qui regroupe tous les widgets créé par la communauté et que vous pouvez télécharger
  • Ajouter un widget = Création de votre widget (requiert des connaissances de programmation)
  • Mode de création facile = Permet de créer votre widget sans aucune connaissance en programmation. C’est un assistant de création et de personnalisation de votre widget
  • Font = Personnalisation des polices

Une fois votre widget créé, vous pouvez l’appliquer sur toutes vos commandes correspondantes.

Si vous êtes un peu flémard, pas de soucis, télécharger votre widget sur le market.

Etape 2 : Le design

Vos commandes sont personnalisées. Il ne vous reste plus qu’à mettre en place votre design.

Pour la création de design, rendez vous sur Accueil > Design et cliquez droit sur l’espace vide sur l’écran pour commencer à le personnaliser.

Commencez par créer votre design et par cliquer sur « configurer le design ». Choisissez la résolution à adopter. Pour connaître la résolution de votre écran, rendez vous à cette adresse. Une fois celui-ci créé, vous pouvez commencer à l’éditer.

Vous pouvez y intégrer tous vos équipements entièrement et également commande par commande. Vous pouvez également y intégrer des graphiques, des images, vos caméras. Tout est personnalisable.

Personnalisation avancée :

Pour intégrer vos menus et des cadres avec images, il vous faut d’abord personnaliser votre Jeedom. Télécharger le plugin Jeexplorer sur Jeedom et collez y le dossier montheme téléchargeable ici

Une fois le dossier collé, vous pouvez créer vos menus ainsi que vos cadres.

Création du menu

Ajoutez un texte/HTML et insérer ce code dans le cadre de texte :

Les fichiers sont en téléchargement ici pour éviter le copié collé depuis le site

<!–

Menu

Exemple :

– Copiez perso.css dans montheme/
– Copiez les images dans montheme/images
– Dans le mode Design, ajoutez « Texte/html » puis copier/coller le code html
– Remplacez « ID DU PLAN » par l’ID de votre page cible.

la class « selected » permet de mettre en surbrillance le bouton du menu sur lequel vous êtes

–>

<LINK href= »montheme/perso.css » rel= »stylesheet » type= »text/css »>

<div class= »menu_top »>

<ul class= »monmenu »>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu »><div class= »selected »><img src= »montheme/images/MAISON2.png » height=50px width=50px></div></br></li></a>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu »><div class= »imagette »><img src= »montheme/images/RADIATEUR.png » height=50px width=50px></div></br></li></a>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu »><div class= »imagette »><img src= »montheme/images/LUMIERE.png » height=50px width=50px></div></br></li></a>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu »><div class= »imagette »><img src= »montheme/images/CAMERA.png » height=50px width=50px></div></br></li></a>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu »><div class= »imagette »><img src= »montheme/images/LAN.png » height=50px width=50px></div></br></li></a>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu » ><div class= »imagette »><img src= »montheme/images/GRAPH.png » height=50px width=50px></div></br></li></a>

<a onClick= »planHeader_id=1; displayPlan(); »><li class= »monmenu » ><div class= »imagette »><img src= »montheme/images/PLAN1.png » height=50px width=50px></div></br></li></a>

<!– SEPARATION –>
<li class= »monmenu_sep » ><div class= »imagette »><img src= »montheme/images/icon_blank.png » height=50px width=50px></div></br></li>

</ul>

</div>

  • Modifiez le « planHeader_id=1 » par le chiffre qui envoie vers votre design (rendez vous sur votre design et prenez le chiffre dans la barre d’adresse).
  • Modifiez montheme/images/MAISON2.png par l’image que vous souhaitez (voyez toutes les icones disponibles avec Jeexplorer dans montheme/images/
  • Modifiez la class « imagette » par selected lorsque vous êtes dans le design actif

Création des cadres

Pour la création des cadres, ajoutez un texte/HTML et ajouter ce code

<!–

CADRE
– Copiez les images dans montheme/images
– Dans le mode Design, ajoutez « Texte/html » puis copier/coller le code html
–>

<!– PRINCIPALE –>
<div style= »
width:100%;
box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5); »>

<!– Imagette –>
<div style= »
height:30px;
width:30px;
position:absolute;
margin-top:6px;
margin-left:5px;
opacity:0.8;
max-width:100%;
height:auto; »>
<img src= »montheme/images/LUMIERE_MINI.png » height=30px width=30px></div>

<!– TITRE –>
<div align=center style= »color:rgba(255,255,255,0.8);
font-size:16px;
height:40px;
background-color: rgba(0,0,0,0.6);
padding-top:10px;
font-family:Arial;
font-weight:normal; »
>TOUTES LES LUMIERES</div> <!– Titre du CADRE –>

<!– CONTENU –>
<div style= »height:220px; background-color: rgba(0,0,0,0.5); »> <!– Modifiez height pour régler la hauteur du cadre –>
</div>

</div>

  • Modifiez montheme/images/MAISON2.png par l’image que vous souhaitez (voyez toutes les icônes disponibles avec Jeexplorer dans montheme/images/

Conclusion

Vous êtes désormais prêt à créer votre propre design. N’hésitez pas à commenter cet article si vous avez des questions et à poster votre design après sa création.

 

25 commentaires

Cliquez ici pour ajouter un commentaire

Répondre à Denis Annuler la réponse

CommentLuv badge

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

  • Parfait pour les débutant comme moi,
    Il faut juste corriger les guillemets qui ne sont pas les bons et c’est OK.
    Merci. 😜

  • Bonjour,

    Merci pour ton commentaire 😀

    Effectivement les guillemet ont été mise en forme par le site…

    Lorsque tu copies et colle ils ne sont pas remis en forme?

  • Bonjour Domotech, a quel endroit copier le dossier montheme après l’avoir téléchargé?
    je me doute qu’il faut aller dans le plugin Jeexplorer sur Jeedom après l’installation du plugin mais je ne vois pas où mettre le dossier.

    Eric

  • Bonjour Domoteck,
    J’ai réussi avec le plugin Jeexplorer, j’ai un début de Design mais aujourd’hui j’ai vu une partie de ta vidéo de Jeedom V4 https://www.youtube.com/watch?v=WzGVwPg57lg
    Je vais mettre en pose mon projet de Design en attendant la V4.
    Pense-tu que ton article va devenir obsolète ?

    Bonne continuation et bon courage,
    @+ Eric

    • Salut Éric,

      Effectivement, la v4 va impliquer quelques changement au niveau du design. Ça implique que tous les designs déjà créé vont subir quelques modifications.

      Cependant, cet article ne deviendra pas obsolète car la méthode de création restera la même. Il suffira de tout créer directement sur la v4.

      Merci pour ton commentaire.

      À bientôt

      • Salut Domotech, j’ai aussi fais un Design de 5 pages pour le moment grâce à ton tuto.
        As-tu une idée de date de sortie de V4?
        Merci encore
        @+ Eric

  • Bonsoir
    Merci pour ce tuto qui va peut être me permettre d’avancer sur le design de Jeedom. Je suis tout nouveau et je ne maitrise pas beaucoup l’application. J’ai effectué la création du dossier « montheme » et ouvert les dossiers « images » « m_perso.css » et « perso.css » et téléchargé les fichiers. Or quand je vais dans la configuration du widget et que je sauvegarde le texte , il apparait les cadres des icones mais pas la photo de l’icone. Que fais-je mal ?
    Merci pour votre réponse

  • Bonjour, j’ai suivi ce tuto mais j’ai un souci avec la surbrillance des icones du menu.
    quel paramètres dois je vérifier.
    merci d’avance.

  • Bonjour, on ne peut plus customiser aussi finement l’affichage des noms par exemple en V4. Il n’y a que le choix entre « dashboard » et « mobile ». pas de DESIGN ou VUE.

    Peux tu nous expliquer stp ?

  • Bonjour,
    j’ai le même problème que @Difanel :
    le menu s’affiche mais il ne semble pas trouver les images … liens cassés…

    Merci pour le tuto en tous cas.

  • Bonjour à tous.
    Tout d’abord merci pour ce tuto. Étant novice avec jeedom, ce genre de tuto m’est très utile.
    J’ai cependant un léger soucis. Bien que je suive le tuto à la lettre, le résultat n’est pas au rendez vous. Une fois le premier code html copié et collé je n’ai que des cadres sans images. J’ai l’impression que ça ne fais pas le lien avec mon dossier dans JeeXplorer.
    Quelqu’un peut il m’aider?
    J’ai lu plus haut que les guillemets n’étaient pas bons. Mais de quelle façon faut il les modifier?
    Merci de votre aide.
    Romain

    • J’ai eu le meme soucis.
      Apres verification dans le browser, j’ai compris qu’il y avait des guillemets en trop sur les liens des images.
      <img src=”

      Le bon format est comme suit :

  • Bonjour, Merci beaucoup pour ce tutoriel. J’ai voulu télécharger les liens mais ils ne sont plus disponibles. Y a t-il un autre moyen de les obtenir?

  • Super Tuto, très didactique pour des débutants comme moi.
    Pouvez-vous svp m’indiquer qu’elle url je dois indiquer pour que mon iPad aille directement sur le design souhaité sans passer par la page de login? Pour un utilisateur restreint et uniquement en local bien évidemment.
    Merci

  • Bonjour,

    j’ai le projet de mettre une tablette mural avec Jeedom mais je cherche s’il est possible de faire changer de vue (ou design) automatiquement à frequence régulière, pensez-vous que ca soit possible ?
    exemple, une vue pour le rez de chaussé pendant 5 mn, basculer sur une vue étage pendant 5 mn et une vue extérieure pendant 5 mn et revenir sur Rdc. etc
    merci pour vos conseils.
    Fabrice.

  • un tres grand merci …. pas facil de debuter sur jeedom mais avec ce genre de tuto on peux faire du joli meme si nou n esn somme qu au debut ..

  • Bonjour

    Super ces tutos

    En ce moment je construit un design avec les infos de « Design 2/2 – création des cadres »

    J’ai créer 2 cadres avec vos infos, je suis parti de « ajouter texte /html » j’ai copier votre le code html
    je retrouve dans mon design un visuel qui semble identique
    Les paramètres affichage semble identiques

    L’ensemble semble correct sauf que si je créer un équipement j’ai 2 comportements différents

    Si je déplace l’équipement sur le premier cadre, l’équipement se trouve au dessus et je peux agir sur les boutons
    L’équipement et clair

    Si je déplace l’équipement sur le deuxième cadre, l’équipement se trouve en dessous et je ne peux pas agir sur les boutons
    L’équipement et sombre

    Voyer vous ou j’ai fais une erreur

    • Bonjour

      il n’y a plus de pb

      Après quelques jours sans travailler sur le sujet, oh surprise cela fonctionne.

      Je n’ai rien fait de particulier, je ne comprends pas.

      Bizarre l’informatique