Commandes virtuelles et Widget Custom

OUARZA · Octobre 28, 2023, 3:37

Bonjour,
J’ai fait un virtuel et appliqué un widget custom.
Mon problème, c’est que je n’arrive pas à avoir un seul visuel comme j’arrive à le faire avec un widget core.
Comment faire ?
Merci par avance.
Mathieu

<div class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <a class="action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>

  <style  type="text/css">
		
		.buttonIco{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
          height: 45px; /* dimension du bouton 45*/
		  width: 55px;
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}    				
    
    		.buttonImg{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
/*          height: 45px; /* dimension du bouton */
/*		  width: 55px; */
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}
        Gris{
        filter: grayscale(1); 
        }
	</style>
  
  
  <script>
    var srcImg = 'data/img/Radios/'; /* à modifier en fonction de là où se trouve les images*/
    var valueC = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"#FFFFFF"; /* couleur par défaut */
    var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):80; /*largeur par défaut des images */
    var valueS = is_numeric('#fontSize#') ? parseFloat('#fontSize#'):35; /*largeur par défaut des icônes */
    var tailleImg = 'width='+valueL+'px';
    var tailleIco = 'font-size:'+valueS+'px';
    var ColorIco = 'color:'+valueC;
    var styleCar = 'display:inline-block; padding:0px; text-align: center; margin: 5px 9.5px 5px 9.5px;'; /*5 3*/
    var styleRec = 'display:inline-block; padding:0px; text-align: center; margin: 5px 2px 0px 2.5px;';
    if (jeedom.theme['currentTheme'] == 'core2019_Dark') {var ColorTxt = '#FFFFFF;'}
	else {var ColorTxt = '#000000;'};
    
    if('#name#' == 'Radio Scoop') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RadioScoop.png" '+tailleImg+'></div>');
    /* commande pour image */
    else if('#name#' == 'RTL') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>');
    else if('#name#' == 'RTL_On') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>');
    else if('#name#' == 'RTL_Off') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg Gris"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>');
    else if('#name#' == 'RTL 2') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RTL2.png" '+tailleImg+'></div>');
    else if('#name#' == 'Les grosses tetes') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'Lesgrossestetes.png" '+tailleImg+'></div>');
    else if('#name#' == 'Hotmix Hits') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'HotmixHits.png" '+tailleImg+'></div>');
    else if('#name#' == 'Hotmix Dance') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'HotmixDance.png" '+tailleImg+'></div>');
    else if('#name#' == 'Hotmix Frenchy') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'HotmixFrenchy.png" '+tailleImg+'></div>');
    else if('#name#' == 'Europe 1') $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'Europe1.png" '+tailleImg+'></div>');

    /* commande pour icône */
    else if('#name#' == 'Détente 100')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-signal-bars" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'Détente 60')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-signal-bars-fair" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'TV')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon techno-television4" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'Extinction')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon jeedom2-light-bulb7" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'Lecture')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-book-open" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'Couché')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-sunset" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');

    /* Home Cinéma */
    else if('#name#' == 'HC_Ciné')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-camera-movie" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'HC_Off')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-lamp" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'Netflix')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-n icon-red" style="color:#FF0000;'+tailleIco+';'+styleCar+'"></i></div>');

    
/* Garage */
    else if(('#name#' == 'Ouverture totale' && '#id#' == 2782) || '#name#' == 'Garage - Totale')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-garage-car" style="'+ColorIco+';'+tailleIco+';'+styleRec+'"></i></div>');
    else if(('#name#' == 'Ouverture partielle' && '#id#' == 2783) || '#name#' == 'Garage - Partielle')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-garage-open" style="'+ColorIco+';'+tailleIco+';'+styleRec+'"></i></div>');
    else if(('#name#' == 'Fermeture' && '#id#' == 227243) || '#name#' == 'Garage - Fermeture')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-garage" style="'+ColorIco+';'+tailleIco+';'+styleRec+'"></i></div>');

