Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

design: afficher cacher un objet par un clic

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
Répondre
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

design: afficher cacher un objet par un clic

Message par db2p » 14 mai 2019, 13:12

bonjour

est il possible (sans doute par code dans un objet text) que si on clique donc sur un objet text on puisse afficher ou cacher un objet dans le design ?
ou bien encore suivant la selection dans une liste, en fait comme un lien mais qui permettrait de cacher ou afficher un objet.
si on regarde dans la configuration des design chaque objet possede un id donc.....
merci
Capture.JPG
Capture.JPG (42.2 Kio) Consulté 4696 fois
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 14 mai 2019, 17:55

bonjour
c'est le même design
20190514_175041.jpg
20190514_175041.jpg (133.23 Kio) Consulté 4672 fois
20190514_175104.jpg
20190514_175104.jpg (140.3 Kio) Consulté 4672 fois
Screenshot_20190514-175422_Chrome.jpg
Screenshot_20190514-175422_Chrome.jpg (118.39 Kio) Consulté 4672 fois
regarde cette video
viewtopic.php?f=30&t=45196

le 1er menu pointe sur des design

Code : Tout sélectionner

<!-- https://codepen.io/amrosenfeld/pen/XaEwva?limit=all&page=5&q=menu+iframe
https://codepen.io/amrosenfeld/pen/zdywgM?limit=all&page=3&q=menu+iframe
https://codepen.io/amrosenfeld/pen/QaBKJr?limit=all&page=5&q=menu+iframe
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target
  <meta name="viewport" content="width=device-width, initial-scale=1">

 -->
<html>
<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no">

  <style>
:root{
--background-menu: #00865f;
} 
    
::-webkit-scrollbar {
    display: none; 
}

div.swapmenu {
         height: 50px; 
   background-color: var(--background-menu); 
//    background-color: #00865f; 
  
     white-space: nowrap;
  overflow: auto;
         font-family: 'Roboto-Regular';

}
  div.swapmenu a {
    color: #fff; /** 687d52 737373**/
    text-align: center;
    padding: 15px;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
    padding-top: 10px;

}
div.swapmenu a:hover {
 color: #fff;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
}
  li {

display: inline-block;
  list-style: none;
  opacity: 0.85;
  font-size: 15.5px;
  color: #FFFFFF;
        }
li>a {

  display: block;
  margin-right: 0px;  
    color: #fff;
    }
    li.active,
li.active:hover {
  height:calc(100% - 1px); 
  border-bottom: 3px solid #FFF;
 opacity: 1;
}
li:hover {
  border-bottom: 3px solid #FFF;
 height: calc(100% - 1px);
  cursor: pointer;
}

</style>
</head>
                  <script>

var Var_Acceuil = 51;
var Var_Dehors = 54; 
var Var_Garage = 58; 
var Var_Cuisine = 57; 
var Var_5 = 34;
var Var_6 = 34;
var Var_7 = 3;
var Var_8 = 6;
var Var_9 = 34;
var Var_10 = 34;
var Var_11 = 34; 
var Var_12 = 34;
var Var_13 = 50;      

</script>
<body>
<div>
 <div class="swapmenu">

   <li><a href="/index.php?v=d&p=dashboard">
  <img style="" src="/core/img/logo-jeedom-sans-nom-blanc.svg" height=25  />
  </a></li>
      <!--  -->
      <li class="active"><a ondblclick='window.location.reload(false)' onclick="planHeader_id=(Var_Acceuil); displayPlan();">
  <span class="">ACCUEIL</span></a></li>

   <li><a onclick="planHeader_id=(Var_Dehors); displayPlan();">
  <span>DEHORS</span></a></li> 

   <li><a onclick="planHeader_id=(Var_Garage); displayPlan();">
  <span>GARAGE</span></a></li>

     <li><a onclick="planHeader_id=(Var_Cuisine); displayPlan();">
  <span>CUISINE</span></a></li>
<li><a onclick="">
  <span style="font-size:150%" class="fa maison-bathroom22 fa-lg"></span></a></li>
   
   
   <li><a onclick="">Résumé</a></li>
   <li><a onclick="">Présence</a></li>
  
  <li> <a href="#support">Support</a></li>

                </div> 


  </body></html>
