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

Salut,

Rien de prévu actuellement comme text/html ou widget mais c’est une bonne idée.
Il reste à imaginer comment gérer cette possibilité.

Je peux regarder pour créer un bouton mais l’idéal serait de pouvoir proposer un format suffisamment générique pour être utilisé sous différentes formes.

Je suis preneur d’inspiration :slight_smile:

1 « J'aime »

Salut à tous,

Pour ma part, impossible de me debarasser de cette satanée barre noire en dessous de mes design une fois le navigateur en pleine ecran. Je suis en beta 4.2.23. J’ai modifié les tailles de design, modifié le json mais rien à faire, je désespère surtout que je trouve le design de ce menu trop stylé de @noodom . J’ai egalement essayé du script et css dans la personnalisation avancée mais cela m’a juste enlevé les barres de defilement sans me supprimer cette fichue barre noire!
SAUVEZ MOI SVP :pray:


Salut

Je suis en train de porter mes designs v3 vers la v4. J’ai utilisé cette version avec frame mais j’ai un problème de couche/transparence, mon résumé disparait quand j’utilise le javascript.

Voici le menu seul avec le résumé:


Voici le menu sur le design avec appel au htmlDisplay:

Le z-index du résumé est niveau 3 et le menu niveau 0 donc il ne devrait pas y avoir de problème.
Je précise que le contenu en dessous n’est pas en cause, c’est pareil si je supprime le htmlDisplay en question. Au passage j’ai noté que la transparence ne fonctionne pas non plus entre les 2 htmlDisplay, ce qui est peut-être lié?

Je pourrais revenir à la duplication du menu mais je trouve ca dommage…
Votre avis?

[EDIT] j’ai trouvé la solution: il suffisait de mettre le résumé dans le design de destination au lieu du menu…

Hello,
Je dois passer à côté de quelque chose.
Je tente de modifier la hauteur du menu et ainsi avoir le double de la hauteur actuel.

J’ai donc modifié le perso.json,

    "parameters": {
        "menu_x": "0px",
        "menu_y": "0px",
        "menu_width": "2000px",
        "menu_height": "160px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "2000px",
        "content_height": "160px"
    }

mais le résultat est celui là.

Comment faire ?
Merci par avance et merci @noodom pour le boulot.
Mathieu

Helloo,

Ça fait pas mal de temps que je n’ai pas rejoué avec ce menu. Il faudrait que je fasse quelques tests mais possible que la taille du menu ne soit modifiable que pour le fond. Je regarderai de plus près.

C’est bien le paramètre menu_height qu’il faut modifier.
par contre, tu as modifié le paramètre content_height à 160. Ce n’est pas bon, ça correspond à la hauteur du contenu de ta page liée au menu sélectionné. Tu auras dans une page paramétrée pour avoir la même hauteur que le menu. Il faut plutôt mettre la hauteur totale de ton écran.

Édit : en relecture rapide du code, les icônes ont une taille fixe donc je crains que la taille du menu ne soit pas proportionnelle à la hauteur totale du menu.

1 « J'aime »

Merci @noodom pour ta réponse.
Quelque chose m’interpelle, si je dois mettre la hauteur de mon écran dans le json, je dois aussi mettre la largeur de mon écran.
Mon écran fait 2000x1200.

J’ai donc mis 2000px en largeur dans le fichier perso.json, hors le menu ne va pas jusqu’au bout de l’écran :frowning:

Mathieu

Hello,
Je rajoute une petite question, comment le basculer en vertical ?

Mathieu

Helloo

Il faut modifier le fichier css. Des propositions doivent se retrouver sur le forum. A rechercher pour confirmation.

Sinon de mémoire, l’intégration de la version du menu faite sur le plugin Pimp inclut par défaut la gestion verticale /horizontale du menu (calculé en fonction du rapport hauteur /largeur en paramètre). A voir pour ajouter cette gestion dans ma version « d’installation manuelle » de mon github.

EDIT : validé depuis le plugin Pimp :slight_smile:
Taille du menu (L*H) : 80x1000 pour un menu horizontal, 1000x80 pour un menu vertical

Merci @noodom, je vais chercher :slight_smile:

Ceci étant, j’ai quand même un problème de largeur (à droite).

Config du Design:
image

Perso.json:
image

Mathieu

1 « J'aime »

petit :up: :slight_smile:

Bonjour à tous, je découvre ces supers menu merci pour le travail.
Par contre comme un précédent utilisateur @Thanor j’ai ce menu qui flash et le menu Jeedom apparait brièvement au changement de menu quand le menu est en mode transparent.
Si je met un fond de couleur je n’ai pas le problème car le chargement doit passer en background mais j’ai une barre que je trouve un peu moche, une idée de comment corriger ça soit en arrêtant ces flash au changement de menu, soit en retirant la barre qui sépare le menu de tout ce qu’on retrouve en dessous ?

Bonjour @noodom et meilleurs vœux pour 2022 !

Avec les menu en iFrame est il possible de lancer un affichage avec un choix de menu spécifique différent de celui par défaut (accueil) ?
Je voudrai pouvoir faire afficher par scenario sur un Google Nest Hub un écran avec les cameras en gardant le menu par défaut.

Merci d’avance
Eric

Oui, pour choisir un menu autre que celui par défaut,
il faut ajouter le paramètre link_id Avec l’id du menu souhaité.

plus de détail dans la doc : il est possible de forcer directement le contenu d’un design à l’ouverture du design du menu

Il suffit d’ajouter l’id du design souhaité dans le paramètre link_id, par exemple le menu (installé dans le design 73) affichera par défaut le contenu du design 58 :http://monJeedom/index.php?v=d&p=plan&plan_id=73&link_id=58&fullscreen=1

1 « J'aime »

Merci j’essaie cela demain.

:warning: Je viens de modifier le menu pour l’adapter aux nouvelles règles de sécurité imposées par Jeedom 4.2.

  • Le json de configuration est désormais dans le fichier perso.js (et non plus perso.json)
  • Les dossiers de configuration (css, js et img) ont été déplacés dans des répertoires sous /html/data
  • Le fichier index.html a été modifié en conséquence

Les premiers tests sur mon Jeedom de test sont OK . Je vous laisse me confirmer que ça fonctionne de votre côté (avec ou sans les nouvelles sécurités Jeedom : le menu est prévu pour fonctionner aussi sur les versions précédentes)

:warning: Ces adaptations seront reportées au fur et à mesure sur les autres menus.

Un gros doute reste (sans solution immédiate) : le blocage des frames. Ce n’est pas le cas sur ma version 4.2.7 mais c’est sans doute seulement sur les dernières fresh installs de la 4.2. A confirmer.

Le détail de l’installation ici :

Pour ceux qui ont déjà installé le menu, il suffit de recopier les répertoires css, js et img sous /data (path précisé dans le README), d’adapter le fichier /js/perso.js et de modifier le htmlDisplay 'Menu' avec le contenu du fichier index.html)

Merci de vos retours.

2 « J'aime »

Salut @noodom,
J’ai suivi ton tuto à jour (je suis en stable 4.1.28).
De mon côté, j’ai des erreurs 403 pour accéder à tous les fichiers dans html/data/menusNoodom/menuJsonFsb33Frame
J’ai vérifié tout est en 755 pour www-data:ww-data
Le blocage vient de la conf apache (http.error):
[client 192.168.0.10:47196] AH01797: client denied by server configuration: /var/www/html/data/menusNoodom/menuJsonFsb33Frame/js/perso.js

1 « J'aime »

Tu es en fresh install j’imagine ?
Comme ça je ne sais pas dire, mes dernières adaptations testées sur ma 4.2.7 autorisaient le chargement de ces fichiers, ce qui ne fonctionnaient plus avant.

Si le config Apache ne permet plus d’inclure un fichier js, ça se complique sérieusement :confused: ou je passe à côté d’un truc :thinking:
Je vais continuer d’investiguer mais pour l’instant je sèche… Jeedom va être secure de chez secure au final :crazy_face:

Si ta question est de savoir si j’ai démarré en 4 (sans venir de la 3.X), la réponse est oui.
Sinon, en fait aucun fichier n’est accessible à partir du moment où il est dans le repertoire /var/www/html/data/menusNoodom/
Cela n’est pas spécifique au fichier js… meme le css est bloqué

Tu peux tenter avec le .htaccess suivant dans le répertoire /menusNoodom ?

Cela corrige effectivement les problèmes 403. Tous les fichiers sont maintenant accessibles. Nice! :+1:
Par contre, tu feras attention, le perso.js de ton archive fait référence à des images qui n’ont pas les bons noms.
Par exemple icon_home.png au lieu de icon_menu_home.png etc… :stuck_out_tongue_winking_eye:

1 « J'aime »