/* Portail */
    else if(('#name#' == 'Ouverture totale' && '#id#' == 1423) || '#name#' == 'Portail - Totale')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-portail_ouvert" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if(('#name#' == 'Ouverture partielle' && '#id#' == 1424) || '#name#' == 'Portail - Partielle')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-portail_semi" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if(('#name#' == 'Ouverture partielle 1min' && '#id#' == 1406) || '#name#' == 'Portail - 30s')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-timer" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if(('#name#' == 'Fermeture' && '#id#' == 8242) || '#name#' == 'Portail - Fermeture')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-portail_ferme" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* toggle */
    else if('#name#' == 'toggle-on')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-toggle-on" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'toggle-off')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-toggle-off" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* plus/moins */
    else if('#name#' == 'plus' || '#name#' == 'Plus' || '#name#' == 'PlusStore')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-circle-plus" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'moins' || '#name#' == 'Moins' || '#name#' == 'MoinsStore')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-circle-minus" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* on/off */
    else if('#name#' == 'on' || '#name#' == 'On' || '#name#' == 'ON')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-on" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'off' || '#name#' == 'Off' || '#name#' == 'OFF')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-off" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* monter/descendre/stop */
    else if('#name#' == 'monter' || '#name#' == 'Monter' || '#name#' == 'OuvrirStore')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-circle-up1" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'descendre' || '#name#' == 'Descendre' || '#name#' == 'FermerStore')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-circle-down1" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'StopStore')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="icon mafont-circle-stop1" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* actif/inactif */
    else if('#name#' == 'actif' || '#name#' == 'Actif')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-actif" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'inactif' || '#name#' == 'Inactif')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-inactif" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* auto/manu */
    else if('#name#' == 'auto' || '#name#' == 'Auto' || '#name#' == 'auto_on')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-auto" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'manu' || '#name#' == 'Manu' || '#name#' == 'manu_off')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-manu" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* start/stop */
    else if('#name#' == 'start' || '#name#' == 'Start' || '#name#' == 'Nettoyage_Lancer' || '#name#' == 'On_surpresseur')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-start" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'stop' || '#name#' == 'Stop' || '#name#' == 'Nettoyage_Arreter')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-stop" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    
