[Tuto noodom] Menu menuNavButton

noodom · Février 8, 2023, 5:43

Hello,

Alors tout d’abord bravo pour ta persévérance
Par contre, attention, tu touches directement au code du core de jeedom. Ce qui au risque de te décevoir est à proscrire (sans vouloir te décourager pour la suite )
En effet, les effets de bord sur de nombreux autres écrans de Jeedom pourraient être étonnants.

Donc il faut adapter ta correction au niveau du menu lui-même. Je regarderai à nouveau, c’est forcément gérable et c’est plus que conseillé pour la suite de tes nuits blanches

Et donc au final, je déconseille fortement de suivre cette modification de code Jeedom à ceux qui seraient tentés.
Comme je disais, son impact peut être inattendu sur d’autres écrans et la modification sera écrasée sur une mise à jour de Jeedom , donc solution à court terme.

noodom · Février 8, 2023, 5:48

D’ailleurs je viens de me rendre compte que la partie gênante à gauche que j’avais cherchée à supprimer concernait le menu FSB33. Je n’avais pas remarqué ce problème sur ce menu. Je vais donc regarder si je constate la même chose chez moi.

faco · Février 8, 2023, 6:21

Ok je te remercie une fois de plus .
Le problème c’est que j’ai du mal à comprendre un peu tout je me melange grave les pinceaux .
S’il n’y a pas de problème de sécurité je vais laisser comme ça pour l’instant j’ai une sauvegarde de mon jeedom avant tout ça , au pire des cas je réinstallerai une fois de plus .
Et si tu peux m’aider une fois que tu auras trouvé les solutions viables pour jeedom je mettrai tout ça au clair .
En attendant je vais quand même chercher d’où viennent les erreurs comme ça j’apprends je n’aime pas faire les choses sans comprendre .certainement radius: caché quelque part pour les angles , et une histoire de top : ou autre qui gêne pour le haut si j’ai bien compris .

noodom · Février 8, 2023, 10:00

Je viens de faire le test sur mon Jeedom et je ne reproduis pas le problème.
Plus précisément, avec les bonnes valeurs dans le fichier de configuration perso.json, mon affichage est correct sans modifier de fichiers de Jeedom.

Pour exemple, car ça ne correspondra pas forcément à ton besoin, ni à la configuration de tes boutons (menu positionné à 300px et de largeur 766px) :

    "parameters": {
      	"css_file":"style-img.css",

        "menu_x":"300px",
        "menu_y":"0px",
      	"menu_width":"766px",
        "menu_height":"100px",

        "content_x":"0px",
        "content_y":"0px",
        "content_width":"1280px",
        "content_height":"1000px"      
    }

Il faut donc commencer par gérer la largeur du menu, soit menu_width à 766px (correspondant à largeur occupée par tes boutons de menu), puis positionner le début du menu depuis la gauche de l’écran (menu_x à 300px)
Il faut aussi par un clic droit / Edition modifier le fond d’écran du HTML Display en cochant Transparent pour ne plus voir le fond sur les arrondis de chaque coin du menu.

Tiens-moi au courant de tes tentatives

EDIT :
En voulant faire des captures d’exemples, je viens de voir qu’en effet, il y a un décalage que je n’avais pas en jouant avec le paramétrage. Mais dans un premier temps, cocher Transparent devrait suffire au besoin que tu remontes (De mémoire, bug Jeedom qui ne prenait pas en compte la demande de transparence par programmation : je referai des tests si ça a évolué depuis et que je peux forcer la transparence à la génération du menu).

EDIT 2: A priori, il y a bien un bug à creuser côté Jeedom. Si tu coches « Transparent », tu refermes la fenpetre de paramétrage et tu l’ouvres à nouveau : la case est décochée (mais la transparence est conservée…).

faco · Février 9, 2023, 7:16

Salut .
Au top mercie je teste ça dès que j’ai le temps , et je ferai le retour .

noodom · Février 9, 2023, 8:03

