Salut à tous,
J’essaie de me mettre à la personnalisation de Jeedom au travers des widget mais je vous avoue que je galère un peu .
En effet je viens de domotiser ma VMC avec un relay switch pour l’allumer et l’éteindre.
J’ai créé un Widget « Ventilo » en mode facile on/off , j’ai mis l’icone du ventilo sur les deux états (on et off) .
Et ensuite dans le code j’ai ajouté une classe au style du bouton « on » avec une animation basic css de rotation.
Quand je valide et que j’applique le widget à la commande du relay switch je vois bien mon ventilo à la place de l’ampoule, dans le code source de la page je vois bien ma class d’animation attribué au bouton. Mais mon animation elle ne fonction pas du tout … Alors qu’elle fonctionne bien en html / css pure.
Voici le code du widget , la class css est « SpinMe »
<div style="width:90px; min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
<center class="spinMe">
<span class="cmdName" style="font-weight: bold;font-size : 12px;display: none;">#valueName#</span><br>
<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
</center>
<!-- Ne Pas Supprimer gros -->
<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon jeedom-ventilo'></i>","icon2":"<i class='icon techno-ventilateur'></i>"}]]></script>
<!-- Ne Pas Supprimer -->
<script>
if(jeedom.cmd.normalizeName('#name#') == 'on'){
$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon techno-ventilateur"></i>');
}else{
$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedom-ventilo spinMe"></i>');
}
jeedom.cmd.update['#id#'] = function(_options){
if(jeedom.cmd.normalizeName('#name#') == 'on'){
if(parseInt(_options.display_value) >= 1 ) {
$('.cmd[data-cmd_uid=#uid#]').hide();
}else{
$('.cmd[data-cmd_uid=#uid#]').show();
}
}else{
if(parseInt(_options.display_value) <= 0 ) {
$('.cmd[data-cmd_uid=#uid#]').hide();
}else{
$('.cmd[data-cmd_uid=#uid#]').show();
}
}
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
$('.cmd[data-cmd_uid=#uid#] .iconCmd').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script>
<style>
spinMe {
display block;
position : absolute;
width : 50px;
height:50px;
background:red;
animation-name: spinAnim;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spinAnim {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
</style>
</div>
Auriez-vous des idées ? J’ai même créer la class SpinMe et l’animation, dans les paramètres généraux de jeedom mais cela ne change pas le résultat …
Il est certain que je fais un trucs pas correctement …
Help !
Merci d’avance,
Neo
