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

Bonsoir,

Suite à ce post sur l’ajout de la gestion du menu par un fichier de configuration Json pour le menu F$B33 :

Je vous propose une version plus complète qui ajoute la navigation par frame !

Les avantages :

  • Le menu est à ajouter sur un seul Design : moins galère à installer, si on veut le modifier, etc…
  • Les Designs en lien avec chaque bouton n’auront pas besoin d’avoir le menu : ils ne sont plus spécifique à un menu et peuvent être partagés
  • Il sera possible d’avoir plusieurs menus différents avec des liens vers les mêmes designs de contenu (un menu différent pour plusieurs personnes, un menu pour différents supports, différents menus pour le plaisir de changer, etc…)
  • Le menu est chargé une fois seulement au chargement initial de la page (et plus à chaque sélection de bouton)

Fonctionnalités supplémentaires :

  • possibilité d’afficher le menu en affichant directement un contenu spécifique au chargement (en passant son id en paramètre de l’url : paramètre link_id)
  • autorisation d’url comme lien d’un bouton du menu (avant, seulement possible de donner un id de design)
  • ajout du paramètre fullscreen (optionnel) : 0/1 (par défaut 1 si top=0), affiche les écrans Jeedom (design, panel, …) avec ou sans la barre de menu
  • ajout du paramètre top (optionnel) : 0/1/2 (par défaut 0), affiche le contenu du lien du bouton sélectionné dans la frame de contenu (0), en remplacement de la page du menu (1) ou dans une nouvelle fenêtre (2)

Et toujours le fichier de configuration Json qui permet de modifier le visuel du menu, les liens de son Design sans toucher au code (facilité de modifications et moins de risques d’erreur)

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 pour le contenu.

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)

Il est possible aussi d’aller plus loin dans la personnalisation en modifiant le fichier CSS séparé.

Sinon, pour ce menu, le rendu est strictement identique :slight_smile:

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

13 « J'aime »

Bonjour,

Merci pour tes menus c’est bien pratique!

Petite question un peu hors sujet, as-tu prévu une variante avec les boutons blancs de tes captures? J’adore ce style et j’aimerai bien mettre à jour mon design autour d’un menu vertical du genre.

Merci pour ton retour.

Bonjour,

J’ai voulu essayer ce nouveau menu sur mon jeedom de test et je me suis heurter a un gros problème lors de la mise en place du htmldisplay menu , mon design c’est mis a ouvrir des designs les uns après les autres .
Pour stopper le problème j’ai du désactiver les 2 htmldisplay et rafraîchir la page . donc je pense qu’il y a quelque chose que je n’ai pas compris dans la façon de mettre en place ce design.
J’ai déjà le menu d’origine sur mon jeedom de prod .

Salut,

2 choses importantes à bien respecter :

  • vérifie que les liens vers les designs du fichier json existent bien
  • bien ajouter le htmlDisplay contenu AVANT le menu (comme précisé dans la doc)

Sinon Les liens du json doivent pointer vers des designs sans menus.
Seul le design principal ( avec les 2 htmlDisplay) contient le menu.

vérifie que les liens vers les designs du fichier json existent bien : OK
bien ajouter le htmlDisplay contenu AVANT le menu (comme précisé dans la doc) : OK

Alors je viens de réessayer de refaire le menu et il c’est mis en place en refaisant la même procédure .
Par contre j’ai remarquer un problème qui n’as rien a voir avec le menu , il ce passe une chose étrange du genre , des anciens essais de menu qui réapparaissent a la création du nouveau design . :thinking:
Par contre est il possible de supprimer cette petite bande plus clair dessous le menu ?

Merci

Helloo,

D’autres menus viendront du genre de ces boutons (et je vois pour proposer ces boutons en widgets aussi)

Mais en attendant :

1 « J'aime »

Pour la réapparition de certains anciens essais, c’est trop vague, je ne vois pas vraiment ce que tu veux dire mais à voir si c’est pas un problème de cache de ton navigateur ?

Sinon, pour la bande, je suis en vacances sur mobile là mais à vérifier si elle existait sur la version de base du menu et sinon je regarderai ce qui est possible de faire pour la supprimer.

Merci je me note ça de côté et je guette tes prochains posts

Merci pour les réponses
Petite copie de mon design avec le menu d’origine, on verra après les vacances pour cette petite bande .

Pour supprimer la bande horizontale en bas du menu, tu peux supprimer la ligne 5 de perso.css :

border-bottom: 2px solid rgba(0, 0, 0, 1);

(bien vider le cache du navigateur si nécessaire pour la prise en compte de la modification)

Salut!
J’ai mis en place cette menu avec frame, tous fonctionne mais j’ai une probleme avec certain scene qui utilise le « go to design ».
L’url dans le browser en effect ne change plus vue que il y a l’iframe …
Comment je peux aller directement sur un page du menu?

merci!

A voir si une fonction maFonctionParent() dans un text /html du menu appelée depuis un design de la frame avec parent.maFonctionParent() pourrait fonctionner.

Il suffirait alors d’appeler le gotoDesign dans cette fonction.

EDIT : tu veux aller d’un lien du menu à un autre avec ce gotoDesign, comme si tu avais sélectionné un bouton du menu ? (En restant avec le menu présent)
Car dans ce cas ce code suffirait :

planHeader_id = monId;
displayPlan();

Ciao Noodom!
Merci pour ta réponse.
Je dois pouvoir changer l’écran de ma tablette en appelant un url de ce type:
https://myjeedom/index.php?v=d&p=plan&plan_id=8
ou avec la fonctionne « gotodesign » disponibile depuis le scenario.

J’ai pas bien compris comme gérér cette chose avec:
planHeader_id = monId;
displayPlan();

Merci!

Ok, je crois comprendre, tu veux accéder directement à un des liens du menu.

Je suis en vacances mais je regarderai à mon retour pour gérer le passage d’un paramètre qui permettrait cette possibilité🙂

supppper!
merci beaucoup!

Salut Noodom!
Encore une petite chose.
Je n’arrive pas a rendre le background du iframe en mode trasparent.
Dans cette manière j’aimerais avoir le background seulement dans la page « 0 » (celle du menu).
J’ai mis le checkbox su « transparent » dans le display setting du iframe mais rien change.
L’iframe prende toujours l’image du background du core jeedom.

ciaoo
Marco

Tu veux arriver à quel résultat au final ?

Si tu mets le htmlDisplay du contenu en transparent, tu n’as plus rien dessous et donc j’imagine que Jeedom met une couleur de fond par défaut (je n’ai pas testé)

Tu veux donner la couleur de fond avec celle du design principal ?

L’idée ce d’avoir la page 0 (celle du menu) avec un’image du background pour tous mes menu.
Dans tous les autre page je met seulement le htmldisplay avec mes object en mode transparent.
Dans cette manière j’aimerais avoir une seule endroit où gerer le menu e le background.
Ici mon design:

Le background c’est noir et on voi pas l’image en arrière…

Ciaooo

J’ai le meme problème que @mount, ca m’interesse si qq un trouve :wink:

Ok je vois bien l’intérêt, je ferai quelques tests pour voir déjà pourquoi la transparence n’est pas prise en compte. Après j’essaierai de voir ce qui est Possible de faire ou remonter en évolution sur le plugin htmlDisplay ou autre.

1 « J'aime »