Je souhaiterai réaliser un widget de type info (basé sur l'état d'un capteur) ouvert/fermé dont l'icône change en fonction de l'état. Mais sous la forme d'un bouton !
Pourquoi car je souhaite mettre une zone par dessus dans mon design qui lancera une action par dessus, donc j'aimerai qu'il conserve l'aspect bouton.
Comment faire cela ?
Je suis parti d'un widget info, oui, mais il a tout sauf l'aspect voulu...
Code : Tout sélectionner
<div style="background-color:rgba(0,0,0,0.1) !important;border-color : transparent !important;width:65px;min-height:65px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2.5em;font-weight: bold;position:relative;top:6px" class="iconCmd"></span>
</center>
<script>
jeedom.cmd.update['#id#'] =function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
if (_options.display_value == '1') {
$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-garage-ouvert" style="font-size:50px;color:red;"</i>');
}else {
$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-garage-ferme" style="font-size:50px;color:white;"</i>');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Sauf que je n'arrive pas à avoir le vrai aspect bouton que j'ai normalement via des boutons de type action.
Qu'est ce que je loupe ? (pourtant j'ai bien la classe cmd ...).
Qui eux sont basés sur :
Code : Tout sélectionner
<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 2px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<a class="btn btn-sm btn-default action cmdName tooltips" title="#name#" style="background-color:rgba(0,0,0,0.1) !important;border-color : transparent !important;margin-top: 2px;">#name_display#</a>
<script>
$('.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/>');
}
</script>
</span>
Comment puis-je faire cela ?
Et enfin j'aimerai réaliser un bouton de même aspect mais non pas avec une icone mais avec une image stockée sur mon Jeedom. Pas réussi...
Merci !
