Design Jeedom v4 - Quelles bonnes pratiques svp ? ;)

Utilisation du core de Jeedom Design
1

Bonjour à tou(te)s,

j’essaye en ce moment de fabriquer mon propre design (grand sujet), assez motivé pour faire une version Neumorphic Dark, en mettant les mains dans le dur si besoin puisque j’ai des notions de html et de css.

Avant cela, j’aimerai connaitre les bonnes pratiques, car j’ai beau fouiller, je tombe sur pas mal d’infos parmi lesquelles j’ai du mal à voir clair. Parce qu’elles sont parfois obsolètes (doc officielle widget), ou à cause de certains abus de langage dans les tutos (légitimes) et mon intuition personnelle… Bref, besoin de faire le point avec vous avant de me lancer dans l’aventure !

Je précise avoir découvert Jeedom en v4.0, du coup je n’ai aucun réflexe ou historique sur les façons précédentes de faire des widgets par exemple…

Déjà, sommes-nous bien d’accord, au niveau du « langage » utilisé dans Jeedom, que:

  • Objet = une pièce de sa maison (c’est comme cela que j’ai construi mon « dashboard »).
  • Equipement = équipement physique de base par défaut (lors de l’inclusion d’un module par exemple ou l’installation d’un plugin - meteo…)
  • Virtuel = équipement customisé non-stylisé (pour créer, scinder ou fusionner des infos).
  • Tuile = l’affichage graphique d’un équipement (physique de base ou virtuel).
  • Widget = l’affichage d’une info « stylisée » (exp: porte verte ouverte ou porte rouge fermée)
  • Info = data numérique ou binaire envoyée par un capteur quelconque (exp: temperature, ouverture, etc).
  • Dashboard = page statique en base type panneau de commande pour piloter sa maison (un peu rigide car par défaut dans Jeedom)
  • Design = Dashboard personnalisé, organisé comme on le souhaite (qui regroupe des tuiles personnalisées, plusieurs pages, etc).

Merci déjà de me dire si ma compréhension des termes ci-dessus est bonne :wink: :ok_hand:
Ce sera déterminant pour moi.

Ensuite:

A. Avec un cas d’étude c’est plus simple:
Je souhaite par exemple créer une « Tuile » personnalisée qui affiche la météo. J’ai déjà le super plugin Weather, qui m’a créé un « équipement de base », mais dont l’aspect esthétique (style) et les infos (valeurs, types ou quantités) ne correspondent pas à ce que je souhaite faire.

Selon moi, il faudrait que je fasse dans l’ordre:

  1. Créer un équipement « virtuel » (qu’on appellera « MeteoPerso » par exemple) pour déjà isoler les infos que je souhaite faire apparaitre sur ma « tuile » .

  2. Puis utiliser les « widget » pour changer le logo de la pluie par exemple avec une autre image .png de mon choix et en ne l’appliquant qu’à l’info pluie de ce virtuel ?

    j’ai deja une question: est-ce possible de n’appliquer le widget qu’au virtuel et non à l’équipement de base ? En gros, mon image custom de pluie ira-t-elle customiser le visuel de pluie de la tuile de l’equipement de base méteo ? Vous me suivez ? :fearful:

  3. Une fois l’esthétique des infos modifiées, je veux aussi modifier le reste de la tuile (Apparence), avec des bords arrondis, un fond foncé, etc. Comment faire, on passe par les widgets aussi pour customiser une tuile ? Et serait-ce possible de faire un master réglage pour l’appliquer à toutes les nouvelles tuiles du design ?

    Il y a des choses déjà possible « facilement » dans l’interface Jeedom (afficher/masquer titre tuile, etc), mais je veux aller vraiment plus loin, un exemple de type de code que je souhaite implémenter.

B. Organisation des fichiers spécifiques au design:
J’imagine que oui (sans avoir trouvé comment), mais est-ce possible de modifier des classes CSS « en parallèle » pour un design donné, sans « écraser » les classes des styles des équipements de base du core ? En gros, éviter de polluer les fichiers .css de base de Jeedom, en créant peut-être un amont en environnement de développement spécifique à mon design perso ?

Exp:
- un repertoire dédié au nouveau design
- un sous-repertoire dédié aux fichiers .png (exp. custom ON/OFF),
- un fichier général de toutes les classes CSS custom du nouveau design,
- etc.

Merci par avance pour vos réponses ! :muscle: :upside_down_face:

3 « J'aime »
2

Je vais pas pouvoir trop t’aider, mais les réponses vont m’intéresser ! :+1:

1 « J'aime »
3