Bon, je ne reproduis plus le problème de décalage.
Sinon, pour la transparence, tu aurais pas un peu trop joué avec des modifications ?
En fait, avec différents tests pour reproduire, je me suis rappelé que je force la transparence du fond du menu lors de sa génération, donc tu ne devrais pas le voir sur ton design final.

Tiens-moi au courant.

EDIT : Trouvé pour le décalage côté gauche ! En fait, ça ne se produit que pour le le css style-img.css donc je reproduisais seulement si je le forçais pour mon menu dans mes tests.

Il suffit donc d’ajouter le ligne suivante dans /data/menusNoodom/menuNavButton/css/style-img.css : padding-left:0;

github.com

noodom/jeedom_menus/blob/14d6fcb6f59fd8d199afdb7f9c69eed1e2a4a9b8/menuNavButton/data/menusNoodom/menuNavButton/css/style-img.css#L32

      
        
            }
            
            
#menuNavButton ul {
                list-style: none;
                width: inherit;
                height: inherit;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding-left:0;
            }
            
            
#menuNavButton li {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0px;
                height: calc(var(--menu-height) - 10px) !important;
                width: 95px;
                border: 4px ridge rgba(80, 80, 80, 1);

faco · Février 9, 2023, 1:05

Bon j’ai eu un peu de temps pour foutre le bordel dans mes fichiers Css .
J’ai réussi a remonté le menu en haut , toujours dans le même fichier ligne 465 margin-top: 0px; j’ai mis -5px .

resultat :

Si tu sais ou je dois changer ses réglages ? Car la c’est encore dans le core de Jeedom

Vu que j’ai remonter le menu a -5px j’ai maintenant le fond du menu qui apparait en dessous 5px sur la toute la longueur .
J’ai réussi a supprimer la barre grise en dessous le menu qui était une marge la fois précédente mais la le problème viens cette fois du fond d’image .
Et comme tu peux voir sur la photo je ne peut pas accéder au menu en clic droit pour coché transparent comme tu as conseillé , se qui aurais du résoudre les problèmes des bords arrondis et de la ligne du bas de 5px .
A tu une idée du pourquoi j’ai pas droit au clic droit pour les paramètres d’affichage ? ( peux être que j’ai trop jouer dans les Css mais je ne pense pas car je n’ais jamais eu la possibilité d’avoir cette fenêtre avant je me faisait la réflexion justement ) .

En attendant j’ai vue dans le code Html qu’il fallait modifié " data-tags=« » style="width: 695px; height: 95px; parfait pour mon réglage .

.
Par contre est ce que tu serais ou je peux modifié ces réglages ou dans quels fichier car pour l’instant je ne trouve pas ?

Merci encore .

faco · Février 9, 2023, 9:39

Salut enfin fini .
J’ai réussi a faire apparaitre la fenêtre de configuration .
Du coup fond transparent et tout est ok .
Merci .

noodom · Février 10, 2023, 1:56

Salut,

Au même endroit que j’ai montré dans le post précédent :

Pour rappel, le principe des menus que je propose est le suivant :

génération automatique depuis un scénario
paramétrage personnalisé du contenu avec le fichier /json/perso.json
(Etapes suffisantes dans la grande majorité des utilisateurs )
paramétrage personnalisé du css avec le fichier /css/perso.css : nécessaire seulement pour aller plus loin dans la personnalisation et modifier l’affichage par du codage css

Ces étapes t’éviteront de devoir modifier le code du core de Jeedom pour ne pas avoir de (mauvaises) surprises sur les autres écrans de ton Jeedom

Avant de te plonger dans le code, regarde au niveau de la documentation sur le fichier perso.json

menu_x : position x du menu (par défaut « 0px »)
menu_y : position y du menu (par défaut « 280px »)
menu_width : largeur du menu (par défaut « 100px »)
menu_height : hauteur du menu (par défaut « 720px »)

Tu as d’ailleurs déjà dû le modifier vues les valeurs que tu montres dans le code du debuggueur ?

faco · Février 13, 2023, 11:35

Merci J’ai tout corrigé je pense , je continue a apprendre pour être plus claire sur mes prochain post et pas faire des choses qui servent a rien ou risque pour la santé de Jeedom .

