2 options pour la navigation dans votre design Jeedom

2 options pour la navigation dans votre design Jeedom

Suite à plusieurs de vos messages ou commentaires ici et là, je vais vous présenter 2 options que j’ai expérimenté pour gérer menus et navigations dans votre design Jeedom :

  • Soit vous copiez / coller chacun de vos menus sur vos pages
  • Soit vous faites une page avec votre menu et une iframe qui affichera vos autres pages.

Copier/Coller de votre menu sur chacune de vos pages

C’est en effet l’option la plus simple mais la plus fastidieuse. Dans le code html de ton menu, il faudra ajouter l’URL de la page cible dans la balise a (un lien) juste après href. Par exemple :

<li>
    <a href="/index.php?v=d&p=plan&plan_id=2">
        <i class="fa fa-lightbulb" aria-hidden="true"></i>
    </a>
</li>

Dans ce cas, quand on cliquera sur l’icône lampe, on sera redirigé vers la page dont l’identifiant est 2.

Si vous ne savez pas comment trouver l’identifiant de votre page, voici la marche à suivre. Ouvrir d’abord la page de votre design pour laquelle vous souhaitez connaître l’identifiant.

Ouvrir une page du design

Puis regarder dans la barre d’adresse de votre navigateur, vous devriez retrouver quelque chose de ce genre : http://mon_nom_de_domaine/index.php?v=d&p=plan&plan_id=3
Le plan ID est donc l’identifiant de votre page qu’il faudra utiliser pour faire vos liens de navigation.

Une fois tous les liens ajoutés à votre menu, c’est là que cela devient fastidieux. Il vous faudra copier votre menu sur chacune de vos pages de votre design. Et à chaque fois que vous modifierez votre menu, il vous faudra le mettre à jour sur toutes les pages.

Une page avec menu et iframe

Pour rappel, une iFrame est le nom d’une balise HTML qui permet d’intégrer une page HTML au sein d’un autre document HTML. Dans notre cas, un conteneur pour les autres pages de votre design.

L’idée ici est de rendre la navigation dans votre design Jeedom la plus fluide possible.

Si je reprends l’exemple du menu « light », pour maintenant y ajouter cette navigation, voici la structure des pages :

  • Page 0 : Affichage du menu et de l’iframe
  • Page 1 : Page de gestion de présence sans menu
  • Page 2 : Page de gestion de l’éclairage sans menu
  • Page 3 : Page de gestion du chauffage sans menu
  • Etc etc

Seule la page 0 comportera le menu, les autres se focaliseront sur l’affichage des informations de vos équipements. Rentrons maintenant dans le détail de cette navigation pour votre design Jeedom.

Focus sur la Page 0 : Affichage du menu

La première activité à faire est de calculer la taille de votre écran où votre design sera affiché. Par exemple, le Nest Hub Max profite d’un écran tactile de 10 pouces, lequel peut afficher une image en 1280 x 800 pixels. Par opposition, le Nest Hub dispose quant à lui d’un écran de 7 pouces pour une définition de 1024 x 600 pixels.

Page 0 - Menu et Iframe

Il vous faudra ajouter un premier « text/html » pour ajouter le code du menu comme indiqué dans l’article initial mais complété avec le code qui permet d’appeler les différentes pages dans l’iframe.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mytheme/menu_light/menu.css">
<nav class="main-menu">
  <div class="settings"></div>
  <div class="scrollbar" id="style-1">
    <ul>
      <li>                                   
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=2&fullscreen=1'">
          <i class="fa fa-home vertical-center"></i>
          <span class="nav-text">HOME</span>
        </a>
      </li> 
      <li>                                   
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1'">
          <i class="fa fa-users vertical-center"></i>
          <span class="nav-text">PRÉSENCE</span>
        </a>
      </li>   
      <li class="darkerlishadow">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=4&fullscreen=1'">
          <i class="fa fa-lightbulb vertical-center"></i>
          <span class="nav-text">ÉCLAIRAGE</span>
        </a>
      </li>   
      <li class="darkerli">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=5&fullscreen=1'">
          <i class="fa fa-thermometer-three-quarters vertical-center"></i>
          <span class="nav-text">CHAUFFAGE</span>
        </a>
      </li>   
      <li class="darkerli">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1'">
          <i class="fa fa-shield-alt vertical-center"></i>
          <span class="nav-text">SÉCURITÉ</span>
        </a>
      </li>
      <li class="darkerlishadowdown">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=7&fullscreen=1'">
          <i class="fa fa-plug vertical-center"></i>
          <span class="nav-text">ÉNERGIE</span>
        </a>
      </li> 
      <li>                                   
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=8&fullscreen=1'">
          <i class="fa fa-cogs vertical-center"></i>
          <span class="nav-text">PARAMÈTRAGE</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Pensez à bien conserver la position 3 et à dimensionner et positionner en fonction de votre écran. Pour chaque lien, il vous faudra donc mettre le plan_id correspond à l’identifiant de la page de votre design que vous souhaitez afficher dans l’iframe.