Idem pour moi :grin:

4

Oui je n’ai pas trouvé de « quick start » pour utiliser les design perso :wink:

5

Salut Alex,

Je vais essayé de te répondre au mieux de mes connaissances en reprenant ton message.

=> C’est exactement ça.
Edit du 11/05/2021 : Je viens de découvrir que Jeedom avait fait un lexique Lexique – Jeedom – Le Blog

=> Petite subtilité, tu ne peux pas créer de Tuile.
C’est le système qui la créer automatiquement.
Pour la personnaliser, a savoir l’affichage de tes commandes / informations de ton équipement, tu ne peux que :

  • Afficher ou non une commandes / informations
  • Déplacer son ordre d’affichage / sens en :
    • modifiant la taille de la tuile
    • en glissant les commandes / informations dans la tuile (uniquement possible sur le Dashboard, mais il me semble que l’affichage est répercuté sur le Design
  • Passer la disposition en mode tableau (dans la configuration de l’équipement).

Pour personnaliser l’esthétique de la tuile, facilement, tu peux passer par Réglage/Système/Configuration/Interface
Pour personnaliser l’esthétique de la tuile plus « lourdement », il te faudra passer par du css via Réglage/Système/Personnalisation avancée

=> Oui, le widget ne s’appliquera qu’à la commande / information choisit (mais tu peux bien évidement décider de l’appliquer sur plusieurs commandes / informations :wink: ).

=> Non, les Widgets ne peuvent pas modifier la tuile.
Pour cela tu as :
Réglage/Système/Configuration/Interface
Pour personnaliser l’esthétique de la tuile plus « lourdement », il te faudra passer par du css via Réglage/Système/Personnalisation avancée

Après tu peux « truander » le système comme j’ai fait avec mon widget météo :wink:

Sur le design tu as aussi la possibilité de n’afficher que les commandes / informations que tu souhaites.
Ainsi, au lieu de s’embêter à coder du css pour une tuile d’un équipement complet, il est parfois plus simple de faire le fond de « ta tuile » avec un bloc html et de poser par dessus les commandes / informations que tu souhaites.

Cela va surtout dépendre des choses à afficher;

  • Tu ne veux afficher que la météo actuelle et la T°, tu passer par la solution 2
  • Tu veux afficher toutes les informations, il te faudra passer par du css.

=> Oui, tu peux utiliser le bloc css de Réglage/Système/Personnalisation avancée pour passer outre le css Jeedom.
Si tu veux que ton css ne touche que le design, il te faudra mettre [data-page=« plan »] devant tes classes.

Si nécessaire, concernant le stockage de fichier, le plus simple est de créer un dossier dans desktop et d’y stocker tes fichiers.

Personnellement, j’utilise la personnalisation avancée pour customiser mon design et le stockage de fichier css/png/js/svg pour des affichages plus spécifique / lourd (widget météo, horloge).

J’espère avoir dégrossi le sujet.
Je n’entre pas plus dans le détail, je te laisse revenir vers moi si tu souhaites des précisions ou si tu as d’autres questions :wink:

2 « J'aime »
6

Merci beaucoup @sartog pour tes explications !!

Je vais essayer de mettre en pratique et vous dirai à l’avancement si j’ai d’autres questions.

Pour le moment cela me semble clair, mais du papier au code il y a parfois… un monde ! :stuck_out_tongue_winking_eye:

[EDIT]

Un détail sur le comportement des « tuiles » générées par le système.

Supposons que je fasse une page design personnalisé. Lorsque j’ajoute un équipement sur ce design personnalisé, se crée forcément une nouvelle tuile. Hors, cet équipement est déjà présent sur le Dashboard de base Jeedom.

Donc, pour un même équipement, je vais avoir 2 tuiles: 1 dans le Dashboard de base, et 1 dans la page design personnalisé ? La modification de la tuile sur la page design est indépendante de la tuile sur la page Dashboard ?

7

Je suis allé voir dans Réglages > Système > Configuration > Interface, mais les options sont effectivement assez limitées.

Pour la suite je choisis donc plutot l’autre méthode = Réglages > Système > Personnalisation Avancée, mais je dois dire que la « landing page » est assez déconcertante :fearful:
J’ai à gauche un champs « Javascript » et à droite un champs « CSS ».

J’en conclut que c’est via cette interface qu’on ajoute « à la chaine » les portions de code qui s’accumulent dans ces fenetres ? (CSS ou JS)

(La doc officielle est assez expéditive… avec une erreur au passage tout en bas rubrique « en cas de problème », je pense que desktop/custopn serait plutot desktop/custom en toute logique)

8

Exact, tu y mets ton code css comme si s’était un fichier css.

Par exemple, voici les premières lignes du miens (sur 730 lignes actuellement) :

Dans cet exemple, tu pourra voir que je customise :

  • la barre de menu (en cachant certains menu, en adaptant son visuel)
  • le Dashboard (en mettant le nom des objets a gauche plutôt qu’au centre, en permettant à la barre de recherche de suivre le scroll)
  • le Design (en appliquant un background et police pour tous les design).
    Peu de limite en passant par là, et si il y en a tu peux ajouter une couche js (dans la partie gauche javascript … mais il y a plus de risque de mauvais manip avec le js :wink: ).
/* ******************** */
/*      Bar menu        */
/* ******************** */

/* On cache les menus inutilisés */
#bt_gotoView,
#bt_gotoPlan3d,
a[href="index.php?v=d&p=overview"] {
  display: none !important; 
}

/* Visuel de la barre de menu */
#jeedomMenuBar{
  backdrop-filter : blur(6px);
  outline : none !important;
}

