@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é 
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)
1 « J'aime »
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.
Bonjour,
J’ai bien (il me semble ) suivi le tuto, j’ai récupéré les data-plan_ID, le CSS me fait bien disparaitre les équipements désignés mais un click sur le bouton d’ouverture du popup ne déclenche rien. 
.
J’ai ça dans la page Javascript :
function hide_equipements() {
$(‹ [data-plan_id=« 648 »] ›).hide();
$(‹ [data-plan_id=« 649 »] ›).hide();
$(« #page_clickable_tab »).hide();
}
function show_equipement(id) {
$(‹ [data-plan_id=" ›+ id +‹ "] ›).show();
$(« #page_clickable_tab »).show();
}
Il n’y aurait pas un problème sur la fonction show_equipement ?
Merci.
J[quote=« lopezdav, post:15, topic:27831 »]
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.
[/quote]
Salut, j’ai exactement le même besoin, ce serais top de pouvoir déclencher le popup depuis un scénario ou l’agenda…
Cas d’utilisation :
-Affiché la poubelle a sortir
-Afficher les alarmes ou alerte
-afficher le thermostat quand il est en route etc
Actuellement j’essaye de la gérer avec la fonction « go to design »(qui ne marche pas dans l’agenda) mais le principe du popup est tellement mieux.
Merci
Bonjour @brasletti,
As-tu bien appelé et adapté le show equipement de tes ID dans ton bouton?
Il devrais ressembler à quelque chose comme cela:
<div>
<a onClick="show_equipement('648'); show_equipement('649');">
<img class="advanced_button_tab" src="data/img/Perso_Image/param.png" />
</a>
<div>
Dapolux
Bonjour,
chez moi cela fonctionne nikel, par contra y a t il la possibilité de fermer la popup apres utilisation car chez moi je vous pas comment faire si ce n’est recharger al page.
merci
Biensur, pour ce faire, je clic en dehors des équipements, donc en gros, dans le background du popup, qui appelle le « hide_equipements() ».
Cf message initial:
<div id="page_clickable_tab" onClick="hide_equipements();"></div>
dans cette partie, tu en parles pas de la fermeture du coup j’ai zappé,
on est pas tous ici spécialiste en CSS
Effectivement je n’en parles pas dans cette partie car la fermeture ne se fait pas là, mais justement dans la partie concernée:
ravi si maintenant cela répond à ton besoin.
Bonne journée.
Je n’y parviens pas du tout, j’ai suivi le tuto mais cela ne fct pas, ma popup grise s’ouvre à l’emplacement de l’image de mon objet et non pas en haut à gauche comme toi, elle mesure 1200*800 (taille de mon écran, donc elle déborde de l’affichage) et l’équipement present n’est pas centrée mais il s’ouvre la ou je l’ai positionné dans mon design. Je ne comprends pas comment tu fais pour assombrir l’ensemble du design et pour ouvrir tes équipement au centre de ton écran en haut.
merci
Quand tu parles de pop up grise, tu parles bien du background de la pop up? Si oui, et que tu l’as déclarée de cette façon (comme dans le tuto):
<div id="page_clickable_tab" onClick="hide_equipements();"></div>
Et que dans ton CSS tu as bien:
#page_clickable_tab {
width:1024px;
height:680px;
background-color:rgba(0,0,0,0.5);
display:none;
cursor: pointer;
}
ou du moins resizé en fonction de ton besoin, le rectangle doit commencer là ou tu l’as positionné dans ton design.
Pour rappel c’est ce rectangle qui grise le fond, et qui capte la possibilité de cacher le pop up complète (ce rectangle lui même + l’équipement que tu affiches).
Bien gardé à l’esprit que nous superposons des éléments les uns par dessus des autres (comme si sur une feuille de papier, tu rajoutes des images les une sur les autres: ton design de base, paramétré comme étant de niveau 0 ou 1, puis le background qui grise le design et permet de cacher l’ensemble du pop, de niveau 2, puis l’équipement affiché dans la popup, qui est de niveau 3.
L’équipement que tu affiches dans la pop up quand a lui, sera positionné là ou tu le met en mode édition, il n’est pas forcément centré (il est centré si tu le positionne au milieu).
Ok, j’ai bien progressé, cependant , au chargement de la page, j’ai mon équipement qui est deja présent, lorsque je clique sur mon logo ampoule, la zone entière se grise bien , je clique dans la partie grise, la zone grise + l’équipement se ferme et réapparait si je clique sur mon logo ampoule.?
PB resolu, erreur de virgule dans le CSS
Salut @Dapolux,
Merci pour cet excellent tuto. Je viens de le tester et ça ouvre pleins de possibilités de design plus épuré.
J’aurais souhaité ajouter une fonction supplémentaire mais étant en petit plus à l’aise en python, c++ qu’en html/css, je me permets de poser la question ici:
Est-ce qu’il serait possible d’avoir un timer qui ferme automatiquement le pop-up si:
- si personne n’a cliqué sur une des fonctions ?
- en cas d’inactivité ?
Bonjour à tous,
C’est top c’est exactement ce que je voulais.
J’ai malheureusement un souci, mais celui-ci ne se pose que lorsque je souhaite faire disparaitre les commandes, je n’ai aucun problème sur les équipements.
Lorsque je vais sur ma page, mes commandes sont visibles.
Si je clique sur mon bouton, j’ai bien mon popup qui apparait.
Je clique dans la zone sombre tout disparait.
Ensuite tout est bon jusqu’au moment où je retourne sur la page.
Auriez-vous une idée ?
Je vous mets des captures d’écran pour comprendre
