[Tuto noodom] Menu menuNavButton

Helloo,

Je vous propose un nouveau menu de Design Jeedom menuNavButton qui cache en fait plusieurs menus possibles par simple précision du css utilisé parmi ceux proposés.

Comme pour mes précédents menus, il est paramétrable à partir d’un fichier de configuration JSON (nom, icônes et lien des boutons)
mais surtout il permet de naviguer dans une frame, ce qui signifie que

  • Le menu reste toujours chargé pendant la navigation
  • Il n’est plus nécessaire de le recopier sur tous les écrans des designs de chaque bouton : les designs liés au boutons ne sont plus spécifiques à un menu en particulier.
  • On peut créer différents designs avec ce menu pour les paramétrer différemment (pour différents profils, support, etc…)

Un autre atout est que le menu est basé sur l’utilisation du plugin htmlDisplay :

  • un équipement htmlDisplay pour le menu
  • et un autre équipement htmlDisplay pour la gestion de la navigation par frame.
    L’avantage est qu’on peut modifier facilement le code directement depuis le plugin htmlDisplay sans toucher au design (ce qui n’est pas toujours évident et source d’erreur)

Ajouté au fait que le menu soit paramétrable par un simple fichier Json à modifier, il n’est plus nécessaire d’aller modifier le contenu du code pour modifier son apparence.

Il est possible aussi d’aller encore plus loin dans la personnalisation en modifiant les fichiers CSS proposés.

Exemples :

Le détail de l’installation est disponible ici :

Exemples de paramétrages à l’aide du fichier /json/perso.json ci-dessous.

7 « J'aime »

Exemples de paramétrages :

  • Utilisation de style.css dans perso.json

  • Utilisation de style-v.css dans perso.json

  • Utilisation de style-img.css dans perso.json (possibilité de gérer ses propres fonds d’images en les ajoutant simplement dans le répertoire /data/menusNoodom/menuNavButton/img et en les ajoutant dans le fichier /data/menusNoodom/menuNavButton/json/perso.json

  • Utilisation de style-push.css et style-push-v.css dans perso.json

  • Utilisation de style-ios.css dans perso.json

  • Utilisation de style-black.css dans perso.json

4 « J'aime »

Je propose pour que la communauté vote la résolution suivante:

Ajoutons au dictionnaire le verbe « noodomiser » car tes contributions sont tellement : intéressantes, design, ouvertes et pratiques que tu devrait rentrer dans le Panthéon de la Domotique.

Ex: Je vais de « noodomiser » ton installation … et tout de suite on sait que cela va être superbe et efficace !!

Sincère salutations, :grin:

4 « J'aime »

:sweat_smile: Ah ouais quand même :upside_down_face:
Bon, ok, t’as gagné, je vais pas arrêter tout de suite la création de menus et autres widgets pour Jeedom :crazy_face:
Merci pour ce retour enthousiaste :hugs:

1 « J'aime »

Bravo et merci pour ce travail :relaxed:

1 « J'aime »

Hello @noodom ,

Merci x1000 pour le temps que tu viens de me gagner avec ce dév (je t’ai fait un petit don, tu penseras à moi au prochain demi que tu prendras au bar :slight_smile: )!
Juste une remarque, c’est écrit mais ca devrait être la première étape et plus visible dans la doc, l’installation du plugin HTML Display, j’ai bugué un moment avant de trouver (j’ai capté en lisant le code dans le scénario).

Bonne continuation !

2 « J'aime »

Helloo,

Merci pour le don, ça fait plaisir de voir l’intérêt porté pour mes menus :hugs:
Pour la nécessité d’avoir le plugin HTML Display, je le précise bien en effet mais ça peut toujours être amélioré pour le mettre en évidence.

Sinon, par curiosité, comment as-tu effectué l’installation du menu ?
Je propose depuis peu en effet une installation automatique qui simplifie beaucoup :

(cette génération remonte d’ailleurs une message d’erreur dans le logs du navigateur lorsque le plugin HTML Display n’est pas installé. J’avais prévu de remonter un message d’alerte pour plus de visibilité, un oubli, ce sera ajouté)

Hello Noodom,

Justement j’ai utilisé l’installateur que tu proposes, et au lancement du scénario je n’ai pas eu d’alerte, ni rien vu dans les logs (ou alors c’est que je suis passé à côté, possible aussi je suis un peu un noob sur Jeedom :)). Ca me mettait juste « Lancement du scénario réussi ».
C’est en lisant ces lignes que j’ai capté pourquoi il ne se passait rien :

try {
  	$htmldisplayPlugin = plugin::byId('htmldisplay');
}
catch (Exception $e) {
  	$scenario->setLog("Error : please, install HTML Display plugin");
	$htmldisplayPluginInstalled = false;
}

