[TUTO] Popup dans un design

Tags: #<Tag:0x00007f3857d77af8>

Bonjour,

Avec la démultiplication du nombre d’objets connectés, à moins de démultiplier les pages, les écrans de designs deviennent vite surchargés, voilà pourquoi j’ai voulu mettre en place dans mes designs un système de popup qui affiche une vue détaillée par rapport à une zone de design.
Je partage donc ce que j’ai mis en place. C’est probablement optimisable, mais au moins ça répond à mon besoin.

Aperçu du rendu sur certains designs tablette puis mobile (zones cliquables dans les cadres jaunes):
tab1
tab2
tab3
mobile

Principe

L’idée générale consiste a ce que les éléments de détail à afficher en mode popup, qui sont en fait ni plus ni moins que le visuel d’équipements, soient sur la page, puis en fonction des clics, jouer sur le fait qu’ils soient visibles.
Pour gérer l’ordre d’affichage des éléments, tout mon design de base est en Niveau 0 et 1 (clic droit sur les composants -> Paramètres d’affichage -> Option « Profondeur »), pour pour la popup, le fond est en niveau 2, puis les équipements en niveau 3.

Elements du popup

  1. Ajoutez les équipements qui seront à afficher dans la popup, par dessus votre design (comme n’importe quel équipement)
  2. Paramétrez la profondeur en niveau 3
  3. Récupérez le « data-plan_id » de chaque équipement (c’est sur ce dernier que nous allons jouer pour afficher/masquer l’équipement)

Pour ce faire, un moyen simple si vous utilisez Chrome, c’est de passer par les outils de développement, puis inspectez votre élément (le bouton de sélection est très utilse pour cela):
outils

Puis repérez le « data-plan_id » dans la balise DIV du widget de l’équipement (dans mon cas, 1073):
data-plan

Background du popup

Afin se focaliser visuellement uniquement sur les équipements souhaités, et faire en sorte que plus rien d’autre ne soit cliquable, je rajoute entre mon design de départ et mes équipements, un cadre (DIV) qui va en plus assombrir mon design initial.

Pour ce faire, ajout d’un élément HTML (clic droit, ajouter texte/html), avec le texte suivant:

<div id="page_clickable_tab" onClick="hide_equipements();"></div>

Nb: Je reviendrai ultérieurement sur ce hide_equipements(), qui fera en sorte de masquer tous les éléments de popup.

Ne vous souciez pas de la taille de cet élément html, il sera défini par CSS, juste dans mon cas, je l’ai positionné juste en dessous de mon menu, car c’est le point de départ du background de mon popup.
div_html

CSS / Javascript

J’ai fait le choix de mettre le CSS directement dans le custom de jeedom (réglages -> système -> personnalisation avancée) qui me permet facilement d’agir sur tous mes équipements directement.

Ajoutez les infos suivantes coté CSS (le width et le height sont a adapter en fonction de la résolution de votre design, dans mon cas, il prends toute la page sans le menu):

#page_clickable_tab {
  width:1024px;
  height:680px;
  background-color:rgba(0,0,0,0.5);
  display:none;
  cursor: pointer;
}

[data-plan_id="1073"],
[data-plan_id="1074"]
{ 
  display:none;
}

Nb: dans cet exemple, je masque les id 1073 et 1074, vous devez rajouter l’id de tous des éléments à masquer (séparés par une « , »).

