Création d'un menu, help!

Utilisation du core de Jeedom Design
1

Bonjour,

J’aimerais donner un coup d’accélérateur à mon utilisation de ma box Jeedom, et je m’attaque entre autre, à essayer de faire un design agréable à utiliser sur un smartphone. Je cherche à faire un menu. J’avoue que je débute et je ne suis pas spécialiste dans la réalisation de page web. J’ai lu plein de trucs qui allaient dans tous les sens, j’ai essayé des choses compliquées, je ne suis arrivé à rien.
Alors je suis parti d’une page blanche (sans mauvais jeu de mots) et je suis arrivé à quelque chose qui commence à me plaire. Mais je bute sur un truc: je voudrais que lorsque le lance le design avec le menu, il me sélectionne et m’affiche la page de la première sélection.

Tout d’abord, voici comment j’ai procédé pour créer le menu:
J’ai créé avec le plugin HTML, le code que vous trouverez ci après.
Avec l’éditeur de fichier, sous html/data, j’ai créé un dossier PhA/Menu où j’y ai stocké mes images.
Est-ce une bonne méthode ? Est-ce que c’est robuste avec les mises à jour Jeedom ?

Et voici mon code, comment faire pour qu’au chargement du design principal, il me sélectionne et m’affiche automatiquement le premier menu ?

Merci de votre aide.

<!DOCTYPE html>
<html lang="FR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jeedom Maison</title>

  <style>
    /* Style pour le menu */
    #menu {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #000080;
      padding: 10px;
    }

    #menu img {
      cursor: pointer;
    }

    /* Style pour le contenu en dessous du menu */
    #contenu {
      margin-top: 20px;
    }
  </style>
</head>
  
<body>
 
<!-- Menu avec images côte à côte -->
<div id="menu">  
  <img src=data/PhA/Menu/Home.png alt="Home" onclick="ouvrirPage('index.php?v=d&p=plan&plan_id=1&fullscreen=1',0)">
  <img src=data/PhA/Menu/Home.png alt="Img2" onclick="ouvrirPage('index.php?v=d&p=plan&plan_id=2&fullscreen=1',1)">
  <img src=data/PhA/Menu/Home.png alt="Img3" onclick="ouvrirPage('index.php?v=d&p=plan&plan_id=3&fullscreen=1',2)">
</div>

  <!-- Contenu en dessous du menu -->
<div id="contenu">
  
  <!-- Le contenu de la page s'affichera ici -->
</div>
<script>
  // Fonction pour ouvrir une page web en dessous du menu
  function ouvrirPage(url, index) {
    // Réinitialiser la luminosité de toutes les images
    var images = document.querySelectorAll('#menu img');
    images.forEach(function(img) {
      img.style.filter = 'brightness(50%)';
    });

    // Mettre en surbrillance l'image cliquée
    var imageCliquee = document.querySelector('#menu img:nth-child(' + (index + 1) + ')');
    imageCliquee.style.filter = 'brightness(150%)';

    // Récupérer l'élément de contenu
    var contenu = document.getElementById('contenu');

    // Charger la page dans le contenu
    contenu.innerHTML = '<iframe src="' + url + '" width="100%" height="860px"></iframe>';
  }
      
</script>
</body>
</html>
2

Pourquoi ne pas prendre les plugins faits pour ca comme jeedomconnect ou comparses ?

La tu vas galérer a faire, finaliser et au moindre truc en maintenance t’arracher les cheveux !

3

Il y a deux ans, j’avais dans le passé utilisé l’app mobile officielle officielle jeedom et cela ne me plaisait pas car je voulais quelque chose de simple, où on a pas accès à ce que l’on ne doit pas toucher, et "à ma mode " (je suis difficile). Je suis donc parti sur un design d’une seule page avec uniquement les thermostats, ca fonctionne à merveille et tout le mode est content.
Mais, comme maintenant je commence à domotiser plein de trucs, il me faut plusieurs pages, d’où l’idée de menu. L’avantage de la solution design, c’est que il ne faut rien installer ni mettre à jour sur le téléphone, juste copier le lien avec l’adresse du jeedom. Lien que l’on peut simplement envoyer par email.
Je vais quand même jeter un oeil sur jeedomconnect, mais je ne suis pas trop emballé par le fait qu’il ne s’agisse pas d’un plugin officiel (quid de la pérennité ?) et qu’il faut simultanément mettre à jour l’appli en même temps que le plugin (il y a 2 utilisateurs android et un utilisateur iphone à la maison).
En tout cas, merci pour la proposition.

4

Bonjour,

Ajoute simplement une tempo qui exécutera la fonction :

setTimeout(() => {
  ouvrirPage('index.php?v=d&p=plan&plan_id=1&fullscreen=1',0)
}, 500); // 500ms
5

Merci pour ta réponse.
En fait, j’ai demandé à chat GPT de m’aider, il m’avait proposé un peu la même chose:

setTimeout(function() {
    ouvrirPage('index.php?v=d&p=plan&plan_id=1&fullscreen=1', 0);
  }, 100);

et ca fonctionne !

Mais, j’ai voulu voir si la tempo était critique, finalement ca fonctionne même sans tempo:

// Appeler la fonction avec le lien du premier menu 
  ouvrirPage('index.php?v=d&p=plan&plan_id=1&fullscreen=1', 0);

Finalement, comme tu vas dans le sens d’une tempo, je vais remettre cette tempo comme tu le propose.

C’est bizare, j’avais essayé plein de truc qui ne fonctionnaient pas, et finalement ça semble relativement simple, j’espère que je ne joue pas à l’apprenti sorcier :face_with_hand_over_mouth:
Après, la suite n’est pas bien compliquée, juste mettre les liens vers les différents designs que je ferai classiquement dans jeedom, je pense que cela ne devrait pas être trop compliqué à maintenir.
Il faudrait que nativement on ait cette option de menu de tête dans les designs jeedom, ca serait sympa.

6

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.