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

kilougari · Avril 12, 2022, 11:29

Bonjour,

J’utilise le menu « menuanimation » il fonctionne très bien un grand merci !
J’ai deux bâtiments et j’aimerai du coup avoir deux menu « menuanimation ».
Est-ce possible et si oui comment ?

Merci

noodom · Avril 12, 2022, 7:56

Helloo,

Merci de ton retour, content que ça te convienne
Sur les différents menus que je propose, j’ai commencé à faciliter certaines modifications de code pour les rendre le plus paramétrable possible. Je dois encore apporter des modifications pour faciliter au maximum la possibilité d’utiliser un même menu plusieurs fois sur un même Jeedom.

Pour le menu Animation que tu utilises, tu peux essayer l’installation suivante :

création d’un deuxième htmlDisplay menu (toujours à partir de index.html)
modifier le code de ce htmlDisplay à la ligne suivante (renommage de perso.json en perso2.json) :
let jsonPath = 'data/menusNoodom/menuAnimation/json/perso2.json';
dupliquer /json/perso.json avec le nom /json/perso2.json
modifier le contenu du fichier perso2.json pour l’adapter au paramétrage du second menu souhaité
création d’un nouveau design pour le 2ème menu, y ajouter le htmlDisplay de contenu (identique au premier menu) et le htmlDisplay du 2ème menu créé précédemment

Et ça devrait être OK

(Non testé, en espérant ne rien avoir oublié )

kilougari · Avril 13, 2022, 8:38

C’est juste parfait !!!
Un énorme grand merci c’est génial
Simple, efficace et de bon gout

kilougari · Avril 13, 2022, 8:46

Une idée en entrainant une autre serait il possible d’avoir un sous menu ?

noodom · Avril 13, 2022, 8:50

