Aide pour un widget

Bonjour,

Je cherche à faire un widget qui ressemble à ca :

image

Pour le faire, je me suis largement inspirer du code de Salvialf

Mon code actuel :

<div class="cmd #history# tooltips cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
 <div class="title #hide_name#">
    <div class="cmdName">#valueName#</div> 
  </div>
  	<center>
		<span class="iconCmd" style= "font-size: 3.3em;"></span>
	</center>	
  	<!--<div id="iconCmdAction" class="cursor tooltips"></div>-->
        	<div><label class="switch#uid#">
        	<input class="toggle#uid#" type="checkbox">
          	<span class="slider#uid#"></span>
        </label></div>  
  
  <span class="timeCmd label label-default" data-type="info" data-cmd_id="#value_id#"></span>
<style>
		.switch#uid# {
  			position: relative;
  			display: inline-block;
  			width: 35px; /* 60px */
  			height: 17px; /* 34px */
		}

		.switch#uid# input {
  			opacity: 0;
  			width: 0;
  			height: 0;
			border-radius: 50%;           
		}

		.slider#uid# {
  			position: absolute;
  			cursor: pointer;
  			top: 0;
  			left: 0;
  			right: 0;
  			bottom: 0;
  			background-color: #ccc;
  			-webkit-transition: .4s;
  			transition: .4s;      
          	border-radius: 14px;    /* 25px */
		}

		.slider#uid#:before {
  			position: absolute;
  			content: "";
  			height: 14px; /* 26px */
  			width: 14px; /* 26px */
  			left: 3px; /* 4px */
  			bottom: 2px; /* 4px */
  			background-color: white;
  			-webkit-transition: .4s;
  			transition: .4s;
			border-radius: 16px;       /* 25px */    
		}

		input:checked + .slider#uid# {
  			background-color: green;
          	border-radius: 14px;  /* 25px */
		}

		input:focus + .slider#uid# {
  			box-shadow: 0 0 1px green;
          	border-radius: 14px;  /* 25px */
		}

		input:checked + .slider#uid#:before {
  			-webkit-transform: translateX(15px); /* 26px */
  			-ms-transform: translateX(15px); /* 26px */
  			transform: translateX(15px); /* 26px */
           border-radius: 14px;  /* 25px */
		}
      
        
  
</style>
<script>    
  jeedom.cmd.update['#id#'] = function(_options){
	var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):75;
  	var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):75;
  	var paramTaille = 'height='+valueH+'px width='+valueL+'px';
 	var valueType = ('#type#' !='#'+'type#') ? "#type#":"defaut";
  	var valueFile = ('#extension#' !='#'+'extension#') ? "#extension#":"png";
    var cmd = $('.cmd[data-cmd_id=#id#]');
      
      if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
        cmd.attr('data-state','on')
        if (jeedom.cmd.normalizeName('#name#') == 'on') {
          			$('.cmd[data-cmd_id=#id#]').hide();
                  	$('.toggle#uid#').prop('checked', false);
        }else{
 					$('.cmd[data-cmd_id=#id#]').show();
             		$('.toggle#uid#').prop('checked', true);        }
      } else {
        cmd.attr('data-state','off');
        if (jeedom.cmd.normalizeName('#name#') == 'off') {
                  	$('.cmd[data-cmd_id=#id#]').hide();
                  	$('.toggle#uid#').prop('checked', true);  
                }else{
                  	$('.cmd[data-cmd_id=#id#]').show();
                    $('.toggle#uid#').prop('checked', false);       }
      }
          
        jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
 
    
  cmd.attr('title', '#name_display#')      
  }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    $('.cmd[data-cmd_uid=#uid#] #iconCmdAction').off().on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
  </script>
</div>

Mes deux problémes :

1/ il y a un tooltip avec un icone et je souhaiterais l’enlever
2/ Je souhaiterais afficher directement ce même icone mais je ne sais pas faire …

Merci d’avance pour votre aide

Salut,

Le tooltip semble venir de ce code :

<div><label class="switch#uid#">
        	<input class="toggle#uid#" type="checkbox">
          	<span class="slider#uid#"></span>
        </label></div>  

Si tu veux l’afficher directement, il faudrait donc le sortir du </label>

je ne pense pas, j’ai isoler ce code et je n’ai pas le tooltip

Salut,

Pas le temps de regarder en détail sur le tél mais le tooltip semble venir de l’attribut title à priori:

cmd.attr('title', '#name_display#')

Pour le reste j’essaye de regarder dès que possible mais là je me retrouve seul avec mes 3 p’tits mecs à compter d’aujourd’hui :expressionless:

