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

Utilisation du core de Jeedom Design
112

Il y a souvent des soucis de rafraichissement sur les designs. Alors pour être sur d’afficher des états synchro avec les équipements, je rafraichis la page à l’allumage de la tablette. Du coup on attend trop devant elle pour prendre la main dessus. Mais c’est certain qu’une fois la page chargée, la navigation est instantanée et ça fonctionne bien. Mais bon, je suis revenu en arrière tout de même.

Je vais créer un nouveau post pour ne pas polluer celui-ci. Il faut que je prenne le temps d’apporter des explications pour bien configurer le JSON.

Je suis en v4.1.18 et je ne rencontre pas de soucis particulier sur les designs. Tu utilises peut-être des fonctions précises qui ne sont plus supportées. J’ai quelques doutes.

Mon design est issue du travail de F$B33 et noodom. Mon menu a été personnalisé en disposition verticale, à droite de la page. j’ai aussi ajouté un pied de page qui apparait à toutes les pages.

Je vais essayer de trouver le temps rapidement pour publier mes fichiers et expliquer comment les utiliser.

113

Bonjour,
Merci pour tout ce travail!

Je suis occupé à jouer avec le menu en vertical, et il fonctionne impeccablement.
Toute fois j’aimerai apporter une petite modification visuel et je n’y arrive pas à trouver ça dans le code.

Je suis sur une Google Home 8" résolution 1024x640 ;(
Lorsque le design se lance, le menu est réduit au stricte minimum
image

et comme je dois bien viser pour faire apparaitre le reste
image

Est-il possible de tout faire apparaitre directement au chargement du design?

J’ai déjà désactiver le « auto_reduce_menu » sur 0, pour en faire un menu ouvert permanent.

Merci à vous,
F.

114

Ok je viens de voir que le 1er bouton ne s’afficha pas au complet (icône de Jeedom), je dois mieux adapter la position.
Mais ma question reste toujours. Comment avoir le menu au complet sans presser une 1ere fois sur la seule icône dispo au chargement?

115

Bonsoir,
J’utilise le menu F$B33 d’origine et je ne rencontre aucun problème avec celui-ci.
Je suis en 4.1.18

116

Salut, Loustic03
Là tu m’intéresse :wink:
Il y a eu de nombreuses variantes, c’est cette version menu que j’utilise :
https://community.jeedom.com/t/rafraichissement-widget-depuis-v4-1-17/50121/76?u=hervel
Le overflow hiden de la dernière ligne pose problème : création d’une ligne claire en bas de l’écran et blocage. En le supprimant cela fonctionne mieux, mais partiellement seulement. Je précise que tout fonctionnait parfaitement jusqu’en 4.0.62 (inclue)

117

J’ai ajouté un paramètre au menu dans le fichier de configuration json : init_close_menu.
Je détaille cet ajout dans le post prévu pour ce menu. Je te propose de continuer sur ce post pour continuer à discuter de ce menu.

118

ah c’st super, merci pour la réactivité!
:+1:

119

Salut,
J’ai finalement intégré ta version, car effectivement le fait d’avoir une page par design laisse beaucoup plus de flexibilité pour afficher ce dont on a besoin, et facilite la maintenance.
Bravo pour le travail, super épuré au niveau code, et simplissime à mettre en place :sunglasses:

La navigation est finalement très fluide (ma tablette est récente)

Le seul truc que je ne trouve pas terrible, quand on clique sur une option du menu, j’ai un fond clair qui s’affiche le temps du chargement et qui fait une sorte de flash.
Je n’ai pas réussi à l’éliminer :thinking:

120

Bonjour @noodom,

D’abord un grand merci pour tous ces menus et aussi les widgets. :+1:t4:

Comme @Pierro (message 62) je me retrouve avec des srollbars dans mon design sur écran tactile du pi de 7 pouces et de résolution 800*480. J’avais déjà le menu de F$B33 dessus avec des design de 800 par 480 qui s’affichais parfaitement.
J’ai donc modifié le json pour spécifier les id de mes design, les icones des boutons et les paramètres d’affichage.
J’ai beau mettre:
le content_y à 0 et le design en 800 par 480 = scrollbars (vertical et horizontal)
le content_y à 70 et le design en 800 par 410 = scrollbars (vertical et horizontal)

Merci de prendre le temps de me répondre et si tu as besoin plus de détail dis moi lesquels et je te fournis ça :wink:

121

Salut,

Merci de ton retour.

Tu peux m’envoyer ton fichier de configuration perso.json ?.

122

ok je t’envoie ça

