Accueil » Domotique » Jeedom » Guides Jeedom » Design Jeedom : Comment mettre en place une interface tablette tactile belle et fonctionnelle
Guides Jeedom

Design Jeedom : Comment mettre en place une interface tablette tactile belle et fonctionnelle

jeedom-design-guide-tuto-comment-faire
Maintenant que nous avons vu comment modifier les widgets pour rendre le dashboard de la box domotique Jeedom plus conviviale, poussons le développement de l'apparence du système  dans l'utilisation ultime de la domotique.

Via une tablette tactile fixée au mur de la maison. véritable centre de contrôle de la maison, vous y retrouvez les principales fonctions nécessaires pour une action très rapide telles que la gestion des ouvertures, des appareils, de la lumière ou encore des informations importantes comme la consommation d’énergie.

Design Jeedom, une usine à gaz ?

A la création, un design Jeedom ressemble à cela :

design-jeedom-start-commencer-demarrer

A ce stade de départ, il faut alors avoir un peu d’imagination devant cette page blanche et son menu doté de multiples options. Toutefois avec un peu d’imagination, de temps et de patience, vous obtiendrez ce résultat :

design-jeedom-final-pilotage-domotique-maison

Je sens que d’un coup, j’éveille une certaine curiosité de savoir comment réaliser cela. Si vous avez déjà essayé de vous frotter aux designs, vous avez sans doute vite laissé tomber, tant cela semble compliqué à mettre en place. J’avoue qu’avant de me pencher sérieusement sur la question, j’étais moi aussi dans ce cas.

C’est pourquoi, j’ai décidé de vous expliquer le plus simplement, comment arriver à ce résultat. Si vous avez déjà lu ou suivi mon premier guide sur la mise en forme de Jeedom et plus particulièrement des widgets, vous avez déjà une part du travail de fait.

jeedom-design-widget-clean-custom-color-flat-material

Rendre Jeedom beau et convivial avec les widgets custom : Notre tuto complet

Si vous avez cliqué sur cet article, c’est sans doute que vous cherchez désespérément comment rendre l’interface de votre Jeedom plus agréable et beau. Car il faut être franc, si le système domotique est efficace, on ne peut pas en…


Design Jeedom : Le choix de la tablette

Le but est de dédier les fonctions domotiques récurrentes de la maison à la tablette pour gagner du temps et du confort au quotidien. De fait, deux options s’offrent à vous :

1. Vous disposez déjà d’une tablette qui ne sert plus.

2. Vous n’avez pas de tablette à dédier dans cette tâche. Dans ce cas, voici une sélection de tablettes qui répondent au besoin.

tablette-controle-domotique-smarthome-iot-eedomus-jeedom-philipshue

Contrôle ultime de la maison connectée avec la tablette murale pour piloter la domotique, mais pas que !

Oui, mais voilà, si ce discourt est valable pour une grande partie de la maison connectée, et je vous encourage à aller en ce sens afin de vivre la meilleure expérience domotique possible… Cependant, certains usages nécessitent tout de même,…


Design Jeedom : l’image de fond

Un point important dans la construction d’un design Jeedom est sans doute l’image de fond. C’est ce qui déterminera tout votre design. Il est alors important d’y consacrer un soin particulier. A mon sens, afin de pouvoir piloter les fonctions nécessaires de la maison, il est plus judicieux de procéder à une projection de la maison. En 2D, plus simple à réaliser et peut être aussi plus clair. Il ne faut pas oublier que vous allez superposer des boutons de commande et autres informations visuelles. Votre fond doit alors être assez détaillé pour le comprendre d’un simple coup d’oeil, sans pour autant fournir trop d’informations qui rendront la lecture compliquée par la suite.

On peut toutefois apercevoir des designs avec des fond 3D très bien fait sur la toile. Ce n’est donc qu’un simple conseil, libre à vous de faire comme vous le sentez. Je ne donne qu’une ligne directive, rien de nous empêche de la suivre en pointillé !

Revenons à notre fond, avant toute chose, il faut définir la taille de notre image de fond. Cela dépend de la définition de l’image de la tablette sélectionnée. Le plus simple est d’utiliser un service en ligne tel que whatismyscreenresolution.net. Au même titre que les sites qui indiquent votre adresses IP, celui-ci affiche la résolution de l’écran. Ouvrez alors ce guide directement depuis votre tablette et faites le test à l’aide du bouton ci-dessous.

Connaitre ma résolution d'ecran

A présent, nous connaissons la zone de travail, passons à un logiciel de design pour construire notre fond. Pour ma part, j’utilise Photoshop. Toutefois, ce dernier demande pas mal de dextérité et de connaissances, vous pouvez parfaitement réaliser le design sous votre logiciel de dessin favori.

Voyons comment procéder avec Photoshop

  1. Créez alors une zone de travail au dimension de votre écran.
