Design Jeedom – Comment le créer pas à pas

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

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.