le 2eme menu dans le design affiche cache des élément (j'ai mis le 1er menu car il y a des variable commune)

Code : Tout sélectionner

<!-- https://codepen.io/amrosenfeld/pen/XaEwva?limit=all&page=5&q=menu+iframe
https://codepen.io/amrosenfeld/pen/zdywgM?limit=all&page=3&q=menu+iframe
https://codepen.io/amrosenfeld/pen/QaBKJr?limit=all&page=5&q=menu+iframe
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target
              font-family: 'Roboto-Regular';
-->
<?php minicode="php"><?php session_start(); ?></minicode>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>


div.scrollmenu {
         height: 50px; 
    background-color: white; /* 232A31 */
      white-space: nowrap;
  overflow: auto;
text-align: center;
  }


  div.scrollmenu a {
    color: black;
    text-align: center;
    padding: 8px;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
    padding-top: 5px;
      font-size: 15.5px;    
}
la>a>span  {
color:#6d6d6d;    
font-size: 15.5px;    
font-family: 'Roboto-Regular';
}
    
    la.active>a, la.active>a>span {     
    color:var(--background-menu);  
    }
 [data-plan_id="707"] { 
   display:flex;width:370px;height:280px;overflow:auto;
    }
</style>
</head>

<body>
<div>
 <div class="scrollmenu">
   <!-- Résumés -->
<la class="active"><a ondblclick='window.location.reload(false)' onclick="planHeader_id=(Var_Acceuil); displayPlan();" class="fa jeedomapp-porte-ouverte fa-lg">
  <br><span>Accés<span></a></la>
   
     <!-- Températures -->
<la><a onclick="Temp()" id="onglet-2" class="fa divers-thermometer31 fa-lg">
  <br><span>Températures</span></a></la>
   
   <!-- Presence -->
   <la><a onclick="Presence()" id="onglet-3" class="fa personne-toilet1 fa-lg">
     <br><span>Présences<span></a></la>


   </div> 

                </div> 
				  <script type="text/javascript">
                   
var plan_2d = $('[data-plan_id="658"]');
var garage308 = $('[data-plan_id="681"]');
var presence = $('[data-plan_id="662"]');
var garage208 = $('[data-plan_id="679"]');
var FenetreAdrien = $('[data-plan_id="683"]');
var CarreVert = $('[ data-plan_id="678"]');
var resume = $('[data-eqlogic_id="453"]');
var FenetreLisa = $('[data-plan_id="695"]');
var PorteEntree = $('[data-plan_id="702"]');
var PorteCellier = $('[data-plan_id="703"]');
var VRcuisine = $('[data-plan_id="697"]');
var VRSAM = $('[data-plan_id="698"]');
var VRsalon = $('[data-plan_id="699"]');
var VRCH1nord = $('[data-plan_id="700"]');
var VRCH1ouest = $('[data-plan_id="701"]'); 
var Portail = $('[data-plan_id="694"]'); 
var Temperatures = $('[data-plan_id="707"]');                    
var HistoExt = $('[data-plan_id="709"]');  
var HistoLexique = $('[data-plan_id="710"]'); 
var HtmlBlanc = $('[data-plan_id="711"]');                   
                 
             $( document ).ready(function() {
// Temperatures.css('display','inline').css('list-style','none').css('overflow','auto').css('width','720px');          
// https://www.w3schools.com/css/css3_flexbox.asp 
presence.hide(); 
Temperatures.hide(); 
HistoExt.hide();
HistoLexique.hide();
HtmlBlanc.hide();
               
});  
  $('.scrollmenu la').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 
});
              
   function Presence() {

garage308.hide();
garage208.hide(); 
FenetreAdrien.hide();
FenetreLisa.hide();
PorteEntree.hide();
PorteCellier.hide();
VRcuisine.hide();
VRSAM.hide();
VRsalon.hide();
VRCH1nord.hide();
VRCH1ouest.hide();
Portail.hide();
resume.hide();
plan_2d.hide();
CarreVert.hide();
Temperatures.hide();     
HistoExt.hide(); 
HistoLexique.hide();
     
presence.show(); 
};                 
     function Temp() {
//     $('[data-eqlogic_id="117"]').css({"transform" : "translateX(-280px)"});
//$('#image').hide();
//          $('.acces').hide();
garage308.hide();
garage208.hide();
FenetreAdrien.hide();
FenetreLisa.hide();  
PorteEntree.hide();
PorteCellier.hide();
VRcuisine.hide();
VRSAM.hide();
VRsalon.hide();
VRCH1nord.hide();
VRCH1ouest.hide();
Portail.hide();
resume.hide();
CarreVert.hide();
presence.hide();
plan_2d.hide();       

CarreVert.show();
Temperatures.show();
HistoExt.show();
HistoLexique.show();
};                    
              </script>

  </body></html>