Focus sur la Page 0 : Affichage de l’iframe

Il vous faudra ensuite ajouter un 2ième « text/html » pour l’iframe où vous pourrez ajouter le code html suivant en prenant en compte les dimensions de votre écran. Je vous conseille de vous baser sur la largeur de votre écran à laquelle vous retirer 55 px (la largeur de votre menu).

<div style="float:left; width:1300px; height:800px;">	
  <iframe id="pagecontent_iframe" height="800px" width="1300px" frameBorder="1" scrolling="no" src="index.php?v=d&p=plan&plan_id=3&fullscreen=1">
  </iframe>
</div>

Il vous faudra penser à mettre une position inférieur à la position du menu, soit dans mon cas, position 1.

Je vous invite à être vigilant sur la taille de l’iframe et le positionnement dans la page tant que vous peaufinez votre menu sur votre laptop. Si vous êtes en plein écran il vous sera difficile de conserver la capacité de faire clic droit pour passer en mode édition de votre menu. Voir l’exemple en dessous où j’ai conservé une bande libre à droite de mon design :

Ecran avec bande libre pour click droit.

Quand vous cliquerez sur le menu de votre design, seule l’iframe sera rafraîchit et mise à jour avec la page ciblée.

Si vous avez une boucle d’imbrication

Si vous avez votre menu qui s’affiche en bouclant, si l’iframe qui affiche la page conteneur, dont l’iframe afficherait la page conteneur et ainsi de suite avec une imbrication des menus, alors attention à l’ID appelait par votre iframe. Dans l’exemple du code ci-dessus de l’iframe, plan_id=3 est un paramètre à remplacer par la page que vous voulez afficher dans le conteneur « iframe ». le chiffre 3 renvoie vers la page dont l’identifiant est le 3. Il est important que ce chiffre ne soit pas l’identifiant de la page 0 comme dans mon exemple sous peine de voir boucler l’affichage. Il est aussi important que sur cette page dont l’identifiant est le 3, ne contienne pas de menu, car il est déjà sur la page conteneur.

Cette option est plus agréable à l’usage et pour continuer à faire vivre votre design Jeedom :

  • Votre menu est centralisé, le rendant facilement maintenable
  • Vous n’avez plus qu’à modifier vos différentes pages de votre design sans tenir compte du rendu avec le menu. C’est la page 0 qui s’en charge.

N’hésitez pas à partager vos feedbacks et à bientôt.
/F

