VOUS ÊTES ICI: Accueil » Blog » Domotique » Jeedom » Design Jeedom : Comment mettre en place une interface tablette tactile belle et fonctionnelle
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.

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

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.

Dernière mise à jour du tarif le  2019-10-13 at 21:23

Dernière mise à jour du tarif le  2019-10-13 at 21:23

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

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

Progression de la lecture

DebutFin

À suivre en page 2, l’ajout et la configuration des équipements sur le design, la conclusion et l’avis du domo-lab sur ce guide de personnalisation.

Restez informé des nouveautés domotiques : Nouveaux guides, Actualités et Astuces connectées