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

Utilisation du core de Jeedom Design
1

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'aime »
2

Beau menu, merci pour le partage.

3

très bon merci.

4

Merci à vous :slight_smile:

1 « J'aime »
5

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
image1121×89 9.46 KB

6

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
7

Salut,

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

1 « J'aime »
8

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

9

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 »
10

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

11

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.

12

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

13

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

14

Salut noodom,

Merci pour ton tuto.
Suites aux problématiques liées à la maj en 4.1.17 que certains éprouvent et comme le menu fsb33 avait commencé à être mis en cause, je suis en train de refaire mes design avec le menu animation.

J’ai du retoucher un peu le CSS car j’avais besoin de mettre un peu trop de titre, ça ne rentrait pas.

Du coup il me reste un problème la barre du premier et dernier menu est en partie dans la courbure du menu.
A quel endroit peut on raccourcir un peu cette barre dont la dimension est apparemment calculée en fonction de la longueur du titre ?

Autre question : dans certain cas il faut raffranchir en cliquant sur le titre. Mais là on ne peut que passer d’un design à un autre. Est-ce possible de faire en sorte que le titre du design actif soit cliquable ?

15

Salut @Bison,

  • Pour raccourcir les arrondis sur les côtés du menu, il faut modifier le padding de la ligne 20 du fichier perso.css (minimum possible : 0) :
#nav-container-animation {
  ...
  padding: 0 10px;

au lieu de :

#nav-container-animation {
  ...
  padding: 0 20px;
  • Pour réduire la largeur de chaque bouton, il faut modifier le padding de la ligne 23 du fichier perso.css

Tu peux mettre (20px définit le nombre de pixels en haut et en bas du texte, 10px le nombre de pixels à gauche et à droite)

.nav-item-animation {
  color: #83818c !important;
  padding: 20px 10px;

au lieu de :

.nav-item-animation {
  color: #83818c !important;
  padding: 20px;
  • Pour autoriser la sélection du menu déjà sélectionné, il faut retirer le if de la ligne 74 du fichier index.html.

On a alors le code suivant :

		// frame redirection
		frameDestination.src = urlDestination;

au lieu de :

		// frame redirection
		if (frameDestination.src.split('?')[1] != urlDestination.split('?')[1]) {
			frameDestination.src = urlDestination;
		}

Possible que je finisse par ajouter la possibilité de modifier la taille du menu en ajoutant des paramètres dans le fichier de configuration perso.json :wink:

16

Ah j’ai pas fait ça, je te montre dès que j’ai le PC.

Tu es sur pour le curseur d’animation ? Tu as mis 2 fois la même chose.
Ce n’est pas le .nav-indicator-animation qu’il faudrait toucher pour raccourcir les barres horizontales ?

17

Oui, mauvais copier-coller en reformatant mon post, je viens de corriger :slight_smile:

18

Ok j’avais totalement supprimé le padding dans #nav-container-animation et joué avec margin au lieu de padding dans .nav-item-animation, c’est peut être à cause de ça que je me retrouve avec un soucis de longueur des barres horizontales sur le premier et dernier du menu.

Je te tiens au courant, merci

19

Merci @noodomn impeccable comme ça !

image
image1081×322 19.5 KB

20

Pardon, autre question : il est possible d’envoyer un paramètre link_id pour afficher un design spécifique ?
ça n’a pas l’air de fonctionner avec ce menu, j’ai essayé comme ça :

image