Mise à part ça tout a roulé nikel.
Petite remarque au passage, j’utilise le menu 3D anim pour le moment. Quand je l’ai installé j’ai l’impression qu’il n’a pas tenu de menuDesignWidth et menuDesignHeight, car j’avais encore les valeurs par défaut dans le json, mais bon j’ai pu obtenir ce que je voulais assez simplement car c’est très bien fait et simple de s’y retrouver.
Bravo et merci encore, je suis tombé un peu par hasard sur ce topic, je ne pensais pas avoir une solution pour gérer le menu à un seul endroit et ne pas avoir à répéter chaque modification sur les différents design, avec ton menu c’est juste parfait !

Merci du retour.

Étonnant pour le log de l’erreur du plugin html display non remontée. Tu es bien allé vérifier au niveau du log du scénario qui génère le scénario ? (Bouton de logs en haut à droite du scénario) ? Je regarderai sinon, si ce n’est pas le cas. Comme je précisais, je vais ajouter en doublon un message de notification Jeedom pour que ça soit plus visible à l’exécution du scénario.
Merci.

Non tu as raison, je ne regardais pas les logs au bon endroit (je suis allé dans le menu classique Analyse > Logs), je ne connaissais pas les logs de scénario, en l’occurrence j’avais bien le message d’erreur dans ce log.

Bonjour,

Je ne trouve pas le moyen d’avoir le fond du menu en transparent afin de ne garder que les boutons de bien visibles ? Notamment sur le menu NooNeumorphism. Est-ce possible svp ?
J’ai testé des trucs dans le css, mais rien ne fonctionne :sa:
Merci.

Toujours moi :slight_smile:

Y’a moyen d’afficher des éléments au dessus du menu ?

Merki :slight_smile:

Salut,

Tu as vérifié la transparence sur les équipements html display ? Mais de mémoire, il y avait Un soucis Jeedom avec la gestion de la transparence (a rechercher sur le forum dans les threads de mes menus où j’en parle)

Pas sûr de comprendre l’idée mais je dirais non :slightly_smiling_face: tu gèrerais comment les clics sur les boutons du coup ?

J’ai pu trouver pour modifier la couleur mais finalement, j’ai laissé tel quel. Madame n’aimait pas trop tout uni :slight_smile:

J’aimerais afficher la date et l’heure directement sur le menu à la place du label et mettre également la niveau de batterie de ma tablette murale. Comme ça

1 « J'aime »

Salut un grand merci a toi pour tout ce travail vraiment terrible :grinning: .
Tout fonctionne a merveille de mon coté .

Re après une nuit presque blanche :joy: .
J’ai de petits défaut d’affichage je n’arrive pas a coller le menu sur la gauche de l’équipement Html Display ou bien le mettre en transparent cela est dommage il n’y a que ca qui me gène ( le mec il comprend rien et en plus il est casse c… :joy: :joy:) .
Je pensais arriver a régler quelques petits défauts tout seul mais non :grin: .
Après avoir tester des modifs de .json .css et Html dysplay mais ne comprenant pas grand chose a ce que je fais , je change des valeurs je regarde cequi a changé (evidemment ou ca change rien ou pas les bonnes choses :weary: ) .
Je continuerais une fois reposé mais si quelqu’un c’est comment faire pour réglé le problème je suis preneur de toutes idées :grin: .
Sinon a par ca encore MERCI pour ce menu c’est vraiment le top esthétiquement et a utiliser pour changer de Design en 1 click :+1: car tout sur la même page c’est bien pour un coup d’œil rapide général mais pour plus de détails des équipements sa serais le bordel .

Salut,

Merci de ton retour :wink:

Quel affichage veux-tu obtenir ?

  • Coller ton menu comlpètement à gauche de l’écran ? Mais dans ce cas, tes icônes sur la gauche seront cachés ?
  • Supprimer la partie gauche du menu (vue ta flèche, j’ai l’impression que c’est ça :slight_smile: ) et là, j’ai déjà cherché à le supprimer et il me résiste encore :crazy_face: Un jour peut-être :wink: Si jamais quelqu’un jette un oeil dessus et trouve le prolème de CSS, je suis preneur !

Salut je te remercie .
Oui c’est bien la partie de gauche du menu que je veux supprimer . Je vais m’intéresser au CSS pour essayer de comprendre quelques choses . Dommage que tu soit pas avec moi pour voir ca ca va être drôle :crazy_face: :crazy_face: .
Merci de ton retour .

Salut tout le monde je viens de trouver la source de mon problème … :grin: .

Voila comment faire en esperent que se soit pareil pour tous le monde .
Il faut aller dans : desktop/css/boottstrap.css
ensuite ligne 477 il faut modifié a margin-bottom: 0px; car je n’avez pas vue mais j’avais aussi un default sur le bas du menu .
et surtout ajouter padding-left: 0px;`

Et voila :grin: bon j’ai pas dormi suivi 10 000 tutos Css et Html et que des echecs mais a la fin :+1: :ok_hand: :muscle: .
J’espère que sa sera utile a d’autres .
css

Il y a encore des petits défauts très léger dans les angles qui ne sont pas arrondi , et en haut je n’est pas encore essayé de les résoudres , mais dès que j’aurais pas sommeil je me lance .