photoshop-nouveau-design-jeedom

2. Appliquez un fond avec la couleur #22202d

couleur-fond-design-jeedom

3. A présent, dessinons les murs. Pour cela, utiliser l’outil trait.

photoshop-outil-trait-jeedom-design

4. Appliquez une couleur blanche et une épaisseur de 7 pixels.

jeedom-design-traits-photoshop

5. Dessinez le plan de votre maison. Là encore, deux options :

  1. Soit vous avez les plans que vous importez afin de calquer dessus pour dessiner les pièces aux parfaites proportions.
  2. Soit vous dessinez grossièrement. Tant que vous conservez les proportions des pièces, cela convient parfaitement.
design-jeedom-construction

6. Pixelisez et fusionnez ensuite vos tracés pour n’en former qu’un et nommez votre calque “murs”.

calques-photoshop-murs-design-jeedo

7. Créez un nouveau calque que vous nommerez “color” et appliquez un remplissage de type dégradé radial avec les couleurs #44759d et #85e8f1. Vous obtenez alors un résultat comme ci-dessous.

calque-color-degradé-radial

8. A présent, positionnez-vous sur le calque fond et faites une sélection inversée depuis le calque murs (command + clic gauche)

selection-calcque-jeedom-design

9. Coupez la sélection depuis le calque color que vous pourrez masquer ensuite. Vous obtenez des murs avec un dégradé de couleur.

mur-color-design-jeedom-photoshop

10. Procédez à quelques découpes pour les ouvertures (portes et fenêtres).

design-jeedom-decoupes-ouvertures

11. Enfin, nous allons appliquer un style au calque murs color pour donner un rendu un peu plus futuriste au plan. Pour cela, positionnez-vous sur le calque et appliquez un style dans calque/style de calque/lueur externe. Définissez ensuite une couleur de valeur #00f7dd

style-calque-lueur-externe-design-jeedom

12. Vous obtenez alors votre fond qui illustrera votre maison sur la tablette.

design-jeedom-effet-lueure-externe

13. Rendez vous sur Jeedom, dans le menu design et positionnez-vous sur votre design vierge. Si vous n’en avez pas encore créé, faites le. Faites ensuite un clique droit/Edition sur la page blanche.

design-edition-jeedom

14. Les différentes options ne sont maintenant plus grisées. Cliquez sur Configurer le design.

configuration-design-jeedom

15. Utilisez le bouton Envoyer pour uploader votre image de fond que nous venons de créer.

design-fond-upload-jeedom

16. Voilà, votre fond de design est à present opérationnel. Procédez à une vérification sur la tablette, et ajustez au besoin.

design-jeedom-importe

Notez que je laisse volontairement de l’espace en bas de l’image. C’est ici que nous allons mettre le menu. Ce dernier permettra de naviguer entre les différentes vues des designs comme présenté au départ de ce guide.

Le menu du design Jeedom

Afin de naviguer entre les différents designs, nous allons créer un menu. ce menu est en fait un peu de code html associé à un fichier css et quelques images. Rien de bien sorcier. Le code du menu se présente sous cette forme :

code-menu-jeedom-design

Et sa mise en forme se fait à l’aide du code css suivant :

css-code-menu-design-jeedom

Affiché dans un navigateur web, le menu ressemble à cela :

menu-design-jeedom-navigateur

Passons maintenant à son intégration. Pour cela, nous devons transférer les fichiers sources sur la box Jeedom. Que ce soit une smart ou un Jeedom DIY basé sur un Raspberry Pi, la procédure reste la même.

  1. Commencez par télécharger les fichiers source via le bouton ci-dessous et décompressez l’archive.

Télécharger les fichiers

2. Il existe plusieurs façons de transférer des fichiers sur Jeedom. Nous allons utiliser la plus simple, il s’agit de passer par le plugin Jeexplorer.

jeexplorer-plugin-jeedom

Gratuit et très pratique, avec jeexplorer, uploadez vos fichiers en deux temps, trois mouvements d’un simple glissé / déposé ! Uploader simplement le répertoire menu décompressé à la racine de Jeedom.

jeexplorer-menu-upload

3. Placez vous sur le design et faites un clique droit / Ajouter texte/html.

ajout-html-design-jeedom

4. Agrandissez la zone de texte à votre convenance et glissez là où vous désirez voir votre menu.

edition-html-design-jeedom

5. Procédez à un clique droit pour éditer cette partie.

parametres-affichage-zone-texte-jeedom

6. Ouvrez le fichier menu.html et copiez/collez le code qu’il contient dans le champ texte.

code-html-menu-design-jeedom

Notez qu’il faudra éditer cette partie une fois toutes les pages créées pour indiquer l’ID du plan. Vous trouverez cet ID dans l’URL de la page web.

