[TUTO] Menu Animation pour Design (configuration par fichier JSON et navigation par Frame)

Tags: #<Tag:0x00007f243bf81248>

Bonsoir,

Je vous propose un nouveau menu de Design Jeedom qui est plutôt classique.

Son originalité est dans le fait qu’il soit paramétrable à partir d’un fichier de configuration JSON (nom, couleur et lien des boutons)
mais surtout qu’il permette 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 plus loin dans la personnalisation en modifiant le fichier CSS séparé.

Une vidéo d’exemple est disponible ici :

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

10 J'aimes

Beau menu, merci pour le partage.

très bon merci.

Merci à vous :slight_smile:

1 J'aime

o top.
moi qui cherche encore mon design et j’essay plusieurs menus.
Facile d’utilisation, facile mise en oeuvre meme pour des débutants comme moi.
juste une question :
le haut de mon menu est coupé j’ai l’impression
comment le descendre.
image

Hello @noodom, merci pour ton super travail.

J’essaie de mettre en place le menu mais je me heurte à un problème :

Lorsque j’ajoute la partie « contenu », je sauvegarde mais en rechargeant la page, l’équipement contenu n’est pas sauvé.

Je dois surement faire une erreur de manip mais j’avoue ne pas trouver.

Mon système :

Version : 4.0.61
Source : default
Branche : V4-stable
Système : RPI 3 B

Salut,

Peux-tu préciser ce que tu appelles ajouter le contenu ?
La sauvegarde de l’html display ne fonctionne pas ?

1 J'aime

Non c’est l’ajout du html display « contenu » qui n’est pas sauvegarder dans la page de design

Tu ne vois pas ton html display ajouté dans ta page de design ?
Si tu fais un clic droit et menu configurer design,
Puis onglet composants tu as quoi ?

1 J'aime

Lorsque je fais configurer le design, j’ai une erreur qui s’affiche « Impossible de trouver le plan »

A noter que pour le moment aucune des pages du menu n’est accessible car si je mets une page de design, dès que j’accède à la page contenant le menu, il l’a charge et donc je ne peux pas ajouter le html display « contenu » en plus du menu

Bon je crois que j’ai compris, il faut mettre le html display « contenu » d’abord, sauver, puis ajouter le html display « menu" et là çà fonctionne.

Oui, en effet il faut respecter cet ordre comme décrit dans la doc. Car le menu tente de mettre à jour le contenu qui doit donc exister

Ok mea-culpa j’ai lu trop vite. Merci de ton aide et encore super boulot ! :+1: