Widget dynamique en V4.1

Nemeraud · Janvier 21, 2021, 6:23

Bonjour à tous

Je me suis permis une petite adaptation avec ces widgets dynamiques V4, j’espère que l’auteur @kaktusatomik ne m’en voudra pas

Afin de regrouper dans un seul widget et faciliter l’usage : porte, fenetre, baie et garage et d’inclure le code et le CCS

pour modifier l’orientation et le choix du type d’ouverture, il suffit d’ajouter 3 options a l’affichage de la commande.

orientation : avec un chiffre, pour les degrés (positif ou négatif) - défaut 0
type : pour le type d’ouvrant : porte, fenetre, baie, garage - défaut porte
taille : avec un chiffre, pour la longueur du trait - défaut 100

le nom peut être affiché ou non, avec la case « Afficher le nom »

<div style="padding:10px; min-width:30px; min-height:30px;" class="cmd cmd-widget container-fluid cursor #history#" data-type="info" data-subtype="binary" data-template="Ouvertures_2D" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
	<div class="content-sm">
    	<div class="iconCmdBaie#id#">
    	    <div class="design_baie#uid#" style="transform-origin: top left;"></div>
    	</div>
    	<div class="iconCmdPorte#id#">
	      	<div class="design_porte#uid#" style="transform-origin: top left;"></div>
	    </div>   
		<div class="iconCmdFenetre#id#">
      			<div class="design_fenetre#uid# design_fenetre_l#uid#" style="transform-origin: top left; display:inline-block; width:50%;"></div>
              	<div class="design_fenetre#uid# design_fenetre_r#uid#" style="transform-origin: top right; display:inline-block; width:50%;"></div>
     	</div>
	  	<div class="iconCmdGarage#id#">
	      	<div class="design_garage#uid#"></div>
	  	</div>
    </div> 
 	<div class="DEBUG#uid#"></div>
	<style>
	div.design_baie#uid#{   
		height:10px; 
  		transition: all 1s ease-out;    
	}
	div.design_baie_fermee#uid#{
		background-color:var(--al-success-color);
	}
	div.design_baie_ouverte#uid#{
		background-color:var(--al-danger-color);
    	border-radius: 2px;
        animation-duration: .8s;
	   	animation-name: clignoter;
   		animation-iteration-count: infinite;
   		transition: none;      
	}
      
    div.design_porte#uid#{
		height:10px; 
  		transition: all 1s ease-out;  
	}
	div.design_porte_fermee#uid#{
		background-color:var(--al-success-color);
	}
	div.design_porte_ouverte#uid#{
		background-color:var(--al-danger-color);
    	border-radius: 2px;
	}  
      
	div.design_fenetre#uid#{       
		height:10px; 
  		transition: all 1s ease-out;  
	}
	div.design_fenetre_fermee#uid#{
		background-color:var(--al-success-color);
	}
	div.design_fenetre_ouverte#uid#{
		background-color:var(--al-danger-color);
	    border-radius: 2px;
	}    
      
	div.design_garage#uid#{
		height:10px; 
  		transition: all 1s ease-out;    
	}      
	div.design_garage_ouvert#uid#{
  		 background: repeating-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, #f00 20px, #f00 40px);
	}
	div.design_garage_ferme#uid#{
  		background-color:var(--al-success-color);
	}      

	@keyframes clignoter {
  		0%   { opacity:1; }
  		40%   {opacity:0; }
  		100% { opacity:1; }
	}
      
  	</style>
      
	<script>
    jeedom.cmd.update['#id#'] =function(_options){
		//  type (porte, baie, fenetre, garage), orientation, taille a définir dans les options d'affichage de la commande
        // Récupération des valeurs des paramètres
		var orientation = is_numeric('#orientation#') ? parseFloat('#orientation#'):0;
      	var taille = is_numeric('#taille#') ? parseFloat('#taille#'):100;
		var type = ('#type#' !='#'+'type#') ? "#type#":"porte";      
      
		var cmd = $('.cmd[data-cmd_id=#id#]');
		//$('.cmd[data-cmd_uid=#uid#] .DEBUG#uid#').text('orientation:'+orientation+', taille:'+taille+', type:'+type);
      
		cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)

		if ( type == "baie" ) {
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide(); 
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();  
			$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();   
            $('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('width',''+taille+'px');            
      		if (_options.display_value == '1') {
	          	$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').removeClass('design_baie_fermee#uid#').addClass('design_baie_ouverte#uid#');
              	$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('transform','rotate('+orientation+'deg)');            
			}else {
	          	$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').removeClass('design_baie_ouverte#uid#').addClass('design_baie_fermee#uid#');
              	$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('transform','rotate('+orientation+'deg)'); 
	      	}
		}
      
		if ( type == "porte" ) {
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide(); 
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();         
			$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();  
            $('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').css('width',''+taille+'px');            
     		if (_options.display_value == '1') {
        		$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').removeClass('design_porte_fermee#uid#').addClass('design_porte_ouverte#uid#').css('transform','rotate(-45deg)');
              	$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').css('transform','rotate('+orientation+'deg)');              
      		}else {
        		$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').removeClass('design_porte_ouverte#uid#').addClass('design_porte_fermee#uid#').css('transform','rotate(0deg)');
              	$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').css('transform','rotate('+orientation+'deg)');              
      		}
		}      
      
      
		if ( type == "fenetre" ) {    
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide(); 
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();     
			$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();    
            $('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').css('width',''+taille+'px');             
      		if (_options.display_value == '1') {
        		$('.cmd[data-cmd_uid=#uid#] .design_fenetre_l#uid#').removeClass('design_fenetre_fermee#uid#').addClass('design_fenetre_ouverte#uid#').css('transform','rotate(-45deg)');
        		$('.cmd[data-cmd_uid=#uid#] .design_fenetre_r#uid#').removeClass('design_fenetre_fermee#uid#').addClass('design_fenetre_ouverte#uid#').css('transform','rotate(45deg)');
              	$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').css('transform','rotate('+orientation+'deg)');              
      		}else {
        		$('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').removeClass('design_fenetre_ouverte#uid#').addClass('design_fenetre_fermee#uid#').css('transform','rotate(0deg)');
              	$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').css('transform','rotate('+orientation+'deg)');              
      		}        
		}

      	if ( type == "garage" ) {   
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide(); 
        	$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();  
			$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();  
            $('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('width',''+taille+'px');              
          
            if (_options.display_value == '1') {
        		$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').removeClass('design_garage_ferme#uid#').addClass('design_garage_ouvert#uid#');
      		}else {
        		$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').removeClass('design_garage_ouvert#uid#').addClass('design_garage_ferme#uid#');
      		}
            $('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('transform','rotate('+orientation+'deg)'); 
        }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
  
</div>

Le résultat est comme les widgets originaux mais plus simple à utiliser et administrer dans un seul

design

si il y a des bugs ou des erreurs, n’hésitez pas à corriger

kaktusatomik · Janvier 21, 2021, 6:30

Beau boulot

bornich · Janvier 21, 2021, 6:34

super intéressant !!!

Nemeraud · Janvier 21, 2021, 7:15

Je n’ai fait que regrouper tes codes et ajouter les options des widgets

Nemeraud · Janvier 22, 2021, 7:41

Bonjour à tous

voici une version VOLET dynamique en info/numerique

<div style="padding:10px; min-width:30px; min-height:30px;" class="cmd cmd-widget container-fluid cursor #history#" data-type="info" data-subtype="numeric" data-template="Volet2D" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
	<div class="content-sm">     
        <div class="iconCmdVoletroulant#id#">
            <div class="design_voletroulant#uid#" style="position: absolute; transform-origin: top left;"></div>
        </div>
      
    </div> 
 	<div class="DEBUG#uid#"></div>
	<style> 
	div.design_voletroulant#uid#{   
		height:10px; 
  		transition: all 1s ease-out;    
	}
	div.design_voletroulant_ferme#uid#{
		background-color:var(--al-success-color);
	}
	div.design_voletroulant_ouvert#uid#{
		background-color:var(--al-danger-color);
	}
  	</style>
      
	<script>
    jeedom.cmd.update['#id#'] =function(_options){
         // orientation, taille a définir dans les options d'affichage de la commande
        // Récupération des valeurs des paramètres
		var orientation = is_numeric('#orientation#') ? parseFloat('#orientation#'):0;
      	var taille = is_numeric('#taille#') ? parseFloat('#taille#'):100; 
        // Récupération des valeurs internes
        var ouverture = 100-_options.display_value;
		var cmd = $('.cmd[data-cmd_id=#id#]');
        // DEBUG
		//$('.cmd[data-cmd_uid=#uid#] .DEBUG#uid#').text('orientation:'+orientation+', taille:'+taille+', ouverture:'+ouverture);
        // AFFICHAGE
		cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
        $('.cmd[data-cmd_uid=#uid#] .iconCmdVoletroulant#id#').css('width',''+taille+'px');       
       
        if (ouverture == 100) {
	          $('.cmd[data-cmd_uid=#uid#] .design_voletroulant#uid#').removeClass('design_voletroulant_ouvert#uid#').addClass('design_voletroulant_ferme#uid#').css('width','100%');         
              $('.cmd[data-cmd_uid=#uid#] .design_voletroulant#uid#').css('transform','rotate('+orientation+'deg)');            
		}else {
			  $('.cmd[data-cmd_uid=#uid#] .design_voletroulant#uid#').removeClass('design_voletroulant_ferme#uid#').addClass('design_voletroulant_ouvert#uid#').css('width',''+ouverture+'%');
              $('.cmd[data-cmd_uid=#uid#] .design_voletroulant#uid#').css('transform','rotate('+orientation+'deg)'); 
	    }  
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
  
</div>

Sur ce dernier widget, la rotation pour l’orientation de la ligne est visite à l’affichage du widget

savez vous si il est possible de cacher cette rotation ?

merci

metroveinte · Janvier 22, 2021, 12:47

J’ai testé votre widget et dans le tableau il s’affiche et fonctionne correctement.

Mais lorsqu’on ajoute la commande à une mise en page, elle apparaît comme « undefined ».

la commande est configurée comme suit:

Est-ce que je manque quelque chose ?

Merci beaucoup pour votre travail !
Je m’excuse pour mon français, j’utilise un traducteur.

Salvialf · Janvier 22, 2021, 12:49

Hello,

Did you add comments at the beginning of the code ?

If so just put your comments just after the first line of code and it will be ok.

metroveinte · Janvier 22, 2021, 12:58

C’était le problème, j’ai supprimé les commentaires et cela a bien fonctionné.
Je vais déplacer ou noter la liste des paramètres possibles du widget à un autre endroit.

Merci beaucoup Salviaf, aujourd’hui j’ai appris quelque chose de nouveau, comme chaque jour dans ce forum.

Félicitations

Nemeraud · Janvier 22, 2021, 2:33

@metroveinte Vous pouvez l’ajouter en haut du code mais avec les balises de commentaire

<!-- type (porte, baie, fenetre, garage), orientation, taille a définir dans les options d'affichage de la commande -->

j’ai ajouté la ligne dans le code du haut, en français désolé, mon anglais n’est pas aussi bon que celui de @Salvialf (déjà que mon français n’est pas terrible…)

bon we

Salvialf · Janvier 22, 2021, 2:36

Salut @Nemeraud,

Comme je viens de l’expliquer juste au-dessus, si ton code commence par des commentaires, le widget ne s’affichera pas sur le design mais affichera undefined. Il faut mettre les commentaires après la 1ère ligne de code.

Nemeraud · Janvier 22, 2021, 2:37

A bon ? je pensais qu’il n’avait pas mis les bonnes balises

ok merci, je savais pas

Salvialf · Janvier 22, 2021, 2:39

lol il a eu cette erreur car il avait ajouté des commentaires dès le début. C’est vrai que j’aurai pu ajouter la VF

Nemeraud · Janvier 22, 2021, 2:41

j’avais compris ton message en anglais
mais je pensais qu’il avait mis le texte en brute, sans les 

j’ai jamais mis de commentaire en 1er ligne, on en apprend tous les jours avec Jeedom

metroveinte · Janvier 24, 2021, 8:06

J’ai utilisé les bonnes étiquettes, mais comme le souligne Salviaf, le problème était de les utiliser dès le début.

dsigmoun · Avril 17, 2021, 5:39

Bonjour à tous,

Merci pour ce super ce widget.

Il semble que l’orientation ne fonctionne pas sur le type garage. Je ne vois pas d’indication d’orientation dans le code, et je suis incapable de rajouter du code.

Quelqu’un pourrait-il m’aider à l’ajouter ?

Nemeraud · Avril 17, 2021, 6:54

J’ai corrigé le code sur le poste initial pour l’orientation garage, merci pour l’info

dsigmoun · Avril 17, 2021, 2:52

merci @Nemeraud

L’orientation se fait bien maintenant. Par contre, le nom des variable apparait désormais.

Nemeraud · Avril 17, 2021, 6:03

J’ai laissé le débug faut juste commenter la ligne, je vais corriger

dsigmoun · Avril 17, 2021, 7:19

Merci @Nemeraud

bibikid · Juillet 24, 2021, 3:36

Bonjour,
J’ai transfomé mon design réalisé en V4.0 par ton évolution en V4.1

Je rencontre un soucis avec les baies coulissantes orientées à 90. Elles ne coulissent pas mais basculent comme pour les fenêtres!

As-tu une piste ?