Salut à tous,
Suite à de nombreuses demandes (notamment sur le groupe Facebook « Entraide Jeedom »), je me lance dans la rédaction d’un tuto pour vous expliquer pas à pas comment j’ai construit mon design.
Voici le design en question :
Les contraintes que je m’étais imposées :
- monopage (je n’avais pas envie d’un menu, avec des chargements de page longs et pénibles)
- sobre (fond sombre, couleur monochrome, seuls les éléments qui ne sont pas à l’état repos qui ressortent pour les voir tout de suite) - pour ça je me suis très très très largement inspiré de designs vus le net)
- seules les infos qui me sont essentielles au quotidien (aucun intérêt selon moi d’avoir la charge CPU de mon raspberry sur le design… même si chacun fait ce qu’il veut !)
- adapté à une vieille tablette 7 pouces (donc pas énormément de place non plus pour mettre bcp d’infos…)
- éviter les bricolages à partir d’icônes récupérées sur le net… Je ne voulais utiliser que les icônes du core.
- éviter les widgets custom à base de HTML/CSS/Javascript compliqués histoire de me faciliter la maintenance future (ça vit un design).
En gros, je voulais les infos/actions suivantes :
- Température / humidité à l’extérieur
- Date / Heure
- Météo du jour et du lendemain et amplitude des températures
- Conso instantanée et état du délestage (full chauffage électrique)
- Allumage/extinction/état des lumières connectées
- Pour chaque pièces : température / humidité / fenêtres / portes / radiateurs allumé ou non (fil-pilote) / choix du mode de chauffage / et retour du mode courant de chauffage
- et last but not least => choix du mode global de la maison en cas d’imprévu.
En ce qui concerne les modes de chauffage et le mode global de la maison, tout est piloté par agenda en tant normal mais dans le bureau, ou en cas d’imprévu je pilote manuellement. Et je peux exceptionnellement vouloir forcer un mode confort dans une pièce temporairement.
Je ne vais pas tout rédiger d’un coup, ce sera un peu long… Donc je vais procéder par « tuile ».
Détail (qui n’en est pas un) = Je suis en JEEDOM 4.1 Béta.
1. Création du design
On commence par créer un design… Faut bien commencer quelque part.
- Accueil => Clic sur Design
- Au milieu de la page => Clic-droit => Editer
- Au milieu de la page, à nouveau => Clic-droit => Créer un design
- Saisir un nom (tuto pour moi) et valider
J’ai maintenant un nouveau design dans la liste.
2. Choix de la taille / résolution
Dans mon cas, je crée un design pour une vieille tablette Nexus 7 avec une résolution de 1280*800 pixels.
- Clic-droit au milieu de la page => Edition
- Clic-droit dans le carré vert qui apparait => Configuration du design
- Saisir la taille qui convient à votre projet
- Sauvegarder !
Vous avez maintenant un grand carré vert adapté à votre écran.
3. Couleur de fond
- En mode édition (je le préciserai pas à chaque fois…)
- Clic droit dans le grand carré vert => Configurer le design
- Décocher Fond transparent et choisissez une couleur qui vous convient
- Personnellement je mets un gris sombre… 61 / 61 / 61
Vous avez maintenant un grand cadre avec votre fond ! Youpi on a fait le plus facile 
4. Date et Heure - Widget Digital_Clock
Pour l’affichage de l’heure et la date, j’utilise un widget custom gracieusement mis à disposition par @Salvialf sur son compte Github ici => GitHub - Salvialf/JEEDOM-Widget-DigitalClock: Widget pour Jeedom: Horloge digitale avec date et heure
Vous trouverez la documentation directement sur la page Github, je ne ferai pas mieux ! Ni plus clair ! C’est pas possible. Donc je vous invite à suivre consciencieusement ce qui est indiqué sur la page.
Quelques précisions tout de même :
- Vous avez besoin du plugin « Virtuel » (à installer depuis le market Jeedom), on va s’en servir sans arrêt !
- Profitez en pour installer également le plugin JeeXplorer (qui va aussi un peu servir)
- Le code du widget en v4 est ici : https://github.com/Salvialf/JEEDOM-Widget-DigitalClock/tree/master/V4
- Téléchargez DigitalClock.zip
- Dézippez le sur votre PC
- Avec JeeXplorer, glissez/déposez le contenu du dossier dashboard dans html/data/customTemplate/dashboard
Logiquement vous allez arriver à quelque chose comme ça :
A partir de là vous pouvez suivre la doc de la page Github pour créer le virtuel et associer le nouveau widget custom de Salviaf à votre commande.
Personnellement j’aime le sobre, donc je me suis contenté du minimum niveau customisation en activant le mode « complet » grâce au paramètre optionnel de la commande.
- Retourner dans le design
- Passer en mode édition
- Ajouter un équipement
- Ajouter votre virtuel et valider
- Vous devez avoir votre virtuel sur le design !
Pour enlever le titre et mettre un fond
- En mode édition
- Clic droit sur l’heure
- Paramètre d’affichage
- Cocher Masquer le nom
- Décocher Transparent pour la couleur de fond
- Choisir une couleur de fond (noir pour moi)
- Sauvegarder
Vous pouvez aussi changer la couleur et la police du texte dans les paramètres d’affichage
Vous pouvez choisir une police (soit une intégrée par @Salvialf), soit une custom (Google Montserrat dans mon cas - j’expliquerai plus loin comment l’ajouter).
5. Ajouter une police custom
Pour ajouter une police custom en V4, il faut suivre la procédure suivante (on va prendre l’exemple de Google Montserrat).
- Télécharger les fichiers de police : Montserrat - Google Fonts
- Dézipper l’archive
- Sur votre PC créer l’arborescence suivante :
- Montserrat-Light
– fonts
— <copier/coller ici le/les fichiers ttf de la police)
– style.css avec ce contenu (à adapter évidemment à votre police !)
@font-face {
font-family: 'Montserrat-Light';
src:url('fonts/Montserrat-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="Montserrat-Light-"]:before, [class*=" Montserrat-Light-"]:before {
font-family: 'Montserrat-Light';
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.Montserrat-Light-heart:before {
content: "\e000";
}
- glisser/déposer votre dossier Montserrat-Light dans le dossier html/data/fonts grâce à JeeXplorer.
Vous pouvez maintenant utiliser la police Montserrat-Light dans n’importe quelle class CSS comme à l’étape 4 pour la date et l’heure.
Le tuto a été déplacé ici : https://youdom.net/2020/11/28/faire-un-design-simple-monopage-avec-jeedom/?fbclid=IwAR0WshGzZz5eiMpK2K9Tf7Dcoz6ym5qtX79ss88PKbP6GYkwp86LAHVsSII
et tu l’as fait, ce premier tuto sur le sujet, clair et compréhensible pour un étenel débutant!!! 
