Forum Communauté Jeedom

Code : Tout sélectionner

<div class="container">
    <div class="row icone_temp">
        <div class="col-sm-2"></div>
        <div class="col-sm-8"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row fp_mode">
        <div class="col-sm-8 col-md-12"></div>
    </div>
    <div class="row consigne">
        <div class="col-xs-12"></div>
    </div>
    <div class="row"></div>
</div>

Code : Tout sélectionner

<div style="width:90px;height:100%;vertical-align: top;" class="cmd #history# tooltips" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center>
        <span style="font-size: 3em;" id="iconCmd#id#"></span>
    </center>
</div>
<script>
    if ('#state#' == 'CONF') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-conf"></i>');
    } else if ('#state#' == 'CONF-1') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-conf"></i><sup style="font-size: 0.5em; margin-left: 5px">-1</sup>');
    } else if ('#state#' == 'CONF-2') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-conf"></i><sup style="font-size: 0.5em; margin-left: 5px">-2</sup>');
    } else if ('#state#' == 'ECO') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-eco"></i>');
    } else if ('#state#' == 'HG') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-hg"></i>');
    } else if ('#state#' == 'OFF') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-off"></i>');
    }
</script>

Code : Tout sélectionner

<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" style="min-width:180px;min-height:60px;font-size: 10;" >
  <center>
    <div class="btn-group">
      <div style="width: 100%; text-align:center;">
        <div style="float: left; margin-top: 8px; width: 35px; height: 80px; font-size: 2em; text-align: center; line-height: 30px;">
          <a style="cursor: pointer;" class="btn-sm bt_plus" ><i class="fa fa-2x fa-plus-square"></i></a>
          <br />
          <a style="cursor: pointer;" class="btn-sm bt_minus" ><i class="fa fa-2x fa-minus-square"></i></a>
        </div>
      </div>
    </div>	
  </center>  
  <script>
	var sbjs_Timer#id#;
    
    /***** Init *****/
    $('#valeur#id#').text( parseFloat(#state#).toFixed(1) );
    setTimeout(sbjs_updateIcon#id#, 50);
                          
    /***** Commande + *****/
	$('.cmd[data-cmd_id=#id#] .bt_plus').on('click', function () {
      	$('#valeur#id#').text( parseFloat(parseFloat($('#valeur#id#').text()) + 0.5 ).toFixed(1) );
      	setTimeout(sbjs_updateIcon#id#, 50);

		clearTimeout(sbjs_Timer#id#);
		sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);
	});      
                         
	/***** Commande - *****/
    $('.cmd[data-cmd_id=#id#] .bt_minus').on('click', function () {
		$('#valeur#id#').text( parseFloat(parseFloat($('#valeur#id#').text()) - 0.5 ).toFixed(1) );
      	setTimeout(sbjs_updateIcon#id#, 50);
 
		clearTimeout(sbjs_Timer#id#);
		sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);
	});

    
    /***** Envoi de la nouvelle consigne *****/
	function sbjs_Save#id#() {
		jeedom.cmd.execute({
        	id: '#id#', 
			value: { slider: parseFloat( $('#valeur#id#').text() ) }
        });
	}
  </script>
</div>

Code : Tout sélectionner

             $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_open.png" height=120 width=105 />');

Code : Tout sélectionner

<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="min-height:50px;">
	<center>
	<table WIDTH="70%">
		<tr>
			<td ROWSPAN=2>
			<h3 class="nest__icon"></h3>
			</td>
            
			<td style="width: 110px;font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#<br>
			<input style="color:white;vertical-align:middle;font-size: 2.5em; font-weight: bold;background-color: transparent;border-color : transparent" type="text" class="value form-control" value="#state# #unite#" disabled style=""/>
			</td>

			<td VALIGN=bottom>
			<a style="cursor: pointer;" class="btn-sm bt_plus" data-toggle="button" aria-pressed="false" autocomplete="off" ><i class="fa fa-2x fa-arrow-up"></i></a>
			</td>
            
		</tr>         
		<tr>
			<td style="font-weight: bold;font-size : 12px;">Valeur Courante<br>
			<input style="color:white;font-size: 2.5em; font-weight: bold;background-color: transparent;border-color : transparent" type="text" class="valeur form-control" value="#unite#" disabled style=""/>
			</td>
            
			<td>
			<a style="cursor: pointer;" class="btn-sm bt_minus" ><i class="fa fa-2x fa-arrow-down"></i></a>
			</td>
            
		</tr>
	</table>
	</center>
            
<style>
  .nest__icon {
  content: "";
//  position: absolute;
 // left: 60%;
//  bottom: -8px;
  width:60px;
  height: 55px;
//  margin-left: 24px;
  background: url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/nest-leaf.png) no-repeat center center;
  background-size: cover;
}
</style>

<script>
    // mis en forme tableau
    // http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
                                     
$('.cmd[data-cmd_uid=#uid#] .bt_plus').on('click', function () {
	$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "red");
	jeedom.cmd.update['#id#']({display_value:parseFloat($('.cmd[data-cmd_uid=#uid#] .value').val()) + 0.5});
	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
});

$('.cmd[data-cmd_uid=#uid#] .bt_minus').on('click', function () {  
	$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "red");
	jeedom.cmd.update['#id#']({display_value:parseFloat($('.cmd[data-cmd_uid=#uid#] .value').val()) - 0.5});
	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
});

$('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
	if (typeof timerHandle !== 'undefined') {
		clearTimeout(timerHandle);
		timerHandle = setTimeout(function() {
			jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
			$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "");
			$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "");  
		}, 1000)
	} else {
		timerHandle = setTimeout(function() {
			jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
			$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "");
			$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "");  
		}, 1000)
	}    
});

jeedom.cmd.update['#id#'] = function(_options){
	jeedom.cmd.byId({ // Récupération de l'id
		id: #id#,
		success:  function(resulat) {    
			valeur#id#=(resulat.configuration.value); 
			valeur#id#=valeur#id#.replace(/#/g,''); // retré de #
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: valeur#id#,
				success:  function(valeur_courante) {   
					$('.cmd[data-cmd_uid=#uid#] .valeur').val(valeur_courante.toFixed(1)+' #unite#');
				}
			});   
		}
	});  
	if (_options.display_value == '0') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/off.png');
	} else if (_options.display_value >= '1' && _options.display_value <= '18') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/nest-leaf.png)');
	} else if (_options.display_value >= '18.5' && _options.display_value <= '19.5') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/moon.png)');
	} else if (_options.display_value >= '20' && _options.display_value <= '21') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/sun-7568.png)');
	} else if (_options.display_value >= '21.5') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/duck.png)');
	}  
	var valeur = parseFloat(_options.display_value).toFixed(1);   
	$('.cmd[data-cmd_id=#id#] .value').val(valeur+' #unite#');
}

jeedom.cmd.update['#id#']({display_value:'#state#'});

</script>
  </div>