Salut @noodom,
Je viens de suivre ton tuto pour installer mon menu et je me demande si par défaut le résultat que j’obtiens est bien normal…
J’ai essayé de voir le rendu en utilisant juste 2 boutons et en modifiant les tailles dans le json:
J’ai créé un design Global (celui qui contient les 2 objets htmldisplay) de dimension 600 x 500 et un design qui correspond à mon premier bouton de dimension 600 x 420 (celui qui doit s’afficher dans la frame).
Peux tu me dire pourquoi j’ai une bande blanche sous le menu et pourquoi j’ai des scrollbars horizontales et verticales? Il y a surement quelque chose qui m’échappe…
En effet, je reproduis la bande blanche que je n’avais pas remarquée jusqu’à maintenant (dû au fait que mes différents tests ont été effectués avec une frame de contenu définie sous la frame de menu, en (0,0) donc).
Je vais corriger le fichier de configuration sous Github avec la valeur 70 au lieu de 80 pour supprimer cette barre :
"menu_height": "70px",
Pour ton cas, où tu places le contenu sous le menu, tu devras donc aussi modifier les valeurs suivantes :
"content_y": "70px",
"content_height": "430px"
Sinon, pour les scrollbars, c’est dû aux menus en lien avec tes boutons qui doivent respecter la taille de ta frame de contenu.
Tu dois donc définir des menus de taille 600x430 pour les designs 1 et 2.
Effectivement @noodom , c’est beaucoup mieux comme ca!!!
D’ailleurs petite question annexe…
Lorsqu’on clique sur un bouton de menu, le chargement de la frame prend un peu de temps et pendant ce laps de temps, on voit apparaitre le logo jeedom en haut de la frame, le sablier (3 cercles concentriques pour la v4.1) puis enfin la page finale dans la frame.
Le chargement n’est pas si long que ça mais la succession de ces étapes à l’écran provoque une sorte de clignotement de la page qui gâche un peu le confort d’utilisation.
Sais tu si on peut pas rajouter un .hide() / .show() quelque part pour n’afficher la frame que lorsque le design est complètement chargé dans la frame?
Merci!
Oui, ces étapes de chargement ne sont pas facilement évitables. C’est dû au fait qu’on charge un nouveau design, on suit donc le chargement par étapes de Jeedom.
Un contournement qui pourrait être essayé serait de cacher temporairement la frame mais la difficulté est de savoir quand faire réapparaitre le contenu de la frame (dépendant de la vitesse de chargement, non fixe par définition : réseau, puissance de la plateforme Jeedom, taille du contenu, …)
Je suis en v4 et je cherche à adapter le superbe travail réalisé par @noodom. J’utilise le plugin htmlDisplay où j’ai créé un équipement Menu et un équipement Contenu. Voici ce que je souhaite obtenir et ce que j’ai déjà fait:
Le but:
Utiliser la navigation par menu icônes, à droite, à la verticale.
Utiliser les Frames pour afficher une page design suivant le choix du bouton
Avoir an bas du design, une deuxième Frame affichant une autre page de design, comme un pied de page.
Définir dans le fichier JSON l’ID du design à afficher dans cette deuxième Frame.
J’ai réussi à:
Adapter les fichiers CSS, HTML et JSON pour avoir une navigation par boutons-icônes à la verticale et,
Afficher dans la Frame Contenu ‹ menuFrame › le design sélectionné par un bouton du menu,
Ajouter au JSON des paramètres supplémentaires pour la deuxième Frame: ID du design contenant cette nouvelle Frame, x, y, largeur et hauteur (facile).
Créer un troisième équipement htmlDisplay ‹ Footer › contenant la déclaration d’une deuxième Frame:
Je viens de tester et cela fonctionne parfaitement. J’ai ajouté dans le HTML le code de récupération des paramètres de positionnement du frame menuFooter.
Je cherche à ajouter une fonction supplémentaire au menu menuJsonFsb33Frame. Dans mon JSON j’ai ajouté une data supplémentaire qui s’appelle « type » et qui peut prendre la valeur « frame » ou « page ». Suivant cette valeur, un click sur le bouton correspondant charge le design soit dans la frame ‹ menuFrame › soit en entier. Ceci me permet de mettre un bouton de navigation de page ‹ suivante › ou ‹ précédente ›. Pour la navigation, j’ai créé un deuxième fichier JSON qui sert de paramétrage à un deuxième design complet avec un deuxième équipement htmlDisplay pour le deuxième menu.
Je n’y arrive pas. Il faut dire que j’ai vraiment du mal à comprendre la logique de programmation de JQuerry et le HTML de l’équipement htmlDisplay du Menu.
Voici mon JSON et mon htmlDisplay du premier menu (sur le Menu 2, seuls les items et la référence au deuxième fichier JSON changent):
je suis un peu HS, mais c’est juste pour passer l’information, j’utilisais le menu de F$B33, que j’avais aussi un peu modifié pour centraliser le code et les CSS
Mais depuis la sortie du plugin HMTLDISLAY, c’est encore plus simple
il suffit de créer un équipement, avec un code pour la partie Dashbord et un autre éventuellement pour la partie Mobile, cela peut se mettre très facilement sur un Design
perso, j’utilise un code trouvé sur la communauté, désolé j’ai oublié son créateur
Je viens de passer une petite heure dessus, marche pas. J’avais essayé exactement la même chose hier avant de te recontacter.
Le fait d’ajouter ,’ + button.type + ’ au htmlDisplay casse l’affichage du design. J’ai une erreur qui s’affiche dans un Triangle d’attention dans la barre de menu de Jeedom et le contenu indique:
A chaque click sur un bouton, j’ai un message supplémentaire qui s’affiche. J’ai mis exprès des mots pipi caca pour mieux comprendre le message.
Au chargement du design, comme le premier bouton est automatiquement sollicité, j’ai un premier message. les iFrames restent vide. A chaque click sur un bouton, les iFrames restent toujours vide et une ligne d’erreur s’ajoute au message avec le type correspondant au bouton clické.
@noBru77 on s’écarte du post initial avec de multiples évolutions pour tes besoins spécifiques (mais qui pourront servir à d’autres évidemment), j’ai donc créé un nouveau post pour la suite :
Ces fonctionnalités pourront être à terme être ajoutées au menu initial mais ça demandera de passer plus de temps pour blinder le code avant de le proposer ici.