/* Saison/Hivernage */
    else if('#name#' == 'saison' || '#name#' == 'Saison')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-saison" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    else if('#name#' == 'hivernage' || '#name#' == 'Hivernage')$('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIcoa"><i class="icon mafont-hivernage" style="'+ColorTxt+';'+tailleIco+';'+styleCar+'"></i></div>');
    
	/* permet de mettre un panneau attention si le nom de la commande n'est détectée */
    else $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="fas fa-exclamation-triangle" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>');
    
    $('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
  </script>
</div>

Mips · Octobre 28, 2023, 3:47

Bonjour,

Mets un espace entre on/off et le reste dans le nom.

Salvialf · Octobre 28, 2023, 3:51

Salut,

A première vue il manque le code javascript permettant de cacher l’une ou l’autre des commandes en fonction de son nom et de l’état de la commande info liée :

    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {

        if (_options.display_value >= 1 || _options.display_value == 'on') {
          if (jeedom.cmd.normalizeName('#name#') == 'on') {
            cmd.unseen()
          } else {
            cmd.seen()
          }
        } else {
          if (jeedom.cmd.normalizeName('#name#') == 'off') {
            cmd.unseen()
          } else {
            cmd.seen()
          }
        }
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '#id#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])

OUARZA · Octobre 28, 2023, 4:55

Hello,
Merci pour votre aide.
@Mips Si je mets un espace, aucune image ne s’affiche.
@Salvialf Je l’ai mis, mais pas mieux.

Mathieu

Mips · Octobre 28, 2023, 5:38

Il faut adapter ton javascript en conséquence bien entendu

OUARZA · Octobre 28, 2023, 6:04

@Mips ,
Cela veut-il dire que je dois mettre ce code à chaque ligne où j’ai une image différente ?

OUARZA · Octobre 29, 2023, 9:35

Hello @Mips @Salvialf ,
J’ai simplifié et tenté d’ajouter ce que vous m’avez donné.
Plus rien ne s’affiche… Je pense que ça vient de

   if (_options.display_value >= 1 || _options.display_value == 'on')

A quoi cela sert ?

<div class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <a class="action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>

  <style  type="text/css">
		
		.buttonIco{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
          height: 45px; /* dimension du bouton 45*/
		  width: 55px;
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}    				
    
    		.buttonImg{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
/*          height: 45px; /* dimension du bouton */
/*		  width: 55px; */
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}
        .Gris{
        filter: grayscale(1); 
        }
	</style>
  
  
  <script>
    var srcImg = 'data/img/Radios/'; /* à modifier en fonction de là où se trouve les images*/
    var valueC = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"#FFFFFF"; /* couleur par défaut */
    var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):80; /*largeur par défaut des images */
    var valueS = is_numeric('#fontSize#') ? parseFloat('#fontSize#'):35; /*largeur par défaut des icônes */
    var tailleImg = 'width='+valueL+'px';
    var tailleIco = 'font-size:'+valueS+'px';
    var ColorIco = 'color:'+valueC;
    var styleCar = 'display:inline-block; padding:0px; text-align: center; margin: 5px 9.5px 5px 9.5px;'; /*5 3*/
    var styleRec = 'display:inline-block; padding:0px; text-align: center; margin: 5px 2px 0px 2.5px;';
    if (jeedom.theme['currentTheme'] == 'core2019_Dark') {var ColorTxt = '#FFFFFF;'}
	else {var ColorTxt = '#000000;'};
    
	
	    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {

        if (_options.display_value >= 1 || _options.display_value == 'on') {
          if (jeedom.cmd.normalizeName('#name#') == 'RTL_On') {
            cmd.unseen('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>')
          } else {
            cmd.seen()
          }
        } else {
          if (jeedom.cmd.normalizeName('#name#') == 'RTL_Off') {
            cmd.unseen('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg Gris"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>')
          } else {
            cmd.seen('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonIco"><i class="fas fa-exclamation-triangle" style="'+ColorIco+';'+tailleIco+';'+styleCar+'"></i></div>')
          }
        }
      }
    })

   jeedom.cmd.refreshValue([{ cmd_id: '#id#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
    
    $('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
 
  </script>
</div>

Mips · Octobre 29, 2023, 9:39

C’est bizarre comme question: tu demandes à quoi ton code sert?

Si ce n’est pas ton code, pourquoi ne pas simplement faire un widget image avec les outils du core? Il y aura 0 code à écrire, juste chosir l’image pour le on et pour le off.

OUARZA · Octobre 29, 2023, 9:48

A l’origine, j’ai un seul et même code qui s’applique sur toutes mes commandes avec du CSS.
Ce code, je l’appliquai sur mes commandes « mode » où il n’y a pas de On/Off.
A l’époque @Phpvarious m’avait beaucoup aidé à faire cela.

Aujourd’hui, je cherche à l’appliquer sur des commandes On/Off et gardant le CSS.
Mathieu

OUARZA · Octobre 29, 2023, 11:20

Je suis navré, je n’y arrive pas

<div class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <a class="action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>

  <style  type="text/css">
		
		.buttonIco{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
          height: 45px; /* dimension du bouton 45*/
		  width: 55px;
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}    				
    
    		.buttonImg{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
/*          height: 45px; /* dimension du bouton */
/*		  width: 55px; */
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}
        .Gris{
        filter: grayscale(1); 
        }
	</style>
  
  
  <script>
    var srcImg = 'data/img/Radios/'; /* à modifier en fonction de là où se trouve les images*/
    var valueC = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"#FFFFFF"; /* couleur par défaut */
    var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):80; /*largeur par défaut des images */
    var valueS = is_numeric('#fontSize#') ? parseFloat('#fontSize#'):35; /*largeur par défaut des icônes */
    var tailleImg = 'width='+valueL+'px';
    var tailleIco = 'font-size:'+valueS+'px';
    var ColorIco = 'color:'+valueC;
    var styleCar = 'display:inline-block; padding:0px; text-align: center; margin: 5px 9.5px 5px 9.5px;'; /*5 3*/
    var styleRec = 'display:inline-block; padding:0px; text-align: center; margin: 5px 2px 0px 2.5px;';
    if (jeedom.theme['currentTheme'] == 'core2019_Dark') {var ColorTxt = '#FFFFFF;'}
	else {var ColorTxt = '#000000;'};

 jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
    
      if (['1', 1, '99', 99, 'on'].includes(_options.display_value)) {
        if (jeedom.cmd.normalizeName('#name#') == 'RTL_On') {
         $('.cmd[data-cmd_id=#id#]').hide()          
        } else {
          $('.cmd[data-cmd_id=#id#]').show()
          $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>')
        }
      } else if (['0', 0, 'off'].includes(_options.display_value)) {
        if (jeedom.cmd.normalizeName('#name#') == 'RTL_Off') {
          $('.cmd[data-cmd_id=#id#]').hide()
        } else {
          $('.cmd[data-cmd_id=#id#]').show()
          $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg Gris"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>')
          }
        }
      }
    })
    

    
    jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', normalizeName: '#name#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])

    $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
      jeedom.cmd.execute({id: '#id#'})
    })
  </script>    
</div>

Mips · Octobre 29, 2023, 12:23