noodom · Février 13, 2023, 12:13

Bon courage pour la suite dans la personnalisation du menu
ta recherche n’aura pas été inutile, tu as pu en apprendre plus sur le fonctionnement de Jeedom et de ce qui tourne autour. Petit à petit, tu liras la matrice et tu pourras faire de nouvelles personnalisations à ton goût

esso1 · Mars 2, 2023, 7:38

il est bien ce menu multi tout … je vois que tu continu de le faire evoluer

noodom · Mars 6, 2023, 5:12

Il a plus qu’évolué en fait, j’ai revu le moteur en profondeur avec une méthode différente pour que ça soit plus efficace et plus simple, en dev comme en utilisation au quotidien Et pas mal d’autres nouveaux du coup.

jlpnc · Mars 25, 2023, 9:55

Bonjour @noodom
encore un super livrable !
j’utilisais déjà celui intégré dans Pimp
mais celui là est encore bcp mieux
voilà ce que cela donne
comment faire pour mettre le fond de la selection en vert et l’icone d’une autre couleur ?

noodom · Mars 25, 2023, 1:16

Salut,

Merci pour ton retour

Pour style.css et style-v.css, il manquait le paramètre background_active_link pour modifier le fond sur focus actif.
Je viens de le modifier sur le github.

Pour modifier le fond et l’icône, par une couleur, tu peux donc ajouter les paramètres suivants pour les différents exemples :

style.css

    "parameters": {
      	"css_file":"style.css",
      	"background_active_link":"#96C927",
      	"background_default_link":"black",
      	"cursor_color":"white",
      	"cursor_default_color":"gray",

style-v.css

    "parameters": {
      	"css_file":"style-v.css",
      	"background_active_link":"#96C927",
      	"background_default_link":"black",
      	"cursor_color":"white",
      	"cursor_default_color":"gray",

style-img.css

    "parameters": {
      	"css_file":"style-img.css",
      	"image_path_active":"linear-gradient( #96C927 100%, #96C927 100%)",
      	"cursor_color":"white",

jlpnc · Mars 25, 2023, 7:53

excellent, parfait
merci pour ta réactivité

Maya · Juillet 12, 2023, 6:03

Bonjour

Je découvre ce menu trés pratique et plutot simple à installer via le scénario et je me pose une question est il possible de changer les icone du menu pour les personaliser suivant nos besoins avec nos icones?

noodom · Juillet 12, 2023, 7:56

Helloo,

Actuellement, on peut choisir de personnaliser les icônes du menu à partir des icônes de fontawesome en modifiant le fichier perso.json pour chacun des boutons du menu (« icon »).

Pour ajouter ses propres images, il faudrait que j’adapte le code pour accepter des gifs/png/… comme j’ai pu le faire sur d’autres de mes menus.

Maya · Juillet 13, 2023, 8:07

Merci Noodom pour la réponse par contre je n’arrive pas à comprendre seul les icone du core sont possible

ou peut on ajouter aussi ceux du site Find Icons with the Perfect Look & Feel | Font Awesome
et si possible comment je n’arrive pas à comprendre

noodom · Juillet 13, 2023, 10:28

Jeedom utilise la version 5.15.4 : Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome
(Donc, attention, les icônes de la version 6 par défaut sur le site fontawesome ne seront pas compatibles)

C’est donc sur ce lien qu’il faut faire la recherche des icônes possibles.

Pour les ajouter dans le menu, il faut aller dans l’explorateur de fichiers sous Jeedom, au niveau des fichiers de configuration du menu, c’est-à-dire : /html/data/menusNoodom/menuNavButton/json/perso.json et modifier au niveau du paramètre icon pour chaque bouton du menu.

Résumé

{
« buttons »: [
{
« label »: « Accueil »,
« link »: « 200 »,
« icon »: « fas fa-home »
},
{
« label »: « Lumières »,
« link »: « 5 »,
« icon »: « fa fa-lightbulb »
},
{
« label »: « Energie »,

Dis-moi si ça répond à ta question ?