J'ai essayé de faire un nouveau widget animé
et je bloque à nouveau sur la partie script. J'ai envie d'apprendre ! (le css, ca rentre bien mais la partie JS c'est plus dure pour moi)But :
c'est une déclinaison de action.other.light avec une image de sapin et une animation de guirlande qui clignote
J'aimerais que quand c'est Off alors image du sapin OFF et que quand c'est ON alors c'est l'animation CSS qui est jouée.
Je ne sais pas comment dans le script afficher l'animation à la place de l'image OFF.
voila ma tentative d'un cmd.action.other:
Code : Tout sélectionner
<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="info" data-subtype="numeric" data-cmd_id="#id#">
<center>
<span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconCmd#id#"></span>
</center>
<style>
#iconCmd#id# {
width: 54px;
height: 75px;
background-repeat: no-repeat;
position: relative;
margin-left:0px;
/* Chrome, Safari, Opera */
-webkit-animation-name: mycolor;
-webkit-animation-duration: 3s;
-webkit-animation-direction: normal;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}
/* Firefox */
-mos-animation-name: mycolor;
-mos-animation-duration: 3s;
-mos-animation-direction: normal;
-mos-animation-delay: 2s;
-mos-animation-iteration-count: infinite;
-mos-animation-play-state: running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mycolor {
0% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png');}
25% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png');}
50% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png');}
75% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png');}
100% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png');}
}
/* Chrome, Safari, Opera */
@-mos-keyframes mycolor {
0% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png');}
25% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png');}
50% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png');}
75% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png');}
100% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png');}
}
</style>
<script>
if ('#displayName#' == 1 || '#displayName#' == '1') {
$('.cmd[data-cmd_id=#id#] .cmdName').show();
}
var cmdName = '#name#';
if ('#state#' == '1' || '#state#' == 1) {
$('#iconCmd#id#').css('-webkit-animation-play-state' , 'running');
if (cmdName.toLowerCase().indexOf('on') == 0) {
$('.cmd[data-cmd_id=#id#]').hide();
}
} else {
$('#iconCmd#id#').css('-webkit-animation-play-state' , 'paused');
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" width="54" height="75"/>');
if (cmdName.toLowerCase().indexOf('off') == 0) {
$('.cmd[data-cmd_id=#id#]').hide();
}
}
$('.cmd[data-cmd_id=#id#] .action').off();
$('.cmd[data-cmd_id=#id#] .action').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script> 