Coté Javascript (dans la même page que le CSS), on va créer les fonctions pour afficher masquer (a adapter également avec l’ensemble des éléments a masquer, pour ma part j’ai tous les éléments à masquer de tous mes designs, comme pour le CSS), sans oublier le background (#page_clickable_tab):

function hide_equipements() {
  $('[data-plan_id="1073"]').hide();
  $('[data-plan_id="1074"]').hide();
  $("#page_clickable_tab").hide();
}

function show_equipement(id) {
	$('[data-plan_id="'+ id +'"]').show();
	$("#page_clickable_tab").show();
}

Bouton d’ouverture du popup

Ajoutez un texte/html (comme pour le background) avec le texte suivant, dans votre design, à l’emplacement souhaité:

<div>
  <a onClick="show_equipement('1073'); show_equipement('1074');">
    <img class="advanced_button_tab" src="data/img/Perso_Image/param.png" />
  </a>
<div>

Nb: dans le onClick, vous devez adapter le/les equipements que vous voulez afficher lors du clic.
Pour ma part j’ai utilisé le visuel d’une image que j’ai chargé au préalable, mais vous pouvez tout à fait faire un visuel directement en CSS. La classe « advanced_button_tab » me permet dans le cas présent de gérer le visuel depuis le css custom, si vous n’en avez pas besoin vous pouvez tout à fait retirer cette propriété.

Voilà, normalement je n’ai rien oublié, sinon n’hésitez pas!

Ps: Merci à @ajja17orange et @ZygOm4t1k pour leur aide.

Bonne journée,
Dapolux.

13 J'aimes

Cool merci :slight_smile:

j’ai bien ramé mais j’y suis arrivé quand même ^^
le plus chiant c’est de trouver les « data-plan-id » je trouve.

mais ça vaut le coup j’ai plein de truc à faire sur mon design maintenant, encore merci.

Edit: j’ai pas trouvé pour faire apparaitre le popup avec un effet de transition « qu’il apparaisse plus lentement » avec vous deja essayé ?

Merci, je cherchais a faire quelque chose comme ça avec les zones mais c’était pas exactement ce que je cherchais! Mais avec ton petit code c’est nickel, un peu long a mettre en oeuvre mais c’est comme pour tout ça!

Merci :slight_smile:

bonjour
une valeur dans les parenthèse du hide/show « milliseconds » ou « slow », « fast »

The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: « slow », « fast », or milliseconds

https://www.w3schools.com/jquery/jquery_hide_show.asp

@ajja17orange

Merci pour le conseil, ça fonctionne très bien sur les équipements mais pas sur le popup

mais bon!.. pas de souci je survivrais :slight_smile:
c’est déjà cool comme ça.

Hello,

Content que cela serve!

@GlloQ, bizarre que ça ne fonctionne pas sur le popup, pour ma part ça fonctionne sur tout. Tu est bien sur d’avoir appliqué le timer sur toutes les éléments, c’est à dire équipements, mais aussi sur le div de la popup? (c’est à dire le $("#page_clickable_tab").hide(); et le $("#page_clickable_tab").show():wink:

@Dapolux

Tu as raison, j’ai pas mis le timer sur « function show_equipement »
je suis un gland… :see_no_evil:

Bonjour,

J’ai une petite question, qui est pas vraiment en rapport mais c’est pour l’utilisation.

J’ai remplacé ton image par un Font Awesome.
Voici le code :

<style>
  #light {color:white; position: relative; top:25px; left:25px;}  
</style>

<div>
  <a onClick="show_equipement('176');show_equipement('181');">
    <i id="light" class="fas fa-2x fa-lightbulb"></i>
  </a>
<div>

Ma commande est lié a une lumière HUE
Est-ce possible de changer la couleur selon l’état de la hue ?

Si Hue Eteinte couleur grise, si Hue allumé valeur de la couleur en HEX ?

@Clem.Lep salut, je n’ai pas regardé en détail le lien entre ta question et ce post mais comme tu dis ce n’est pas en rapport, il ne faudrait pas mieux créer un post séparé pour ne pas se perdre dansLes échanges à suivre par rapport au post d’origine?

Oui, je l’ai mis ici car j’utilise le code de base. Je vais créer un sujet séparé :slight_smile:

@Clem.Lep

Effectivement ce n’est pas en lien, mais si ça peut te faire avancer, le souci dans ton cas est que tu vas devoir gérer l’état de ton image manuellement. Pour répondre à ton besoin, je partirais plutôt sur:

  • Un widget sur la commande « Etat » de ton ampoule sur laquelle tu gères le visuel que tu souhaites en fonction de l’état (il existe plusieurs topics sur le forum pour ce genre de choses)
  • Dans ton design tu ajoutes cette commande (pas l’équipement complet, juste la commande)
  • Tu ajoutes une zone cliquable par dessus qui va lancer les « show_equipement » (en gros le même div que précédemment, mais sans image, juste une taille à précisier)

Bonjour,
Est-il possible d’utiliser cette astuce pour afficher/masquer un équipement depuis un scenario?

Bonjour,

Je ne suis pas sur de comprendre ton cas d’utilisation.
Peux-tu préciser un peu plus ce que tu veux faire depuis ton scenario? (car si le scenario détermine le fait qu’un équipement s’affiche ou se cache, alors dans ce cas ton scenario agira directement sur « visible », donc peu importe qui l’affiche, pas juste la session en cours.

Oui, je cherche à pouvoir afficher ou masquer un équipement depuis une commande dans un scénario. le fait d’avoir le meme résultat sur toutes les pages ouvertes est tout à fait ce que je cherche.
Est-ce possible par exemple de déclencher le code JavaScript sur le changement d’état d’une info plutôt que sur un Onclick?

Bonjour,
J’ai le même besoin. Le but est d’afficher une popup en cas d’alerte dans la maison avec un bouton pour masquer l’arlerte (pendant x minutes)
Exemple : la porte du frigo est ouverte depuis x minutes, j’affiche une alerte. Je clique sur OK pour masquer l’alerte quand elle est traitée.