/* Visuel de la barre de menu */
.navbar,
.navbar .container-fluid,
.navbar-header,
.navbar-collapse,
.navbar-brand,
.nav.navbar-nav,
.dropdown-menu,
.dropdown > a,
.dropdown > a:hover {
 background-color : transparent !important; 
}


/* ******************** */
/*      Dashboard       */
/* ******************** */

/* Aligner les noms des objets à gauche */
[data-page="dashboard"] legend {
  text-align: left !important;
}

[data-page="dashboard"]  .tab-content {
  background-color: transparent !important;
}


/* barre de recherche mobile */
[data-page="dashboard"]  #dashTopBar {
  margin-top: 0px !important;
  backdrop-filter: blur(6px);
  z-index: 500;
  position: fixed;
  top : 50px;
  width: calc(100% - 38px);
  opacity: 0.9 !important;  
}

/* Décalage vers le bas car le 1er objet est sous la barre de recherche */
[data-page="dashboard"]  #div_displayObject .row {
  margin-top : 40px;
}


/* Affichage sur 2 colonnes */
/*@media screen and (min-width: 1600px) {
  [data-page="dashboard"] #div_displayObject .row div.col-md-12 {
   width: 50% !important; 
  }
}*/


/* ******************** */
/*         Plan         */
/* ******************** */

/* ***** Général ***** */

[data-page="plan"] .div_displayObject {
  background: #E7EEF7 !important;
  font-family: system-ui !important;
}
1 « J'aime »
9

Merci bcp @sartog :wink: J’y vois bcp plus clair grâce à toi !
J’étais habitué à bosser avec un éditeur de texte (type atom) directement dans des fichier .css, pas l’habitude de passer par un portail…

Cela évite au moins d’écraser des fichiers ou d’en abimer, c’est une couche en + de protection côté utlisateur :wink: Bien pensé de la part de l’équipe Jeedom !

Après, à priori je pense qu’on peut aller chercher en direct le fichier avec un éditeur de texte en se connectant en SSH par exemple et éditant le fichier de customisation situé dans : desktop/custom

[EDIT]
Un truc très curieux, le fait de nommer « plan » dans [data-page="plan"] pour faire référence à un design ?!

j’aurai bien vu plutôt

[data-page="design"]

voir même mieux

[data-page="nom_de_page_du_design"]

Qu’en penses-tu ?

10

Salut,
Je ne sais pas si c’est une bonne pratique, mais je passe par un :

@import url(« /…/custom_files/css/cutomCSS_global.css »);

arborescence à partir de /html/, et directement dans la page personnalisation avancée/css

ce qui me permet d’éditer un fichier tierce directement.

Je précise que je suis une ultra quiche en html/css ocazou.

1 « J'aime »
11

Pas vraiment d’accord parce que ce que tu proposes est effectivement très intelligent ! :muscle: :brain:

C’est une bonne alternative pour manager un .css global :wink:

12

Une étrangeté de Jeedom (même l’url des pages des design s’appellent Plan : …/index.php?v=d&p=plan&plan_id=1.)

Pour la partie modification directement en ssh, peut-être est-ce possible.
Je crois que l’éditeur que j’utiliser (VS Code) a un terminal d’intégré mais je n’ai jamais essayé.

En principe, soit je code en direct sur la personnalisation avancée, soit dans VS Code pour faire des tests puis copier/coller le code dans la personnalisation avancée.

13

Sans-doute un héritage des versions précédentes…

Yes, je vais tester la méthode du remote-atom :wink:

14

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.