7. sortez du mode édition et enregistrez, voilà à présent votre design prêt à accueillir vos équipements et informations domotiques.

resultat-menu-design-jeedom

Ajouter et mettre en forme un équipement sur le design Jeedom

  1. Ajoutons à present un équipement sur le design. Pour cela rendez-vous dans Ajouter un équipement.
jeedom-design-ajout-equipement

2. Cherchez votre équipement dans les différents objets de la box domotique.

choix-equipement-design-jeedom

3. A première vue, l’équipement ne ressemble pas au résultat attendu. Il va falloir apporter quelques paramètres pour cela.

equipement-defaut-jeedom-design

4. Pour cela éditez l’équipement via configuration avancée.

configuration-equipement-jeedom-design

5. Dans configuration avancée, éditez les commandes inutiles via la roue crantée.

edition-equipement-jeedom-design

6. Par exemple pour cette commande que je ne veux pas voir sur mon design, je décoche l’option visible et j’enregistre. Procédez de même pour les autres commandes inutiles.

masqier-commande-design-jeedom

7. Afin d’effacer le nom de l’équipement et son fond, décochez afficher le nom et couleur de fond, puis cochez transparent dans l’onglet Affichage sur la vue Design. Enregistrez et revenez sous votre design.

couleur-edition-design-jeedom

8. Résultat :

widget-design-jeedom-final

Ajouter une information température sur le plan Jeedom

  1. Pour ajouter une information comme une température, ajoutez un équipement et pointez vers votre température.
ajout-temperature-jeedom-design

2. A l’insertion c’est de nouveau pas très joli. Nous allons, là aussi faire un peu de paramètrage.

temperature-design-jeedom-avant-edition

3. Rendez-vous dans les paramètres d’affichage : décochez nom et appliquez un fond transparent.

configuration-temeprature-fond-jeedom

4. éditez ensuite la commande température via la roue crantée.

edition-commande-temerature-design-jeedom

5. Rendez-vous dans l’onglet affichage et choisissez le widget tile puis décochez afficher le nom.

edition-temperature-comande-jeedom

6. Sauvegardez vos modifications et voilà le résultat !

resultat-final-design-jeedom

Conclusion

Continuez ainsi en important toutes vos commandes sur votre design et procédez de même sur les autres pages. Pensez bien à éditer le menu de chaque pages pour confirmer les ID et procédez à des vérifications régulières sur l’écran de la tablette. Voilà, vous savez à présent comment mettre en oeuvre un design Jeedom qui à de la gueule de la réalisation graphique à la mise en oeuvre. A vous de jouer les amis !

Domo-blog a fait le choix de ne pas polluer votre lecture avec de la publicité. Vous trouverez cependant des liens affiliés vers les produits recommandés dans le contenu. Cela ne perturbe en rien votre experience de lecture et permet de financer le blog.
Vous pouvez également soutenir le blog en m'offrant un café sur Ko-Fi.


discord

Restez connecté aux nouveautés domotiques, inscrivez-vous à notre newsletter

A propos de cet auteur

Aurélien Brunet

Chef de projet informatique, anciennement informaticien spécialisé dans l'IT industrielle, le réseau et les bases de données. Un peu geek à mes heures perdues, je me suis mis à la domotique en 2012 pour sécuriser mon domicile.
Depuis, je teste, j’installe, je code, j’améliore mon installation et surtout, je partage avec vous mon expertise via ce blog et mon podcast Domotique Chronique pour améliorer votre quotidien dans la maison connectée !

Add Comment

Cliquez ici pour poster 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.

construction et domotique
promos domotique
Choix box domotique
promos domotique

Design Jeedom, une usine à gaz ?

A la création, un design Jeedom ressemble à cela :

Design Jeedom : Le choix de la tablette

Le but est de dédier les fonctions domotiques récurrentes de la maison à la tablette pour gagner du temps et du confort au

Design Jeedom : l’image de fond

Un point important dans la construction d’un design Jeedom est sans doute l’image de fond. C’est ce qui déterminera tout

Le menu du design Jeedom

Afin de naviguer entre les différents designs, nous allons créer un menu. ce menu est en fait un peu de

Ajouter et mettre en forme un équipement sur le design Jeedom

Ajoutons à present un équipement sur le design. Pour cela rendez-vous dans Ajouter un équipement.

Ajouter une information température sur le plan Jeedom

Pour ajouter une information comme une température, ajoutez un équipement et pointez vers votre température.

Conclusion

Continuez ainsi en important toutes vos commandes sur votre design et procédez de même sur les autres pages. Pensez bien

  • Design Jeedom, une usine à gaz ?
  • Design Jeedom : Le choix de la tablette
  • Design Jeedom : l’image de fond
  • Le menu du design Jeedom
  • Ajouter et mettre en forme un équipement sur le design Jeedom
  • Ajouter une information température sur le plan Jeedom
  • Conclusion