au lancement du design
tous se mets en meli mélo
un html bĺanc pour tous cacher

ne laissant que se que je veux voir (pas de hide) sur les éléments accès à la lecture de la page

un clic menu 2 lance
une fonction : qui cache montre tous les elements (équipement, commande, html, historique,...)

si tu arrives à reproduire il te restera ton input list avec un lancement de fonction

si tu veux un slide tableau sur clic bouton
faut que je retrouve sur design test mais c'est faisable

hs ajout de complexité
en cours pour mon 1er menu sauvegarde de l'ofset "position" en variable navigateur pour reproduire sur design clic

ensuite tu peux même arrivé sur ton design avec la fonction désirait via argument dans le lien
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 16 mai 2019, 08:19

merci winhex
ça m'a l'air un peu compliqué car, je suis pas trop un pro en programmation mais je vais jeter un oeil
merci
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 16 mai 2019, 16:00

c'est toi qui voit ! pour le reste c'est une question de temps et d'envie. la domotique touche tellement de domaine.
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 20 mai 2019, 13:55

bonjour
merci winhex car, j'ai pu avancer dans ce que je vouslais faire
voila mon code
<select onchange="Afficher(this.value)">
<option value = '101'>Travail</option>
<option value = '264'>Aur</option>
<option value = '266'>Cél</option>
</select>
<script type="text/javascript">
var Trajet_1 = $('[data-plan_id="101"]');//Travail
var Trajet_2 = $('[data-plan_id="264"]');//Aur
var Trajet_3 = $('[data-plan_id="266"]');//Cel
function Afficher(id_trajet) {
Trajet_1.hide();
Trajet_2.hide();
Trajet_3.hide();
switch (id_trajet){
case "101":
Trajet_1.show();
break;
case "264":
Trajet_2.show();
break;
case "266":
Trajet_3.show();
break;
default:
Trajet_1.show();
}
}
</script>
cela fonctionne
quand je selectionne une valeur de la liste cela cache bien tous les trajets et n'affiche que le trajet voulu

Cependant, je cherche quand le design s'ouvre, a n'afficher que le 1er trajet (Travail -> id 101) et donc que le 1er element de la liste soit selectionne
tous mes trajets etant supersposés donc a l'ouverture on les voit tous
je ne sais pas si il y a moyen de cacher des elements à l'ouverture d'un design ou bien de trouver une astuce pour qu'ils soient cachés....
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 20 mai 2019, 14:19

jy croyais pas. bravo

pour cacher à l'ouverture
un html blanc par dessus tous

je mets un js ready page qui
caché tous les équipements non voulu lorsque la page s'ouvre
et je fini par caché le html blanc
le blanc etant par dessus tous on voit rien dessous
et il disparaît à la fin
le code est simple la couleur est paramétrable,(couleur de fond) profondeur 3

Code : Tout sélectionner

<div style="height:100%;"> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>
sans cache le html blanc ça donne
Screenshot_20190520-141717_Chrome.jpg
Screenshot_20190520-141717_Chrome.jpg (80.05 Kio) Consulté 4594 fois

dans ta liste il te manque un active par défaut pour moi
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 20 mai 2019, 23:33

une autre methode !

puisque le js se lit à la fin de la lecture de la page
normalement l'ordre c'est le style la forme et le script si j'ai compris
au lieu de mettre des hide en js

en style on met

Code : Tout sélectionner

 [data-plan_id="662"] { 
  display:none;
  }
le show du jquery le montrera

avec cette methode plus besoint du html blanc ni de