Comme tu imagines j’y ai déjà pensé (et les demandes en ce sens ont souvent été faites)
J’ai des réflexions en cours mais ça ne sera pas adaptable pour tout type de menu car ça signifie dérouler le menu vers le bas et donc se positionner au dessus des éléments de contenus. C’est actuellement pas gérable car on ne pourrait plus cliquer sur ces contenus (bloqués par les sous menus, mêmes invisibles car il faut prévoir la place de les afficher, présents ou non.

kilougari · Avril 15, 2022, 7:34

A l’impossible nul n’est tenu et c’est déjà génial de pouvoir faire tout ça de manière élégante et propre

OUARZA · Mai 14, 2022, 5:42

Hello,
Comment intégrer les icones mafont au menu ?
J’ai pu le faire avec le menu submobilemenu mais pas avec celui-ci.
L’icone est bien reconnu dans Jeedom et je peux l’appliquer à un scénario par exemple.

Une idée ?

Merci

noodom · Mai 14, 2022, 9:58

Helloo,

Je ne suis pas sûr de comprendre d’où sort ton format mais il est semblable au format font-awesome que j’utilise sur certains de mes menus (comme le menu MobileSubMenuFrame dont tu parles).

Puisque j’ai régulièrement la demande de compatibilité des icônes au format image pour mes menus, je viens donc de modifier ce menu pour rendre les icônes de chaque bouton compatibles aussi bien avec une image qu’avec un icône font-awesome (https://fontawesome.com/).

Ex d’attribut icon dans le fichier de configuration du menu, perso.json :

"icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_home.png"
"icon" : "fa fa-4x fa-home"

        {
            "link": "54",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_home.png"
        },
        {
            "link": "55",
            "icon": "fa fa-4x fa-home"
        }

Merci de ton retour de test

OUARZA · Mai 15, 2022, 3:13

Hello @noodom,
Merci pour ta réactivité.
J’ai testé, et presque adopté.
Il faut que je regarde pourquoi c’est décalé.

Mathieu

noodom · Mai 15, 2022, 4:51

Juste pour mon information, sur quoi te bases-tu pour l’utilisation de « icon mafont-water-tank » dans ton exemple ? Tu as une librairie spécifique ?

OUARZA · Mai 15, 2022, 6:01

Oui, j’ai créé une police d’icônes que j’ai intégrée à jeedom.
https://youdom.net/2021/01/01/ajouter-des-icones-dans-jeedom/

Je vais tester avec un icône de jeedom pour voir si ça fait pareil.

OUARZA · Mai 15, 2022, 6:09

@noodom,
Bon, cela marche avec ton exemple d’icône.
Ceci étant le mélange des 2 (image + icône) fait un truc bizarre.

et ce code donne

        {
            "link": "27",
            "icon": "fa fa-4x fa-home"
        },
        {
            "link": "27",
            "icon": "mafont-4x mafont-tank-water"
        }

Mathieu

loic69 · Juin 1, 2022, 7:22

Salut @noodom
Tablette noodonisé avec succès
Une question, comment fait-on maintenant (avec les iframe) pour appeler un design ?
Si j’appelle mon design, disons alarme, le menu ne s’affiche plus. Normal car le menu est dans le design principal…

noodom · Juin 1, 2022, 8:31

Helloo,

Good news

Pour appeler un design du menu en particulier, il faut passer par l’ajout du paramètre link_id qui correspond à l’id du design souhaité. D’ailleurs, c’est prévu pour aussi afficher un design n’appartenant pas au menu (avec bien entendu aucun des boutons du menu sélectionné dans ce cas)

En espérant que ça réponde à ta demande.

titof2375 · Juin 4, 2022, 9:30

bonjour, je suis un peut perdu dans le code css de t’on menu @noodom .
j’ai voulut diminue les icons pour un design de telephone et enlevée un espace.
des
je pas arrive a enlevé l’espace meme en modifiant le code css que tu m’avais dis sur discord.

PHB_fr · Juin 9, 2022, 9:26

Bonjour,

Je suis sur que la question a déjà été posée mais je n’ai pas trouvé en cherchant sur link_id dans le moteur de recherche. Comment on peut faire un équivalent à un « gotodesign » dans un scenario pour ouvrir « la bonne page » sur tablette lors de l’exécution d’un évènement ?

Merci d’avance pour les pistes proposées.

loic69 · Juin 9, 2022, 10:02

Si tu utilises JPI il faut utiliser gotourl en spécifiant l’url complète.
Si tu utilises FK tu as aussi la commande ou il faut spécifier l’URL.
Dans mon cas j’ai rajouté des commandes appeler design Xxl, appeler design Tu directement dans le plugin.
Ça évite de mettre des URL de design dans les scénarios

PHB_fr · Juin 9, 2022, 11:15

Merci pour ton aide,

Je suis sur une tablette plutôt en mode ‹ kiosk/chromoum › du coup je ne vois pas comment je peux forcer une URL sur un écran ‹ deporté › avec un jeedom qui est dans une VM sur le réseau.

loic69 · Juin 9, 2022, 7:42

C’est quoi le logiciel que tu utilises sur ta tablette pour afficher un mode kiosk ?
Normalement tu as le plugin jeedom qui va avec (qui attaque l’API de l’application) qui te permet d’appeler des url

Pingu · Juin 10, 2022, 12:56

Hello, @noodom (ou quelqu’un d’autre )

J’ai une petite question, sur l’ajout d’icône vers des choses qui ne seraient pas des design dans la version avec iframe du menu f$3bb…

En fait, pour l’histoire (c’est toujours bien de savoir d’om on part…), j’utilisais le menu d’origine d’il y a 2-3 ans de base tout allait bien en version 3.5.jesaisplusquoi, puis quand je suis passé (directement) en 4.2.x… après avoir remis en place tous mes designs je me suis rendu compte comme certains, de bug d’affichage avec le menu original.
J’ai alors essayer la méthode pour passer en htmldisplay (que j’utilise actuellement) sympa et tout, mais j’avais encore ce bug de refresh.

En gros navigation nikel jusqu’à ce que je click sur n’importe quoi qui m’ouvre un graph d’historique (température/puissance n’importe quoi) après avoir cliqué dessus, le graph s’affiche pas de souci, on peut fermer le graph et en ouvrir d’autre ou rester sur le design pas de souci, tant qu’on ne touche pas au menu, dès lors d’un click sur le menu f$b33 : page blanche (le font d’écran est chargé quand même) avec juste l’horloge (si celle-ci présente sur le design appelé) mais rien d’autre même plus le menu. Obligé de F5 pour refresh la page.
(D’ailleurs en mode édition cela a pour impact de tout décaler sous la page (en peu en mode dashbord, et là aussi juste a F5 pour tout remettre en place) mais c’est un autre problème).

Bref, ne trouvant pas clairement ce qui pose problème (nouvelle sécurité en 4.2 ou autre, je décide de passer sur la nouvelle version en iframe. Ici plus de problème d’affichage après avoir appelé des graphs donc tout va bien sauf que… je ne sais pas comment sortir du mode plein écran (car j’appel par default mes design en fullscreen comme beaucoup je suppose…) quand j’ai besoin des menus jeedom / gestion des plugins etc…)

Je ne trouve pas comment ajouter de liens sur le menu (f$b33 iframe) vers autre chose que des design. En gros avant en version de base du menu j’avais ajouté deux icônes pour afficher les stats de chauffage et un autre pour sortir du mode plan écran (pour quand je ne suis pas la tablette c’est pratique). Je ne trouve pas comment reproduire ça en mode iframe, en gros j’ajoutait &fullscreen=0
dans le lien
En gros pour faire simple avant j’avais ça :

avec comme code (pour les icones) ici ce sont les deux les plus à droite qui nous intéresses :

<ul class="monmenu">

	<a id="7" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_home.png" height=50px width=50px></div></br></li></a>

	<a id="12" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_clim.png" height=50px width=50px></div></br></li></a>

	<a id="5" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_chauffage.png" height=50px width=50px></div></br></li></a>

	<a id="6" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_cam.png" height=50px width=50px></div></br></li></a>

	<a id="14" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="data/montheme/images/icon_plan.png" height=50px width=50px></div></br></li></a>

	<a id="3" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="data/montheme/images/icon_light.png" height=50px width=50px></div></br></li></a>

	<a id="2" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="data/montheme/images/icon_solaire.png" height=50px width=50px></div></br></li></a>

	<a id="8" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_horloge.png" height=50px width=50px></div></br></li></a>

	<a id="10" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_music.png" height=50px width=50px></div></br></li></a>

	<a href="index.php?v=d&m=thermostat&p=panel&fullscreen=0" onclick="displayPlan(); location.reload() return true;"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_graph.png" height=50px width=50px></a></div></br></li></a>

	<a href="index.php?v=d&p=plan&plan_id=14&fullscreen=0" onclick="planHeader_id=3; displayPlan(); location.reload() return true;"><li class="monmenu"><div class="imagette"><img src="data/montheme/images/icon_config.png" height=50px width=50px></a></div></br></li></a>

</ul>

Aujourd’hui avec la nouvelle version j’ai ça :

Avec comme code dans le perso.json cette fois :


    "buttons": [
        {
            "link": "7",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_home.png"
        },
        {
            "link": "12",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_clim.png"
        },
        {
            "link": "5",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_chauffage.png"
        },
        {
            "link": "6",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_cam.png"
        },
        {
            "link": "14",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_plan.png"
        },
        {
            "link": "3",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_light.png"
        },
        {
            "link": "2",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_solaire.png"
        },
        {
            "link": "8",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_horloge.png"
        },
        {
            "link": "10",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_music.png"
        }
    ],
    "parameters": {
        "menu_x": "0px",
        "menu_y": "0px",
        "menu_width": "1450px",
        "menu_height": "70px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "1450px",
        "content_height": "967px"
    }
}

En gros autant pour le lien vers les stats de thermostat ce n’est pas bien grave, autant si vous avez une solution pour sortir facilement du mode plein écran (donc de passer &fullscreen=0 …) en cliquant quelque par… via une icone du menu… ou autre je sais pas je suis preneur.

Désolé si la question est un peu bête (ou déjà évoqué ailleurs mais je n’ai pas trouver dans mes recherche…) et n’étant pas dev pour un rond… c’est peut etre quelque chose de simple mais là je suis un peu bloqué En attendant je reste sur ma version htmldisplay de base et j’f5 mais bon… un peu pénible (d’ailleurs si quelqu’un a fini par identifier ce qui provoque ce bug dans les vieille version… j’ai vu d’autre poste à ce sujet, mais le bug est contourné en changant de version mais sans jamais trop savoir ce qui le provoque vraiment…).

Merci !
Bonne journée.
Seb