{
    "buttons": [
        {
            "link": "15",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_home.png"
        },
        {
            "link": "16",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_light.png"
        },
        {
            "link": "17",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_cam.png"
        },
        {
            "link": "18",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_reseau.png"
        },
        {
            "link": "19",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_volets.png"
        },
        {
            "link": "20",
          "icon": "montheme/menuJsonFsb33Frame/img/icon_temp.png"
        },
        {
            "link": "22",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_music.png"
        }
        ],
    "parameters": {
        "menu_x": "0px",
        "menu_y": "0px",
        "menu_width": "800px",
        "menu_height": "70px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "800px",
        "content_height": "480px"
    }
}
123

et celui là

{
    "buttons": [
        {
            "link": "15",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_home.png"
        },
        {
            "link": "16",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_light.png"
        },
        {
            "link": "17",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_cam.png"
        },
        {
            "link": "18",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_reseau.png"
        },
        {
            "link": "19",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_volets.png"
        },
        {
            "link": "20",
          "icon": "montheme/menuJsonFsb33Frame/img/icon_temp.png"
        },
        {
            "link": "22",
            "icon": "montheme/menuJsonFsb33Frame/img/icon_music.png"
        }
        ],
    "parameters": {
        "menu_x": "0px",
        "menu_y": "0px",
        "menu_width": "800px",
        "menu_height": "70px",
        "content_x": "0px",
        "content_y": "70px",
        "content_width": "800px",
        "content_height": "410px"
    }
}

toujours des scrollbars

Edit: je viens de tester avec Menu Animation, même symptôme alors que le design et le contenu sont réglés en 800 par 480.

124

Je ne reproduis pas avec

Tu as aussi le problème d’affichage depuis ton PC ?
Ou seulement en affichage final sur ton écran de destination ?

Sinon, quelle est la taille de ton design de destination de chaque bouton ?
Tu les as bien configuré avec une taille de design de 800x480 pour le premier cas ? ou 800x410 pour le deuxième ?

Tu peux aussi faire un clic droit sur chaque htmlDisplay (menu puis contenu) puis les configurer pour mettre un fond non transparent pour voir exactement leur emplacement et voir où ça pose problème)

image
image762×558 34.6 KB

125

merci de répondre si rapidement comme souvent.

Alors oui depuis le PC c’est pareil,

oui oui chaque design été déjà crée en 800 par 480 donc le design où j’ai incorporé les 2 htmldisplay je l’ai créé lui aussi en 800/480.
donc quand je change le json en 800/410 je modifie mes designs de destinations en 800/410 aussi.

ok j’essaie ça :+1:t4:

126

OK, j’avais lu trop vite : la version 800x480 fonctionne parfaitement avec ma version du menu fsb33 ?
J’avais compris que les 2 ne fonctionnaient pas mais que la version 800x480 fonctionnait correctement avant dans une autre version simple sans frame.

J’attends ton résultat, mais ça devrait corriger le problème du coup en adaptant la taille des menus de destination.

Il faudrait que je vois pour supprimer les effets de bords lorsqu’on modifie seulement le json pour éviter de devoir modifier les tailles des menus de destination (avec des overflow: hidden; bien placés probablement…)

127

alors ça fonctionnais avant avec le menu original de F$B33, ca fait quelques temps que je l’avais installé…
et là j’ai voulu installer ton menu et là je me retrouve avec des scrollbars…

exemple du design de destination du bouton zik:

ecran zik
ecran zik699×511 15.4 KB

configuré en 800/480

dans le design où j’ai mis le contenu on voit qu’il est configuré comme le json en 800/480:

contenu
contenu1210×433 22.3 KB

et voilà le résultat quand je clique sur l’icone musique:

ecran.PNG
ecran.PNG1127×634 143 KB

on voit bien que le contenu prends bien toute la taille demandé mais pas l’image qui est pourtant bien configurée

128

Ok donc j’avais finalement bien compris au début :slight_smile: tu as un soucis dans les 2 cas avec l’affichage des frames.

Tu n’as pas d’équipements qui dépassent dans l’écran de destination ?
Tu peux te créer un écran vide avec un fond non transparent et le mettre dans ton json pour voir le résultat quand tu le sélectionnes ?

129

Alors malheureusement même résultat avec un nouveau design en 800/480 et aucun équipement rajouter.
ça viens surement de chez moi si tu reproduis pas chez toi…

je vais changer de navigateur des fois que…

1 « J'aime »
130

Étonnant je dois passer à côté de quelque chose,
Je ne vois pas trop là.
Tu as vu la capture au dessus, c’est avec ton json.

C’est l’écran de destination qui ajoute un scroll c’est bien ça ?

131

Tu es sur quel navigateur ? (Moi je teste sur Chrome)
Et sur quelle versionde Jeedom ?

Je vois ça sur ta capture : ton écran s’arrête où ?

image

Sinon, tu peux tester avec l’option &fullscreen=1 à la fin de ton url ?