Code : Tout sélectionner

 $( document ).ready(function() {
hs : par contre dans le lien pour un swap j'avais en style

Code : Tout sélectionner

display:flex;width:370px;height:280px;overflow:auto;
je l'enléve "commenter pour l'accaz"

Code : Tout sélectionner

      [data-plan_id="707"] 
    { 
      display:none;
 /*  display:flex;width:360px;height:220px;overflow:auto; */
    }
et en script
au lieu de

Code : Tout sélectionner

Temperatures.show();
se sera

Code : Tout sélectionner

Temperatures.show().css('display','flex').css('width','360px').css('height','220px').css('overflow','auto');
se qui donne en menu2

Code : Tout sélectionner

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    
/* presence 662 / HistoExt 709 / HistoLexique 710 / temperature 707 */
 [data-plan_id="662"], [data-plan_id="709"], [data-plan_id="710"] ,[data-plan_id="707"] { 
  display:none;
  }

div.scrollmenu {
         height: 50px; 
    background-color: white; /* 232A31 */
      white-space: nowrap;
  overflow: auto;
text-align: center;
  }


  div.scrollmenu a {
    color: black;
    text-align: center;
    padding: 8px;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
    padding-top: 5px;
      font-size: 15.5px;    
}
la>a>span  {
color:#6d6d6d;    
font-size: 15.5px;    
font-family: 'Roboto-Regular';
}
    
    la.active>a, la.active>a>span {     
    color:var(--background-menu);  
    }

</style>
</head>

<body>
<div>
 <div class="scrollmenu">
   <!-- Résumés -->
<la class="active"><a ondblclick='window.location.reload(false)' onclick="planHeader_id=(Var_Acceuil); displayPlan();" class="fa jeedomapp-porte-ouverte fa-lg">
  <br><span>Accés<span></a></la>
   
     <!-- Températures -->
<la><a onclick="Temp()" id="onglet-2" class="fa divers-thermometer31 fa-lg">
  <br><span>Températures</span></a></la>
   
   <!-- Presence -->
   <la><a onclick="Presence()" id="onglet-3" class="fa personne-toilet1 fa-lg">
     <br><span>Présences<span></a></la>


   </div> 

                </div> 
				  <script type="text/javascript">
                   
var plan_2d = $('[data-plan_id="658"]');
var garage308 = $('[data-plan_id="681"]');
var presence = $('[data-plan_id="662"]');
var garage208 = $('[data-plan_id="679"]');
var FenetreAdrien = $('[data-plan_id="683"]');
var CarreVert = $('[ data-plan_id="678"]');
var resume = $('[data-eqlogic_id="453"]');
var FenetreLisa = $('[data-plan_id="695"]');
var PorteEntree = $('[data-plan_id="702"]');
var PorteCellier = $('[data-plan_id="703"]');
var VRcuisine = $('[data-plan_id="697"]');
var VRSAM = $('[data-plan_id="698"]');
var VRsalon = $('[data-plan_id="699"]');
var VRCH1nord = $('[data-plan_id="700"]');
var VRCH1ouest = $('[data-plan_id="701"]'); 
var Portail = $('[data-plan_id="694"]'); 
var Temperatures = $('[data-plan_id="707"]');                    
var HistoExt = $('[data-plan_id="709"]');  
var HistoLexique = $('[data-plan_id="710"]'); 
               
 //            $( document ).ready(function() {
// Temperatures.css('display','inline').css('list-style','none').css('overflow','auto').css('width','720px');          
// https://www.w3schools.com/css/css3_flexbox.asp 
// presence.hide(); 
// Temperatures.hide(); 
// HistoExt.hide();
// HistoLexique.hide();
// }); 
                    
  $('.scrollmenu la').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 
});
              
   function Presence() {

garage308.hide();
garage208.hide(); 
FenetreAdrien.hide();
FenetreLisa.hide();
PorteEntree.hide();
PorteCellier.hide();
VRcuisine.hide();
VRSAM.hide();
VRsalon.hide();
VRCH1nord.hide();
VRCH1ouest.hide();
Portail.hide();
resume.hide();
plan_2d.hide();
CarreVert.hide();
Temperatures.hide();     
HistoExt.hide(); 
HistoLexique.hide();
     
presence.show(); 
};                 
     function Temp() {
//     $('[data-eqlogic_id="117"]').css({"transform" : "translateX(-280px)"});
//$('#image').hide();
//          $('.acces').hide();
garage308.hide();
garage208.hide();
FenetreAdrien.hide();
FenetreLisa.hide();  
PorteEntree.hide();
PorteCellier.hide();
VRcuisine.hide();
VRSAM.hide();
VRsalon.hide();
VRCH1nord.hide();
VRCH1ouest.hide();
Portail.hide();
resume.hide();
CarreVert.hide();
presence.hide();
plan_2d.hide();       

CarreVert.show();
HistoExt.show();
HistoLexique.show();
Temperatures.show().css('display','flex').css('width','360px').css('height','220px').css('overflow','auto');
       
};                    
              </script>

  </body></html>
