[TUTO noodom] menu noo3DAnim

[noodom]

Bonjour,

Je vous propose un nouveau menu de Design Jeedom avec animation des boutons en 3D.

Comme pour mes précédents menus, il est paramétrable à partir d’un fichier de configuration JSON (nom, icônes et lien des boutons)
mais surtout il permet 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é.

Démonstration :

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

[noodom]

Suite à cette demande [[Tuto noodom] Menu menuNavButton - #146 par noodom], voici une évolution donnant la possibilité de mettre des images à la place des icônes fontawesome.

Dans un premier temps, je vais détailler les modifications à apporter sur une installation déjà existante.

Modifications depuis un menu existant

• Sélectionner le menu "Plugins" > "Programmation" > "HTML Display"
• Sélectionner l’équipement du menu ("Menu3DAnim"), puis l’onglet "Dashboard"
• Modifier le code du menu comme ci-dessous :
  
  

                let buttons = data.buttons.map(function (button) {
                    let imgType =
                      button.icon.toLowerCase().endsWith(".jpg") ||
                      button.icon.toLowerCase().endsWith(".jpeg") ||
                      button.icon.toLowerCase().endsWith(".png") ||
                      button.icon.toLowerCase().endsWith(".gif");
                    let buttonImg = '';
                    if (imgType) {
                        buttonImg = '      <span><img src="' + button.icon + '" height=50px width=50px></span>';
                    } else {
                        buttonImg = '      <span class="' + button.icon + '"></span>';
                    }
                  	
                  	return '<li class="' + button.label + '" id="' + button.link + '" onClick="gotoPlan(' + button.link + ')"' + '>'
                           + '<a href="#">'
                           + '   <div class="layer">'
                           + '      <span></span>'
                           + '      <span></span>'
                           + '      <span></span>'
                           + '      <span></span>'
                           //+ '      <span class="' + button.icon + '"></span>'
                  		   + buttonImg
                           + '   </div>'
                           + '   <div class="text">'
                           + '      ' + button.label
                           + '   </div>'
                           + '</a>'
                           + '</li>';

• Aller dans l’éditeur de fichier
• Modifier le fichier "/data/menusNoodom/menuNoo3DAnim/css/perso.css" (dernière ligne avec span:has(img) en plus)

nav#menuNoo3DAnim ul.navul a .layer span.fa,
nav#menuNoo3DAnim ul.navul a .layer span.fas,
nav#menuNoo3DAnim ul.navul a .layer span.fab,
nav#menuNoo3DAnim ul.navul a .layer span:has(img) {
  font-size: 30px;
  line-height: 55px;
  text-align: center;
}

• Modifier le fichier "/data/menusNoodom/menuNoo3DAnim/json/perso.json"
• Créer le répertoire "/data/menusNoodom/menuNoo3DAnim/img" et ajouter les images souhaitées dans le menu

Le code du menu sur mon Github a été modifié pour les futures installations du menu pour intégrer directement cette évolution.

[Aurel6712]

Merci Noodom,

Cependant il dois manquer quelque chose dans ton code.

ca me met chargement en cours.

Et quand je regarde ton screen, et ton code. Pour HTML display, il manque let imgType.
Mais malgré tout, la page ne se charge pas.

[noodom]

oui, je viens de corriger à l’instant pour le code manquant.

[Aurel6712]

Top Merci ca fonctionne.

[noodom]

Parfait.

Je viens de mettre à jour mon github pour intégrer cette évolution dans le menu.

Pour rappel, l’installation de mes menus, simplissime et quasi automatique, peut être effectuée à l’aide d’un scénario :

[TUTO noodom] Génération automatique de menus noodom

Bonjour, Je vous propose une méthode encore plus simplifiée pour créer le scénario de génération automatique de menus, lire le détail ici, paragraphe Installation automatique d'un menu noodom à l'aide d'un scénario créé automatiquement (Les autres paragraphes correspondent aux anciennes méthodes, équivalentes au final mais plus complexes à mettre en œuvre) Scénario d’installation (plutôt basique ) : [image] Sur le même principe, il est possible de génér…

[theguilt]

Bonjour noodom
j’utilise ton menu pour mon design sur une tablette. Sur une page comme sur celle ci dessous; j’aimerai dans un carré rajouté des onglets pour naviger dessus sans recharger la page a chaque fois. je n’ai aucune idée sur quoi partir.

Peux-tu m’aiguillé stp?

Merci

[noodom]

Salut,

Je ne suis pas sûre de comprendre la question.
Le menu permet déjà de naviguer sans recharger la page. De quel carré parles-tu ?

En sélectionnant un bouton le contenu de la page correspondant au bouton est chargée sans recharger le menu.

[theguilt]

Non dans le carré ou il y a texte a insérer j’aimerais faire un sous menu que sur cette page avec des onglets.

[noodom]

Ok, c’est ce que j’avais imaginé dans ta demande
Mais actuellement ce n’est pas possible (ou plus précisément non testé et validé) d’avoir 2 menus dans la même page car ils risquent de se faire concurrence et se mélanger entre eux.

Tu peux toujours faire le test en créant un deuxième de mes menus et mettre ce menu en lien dans le fichier de configuration du premier menu.
Tu auras alors le résultat souhaité mais peut-être pas le comportement final attendu car ça fera buguer les menus entre eux potentiellement

[theguilt]

Merci pour la réponse.
On s’éloigne du sujet mais je pourrais faire style un bouton pour switch de vue ça pourrait le faire non?
J’ai deux pages a faire varier

[theguilt]

Bonjour,
je me suis mal exprimé mais j’ai essayé de montré ci dessous ce que j’essaye de faire:
un « sous menu » en forme d’onglet.
Qui fait changé juste l’image des pluviomètres en fonction de l’onglet séléctionné:

je ne sais pas du tout comment partir:

• Avec un scénario?
• Avec iframe?

Si quelqu’un peut m’aiguillé svp

Merci

[noodom]

Pas d’idées simples sur le sujet mais je pensais à la librairie swipe.

J’avais dû commencer un widget sur le sujet sans le finaliser… (beaucoup de brouillons à traîner en stock )

Tu peux t’inspirer d’un widget de phpvarious et modifier l’animation :
https://phpvarious.github.io/documentation/widget/fr_FR/widget_scenario/swiper_battery_jeedom/#Paramètres%20optionnels

Par contre, je pense que tu devrais créer un autre post pour ton problème car comme tu dis on s’éloigne du sujet du post

[theguilt]

Merci, j’ai un peu avancé sur le sujet je crée le post
Merci pour ton aide