[TUTO noodom] Simplification du menu F$B33 : chargement par un fichier json

noodom · Avril 27, 2020, 9:05

Salut,

En parcourant le forum, je suis tombé sur ce post de @Salvialf :

Plusieurs choses m’ont intéressé : la construction de menu (mon petit péché mignon ) et le plugin HtmlDisplay que je n’avais pas encore eu l’occasion de tester…

Pour continuer la simplification de ce menu, je propose d’ajouter un fichier json (à placer sous ‹ /montheme/json/perso.json ›) pour le paramétrer sans toucher au code. Il contient les données à renseigner pour chaque bouton.

Le code et la documentation sont consultables ici :

Voilà un exemple de fichier de configuration /montheme/json/perso.json :

{
    "buttons": [
        {
            "link": "1",
            "icon": "montheme/images/icon_home.png"
        },
        {
            "link": "5",
            "icon": "montheme/images/icon_light.png"
        },
        {
            "link": "6",
            "icon": "montheme/images/icon_thermometre.png"
        },
        {
            "link": "7",
            "icon": "montheme/images/icon_alarme.png"
        },
        {
            "link": "11",
            "icon": "montheme/images/icon_cast.png"
        },
        {
            "link": "9",
            "icon": "montheme/images/icon_plante.png"
        },
        {
            "link": "10",
            "icon": "montheme/images/icon_consomation.png"
        }
    ]
}

Nouvelle version ajoutant la navigation par frame :

Julielaro · Avril 28, 2020, 8:35

Bonjour,
J’ai implémenté les fichiers, j’ai suivi la procédure mais, le menu ne s’affiche pas.
J’ai l’affichage d’une zone grise mais aucun icone (juste « Chargement du menu … »)
Avez-vous une idée du problème ?

Merci d’avance pour votre réponse

noodom · Avril 28, 2020, 8:48

Salut,

Apparemment, il ne retrouve pas le fichier perso.json

Tu as donc bien l’arborescence comme précisée sur la doc ?

/html/montheme/css/perso.css
/html/montheme/json/perso.json