pour toi

Code : Tout sélectionner

<style>
   [data-plan_id="264"], [data-plan_id="266"] { 
  display:none;
  }
</style>
<select onchange="Afficher(this.value)">
<option value = '101'>Travail</option>
<option value = '264'>Aur</option>
<option value = '266'>Cél</option>
</select>
<script type="text/javascript">
var Trajet_1 = $('[data-plan_id="101"]');//Travail
var Trajet_2 = $('[data-plan_id="264"]');//Aur
var Trajet_3 = $('[data-plan_id="266"]');//Cel
function Afficher(id_trajet) {
Trajet_1.hide();
Trajet_2.hide();
Trajet_3.hide();
switch (id_trajet){
case "101":
Trajet_1.show();
break;
case "264":
Trajet_2.show();
break;
case "266":
Trajet_3.show();
break;
default:
Trajet_1.show();
}
}
</script>
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 21 mai 2019, 11:52

alors là un grand merci winhex
ça fonctionne impeccable !!!

challenge suivant :
toujours sur le design, comment changer la couleur d'une tuile ?
en fait, j'affiche un virtuel qui me dit si l'alarme est active ou non et je cherche a faire que , si elle est active le fond soit rouge, si l'alarme est inactive le fond est vert
j'ai cherché pour voir si il y a avait un plugin ou widget, j'avais vu un post la dessus mais plus possible de le telecharger.
donc sur le meme principe que plus haut j'ai mis mon virtuel en fond transparent puis créé 2 zones , une a fond vert l'autre a fond rouge qui se superposerait sur le virtuel donc je les cache au debut mais comment dire d'afficher tel ou tel zone suivant etat de l'alarme ?
Capture.JPG
Capture.JPG (21.69 Kio) Consulté 4528 fois
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 21 mai 2019, 13:44