Edit: C’est l’icône que tu as défini sur la commande si j’ai bien suivi… tu peux essayer de l’afficher en remplaçant la ligne au-dessus par un truc dans ce genre:

cmd.empty().append('#name_display#');

…à peaufiner !

je suis con mais je ne trouve pas le ligne

cmd.attr('title', '#name_display#')

:smile:

        jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
 
  *****************************  
======> cmd.attr('title', '#name_display#')  <===== 
  ******************************
 
  }
    jeedom.cmd.update['#id#'] xxxxxxxxxxxxxxxxxx

je me suis embrouillé dans mes copier / coller. je retrouve le code … je suis encore trop con

quand je mets la nouvelle ligne, j’ai bien l’icone mais tout le reste disparait.

Je peux pas avoir un truc du genre : #valueName#, avec #icon#

De mémoire #name_display# prend le nom et l’icône de la commande.

L’icône est dans Jeedom elle peut donc être affichée facilement.

Mais j’ai du mal à comprendre ce que tu veux à la lecture du code… Tu veux un bouton toggle ? sur une commande action/autre ?

Tu es en V4 ? que ce soit V3 ou V4 tu peux faire un bouton on/off avec 2 images checked/unckecked ce qui est plus facile à gérer qu’une checkbox.

oui je n’ai pas donné beaucoup d’info.
Je suis en V4. Je veux un widget Action sur une commande On/Off.
Effectivement, la V4 le fait mais dans mon widget, j’ai un effet de style, et je veux aussi pouvoir ajuster le widget comme je veux … d’ou ma demande

Cool merci pour les infos complémentaires… Je m’en doutais un peu que tu voulais une checkbox pour l’effet :wink:

Donc si j’ai bien compris tu veux afficher le nom Etat + l’icône à côté en plus du toggle c’est bien ça ? C’est quelle icône que tu veux ?

je te confirme que

cmd.attr('title', '#name_display#')

supprime bien le tooltip …
Quand je remplace la ligne mon toogle ne s’affiche plus.

En enfin, je veux afficher l’icone de la commande, mais dans l’idéal, j’aimerais qu’il ne soit pas attaché à #name_display#, car je le voudrais en plus gros …

Et surtout, merci pour l’aide

PS ; j’ai cherché dans la doc mais j’ai rien trouvé

Je tombe ici par hasard et il se trouve que j’ai implémenté un widget similaire ce week-end.

Par choix le CSS est déporté dans la personnalisation avancée, mais il serait possible de l’intégrer au CSS du Widget

/* Custom toggle button */
.fhu-custom-toggle > input{
  display:none;
}

.fhu-custom-toggle > label {
  position: relative; display: inline-block;
  width: 5em; height: 2.5em;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
}

.fhu-custom-toggle > label::after {
  position: absolute; content:'';
  width: 2em; height: 2em;
  top: 0.25em; left: 0.25em;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: linear-gradient(#f5f5f5 10%, #eee);
  box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
}

.fhu-custom-toggle > label::before {
  position: absolute; content:'';
  width: 4em; height: 1.5em;
  top: 0.5em; left: 0.5em;
  border-radius: 0.75em;
  transition: 250ms ease-in-out;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0;
  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
}

.fhu-custom-toggle > input:checked + label::before {
  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset
}

.fhu-custom-toggle > input:checked + label::after {
	left: 2.75em;
}	

Et le code du widget (ici appelé cmd.action.other.FhuToggleButton.html)

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div class="content-xs">
        <div class="title ">
            <div class="cmdName">#name_display#</div>
        </div>
        <div class="fhu-custom-toggle action">
            <input type="checkbox" id="ipt#uid#" />
            <label for="ipt#uid#"></label>
        </div>
    </div>
    <script>
        jeedom.cmd.update['#id#'] = function(_options) {
            console.log(_options.display_value);
            if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' ||
                _options.display_value == 99 || _options.display_value == 'on') {
                $("#ipt#uid#").value(1);
            } else {
                $("#ipt#uid#").value(0);
            }
        }
        jeedom.cmd.update['#id#']({
            display_value: '#state#'
        });

        $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function() {
            jeedom.cmd.execute({
                id: '#id#'
            });
        });
        if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other' &&
            $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
            $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
        }
        if ("#name#" != '#name_display#') {
            $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title', "#name#")
        }
    </script>
</div>
1 « J'aime »

@ cyrile.cresson
j’ai copié ton code sans le tooltip mais bizarrement j’ai beau cliquer l’icone change mais pas l’info .
Si quelqu’un avait une idéee

image

image