Ton fichier perso.json est correctememt modifié ? (vérifier le contenu sur le site https://jsonlint.com/)

Tu as transféré les fichiers avec le plugin JeeXplorer ?

Julielaro · Avril 29, 2020, 6:37

Bonjour,

J’ai bien l’arborescence comme ceci :

/html/Mytheme/css/perso.css
/html/Mytheme/json/perso.json

J’ai modifié les chemin d’accès dans les fichiers.
J’ai vérifier le fichier json et il est correct.
J’ai bien transféré les fichiers avec jeexplorer.
J’ai essayé avec un composant texte et le widget htmldisplay et j’ai exactement le même résultat.

Est-il possible que les images soient trop grandes ?

Ps: Est-ce normal que dans ton code du fichier index.html, à la ligne 22 tu as :
$.getJSON(‹ montheme/themes/perso.json ›…
avec le chemin themes et pas json ?

Salvialf · Avril 29, 2020, 6:58

Bonjour,

Pour ma part ligne 22 je lis:

$.getJSON('montheme/json/perso.json...

D’autre part @noodom précise que les fichiers doivent se trouver sur ce chemin:

/html/montheme/xxx

Et tu dis les avoir mis sur ce chemin qui est différent:

/html/Mytheme/xxx

Ça ne peut donc pas fonctionner…

Julielaro · Avril 29, 2020, 7:01

Si ça peut fonctionner … Comme expliqué, j’ai modifier les chemin d’accès dans le fichier html. Et je ne vois rien d’autre dans le code qui fasse référence au chemin d’accès. Donc, pour moi, ce n’est pas le problème.

Salvialf · Avril 29, 2020, 7:03

Il semble bien que si pourtant… mais je laisse l’auteur faire le diagnostic.

Tu as bien modifié le json en conséquence aussi? Et ajouté les images?

Julielaro · Avril 29, 2020, 7:07

Je viens de faire le test et j’ai exactement le même problème …

Pour la ligne 22, c’est dans github, publication du 27 avril dans « modified perso.json with code adaptation ».

Salvialf · Avril 29, 2020, 7:08

Y’a eu 3 commits depuis, le dernier en date:

Julielaro · Avril 29, 2020, 7:10

Ok, j’avais pas vu cette publication. Merci
Mais, ce n’est pas le problème pour moi …

noodom · Avril 29, 2020, 8:07

Salut,

Je viens de revérifier les commits github et ça me semble correct.

Pourquoi ne testes tu pas avec le répertoire que j’ai donné et me remonter un problème le cas échéant? Je corrigerai alors bien évidemment si effectivement il y a un problème.

Par contre, dans ton cas, tu modifies l’arborescence ET le code, donc tu as aussi pu faire une erreur de ton côté et je préfère maintenir mon code😉 l’idée à la base, c’est justement quand même de ne pas avoir à toucher au code mais seulement au contenu du json pour éviter ce genre de problème.

Mais tu peux envoyer quand même ton code modifié pour vérifier rapidement tes modifications…

D’autre part, tu as bien vérifié les droits sur ton arborescence /mytheme ? Envoie aussi ton json, stp, pour valider sa cohérence (tu peux d’ailleurs le faire par toi même avec le lien que j’ai donné sur github en commentaire dans le code)

Julielaro · Avril 29, 2020, 11:54

Salut,
J’avais effectivement modifié juste les chemin d’accès. Mais j’ai remis à l’identique de ce que tu avais fait. J’ai recommencé la procédure depuis le début. Et j’ai toujours le problème.
J’ai fais le test du json et il était bon (vert).
Et voici le fichier :

{
    "buttons": [
        {
            "link": "6",
            "icon": "montheme/images/Maison2.png"
        },
        {
            "link": "7",
            "icon": "montheme/images/Maison.png"
        },
        {
            "link": "8",
            "icon": "montheme/images/Maison.png"
        },
        {
            "link": "6",
            "icon": "montheme/images/icon_alarme.png"
        },
        {
            "link": "7",
            "icon": "montheme/images/icon_cast.png"
        },
        {
            "link": "8",
          "icon": "montheme/images/icon_plante.png"
        },
        {
            "link": "6",
            "icon": "montheme/images/icon_consomation.png"
        }
  ]
}

noodom · Avril 29, 2020, 5:04

Salut,

J’ai refait l’installation du menu (Jeedom V3 et V4) en reprenant les fichiers sur Github et le chargement du menu s’effectue correctement.
J’ai ensuite testé en prenant ton fichier json, le chargement est correct à nouveau (excepté le lien vers les images bien sûr car je ne les ai pas récupérées dans mon arborescence)

Plutôt que de modifier tes modifications dans le menu pour revenir au fichier du menu d’origine,
pourquoi ne pas tester en reprenant directement le code source depuis Github pour être sûr de ne pas faire d’erreur ?
Je te suggère donc de récupérer les dernières versions de tous les fichiers et de refaire l’installation de ton menu (rapide avec 3 fichiers). Tu seras alors sure d’avoir la dernière version non modifiée…

Comment as-tu déposé les fichiers perso.css et perso.json ? Par le plugin JeeXplorer ?
(C’est possible que tu aies des problèmes de droits sur le fichier sinon, ce qui empêcherait le chargement de leur contenu)

EDIT : tu peux tester directement les adresses suivantes pour voir si les 2 fichiers sont bien au bon endroit :
http://tonUrlJeedom/montheme/css/perso.css
http://tonUrlJeedom/montheme/json/perso.json

patrice_payen · Juillet 15, 2020, 12:08

Bonjour,

J’ai bien suivi le strictement le tuto (html Display) et voilà ce que j’obtiens dans une page design.

Quelqu’un a t’il deja eu cela?

Merci

patrice_payen · Juillet 15, 2020, 12:10

Je me répond à moi-même. le répertoire était pas bon. themes au lieu de css.

noodom · Août 25, 2020, 1:50

Pour info, je propose une version plus complète avec navigation par frame (menu à ajouter sur un seul design, menu toujours présent sans besoin de le recharger pendant la navigation) :

krissam44 · Août 30, 2020, 4:30

Bonjour noodom,

J’utilise votre menu F$B33 avec l’utilisation du fichier perso.json.
Dans la version originale de F$B33, je pouvais rajouter « &fullscreen=1 » au link pour avoir la plan en plein écran.
Comment faire la même chose avec votre méthode ?
Peut-on passer un paramètre à la fonction DisplayPlan() ?

Merci de votre retour.

PS : J’ai renoncé à utiliser la version iFrame, le premier design flick en permanence.

noodom · Août 31, 2020, 4:24

Helloo,

La fonction displayPlan() est une fonction du core de Jeedom.
Par contre, je ne suis pas sûr de comprendre le problème :
J’ai pu tester rapidement avec la version sans frame : en ajoutant fullscreen=1 à la première page d’accès au Design, l’ajout de &fullscreen=1 n’est pas nécessaire pour les suivantes ?

Sinon, peux-tu détailler le problème avec la version avec Frame. N’est-ce pas un problème de construction de la page principale contenu les htmlDisplay ou un problème avec les liens dans le fichier de configuration ?
Tu peux préciser l’id du design d’accès au menu et le contenu du fichier de configuration JSon ?
On m’a remonté quelques cas provoquant ce problème à cause d’une mauvaise configuration.

Sinon, il faut bien prendre soin d’ajouter le htmlDisplay Contenu avant le htmlDisplay Menu, sinon ça peut provoquer des problèmes de redirection.

A terme, je présenterai d’autres menus à venir mais probablement seulement en version avec frame
car ça apporte un réel confort de paramétrage, de navigation et de construction des designs pour chaque lien du menu.

krissam44 · Août 31, 2020, 7:30

Bonsoir Noodom,

Merci pour le fullscreen=1 à rajouter à l’appel de la 1ère page, les autres sont effectivement appelées avec fullscreen=1 dans l’url.

Je vais m’installer un jeedom de test et refaire mes tests de menu avec frame et je vous tiens au courant.

Sinon avec le menuHoverShow un peu modifié pour avoir la transparence, j’ai commencé un design pour un smartphone 360x640 en utilisant « Fully Kiosk Browser ».

Merci pour vos tutos, c’est génial même s’il faut qd même se creuser un peu les meninges.

Sinon , question: comment conserver le surlignage du menu sur lequel on est ?

Bien cordialement

dvb · Janvier 25, 2021, 9:56

Salut noodom,

Je viens de tester ta solution simplifiée, c’est simple à mettre en oeuvre.
=> Merci.

J’aimerais la faire évoluer à deux niveaux :

Même dispositif mais en mode vertical
(cela collerait mieux à ma tablette et à ce que je veux afficher).
=> Je ne sais pas comment faire, prévois-tu une évolution ?
Sauvegarder en mémoire le design appelé
=> Cela me permettrait de connaitre le contexte pour afficher par exemple la photo du portail qui s’ouvre, et de revenir sur l’écran antérieur.

Merci pour tes retours.

EDIT
Ce que j’ai testé en vain :

> {
>     "buttons": [
>         {
> $VarDesignActif = 'ECRAN1';   <<<<<<< **CETTE LIGNE EN PLUS.**       	
>             "link": "11",
>             "icon": "montheme/img/icon_home.png"
>         },
>         {
>             "link": "12",
>             "icon": "montheme/img/programmation.png"
>         },

etc.```