je viens de voir qu'on peut changer la couleur de tuile suivant le niveau de danger
donc peut être est ce possible de modifier ça à cet endroit
"Alarme a" = alarme activée
"Alarme d" = alarme désactivée
mais comment lui faire comprendre un truc du genre
left(#value#,8) = "Alarme a"
car cela ne foncitonne pas
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 21 mai 2019, 14:22

sinon le widget du virtuel

si display_state = "ok ou 1 enfin ton truc"
[data_plan_id="xx"].css('background ','red');
...
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 21 mai 2019, 15:36

merci de m'aider winhex
j'ai juste un virtuel qui affiche le contenu d'une variable
cette variable change quand je mets l'alarme ou la desactive (plugin alarme) et affiche la date et heure a laquelle c'est activé/désactivé
donc je n'ai pas de widget
et dans ce virtuel si je regardes dans code il n'y a aucun code...
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 21 mai 2019, 15:50

cela se créé
donc un widget pour ton info string (non binaire ni numerique)
exemple couleur de police selon l'etat : Mediocre,...

Code : Tout sélectionner

<div class="tooltips cmd cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: block;">
	<center><span style="font-size : 12px;#hideCmdName#" class="cmdName">#name_display#</span> <strong class="state"></strong></center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
            if (_options.display_value == "Mediocre") {
       			$('.cmd[data-cmd_id=#id#] .state').css('color', 'red'); 
			}else if (_options.display_value == "Moyen") {
              	$('.cmd[data-cmd_id=#id#] .state').css('color', 'DarkMagenta'); 
       		}else { 
                $('.cmd[data-cmd_id=#id#] .state').css('color', '');
     		}

			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
ensuite cela sera si _options.display_value contient dans l'info activé ou désactivé fonction script .match()
https://www.w3schools.com/jsref/jsref_match.asp

exemple début d info

if ("_options.display_value".match(/^Tab/i)) {

dans les paratheses c'est les expressions régulières

https://openclassrooms.com/courses/dyna ... lieres-1-2

mes 1er pas dans la création de widget ça
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 23 mai 2019, 09:06

merci winhex

par contre ca me parait un peu plus compliqué.....

il faut créé un widget 'simple état' c'est ça ?
ou on/off ?

bon ben j'ai tenté ça mais ça m'affiche le fond du texte en vert pas le fond de la tuile
peut être changer le mot state dans
$('.cmd[data-cmd_id=#id#] .state').css('background', 'red');
pour mettre le bon correspondant au fond
pour ce qui est du fond dans le design ca le change pas non plus -> $[data_plan_id="277"].css('background','red');
:
<div class="tooltips cmd cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: block;">
<center><span style="font-size : 12px;#hideCmdName#" class="cmdName">#name_display#</span> <strong class="state"></strong></center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
var myRegex = /Alarme a/;
if (myRegex.test(_options.display_value)) {
$('.cmd[data-cmd_id=#id#] .state').css('background', 'red');
$[data_plan_id="277"].css('background','red');
}else {
$('.cmd[data-cmd_id=#id#] .state').css('background', 'green');
$[data_plan_id="277"].css('background','green');
}

$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
if(_options.alertLevel == 'warning'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
}else if(_options.alertLevel == 'danger'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 23 mai 2019, 16:45

je vois pas pourquoi ça ne marche pas si à partir d'une création html dans design ça marche. "background-color"

tu as bien une fois sauvegardé
reasigné a l'équipement une fois sauvegardé
tu sauvegarde le widget

clic en haut à droite
"appliquer sur des commandes"
et tu valides

sinon tu passes par un scénario pour ta création variable ? sinon via code

ou 3 autres façon de faire
viewtopic.php?f=32&t=43439&p=699553&hil ... st#p699490
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 24 mai 2019, 08:34

merci de ton aide winhex mais, ca ne fonctionne pas
c'est juste le fond du texte qui change pas la couleur de fond de la tuile
voila le code que j'ai mis:
var myRegex = /Alarme a/;//Alarme activée ... rouge
if (myRegex.test(_options.display_value)) {
$('.cmd[data-cmd_id=#id#] .state').css('background', 'red');
$('.colorTuile-#uid#').closest('.eqLogic-widget').css('background-color','red');
$[data_plan_id="277"].css('background-color','red');
}
[edit]: apres recherche dans la bdd si je ne me suis pas trompé les elements de design sont dans la table plan
si je fais cette requete: select * from plan where id=277
dans la colonne css je n'ais pas d'elements background-color seul des z-index et zoom donc je pense qu'il y a un probleme a ce niveau...

de même dans la table eqlogic il semble qu'on ait tous les objets et donc pour la tuile j'ai trouve dans la colonne display lun 'background-dashboardcolor donc j'ai essayé:
$('.colorTuile-#uid#').closest('.eqLogic-widget').display('background-colordashboard','red');
on ne sait jamais un coup de pot ....... :lol:
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: design: afficher cacher un objet par un clic

Message par winhex » 24 mai 2019, 16:26

donc closet et data plan ne fonctionne pas
seul background-color sur state
je peux pas testé je suis sur vieux jeedom
mais chez moi ça marche enfin une autre méthode

dans ton html tu y glisses un div avec id ou class propre à se design

ex :

Code : Tout sélectionner

<div class="designtablette"></div>
voir un ajout de background (red,transparent,..) en style

Code : Tout sélectionner

<div class="designtablette" style="background:red;"></div>
et ton widget change le background via script

Code : Tout sélectionner

$('.designtablette').css('background', 'blue');
Haut
Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :
Contacter db2p

Re: design: afficher cacher un objet par un clic

Message par db2p » 27 mai 2019, 08:08

merci winhex mais... fonctionne pas
ou alors je sais pas trop comment faire: ou dois-je mettre le div ?
au début ou bien dans le div j'ai tout le code ?
un peu perdu là
Haut
Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité