[TUTO noodom] Présentation d'un nouveau Design vertical menuVerticalTom avec paramétrage par fichier JSON et navigation par FRAME

noodom · Janvier 18, 2022, 1:25

Je ne comprends ta demande, tu peux préciser ton besoin ?

Le design comprend bien le menu et le contenu. A l’ouverture du de ce design, on charge bien le contenu du premier bouton (donc le design 11) dans le htmlDisplay du contenu
Par contre, je ne vois pas le but de ta demande : changer la couleur de fond et la taille du contenu ?

Sinon les paramètres pour spécifier une position et une taille du contenu sont les suivants (dans perso.json) :

            "content_x": "0px",
            "content_y": "0px",
            "content_width": "1280px",
            "content_height": "1000px"

Bounce · Janvier 18, 2022, 1:40

Merci désolé je n’étais pas clair non plus avec moi même
Tout fonctionne merci encore pour les réponses.
Au final je vais maintenant tenter l’installation du menu jsonFsb33Frame.

Je vois que ton menu nooNeumorphism peut passer en horizontal ou vertical, ce n’est pas le cas de jsonFsb33Frame ?

noodom · Janvier 18, 2022, 2:08

Parfait ça !

Pour FSB33, je ne dois pas encore gérer l’affichage vertical mais ça reste prévu.
L’adaptation du menu dans le plugin Pimp my Jeedom ( #plugin-pimpjeedom ) doit déjà offrir cette possibilité.

N’hésite pas à me tenir au courant des installations des autres menus proposés : FSB33, nooNeumorphism et pourquoi pas Animation après
Je suis preneur de tous les retours, avec ou sans problèmes

SJAMS · Janvier 18, 2022, 2:49

j’ai repris la doc, toujours pareil
oui les images s’affichent uniquement si j’utilise le chemin
html/montheme/img/
avec html/data/menusNoodom/menuVerticalTom/img/ ca ne fonctionne pas.

voici le resultat mais j’ai toujours la checkbox

voici les erreurs

noodom · Janvier 18, 2022, 2:56

La coche c’est dû au fait qu’il n’arrive pas à charger le css.

Donc tu confirmes avoir cette arborescence dans jeexplorer : /html/data/menusNoodom/nooVerticalTom/css/perso.css ?

Tu as bien le fichier .htaccess sous /html/data/menusNoodom/.htaccess ?

Et quelle version de Jeedom ? (Important !)

SJAMS · Janvier 18, 2022, 3:21

même constat pour que ca fonctionne il faut que le .css soit aussi dans un dossier autre que data
avec /montheme/perso.css ca fonctionne

oui .htaccess est au bon endroit

Jeedom 4.1.28

noodom · Janvier 21, 2022, 12:23

Simplification de l’installation avec la création d’un nouveau scénario nooMenusFilesDownload.json :
Il suffit de préciser le nom du menu au niveau du tag menuName et d’exécuter le scénario.
=> Les fichiers du menu et le fichier .htaccess seront recopiés sous /data/menusNoodom

Le détail de l’installation est mis à jour dans le README du github.
Le paramétrage du menu est présent ici : /data/menusNoodom/menuVerticalTom/json/perso.json

Merci de vos retours.

HerveL · Mai 26, 2022, 5:54

Salut,
Je ne sais pas pourquoi, mais quand je télécharge les fichiers menuFrame.html et index.htlm à partir de Gitub, je me retrouve avec un contenu qui n’a rien à voir (1440 lignes ???). J’ai donc dû créer mes fichiers manuellement, et faire un copier / coller à partir du mode visualisation de ces mêmes fichiers sur Gitub.
Je n’ai pas bien compris ce qui se passe, mais en procédant ainsi cela fonctionne.
Je le mentionne au cas ou quelqu’un aurait le même problème

noodom · Mai 26, 2022, 7:53

Hello,

Tu es sûr de ne pas télécharger la page web github au lieu du fichier voulu ?
Sinon tu télécharges le zip du repository https://github.com/noodom/jeedom_menus en sélectionnant le menu Code → Download zip et tu récupères le menu souhaité.

HerveL · Juin 3, 2022, 9:57

c’est possible, mais bon là c’est réglé. merci !

remidetoulon · Décembre 1, 2022, 8:53

Bonsoir à tous,
Bonsoir @noodom .
J’ai installé plusieurs menus. Sans avoir rencontré de problème. Je dois dire que j’en suis ravi de ce menu. Et la mise en place via le scénario qui fait tout, c’est un véritable bonheur.

Aujourd’hui j’ai installé le menu vertical Tom sur une nouvelle machine (RPI)
J’ai exécuté le scénario (nouvelle procédure recommandé). Tout c’est fait tout seul et j’ai eu une petite notification qui m’indiquait d’installer « html display » !!
J’avais complètement oublié !
J’ai donc installé html display et j’ai relancé le scénario. Tout c’est très bien passé. Le temps de bien redéfinir les dimensions souhaités, de rectifier le perso.json. Tout c’est très bien passé.

Sur cette machine je n’ai besoin que de 5 pages. J’ai supprimé des lignes et je me suis retrouver avec mes 5 icônes que je souhaitais.

Je suis allé tester dans mon design le bon fonctionnement des boutons (5)
Tous ce passait bien lorsque d’un coup. Plus de jeedom ! PAGE BLANCHE
j’ouvre un autre navigateur (ip_locale) une page blanche !
J’ouvre une console en ssh. Tout répond
Je teste sur mon smartphone (ip_locale) et je retrouve jeedom !
Je teste à nouveau le design et à nouveau je cliques sur tes boutons. Au bout de quelques secondes. Page blanche sur mon smartphone.
Je vais dans la log et me voilà banni.
Je cherche un peu sur le forum et j’exécute en ssh un :
sudo fail2ban-client stop apache-multiport
Tout est revenu dans l’ordre (du moins pour le moment)
As tu une idée ?
Crois tu que c’est en supprimant les lignes dans le perso.json qui ont fait quelque chose ?
Crois tu que c’est en amont (cad) lorsque j’ai exécuté le scénario sans avoir installé avant le HTML Display qui aurait causé quoi que ce soit ?

noodom · Décembre 2, 2022, 12:32

Salut,

Là, j’avoue que je n’ai jamais vu de remontées sur un tel cas et je ne vois pas ce qui a pu se passer, ni s’il y a un lien direct avec mes menus.

Une boucle automatique de chargement de design ? Tu as bien ton design de menu avec un id qui n’est pas présent dans le fichier perso.json ?

Tu as vérifié que ton fichier perso.json est valide ? (test possible avec https://jsonformatter.curiousconcept.com/)
=> Tu peux m’envoyer le fichier perso.json complet (format texte, pas en capture) pour voir une éventuelle mauvaise saisie ?

Toutes les valeurs de link dans perso.json ont bien un design existant correspondant ?

remidetoulon · Décembre 2, 2022, 3:41

Salut, @noodom
Toutes les valeurs de link dans perso.json ont bien un design existant.
Je viens de vérifier le fichier perso.json et il est valide.
Quand à la boucle automatique de chargement de design. Cela me met la puce à l’oreille. En effet, je crois que j’ai une icône qui pointe sur un dossier inexistant.
Je vais corriger ça, ce n’est peut être pas lié à ton menu. Peut être à la construction de mon design qui s’est faite dans la suite du déploiement de ton menu. Je vais voir ça. (icône brisé sur une page).
En attendant peux tu infirmer ou confirmer le fichier perso.json complet pour voir si j’ai éventuellement fait une mauvaise saisie ?

{
    "buttons": [
        {
            "label": "Home",
            "link": "2",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_home.png"
        },
        {
            "label": "Chauffage",
            "link": "3",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_chauffage.png"
        },
        {
            "label": "Solaire",
            "link": "4",
            "icon": "/data/menusNoodom/menuVerticalTom/img/solaire2.png"
        },
        {
            "label": "Parametres",
            "link": "5",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_parametre.png"
        }
    ],
	"parameters": {
            "init_close_menu": "1",
            "auto_reduce_menu": "1",

            "menu_x": "0px",
            "menu_y": "0px",
            "menu_width": "100px",
            "menu_height": "720px",

            "content_x": "0px",
            "content_y": "0px",
            "content_width": "412px",
            "content_height": "869px"
 	}
}

Je reviens vers toi.
Merci

noodom · Décembre 2, 2022, 4:44

Le fichier me paraît correct.

remidetoulon · Décembre 2, 2022, 9:58

Ok merci et moi, le problème semble résolu. Une icône dans mon design qui pointait sur un dossier non existent. Je pense que je me suis fait bannir pour si peu.

Noskill31 · Janvier 19, 2023, 9:31

Salut @noodom , déjà merci pour tout ce travail, c’est vraiment top.

Maintenant j’ai quelques soucis ^^’.

J’ai utilisé la nouvelle méthode « automatique » pour mettre le menu, jusque là pas trop de soucis.

Je créée 2-3 design, auquel j’attache l’id au fichier Json, que je met ci dessous :

{
    "buttons": [
        {
            "label": "Home",
            "link": "50",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_home.png"
        },
        {
            "label": "Chauffage",
            "link": "19",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_chauffage.png"
        },
        {
            "label": "Lumiéres",
            "link": "21",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_chauffage.png"
        },
        {
            "label": "Volets",
            "link": "20",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_volets.png"
        }
    ],
	"parameters": {
            "init_close_menu": "1",
            "auto_reduce_menu": "1",

            "menu_x": "0px",
            "menu_y": "0px",
            "menu_width": "100px",
            "menu_height": "720px",

            "content_x": "0px",
            "content_y": "0px",
            "content_width": "1280px",
            "content_height": "720px"
 	}
}

Le problème içi, c’est que l’ID 50 n’existe pas, et je me retrouve alors avec en message à chaque actualisation :
« Plan header inconnu. Vérifier l’ID 50 »

Si je décide de mettre un ID qui s’attache à un design, alors la je suis en bug complet et je me retrouve obligé de tout couper, le design se comporte comme si il était en refresh non stop (scintillement) et la mon PC s’emballe…

Je ne sais plus quoi faire ^^’.
Merci de ton aide.

D’ailleurs, est ce normal que lorsque je met le code de noodom_menu_menuVerticalTom sur JSONLINT, le code n’est pas correct ?

"Error: Parse error on line 1:

<!-- @noodom / Menu ^ Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'"

noodom · Janvier 19, 2023, 10:35

Hello,

Que veux-tu dire par attacher l’id ?
Quel est l’id de ton design généré par le scénario de génération du menu ?
Il faut absolument que cet id ne soit PAS présent dans le fichier perso.json. Ce fichier ne doit contenir que les designs de contenu à afficher pour chaque bouton associé.
Vu ton problème, je pense que ton souci vient de là. Je te laisse me confirmer.

Sinon, tu as généré plusieurs menus. Tu n’as pas créé de liens entre ces menus (id d’un menu généré dans le perso.json d’un autre menu) ?

Sinon, c’est normal que la vérification jsonlint soit en erreur : c’est une vérification de la validité d’un fichier json qui doit être effectué, donc ici le fichier perso.json et non le code du menu.

Tiens-moi au courant.

Noskill31 · Janvier 20, 2023, 3:52

Salut Noodom,

Alors pour répondre à test questions :

Je veux dire, mettre l’ID d’un desgin pour le premier icone « home » , qui içi est 50, mais ne correspond à rien chez moi.
L’ID du design généré par le scénario est le 18.

Après, les menus ont été mis sur les autres design (içi 19 / 20 / 21) directement sans manipulation de ma part. Les icones du menu m’envoi bien sur les bonnes page du design, il y a juste du coup le premier icone (dans le perso.json le premier nommé home) qui du coup ne renvoi vers rien, car le link mis n’existe pas.

J’ai fait quelques tests :
J’ai créer un nouveau design vide qui a pour ID 22, j’ai donc modifié le fichier PËRSO.JSON pour l’associé au premier bouton :

{
    "buttons": [
        {
            "label": "Home",
            "link": "22",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_home.png"
        },
        {
            "label": "Chauffage",
            "link": "19",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_chauffage.png"
        },
        {
            "label": "Lumiéres",
            "link": "21",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_chauffage.png"
        },
        {
            "label": "Volets",
            "link": "20",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_volets.png"
        }
    ],
    "parameters": {
            "init_close_menu": "1",
            "auto_reduce_menu": "1",

            "menu_x": "0px",
            "menu_y": "0px",
            "menu_width": "100px",
            "menu_height": "720px",           

            "content_x": "0px",
            "content_y": "0px",
            "content_width": "1280px",
            "content_height": "720px"
 	}
}

Mon Jeedom n’a que 5 Design :
ID 18 / Noodom_menuVerticalTom (généré par le script)
ID 19 / Design chauffage (que j’ai créé)
ID 20 / Design Volet (que j’ai créé)
ID 21 / Design Lumiére (que j’ai créé)
ID 22 / Design Accueil (que j’ai créé)

Le menu s’affiche dorénavant sans soucis sur l’ensemble des design mais cependant, si je clique sur n’importe quel icone, il charge le même design (il ne me renvoi par sur la page indiqué par perso_json).

J’éspére être assez clair ^^’.

Merci de ton aide

noodom · Janvier 20, 2023, 4:02

Si tu as un link qui n’a pas de design correspondant, c’est normal que ça fasse planter la navigation quand tu cliques dessus (ou comme le 50, si c’est le premier contenu chargé)

Donc à priori, si j’ai bien suivi tes explications, la configuration devrait être bonne avec 22 au lieu de 50.
Quelques questions pour m’en assurer

tu lances bien le design 18 généré pour voir le menu et cliquer sur les boutons de ce menu pour naviguer
dans les designs 19 à 22, tu n’as pas de liens vers le design 18, ni de code du menu (recopié par exemple). Ilsne contiennent que des éléments de ton Jeedom

Sinon, tu peux tenter de supprimer les lignes suivantes (premier bouton) de ton fichier perso.json pour tester le résultat de la navigation :

        {
            "label": "Home",
            "link": "22",
            "icon": "/data/menusNoodom/menuVerticalTom/img/icon_home.png"
        },

Noskill31 · Janvier 20, 2023, 4:19

Bon j’ai fait un peu plus bourrin, j’ai tout repris de zéro (c’était des designs test donc bon).

Et la tout fonctionne, je pense que j’ai du mettre le menu en équipement sur un des design, ce qui m’a fait un peu tout planté ^^'.

Plus de soucis pour le moment, je n’avais pas compris que l’on devait ensuite naviguer à partir d’un seul design.

Je te remercie pour ton aide et ton super travail