33 réflexions sur « 2 options pour la navigation dans votre design Jeedom »

  1. Hello,
    C’est opérationnel pour moi, mais peux-tu m’apporter quelques précisions sur les éléments suivants :

    (1) Pour les icônes, je préfère utiliser celles de ma librairie plutôt que celles de Fontawesomes, j’ai donc remplacé dans le code :

    par

    Et cela fonctionne pas trop mal sauf que l’icone n’est pas centrée en hauteur, sais-tu comment régler cela, ou, m’indiquer dans le code CSS quelle ligne modifier pour modifier la hauteur de la case ? (Dans un tuto dédié tu as donné 3 lignes à modifier pour avoir un menu + grand, j’ai réussi cette partie mais je n’arrive pas à voir l’impact de chacune des lignes si je les traite 1 par 1)

    (2) Pour la partie iFrame : La page sur laquelle j’ai créée le menu est à l’ID 22, mes pages des différentes vues sont donc de 23 à 34, cette partie fonctionne bien (et c’est top, merci pour ce partage !), mais lorsque je rafraîchi l’URL il m’affiche dans l’iFrame la page de l’ID1. je clique alors sur « home » et la page home (ID23) s’affiche, idem pour éclairage (ID24), chauffage (ID25)… toutes mes redirections sont bonnes, le seul problème c’est quand je rafraichi l’URL il m’affiche l’ID1

    (3) J’ai dans mon menu 11 lignes, je voudrais en mettre une 12ième mais il apparaît une scrollbar alors qu’il reste de la place sur l’axe vertical, sais-tu d’ou ça peut venir ? (j’ai regardé dans le code CSS s’il y avait une limite aux alentours de de 800px de haut, puisque c’est environ à cette hauteur qu’apparaît la scrollbar, mais j’ai rien vu)

    Merci,
    @+

    1. Merci pour ce feedback.

      Point 1 : les icônes que j’utilisais avec une classe css .fa qui permet de les dimensionner et positionner. Je pense qu’il faudrait que tu l’utilises aussi.
      Ok, j’expliquerais les 3 lignes modifiées pour agrandir 🙂

      Point 2 : Quel est le code de ton iframe ? Normalement quand tu recharges, ca doit charger l’iframe avec l’url donnée dans le code initial : src= »index.php?v=d&p=plan&plan_id=3&fullscreen=1″ par exemple. N’aurais-tu pas mis ici plan_id=1 ?

      Point 3 : Si tu vas dans le fichier css, puis la classe scrollbar, change le % de height: 90%;
      Si tu ne veux pas d’espace en dessous, mets 100%. Idem pour la classe scrollbar:hover.

      En espérant avoir répondu à tes questions 🙂

      1. Merci pour les réponses :
        1 – Bah tant pis pour moi LoL
        2 – Effectivement, celui la je l’avais laissé s’échapper (j’avais laisser la valeur par défaut de ton fichier partagé)
        3 – Dans le mille, parfait

        😉

  2. Le copier/coller des balises HTML n’est pas passé dans mon commentaire précédent :
    j’ai remplacé :
    (i class= »fa fa-users vertical-center »)(/i)
    par :
    (img src= »montheme/images/HOME.png » height=50px width=50px)
    (remplacer ( par )

  3. Bonjour Florian et merci pour tous ces conseils c’est très précieux. Est ce qu’il serait possible de lancer une commande depuis le menu au lieu d’aller à un autre design? en utilisant href et le lien d’une commande cela fonctionne, mais le navigateur se retrouve sur une nouvelle page vide une fois la commande exécutée….

    1. J’aurais le réflexe de le faire en javascript, avec quelque chose de ce genre, qui ne rafraichira pas la page mais appellera la commande en AJAX :

      $("#ID_DU_BOUTON").click(function(){
      $.ajax({
      url : 'URL_DE_LA_COMMANDE',
      type : 'GET',
      dataType : 'html',
      success : function(code_html, statut){
      alert("Commande exécutée avec succès"); // On peut aussi mettre à jour un autre champs texte.
      },
      error : function(resultat, statut, erreur){
      alert("Erreur "+erreur); // On peut aussi mettre à jour un autre champs texte.
      }
      });
      });

      Je ne l’ai jamais fait dans jeedom, à tester 🙂

  4. Bonjour Florian

    Merci pour ton tuto qui est vraiment top. Il m’a permis de découvrir qu’il était possible d’alléger mon menu qui chez moi est très lourd car configurer a base de liens vers design.
    Ni connaissant rien au CSS, Pourrais tu,si c pas trop de temps pour toi me donne la même configue mais pour un menu HORIZONTAL qui serais juste fait de boutons (image png) cliquables.

    En te remerciant par avance et ce même si tu peux pas 😉

  5. Bonjour,
    J’ai deja mon design en html pour le pc et je vais bientôt passer sur tablette, et donc je vois que l’iframe c’est plus fluide alors je me lance.
    J’aime bien ton design, c’est épuré. Je voulais savoir comment faire pour utiliser mes propres icones pour le menu.
    Merci

  6. Bonjour,
    Merci pour ce tuto qui me donne des maux de tête
    alors une petite bouée à la mer…
    j’ai bien le menulight qui s’affiche et qui réagit.
    Par contre, je ne sais pas où copier le 2 « text/html », sur la page du menu ou sur une deuxième page de design.
    Quand je crée une 2e page et que que je change l’ID dans le menu de la 1re page, ça part en boucle, ça reproduit le menu de la 1re page.
    Je suis perdu si vous pouvez m’aider, merci.

    1. Bonjour Lolo,
      Le 2ème text/html est à créer sur la page du menu aussi, c’est l’iframe qui va contenir les autres pages.
      Par contre, il faut penser dans le code de cette iframe à mettre un id différent de la page du menu, sinon, il y aura une boucle comme l’iframe affichera la page ou il y a le menu qui aura aussi un iframe etc etc.

      1. Bonjour Florian

        J.ai besoin d.une précision quand tu dis qu’il faut un id différent pour ne pas créer une page qui boucle sur elle même.
        Quand je regarde ton deuxième texte/html, il a un id bien différent et je boucle quand même. Tu peux me montrer un exemple de code que je dois chercher pour remplacer l’ID ?
        Merci par avance

      2. Bonjour Florian

        J.ai besoin d’une précision quand tu dis qu’il faut un id différent pour ne pas créer une page qui boucle sur elle même.
        Quand je regarde ton deuxième texte/html, il a un id bien différent et je boucle quand même. Tu peux me montrer un exemple de code que je dois chercher pour remplacer l’ID ?
        Merci par avance

        1. Bonjour Laurent,
          Juste pour être sur de comprendre.
          Tu as une page dont par exemple l’ID est 1 et qui contient ton menu et ensuite le code du conteneur de l’iframe dans un « text/html ». C’est la page 0 dans mon article ci-dessus.

          Dans la partie « Focus sur la page 0 : Affichage de l’iframe » tu as un le détail du « text/html » à rajouter dont la partie à modifier dans ton cas :
          src= »index.php?v=d&p=plan&plan_id=3&fullscreen=1″

          plan_id=3 : le chiffre 3 renvoie vers la page dont l’identifiant est le 3. Il est important que ce chiffre ne soit pas le 1 comme dans mon exemple, ou l’identifiant de ta page conteneur. Il est aussi important que sur cette page dont l’identifiant est le 3, tu n’affiches pas le menu, car il est déjà sur la page conteneur.

          Est-ce que ca répond à ta question ?

  7. Bonsoir,
    j’ai mis en place l’iframe sur le menu full screen, tout est ok,
    il y as simplement le menu qui ne disparait pas après un choix.
    Comment puis-je modifier cela?

    Cordialement
    Baptiste
    Merci pour votre super boulot………

    1. Bonsoir,
      Dans les commentaires de l’article sur le menu full screen : http://ma-maison-intelligente.fr/2020/03/ameliorer-son-design-jeedom-avec-un-menu-full-screen/ j’avais expliqué cette modification. Voici un récapitulatif :
      – à insérer dans le fichier js :
      function closeMenu (){
      $("#menu").toggleClass('open');
      $(".toggle-menu").toggleClass('active');
      };

      – à modifier dans le code html, sur la balise a :
      onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=2&fullscreen=1'; closeMenu();"
      N’hésites pas à me faire un retour.

  8. Salut, super boulot pour tous tes menus.

    J’ai utilisé ce menu et personnalisé le CSS pour en avoir un dark et un light en fonction d’un script qui évalue le paramétrage du CSS de Jeedom et en actualisant la page sous Fullykiosk à 8H et 20H par un scénario :

    if ($(‘body’)[0].hasAttribute(‘data-theme’)) {
    if ($(‘body’).attr(‘data-theme’).endsWith(‘Light’)) {
    var srcmenu = « menu_light »;
    } else {
    var srcmenu = « menu_dark »;
    }
    }
    document.querySelector(« link[href=’menu_light/menu.css’] »).href = « menu_light/ »+srcmenu+ ».css »;

    Le problème c’est qu’avec l’actualisation en arrière plan de Jeedom, le CSS n’est plus appliqué de temps en temps…

    Y’a une possibilité d’intégrer le light/dark dans les CSS en les surchargeant ?
    Style :
    .battery {
    /* Declaration CSS pour le theme light et légacy */
    }
    [data-theme= »core2019_Dark »] .battery {
    /* déclaration CSS pour le thème Dark */
    }
    Mais je suis pas fort en CSS 🙁

    Merci d’avance pour tes conseils éclairés et continue tes expériences sur ton blog !!!

    1. Bonjour et merci pour le feedback 🙂

      En effet, il y avait un peu plus simple en terme d’approche. J’aurais essayé quelquechose comme ca :


      :root {
      --battery-color-bg: #ffffff;
      }

      [data-theme="core2019_Dark"] {
      --battery-color-bg: #000000;
      }

      .component {
      background-color: var(--battery-color-bg);
      }

      L’idée est que par défaut (root), la couleur est #ffffff et que si data-theme = « core2019_Dark » alors on change cette couleur. puis ensuite dans le css on appelle grâce à var(–color-bg) autant de fois que l’on veut. ici je le fais avais une variable mais on peut imaginer plusieurs variables bien sûr.

      cela peut permettre de n’avoir qu’un fichier css.

      en espérant que ca aide.

      1. Franchement merci !
        Nickel du premier coup et ça na pas besoin de recharger un autre CSS donc plus de bug d’affichage !!!
        Après, c’est une question d’actualisation aux horaires des bascules light / dark.

  9. Bonjour,
    et bravo pour ce travail. Juste une petite précision s’il te plait. Quand tu parles de Position 1 et Position 3 dans ton tuto a quel champ fais-tu allusion précisément ? Position dans config du design ? A quoi sert cette position ?
    Merco

    1. Bonjour et merci pour le commentaire 🙂

      La position sert à gérer la superposition des éléments dans ton design. Il faut voir cela comme un millefeuille 🙂 À savoir que plus le chiffre de la position est faible plus l’élément sera en bas du millefeuille Et donc potentiellement sujet à voir des éléments passer au dessus.

      J’espère que ca t’aide 🙂

  10. Super tuto !!
    Ce design est vraiment chouette et me fait gagner de la place.
    Juste une petite suggestion/demande.
    Que faudrait-il faire pour avoir une sous catégorie dans le menu ?
    Par exemple, si j’ai une catégorie Music
    je voudrais avoir ensuite une sélection avec un menu similaire pour des sous-catégorie
    Spotify
    Logitech Media Server

    Merci d’avance

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *