[Tuto] Faire un design simple monopage avec Jeedom

Tags: #<Tag:0x00007f2426612820> #<Tag:0x00007f2426612668>

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 :
image

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

image

  • 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

image
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 !

image

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 :smiley:

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 => https://github.com/Salvialf/JEEDOM-Widget-DigitalClock

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 :
image

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.

image

  • Retourner dans le design
  • Passer en mode édition
  • Ajouter un équipement
  • Ajouter votre virtuel et valider
  • Vous devez avoir votre virtuel sur le design !

image

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

image
image

Vous pouvez aussi changer la couleur et la police du texte dans les paramètres d’affichage
image

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).

image

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 : https://fonts.google.com/specimen/Montserrat
  • 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.
    image

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

15 J'aimes

C’est génial, merci beaucoup pour ce boulot, ça donne des idées pour moi qui me lance dans les design également.
J’ai hate de voir la suite, surtout l’histoire des fleches qui désignent le mode des radiateurs :wink:

J’attendais avant d’oser me lancer dans mon premier design… :thinking: et tu l’as fait, ce premier tuto sur le sujet, clair et compréhensible pour un étenel débutant!!! :smile:

Merci à toi, oh grand jeedomien parmi les jeedomiens!!! :innocent: :innocent:

Et surtout, n’hésite pas à en faire d’autres du même tonneau! :clinking_glasses: :clinking_glasses:

Super précis, merci!
Cela faisait un moment que j’hésitais à me lancer …
Mais quelle frustration d’arriver à la fin du premier épisode !!!
Vivement la suite, tu peux teaser?
Bon we en tt cas

Bonjour est surtout bravo, je voulais tu proposer de faire une publication aprèes avoir lu le grope facebook, merci a @coke alias stéphe pour les antimes qui m’a fait découvrir le groupe.
ton approche me semble unique en tout cas original nous attendons la suite.

Pour me faciliter la rédaction, je passe sur Youdom, le tuto est désormais ici :
https://youdom.net/2020/11/28/faire-un-design-simple-monopage-avec-jeedom/?fbclid=IwAR0WshGzZz5eiMpK2K9Tf7Dcoz6ym5qtX79ss88PKbP6GYkwp86LAHVsSII

J’ai ajouté les explications sur la tuile puissance/délestage.

1 J'aime

Super, merci encore.

super ! j’attends la suite…avec impatience, j’en suis à l’horloge .
je voulais supprimer les secondes mais j’ai pas trouvé.

En l’implémentant via Pimp my Jeedom, tu as une case « seconds » à cocher (ou non !) :
Capture d’écran 2020-11-29 à 17.11.50

en faite il y avait plus simple ! dans les paramètres optionnels widget…secondes off
j’ai quand même pris son plugin…vu le temps passé ça les vaux bien !
mais j’ai pas le même affichage que toi …j’ai l’édition du code ! à la place de personnalisation de la commande
peut être parce que j’ai récupéré le widget par le github et pas par le plugin ?

1 J'aime

Je doute vraiment que ce soit plus simple :grin: :wink: ! Ma capture est une capture du plugin Pimp my Jeedom (PMJ). Si ton affichage a une édition de code, ne serait-ce pas plutôt le plugin Widget ? (Ça fait tellement longtemps que je ne l’utilise plus que je ne me souviens pas bien).

Tu ne trouveras pas nécessairement dans PMJ toutes les options de paramétrage que dans les Widgets originaux de Salvialf (je n’ai pas encore essayé ceux de Noodom), mais ce qui est possible est extra simple à mettre en place. Teste un peu PMJ et tu vas comprendre pourquoi « je doute vraiment que ce soit plus simple » :wink:.

La méthode de Guilhem pour l’horloge est bien sûr fonctionnelle, mais l’utilisation de PMJ l’automatise drastiquement (c’est le but de PMJ).

? On doit pas parler de la même chose !
Je parlais juste pour supprimer les secondes, c’est effectivement plus simple de rajouter secondes off
Que d’installer un plugin le configurer…etc
Pour les prochains widgets peut-être.

Effectivement, une fois que tu as tout installé à la mano, c’est plus rapide d’ajouter une mention « secondes off » que d’installer PMJ :wink:. C’est en commençant de la page blanche que c’est (beaucoup) plus rapide.

Je suis bloqué sur ce problème:
je n’arrive pas à déplacer la zone 4°C dans la tuile noir ? elle se trouve toujours en haut de la tuile.
je voudrais la placer plus bas, comme le 237W de @Guilhem
si quelqu’un a une idée ?

CaptureTemp

Tu me forces à spoiler !
Voici la configuration avancée du virtuel qui affiche température/humidité extérieure.
image

C’est donc une disposition tableau et n’oublie pas de cocher la case « Centrer dans les cases ».

désolé ! si je vais trop vite !

pour le virtuel c’est ce que j’ai fait « disposition tableau » mais si tu ne mets rien dans la première ligne…ça ne marche pas.
c’est ce que j’ai fait aussi pour mon thermostat, ici ça marche parce qu’il y a du texte (mode Confort)
CaptureThermostat

PS: je voulais tricher en utilisant du texte en mode couleur noir mais j’ai pas l’impression que l’on peut choisir …du noir pour la première ligne et du bleu pour la deuxième ligne.

Quand tu dis ça ne marche pas ? Qu’est-ce qu’il se passe ?
En même temps ce n’est pas très logique d’avoir une case vide.
Mettre le texte en noir ça va marcher mais c’est sale, il y a bien mieux à faire !
Dernière question tu es en quelle version de Jeedom ?

Superbe travail @Guilhem ! Bravo :slight_smile:

je suis en 4.1.16
voila ce que ça me donne
CaptureTemp2
j’ai bien la première ligne, mais pas de hauteur entre les deux lignes.
ce qui m’intrigue c’est ce que tu as réussi a faire avec le 237W, on voit bien qu’il est au milieu de la tuile noir
chez moi c’est toujours collé en haut !
bravo quand même pour ce travail, c’est super !

Tu seras pas le dernier à être emmerdé… faut qu’on trouve ce que j’ai fait pour que ça marche !
Merci de faire remonter ce genre d’info pour que je précise le tuto.