[TUTO noodom] Nouvelle refonte du menu F$B33 avec navigation par frame

Non, pas besoin de mettre le lien complet https : il suffit de mettre le menu relatif exactement comme l’exemple donné😋
Si tu as 2 images, c’est sans doute une erreur dans la définition du lien des autres.

Pour la roue crantée je manque de détails : tu as fait F12 pour avoir le debugger et voir si tu as des erreurs ?

Grace au debugger j’ai trouvé les erreurs, merci:
Dans le fichier perso fourni, certaines images n’ont pas le meme noms que les images fournies dans /img…
En testant, j’ai mis l’id (seulement) du design et ca passe.

Je vais continuer de bidouiller avec…
Merci

merci @noodom pour la mise à jour du code.
Ca marche au top, exactement ce qu’il me fallait pour ma tablette ! :wink:

Super, merci pour ton retour ! :wink:

C possible par hasard dans un des onglets d’avoir le lien vers un design 3D ?

Ah… Aucune idée, je n’ai jamais utilisé les designs 3D.

Un grand merci pour ce menu très sympa !

Je suis en train d’essayer de le mettre en place, mais je ne suis pas sûr d’avoir tout compris dans la solution 2. J’ai 2 questions :

  • 1ère question
- Créer un Design pour chaque lien des boutons du menu si pas encore existants (Prévoir de respecter la taille du Design en fonction de l'affichage final dans la frame)

Ca veut dire de la hauteur de l’écran final (ordinateur, mobile, tablette, …) ou de la hauteur de l’écran final moins la taille du menu ?

  • 2ème question
	- Ces menus ne contiennent pas le menu mais seulement les éléments de Jeedom à visualiser pour cet écran
	- Préciser ces liens dans le fichier de configuration /json/perso.json pour la navigation du menu si nécessaire
- Ajouter l'équipement htmlDisplay 'Contenu' dans ce même Design : adapter sa taille en fonction de l'endroit et de la taille souhaités pour l'affichage du contenu des menus sélectionnés (facultatif : recalculé depuis les paramètres du fichier de configuration Json)
- Ajouter l'équipement htmlDisplay 'Menu' dans ce Design (menu clic-droit, sélectionner "ajouter équipement" et sélectionner le htmlDisplay 'Menu')

Quand tu parles de « ce même design », il faut ajouter l’équipement htmlDisplay ‹ Contenu › et l’équipement htmlDisplay ‹ Menu › seulement dans le nouveau Design seul ? (c’est la frame de plus haut niveau ? et qui servira d’accueil par défaut ?)


Si j’ai bien compris, cette partie concerne la frame racine :

- Créer un seul nouveau Design de la largeur et de la hauteur de l'écran final (ordinateur, mobile, tablette, ..)
- Ajouter l'équipement htmlDisplay 'Contenu' dans ce même Design : adapter sa taille en fonction de l'endroit et de la taille souhaités pour l'affichage du contenu des menus sélectionnés (facultatif : recalculé depuis les paramètres du fichier de configuration Json)
- Ajouter l'équipement htmlDisplay 'Menu' dans ce Design (menu clic-droit, sélectionner "ajouter équipement" et sélectionner le htmlDisplay 'Menu')
- Positionner le htmlDisplay en haut de l'écran, avec pour paramètres d'affichage positionX=0, positionY=0, Largeur=largeur écran, Hauteur=80 (facultatif : recalculé depuis les paramètres du fichier de configuration Json)
	- Adapter son z-index (clic droit, Paramètres d'affichage, profondeur : mettre niveau 3)
	- Cocher 'transparent' pour la couleur de fond (clic droit, Paramètres d'affichage, Couleur de fond : Transparent)

Et cette partie concerne les iframes :

- Créer un Design pour chaque lien des boutons du menu si pas encore existants (Prévoir de respecter la taille du Design en fonction de l'affichage final dans la frame)
	- Ces menus ne contiennent pas le menu mais seulement les éléments de Jeedom à visualiser pour cet écran
	- Préciser ces liens dans le fichier de configuration /json/perso.json pour la navigation du menu si nécessaire
- (Indépendant du menu) Ajouter les équipements à afficher dans chaque Design du menu (lumières, portes, fenêtres, volets, etc..)

Question 1: ces écrans seront ajoutés dans le htmlDisplay Contenu à chaque sélection d’un nouveau bouton du menu, donc la taille doit correspondre à ce htmlDisplay

Question 2 :
Tu as un design racine qui va contenir un htmlDisplay menu et un htmlDisplay contenu (et rien d’autre). Celui-ci va contenir un des designs correspondant au lien de chaque bouton du htmlDisplay Menu.
C’est bien le design d’accueil qui sera appelé au final.

  • Positionner le htmlDisplay en haut de l’écran, avec pour paramètres d’affichage positionX=0, positionY=0, Largeur=largeur écran, Hauteur=80 (facultatif : recalculé depuis les paramètres du fichier de configuration Json)
    • Adapter son z-index (clic droit, Paramètres d’affichage, profondeur : mettre niveau 3)
    • Cocher ‹ transparent › pour la couleur de fond (clic droit, Paramètres d’affichage, Couleur de fond : Transparent)
      => doit être décalé (désolé je réponds sur mobile…) : correspond au htmlDisplay Menu

La dernière partie concerne chaque design de contenu correspondant au lien pour chaque bouton sélectionné. Sur un clic ils remplaceront le contenu du htmlDisplay Contenu.

C’est assez simple au final mais il faut une petite gymnastique pour bien voir le mécanisme🙂
Un design contient un menu avec des boutons (au format htmlDisplay) et un contenu (au format htmlDisplay) qui affiche un design ( remplacé par un autre design quand on clique sur un bouton du menu)

Super, merci beaucoup pour les précisions !!!

Je crois que j’ai compris le principe… il n’y a plus qu’à remplir les pages !!

Parfait! :+1:
Bon courage pour remplir chaque écran de contenu de design :slightly_smiling_face:

Hello, j’essaye de mettre en place le design « MenuAnimation », J’ai remplis quelques menu avec mes bons ids.
Quand je clique sur un menu qui n’existe pas, je vois bien la navigation qui se fait, par contre quand je clique sur un menu qui existe, ca me change de page et ne passe pas par l’iframe.
Edit : quand je regarde le code le lien est sous cette forme : http://xxx.xxx.xxx.xxx/index.php?v=d&p=plan&plan_id=2
Une idée?

Salut,

Je ne vois pas ce que tu veux dire : que veux-tu dire par menu qui n’existe pas ?
Quel est la configuration et le but de ton scénario ?

Hello, merci de répondre
Je veux juste mettre en place le menu « animation », je n’ai pas supprimé les onglets où je n’ai pas encore créé le design.
Donc par exemple quand je clique sur un onglet qui renvoie vers un id non existant. Genre le 51. Je vois bien le menu qui bouge, j’ai le focus sur l’onget que j’ai choisis.
Par contre si je clique sur un onglet ou l’id est bien configuré, le 4 par exemple. Je vais sur le design 4, mais du coup je perd le menu.
J’essaye de passer par iframe

Tu as bien installé la solution 2 décrite dans la doc ?

Oui oui tout a fait, je viens de le refaire et j’ai le meme soucis. Je vais essayer avec un autre menu pour voir

Bonjour Noodom,

je trouve tes bouton ci-dessous très jolie et j’aimerais pouvoir les utiliser.

Peux tu me dire ou les retrouver s’il te plait.
Merci d’avance

2 « J'aime »

J’utilise ce menu dans mon design, et dans certaines pages, les icônes ne sont pas centré. Que faire pour les centrer ?

merci

Ce ne sont que des brouillons en cours pour l’instant, ils n’existent encore nulle part :wink:

Salut,

Très mauvais conseil qui risque simplement de casser l’affichage un peu partout dans jeedom.

Je ne sais pas exactement ce qui doit être rendu transparent, ce qui est sûr par contre c’est que ce ne doit absolument pas être fait de cette manière !

Pour information ou rappel, avec @Salvialf, on a désormais intégré ce menu dans le plugin Pimp en version beta :slightly_smiling_face: On y retrouve les mêmes avantages de navigation.

En quelques clics, il est possible de le générer depuis le plugin en précisant simplement différents paramètres (tailles, logos des boutons, designs liés aux boutons, menu horizontal/vertical,…). A tout moment il est aussi possible de le modifier extrêmement facilement, toujours par des clics. Les autres menus suivront.

3 « J'aime »