Désolé impossible pour moi d’aider pour l’instant.
Lire et debug du code sur un téléphone c’est pas l’idéal.

OUARZA · Octobre 29, 2023, 4:18

Bon, j’ai gratté le truc dans tous les sens, et je pense que je suis pas loin

<div class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <a class="action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>

  <style  type="text/css">
		
		.buttonIco{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
          height: 45px; /* dimension du bouton 45*/
		  width: 55px;
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}    				
    
    		.buttonImg{
		
/*		  color: #000; */
		  background: #444;
		  background: linear-gradient( #555, #2C2C2C);	 	
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		  margin: 2px;
		  cursor: pointer;
		  border: 1px solid #bbb;
		  overflow: visible;
/*		  font: bold 13px arial, helvetica, sans-serif; */
/*          height: 45px; /* dimension du bouton */
/*		  width: 55px; */
		  text-decoration: none;
		  white-space: nowrap;
		  background-color: #ddd;
		  transition: background-color .2s ease-out;
		  background-clip: padding-box;
		  border-radius: 5px;
		  box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
						 0 -1px 0 rgba( 255, 255, 255, 0.4);
		  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
		} 
 
		buttonImg:hover{
			 color: #222;
			 background: #555;
			 background: linear-gradient( #777, #333);
		}
		
		buttonImg:active{
			 color: #000;
			 background: #444;
			 background: linear-gradient( #555, #2C2C2C);
			 box-shadow: 1px 1px 10px black inset, 
						 0 1px 0 rgba( 255, 255, 255, 0.4);
		}
        .Gris{
        filter: grayscale(1); 
        }
	</style>
  
  
  <script>
    var srcImg = 'data/img/Radios/'; /* à modifier en fonction de là où se trouve les images*/
    var valueC = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"#FFFFFF"; /* couleur par défaut */
    var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):80; /*largeur par défaut des images */
    var valueS = is_numeric('#fontSize#') ? parseFloat('#fontSize#'):35; /*largeur par défaut des icônes */
    var tailleImg = 'width='+valueL+'px';
    var tailleIco = 'font-size:'+valueS+'px';
    var ColorIco = 'color:'+valueC;
    var styleCar = 'display:inline-block; padding:0px; text-align: center; margin: 5px 9.5px 5px 9.5px;'; /*5 3*/
    var styleRec = 'display:inline-block; padding:0px; text-align: center; margin: 5px 2px 0px 2.5px;';
    if (jeedom.theme['currentTheme'] == 'core2019_Dark') {var ColorTxt = '#FFFFFF;'}
	else {var ColorTxt = '#000000;'};

 jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
    
      if (['1', 1, '99', 99, 'on'].includes(_options.display_value)) {
        if (jeedom.cmd.normalizeName('#name#') == 'RTL_On') {
         $('.cmd[data-cmd_id=#id#]').hide()          
        } else {
          $('.cmd[data-cmd_id=#id#]').show()
          $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>')
        }
      } else if (['0', 0, 'off'].includes(_options.display_value)) {
        if (jeedom.cmd.normalizeName('#name#') == 'RTL_Off') {
          $('.cmd[data-cmd_id=#id#]').hide()
        } else {
          $('.cmd[data-cmd_id=#id#]').show()
          $('.cmd[data-cmd_uid=#uid#] .action').append('<div class="buttonImg Gris"><img style="'+styleCar+'" src="'+srcImg+'RTL.png" '+tailleImg+'></div>')
          }
        }
      }
    })
    

    
    jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', normalizeName: '#name#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])

 //   $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
 //     jeedom.cmd.execute({id: '#id#'})
 //   })
  </script>    
</div>

Je tente de me dépanner avec l’outil de dev:

Mais voilà, je n’arrive pas à avancer.

OUARZA · Novembre 3, 2023, 10:51

Hello,
Auriez-vous un peu de votre temps pour m’aider ?
Merci par avance.
Mathieu

noodom · Novembre 3, 2023, 11:35

Salut,

display: inline-block;
*display: inline;

Je n’ai pas regardé le fond de ton problème,
mais dans ton css, le * est suspect (en plus du fait que tu déclares déjà un display juste au dessus.

OUARZA · Novembre 4, 2023, 9:43

Hello @noodom,
Je viens de commenter la ligne, mais effectivement, pas de changement.
J’avais fait un widget pour une commande info.
Aujourd’hui je tente de le transposer pour une commande action, sauf que j’ai 2 images à la place une.

Mathieu