Mise à jour de widgets sans refresh

dvb · Message par **dvb** » 17 mars 2019, 21:38

Salvialf a écrit : ↑
17 mars 2019, 19:56
J'avais prévu de faire un widget incluant toutes les séries de visuels volets/veluxs au choix par paramètre optionnel... on vient d'en discuter avec JAG on va essayer de faire en sorte de commencer à bosser dessus demain pour pouvoir le mettre à disposition au plus vite...

Super nouvelle ! Merci à tous les deux

dvb · Message par **dvb** » 17 mars 2019, 22:43

Salvialf a écrit : ↑
17 mars 2019, 19:32
La c'est le tag #name# alors qu'avant c'était un paramètre optionnel "type".

Je vais faire en sorte de le suivre au mieux après je ne peux pas savoir à l'avance les évolutions futures de jeedom. Je test déjà le widget en bêta jeedom ça permet de voir venir (la v4 par exemple).

Il n'y a pas de raison que le fonctionnement des widgets subisse à nouveau une telle modification... qui date de plus d'un an d'ailleurs et qui était une très bonne évolution.

Je viens de découvrir et de tester ton widget grâce à ce fil.
C'est du beau boulot, et de plus on peut ajouter ses propres icônes => parfait !

Je vais pouvoir créer de beaux designs ...
Thanks !

dvb · Message par **dvb** » 17 mars 2019, 23:35

En faisant un (gros) ménage dans les widgets tierces, j'en ai viré deux par erreur :
"température" et "round".

A tout hasard, sauriez-vous comment les retrouver sur le market ?

Merci.

Widgets développés · Message par **Salvialf** » 18 mars 2019, 20:28

dvb a écrit : ↑
17 mars 2019, 22:43
Je viens de découvrir et de tester ton widget grâce à ce fil.
C'est du beau boulot, et de plus on peut ajouter ses propres icônes => parfait !

Je vais pouvoir créer de beaux designs ...
Thanks !

Merci @dvb,

Pour vous tenir informé, malgré le fait que mon jeedom de test ait planté suite à MAJ en 3.3.18 et que j'ai du réinstaller une nouvelle VM, j'ai bien avancé sur le widget info/numérique pour affichage de la position des volets.
En fait il ne me reste plus qu'à ajouter les différentes séries de visuels au choix à savoir: 9 types de volets, 3 types de veluxs et 3 types de rideaux/store... donc si tout va bien demain je serais en mesure de le mettre à disposition sur le market.

Faut que je trouve où mettre l'affichage du pourcentage d'ouverture si je le garde...?!?

dvb · Message par **dvb** » 18 mars 2019, 22:25

Salvialf a écrit : ↑
18 mars 2019, 20:28
...
Faut que je trouve où mettre l'affichage du pourcentage d'ouverture si je le garde...?!?

Bonne nouvelle

Si ce n'est pas trop lourd, je propose :
- de le garder
- de pouvoir choisir de l'afficher ou pas via une case à cocher.

Quant à l'endroit ou le mettre, je dirais ;
- soit juste au-dessus des boutons de commande (sous l’icône volet donc).
- soit juste au-dessus de l’icône volet.

My 2 cents.

dvb · Message par **dvb** » 18 mars 2019, 22:57

dvb a écrit : ↑
17 mars 2019, 23:35
En faisant un (gros) ménage dans les widgets tierces, j'en ai viré deux par erreur :
"température" et "round".

A tout hasard, sauriez-vous comment les retrouver sur le market ?

Merci.

J'ai retrouvé celui de droite. C'est mobile.info.numeric.Round
Problème, le market ne propose quela version mobile.

Ci-dessous le code, quelqu'un saurait l'adapter pour qu'il refonctionne sur le Dashboard ?

<div class="#history# tooltips cmd cmd-widget roundMobileWidget#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#" >
<div class="DisplayMobileRound#id#">
<div class="DisplayMobileRoundIMG#id#" id="iconRound#id#">
</div>
<div class="roundMobileState#id#">
<span class="intMobileRound#id#" id="intRoundValue#id#"></span>
<span class="decMobileRound#id#" id="decRoundValue#id#"></span>
</div>
<div class="roundMobileUnite#id#">#unite#</div>
</div>
<style>

@font-face {
font-family: stateFont;
src:url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.eot?") format("eot"),
url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.woff") format("woff"),
url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.ttf") format("truetype"),
url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.svg#appleberry") format("svg");
font-weight:normal;font-style:normal;
}

@font-face {
font-family: stateFont2;
src: url('plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/jennifer.ttf');
}

@font-face {
font-family: uniteFont;
src: url('plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/erasdust.ttf');
}

div.roundMobileWidget#id# {
width: 80px;
min-height: 80px;
display:inline-block;
}

div.DisplayMobileRound#id# {
position: relative;
}

div.DisplayMobileRoundIMG#id# {
position:absolute;
width: 100%;
z-index:1;

}

span.intMobileRound#id# {
font-family: stateFont;
font-size:20px;
color: white;
}

span.decMobileRound#id# {
font-family: stateFont;
font-size:15px;
color: white;
}

div.roundMobileState#id# {
position:absolute;
width: 100%;
text-align: center;
top: 25px;
z-index:2;
}

div.roundMobileUnite#id# {
font-family: uniteFont;
font-size:9px;
color: white;
position:absolute;
width: 100%;
text-align: center;
top: 47px;
z-index:2;
}

img.roundMobileImg#id# {
width: 80px;
height: 80px;
}

</style>

<script>
function TypeCouleur(valeur){
var typeCouleur;
if(/true|false/.test(valeur)){
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
typeCouleur = 'html';
}else if(/^rgb$?[012]?\d\d,?[012]?\d\d,?[012]?\d\d$$/i.test(valeur)){
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
typeCouleur = 'nom';
}else if(/^\d{1,}:.+\&?/i.test(valeur)){
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#,\-]+\&/i.test(valeur)){
typeCouleur = 'array';
}else{
typeCouleur = 'inconnu';
}
return typeCouleur;
}

valeur2 = "#couleur#";
var test = TypeCouleur(valeur2);
//console.log('Test : '+test);
if(test == 'objet'){
var arrayVal = valeur2.split('&'), cleVal;
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
para[cleVal[0]] = cleVal[1];
if(parseFloat("#state#") >= parseFloat(cleVal[0])){
couleur2 = para[cleVal[0]];
//console.log('Couleur : '+couleur2);
}
}
} else if (test == 'nom'){
couleur2 = "#couleur#";
//console.log('Couleur nom : '+couleur2);

} else {
couleur2 = "grey";
//console.log('Couleur autre : '+couleur2);
}
//console.log('Couleur : '+couleur2);
//Récupération des décimales
var valeur = #state#;
var intNum = Math.floor(valeur);
var decNum = Math.round((valeur - intNum) * 10);

//Calcul du nombre de chiffres
var valeurChaineInt = intNum + "";
longueurint = valeurChaineInt.length;

if (longueurint > 3) {
if (decNum != 0) {
$('span.intMobileRound#id#').css('font-size','15px');
$('span.decMobileRound#id#').css('font-size','10px');
$('div.roundState#id#').css('top','28px');
}
else if (longueurint > 5) {
$('span.intMobileRound#id#').css('font-size','15px');
$('span.decMobileRound#id#').css('font-size','10px');
$('div.roundMobileState#id#').css('top','28px');
}
}

testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
fontcolor2 = "#fontcolor#";
if (testfontcolor == false) {
$('span.intMobileRound#id#').css('color',fontcolor2);
$('span.decMobileRound#id#').css('color',fontcolor2);
$('div.roundMobileUnite#id#').css('color',fontcolor2);
console.log('Font color2 : '+ fontcolor2);
}

$('#intRoundValue#id#').text(intNum);
if (decNum != 0) {
$('#decRoundValue#id#').text('. '+decNum);
}

if( '#reflet#' == 'yes' ) {
if ( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow' ) {
$('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/'+couleur2+'_wr.png" class="roundMobileImg#id#">');
}
else {
$('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/grey_wr.png" class="roundMobileImg#id#">');
}
}
else {
if( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow') {
$('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/'+couleur2+'.png" class="roundMobileImg#id#">');
}
else {
$('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/grey.png" class="roundMobileImg#id#">');
}
}

tailleRound = (is_numeric('#taille#')) ? parseFloat('#taille#') : 1.0;
widthRound = Math.round ( 80*tailleRound );
ecart = Math.abs(Math.round((80 - widthRound)/2));
$('div.roundMobileWidget#id#').css('width',''+widthRound+'px');
$('div.roundMobileWidget#id#').css('min-height',''+widthRound+'px');
$('div.DisplayMobileRound#id#').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
if ( tailleRound < 1.0 ) {
$('div.DisplayMobileRoundIMG#id#').css('left','-'+(ecart-5)+'px');
}

</script>
</div>

jpty · Message par **jpty** » 18 mars 2019, 23:32

dvb a écrit : ↑
18 mars 2019, 22:57

dvb a écrit : ↑
17 mars 2019, 23:35
En faisant un (gros) ménage dans les widgets tierces, j'en ai viré deux par erreur :
"température" et "round".

A tout hasard, sauriez-vous comment les retrouver sur le market ?

Merci.
J'ai retrouvé celui de droite. C'est mobile.info.numeric.Round
Problème, le market ne propose quela version mobile.

Et celui de gauche c'est dashboard.info.numeric.tempIMG qui n'est plus sur le market.

Claude69 · Message par **Claude69** » 18 mars 2019, 23:53

Le code de tempimg (non compatible V3)

Code : Tout sélectionner

<div style="width:142px;min-height:110px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center><span class='cmdName' style="font-weight: bold;font-size : 0.8em;width: 65px;height: 17px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span></center>
    <div style="margin:5px;position:relative;width:65px;height:80px;float: left;line-height: 20px;">
        <br>
        <span style="margin-left: 5px;font-weight: bold;font-size: 2em;margin-top: 5px;">#state#</span>
        <br>
        <span style="font-size: 1em;font-weight: bold;margin-top: 5px;">#unite#</span>
        <!-- A activer si vous voulez avoir les statistiques -->
        <!--<span style="line-height:10px;font-size: 0.7em;font-weight: bold;float: left;text-align: justify;#displayHistory#">
        <span title='Min' class='tooltips left'>Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
        <span title='Moyenne' class='tooltips'>Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
        <span title='Max' class='tooltips'>Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i></span>-->
    </div>
    <div style="margin-right:5px;position:relative;width:62px;height:64px;float: left;">
        <span id="imgCmd#id#"></span>
   </div>
  
 
   <script>
        $(function() {
            if ('#state#' <= 15) {
              $('#imgCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempBleu.png" />');
            }
            else if ('#state#' > 15 && '#state#' <= 22) {
                $('#imgCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempOrange.png" />');
            }
            else {
                $('#imgCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempRouge.png" />');
            }
        });
    </script>
  
</div>

cadavor · Message par **cadavor** » 19 mars 2019, 10:54

dvb a écrit : ↑

18 mars 2019, 22:57

dvb a écrit : ↑
17 mars 2019, 23:35
En faisant un (gros) ménage dans les widgets tierces, j'en ai viré deux par erreur :
"température" et "round".

A tout hasard, sauriez-vous comment les retrouver sur le market ?

Merci.

J'ai retrouvé celui de droite. C'est mobile.info.numeric.Round
Problème, le market ne propose quela version mobile.

Ci-dessous le code, quelqu'un saurait l'adapter pour qu'il refonctionne sur le Dashboard ?

Code : Tout sélectionner

<div class="#history# tooltips cmd cmd-widget roundMobileWidget#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#" >
    <div class="DisplayMobileRound#id#">
   		<div class="DisplayMobileRoundIMG#id#" id="iconRound#id#">
      	</div>
		<div class="roundMobileState#id#">
        	<span class="intMobileRound#id#" id="intRoundValue#id#"></span>
          	<span class="decMobileRound#id#" id="decRoundValue#id#"></span>
      	</div>
        <div class="roundMobileUnite#id#">#unite#</div>
  	</div>
<style>

  @font-face {
    font-family: stateFont;
    src:url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.eot?") format("eot"),
      	url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.woff") format("woff"),
      	url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.ttf") format("truetype"),
      	url("plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/appleberry.svg#appleberry") format("svg");
    font-weight:normal;font-style:normal;
  }

  @font-face {
    font-family: stateFont2;
    src: url('plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('plugins/widget/core/template/mobile/cmd.info.numeric.Round/fonts/erasdust.ttf');
  }

  div.roundMobileWidget#id# {
       	width: 80px;
       	min-height: 80px;
    	display:inline-block;
  }
  
  div.DisplayMobileRound#id# {
    position: relative;
  	}
  
  div.DisplayMobileRoundIMG#id# {
    position:absolute;
    width: 100%;
    z-index:1;

  }
  
  span.intMobileRound#id# {
    font-family: stateFont; 
    font-size:20px;
  	color: white;
  }
  
  span.decMobileRound#id# {
    font-family: stateFont; 
    font-size:15px;
  	color: white;
  }
    
  div.roundMobileState#id# {
    position:absolute;
    width: 100%;
    text-align: center;
    top: 25px;
    z-index:2;
  }
  
  div.roundMobileUnite#id# {
    font-family: uniteFont; 
    font-size:9px;
    color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    top: 47px;
    z-index:2;
  }
  
  img.roundMobileImg#id# {
    width: 80px;
    height: 80px;
  }

</style>
  
<script>  
  	function TypeCouleur(valeur){
        var typeCouleur;
        if(/true|false/.test(valeur)){
          typeCouleur = 'bool';
        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
          typeCouleur = 'html';
        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
          typeCouleur = 'rgb';
        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
          typeCouleur = 'nom';
        }else if(/^\d{1,}:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }
  
  	valeur2 = "#couleur#";
  	var test = TypeCouleur(valeur2);
  	//console.log('Test : '+test);
	if(test == 'objet'){
      	var arrayVal = valeur2.split('&'), cleVal;
    	para = new Object();
    	for(var cle in arrayVal){
    		cleVal = arrayVal[cle].split(':');
        	para[cleVal[0]] = cleVal[1];
        	if(parseFloat("#state#") >= parseFloat(cleVal[0])){
            	couleur2 = para[cleVal[0]];
  				//console.log('Couleur : '+couleur2);
        	}
    	}
    } else if (test == 'nom'){
        couleur2 = "#couleur#";
      	//console.log('Couleur nom : '+couleur2);

    } else {
      	couleur2 = "grey";
      	//console.log('Couleur autre : '+couleur2);
    }
	//console.log('Couleur : '+couleur2);
  	//Récupération des décimales
  	var valeur = #state#;
  	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);
  	
  	//Calcul du nombre de chiffres
  	var valeurChaineInt = intNum + "";
  	longueurint = valeurChaineInt.length;	
  	
  	if (longueurint > 3) {
      	if (decNum != 0) {
      		$('span.intMobileRound#id#').css('font-size','15px');
      		$('span.decMobileRound#id#').css('font-size','10px');
      		$('div.roundState#id#').css('top','28px');
        }
      	else if (longueurint > 5) {
          	$('span.intMobileRound#id#').css('font-size','15px');
      		$('span.decMobileRound#id#').css('font-size','10px');
      		$('div.roundMobileState#id#').css('top','28px');
        }
    }
  	
  	testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
  	fontcolor2 = "#fontcolor#";
    if (testfontcolor == false) {
      	$('span.intMobileRound#id#').css('color',fontcolor2);
      	$('span.decMobileRound#id#').css('color',fontcolor2);
      	$('div.roundMobileUnite#id#').css('color',fontcolor2);
       	console.log('Font color2 : '+ fontcolor2);
    }
  
   	$('#intRoundValue#id#').text(intNum);
  	if (decNum != 0) {
    	$('#decRoundValue#id#').text('. '+decNum);
    }
  	
  	if( '#reflet#'  == 'yes' ) {
        if ( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow' ) {
            $('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/'+couleur2+'_wr.png" class="roundMobileImg#id#">');
        }
        else {
            $('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/grey_wr.png" class="roundMobileImg#id#">');
        }
    }
  	else {
        if( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow') {
            $('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/'+couleur2+'.png" class="roundMobileImg#id#">');
        }
        else {
            $('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/grey.png" class="roundMobileImg#id#">');
        } 
    }

  	tailleRound = (is_numeric('#taille#')) ? parseFloat('#taille#') : 1.0;
	widthRound = Math.round ( 80*tailleRound );
  	ecart = Math.abs(Math.round((80 - widthRound)/2));
 	$('div.roundMobileWidget#id#').css('width',''+widthRound+'px');
  	$('div.roundMobileWidget#id#').css('min-height',''+widthRound+'px');
  	$('div.DisplayMobileRound#id#').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
  	if ( tailleRound < 1.0 ) {
          $('div.DisplayMobileRoundIMG#id#').css('left','-'+(ecart-5)+'px');
   	}
          
  </script> 
</div>

Ce widget a un sujet sur le forum : viewtopic.php?f=29&t=3959
J'y posterai le code compatible V3 dans la journée.

cadavor · Message par **cadavor** » 19 mars 2019, 11:06

Claude69 a écrit : ↑
18 mars 2019, 23:53
Le code de tempimg (non compatible V3)
...

Voici la version compatible V3 :

Code : Tout sélectionner

<div style="width:142px;min-height:110px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <center><span class='cmdName' style="font-weight: bold;font-size : 0.8em;width: 65px;height: 17px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span></center>
    <div style="margin:5px;position:relative;width:65px;height:80px;float: left;line-height: 20px;">
        <br>
        <span id="valueCmd#id#" style="margin-left: 5px;font-weight: bold;font-size: 2em;margin-top: 5px;">#state#</span>
        <br>
        <span style="font-size: 1em;font-weight: bold;margin-top: 5px;">#unite#</span>
        <span style="line-height:10px;font-size: 0.7em;font-weight: bold;float: left;text-align: justify;#displayHistory#">
        <span title='Min' class='tooltips left'>Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br>
        <span title='Moyenne' class='tooltips'>Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br>
        <span title='Max' class='tooltips'>Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br><i class="#tendance#"</i>
        </span>
    </div>
    <div style="margin-right:5px;position:relative;width:62px;height:64px;float: left;">
        <span id="imgCmd#id#"></span>
   </div>
  
 
   <script>
        $(function() {
     jeedom.cmd.update['#id#'] = function(_options){
     		$('#valueCmd#id#').html(_options.display_value);
           if (_options.display_value <= 15) {
              $('#imgCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempBleu.png" />');
            }
            else if (_options.display_value > 15 && _options.display_value <= 22) {
                $('#imgCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempOrange.png" />');
            }
            else {
                $('#imgCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempRouge.png" />');
            }
                  $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
        });
            jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'}); // init
    </script>
  
</div>

A tester...

Widgets développés · Message par **Salvialf** » 19 mars 2019, 18:39

dvb a écrit : ↑
18 mars 2019, 22:25
Bonne nouvelle

Si ce n'est pas trop lourd, je propose :
- de le garder
- de pouvoir choisir de l'afficher ou pas via une case à cocher.

Quant à l'endroit ou le mettre, je dirais ;
- soit juste au-dessus des boutons de commande (sous l’icône volet donc).
- soit juste au-dessus de l’icône volet.

My 2 cents.

Le widget est sur le market sous le nom 'MultiOuvrants' (catégorie 'ouverture') et il existe un topic sur le forum.

Je vous laisse découvrir tout ça

dvb · Message par **dvb** » 19 mars 2019, 22:35

cadavor a écrit : ↑
19 mars 2019, 10:54
Ce widget a un sujet sur le forum : viewtopic.php?f=29&t=3959
J'y posterai le code compatible V3 dans la journée.

Top, je retrouve enfin mes "round" thermostat qui changent de couleur en mode chauffe

Salvialf a écrit : ↑
19 mars 2019, 18:39

dvb a écrit : ↑
18 mars 2019, 22:25
Bonne nouvelle

Si ce n'est pas trop lourd, je propose :
- de le garder
- de pouvoir choisir de l'afficher ou pas via une case à cocher.

Quant à l'endroit ou le mettre, je dirais ;
- soit juste au-dessus des boutons de commande (sous l’icône volet donc).
- soit juste au-dessus de l’icône volet.

My 2 cents.
Le widget est sur le market sous le nom 'MultiOuvrants' (catégorie 'ouverture') et il existe un topic sur le forum.

Je vous laisse découvrir tout ça

D&jà ! Waow, je m'en vais tester de suite ...

=> Un grand merci à tous les deux !

Question subsidiaire.
Je suis à la recherche de ces widgets compatibles v3, je ne les trouve plus sur le market:

Hygrométrie

Température

Est-ce vous savez ou les trouver, ou partager les codes à jour pour dashboard et mobile ?

boostdu622010 · Message par **boostdu622010** » 20 mars 2019, 11:04

j'ai le même problème sur le widget store_and_windows , je suis obligé de faire F5 pour réactualisé l'affichage du widget,

j'ai essayé la fonction jeedom.update mais sans résultat positif

jpty · Message par **jpty** » 22 mars 2019, 18:56

cadavor a écrit : ↑

19 mars 2019, 11:06

Claude69 a écrit : ↑
18 mars 2019, 23:53
Le code de tempimg (non compatible V3)
...

Voici la version compatible V3 :

Code : Tout sélectionner

   <script>
        $(function() {
     jeedom.cmd.update['#id#'] = function(_options){
     		$('#valueCmd#id#').html(_options.display_value);
           if (_options.display_value <= 15) {
              $('#imgCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempBleu.png" />');
            }
            else if (_options.display_value > 15 && _options.display_value <= 22) {
                $('#imgCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempOrange.png" />');
            }
            else {
                $('#imgCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.tempIMG/TempRouge.png" />');
            }
                  $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
        });
            jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'}); // init
    </script>
  
</div>

A tester...

Ca ne fonctionne pas. Les images ne s'affichent pas . Voir viewtopic.php?f=29&t=44104#p712662

Le code de ce post fonctionne: viewtopic.php?f=29&t=44104&p=712662&hil ... MG#p711841

Blum95 · Message par **Blum95** » 28 mars 2019, 13:05

Moi c'est avec le Store_and_Window que j'ai pas de refresh .

Merci à vous

Blum95 · Message par **Blum95** » 29 mars 2019, 08:15

En faite je constate que j'ai ce soucis sur toutes les tuiles
Que ce soit Zwave (via virtuel ou avec les commandes de base) que mes sondes de températures ou d'ouvertures en 433.

OUARZA · Message par **OUARZA** » 16 avr. 2019, 21:23

Hello la team,
Pouvez-vous me dire ce qui pose problème dans ce widget pour rafraîchir l'information ?
Merci

Code : Tout sélectionner

<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#" data-version="#version#">
    <center>
<!-- A decommenter pour l'affichage du nom -->
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name#</div>
<!---->
        <div style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" id="iconCmd#id#"></div>
    </center>
</div>
<script>
//  A décomenter pour faire disparaître la tuile si il n'y a pas de poubelles (modification de Sshafi)
//	var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
//	if ('#state#'==0) $(tuile).attr('style','display: none;');
	if ('#state#'=='Jaune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');
	if ('#state#'=='Bleue') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_bleue.png" height=70 width=70>');
	if ('#state#'=='Verte') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_verte.png" height=70 width=70>');
	if ('#state#'=='Marron') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_marron.png" height=70 width=70>');
	if ('#state#'=='Grise') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle.png" height=70 width=70>');
  	if ('#state#'=='Aucune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_croix.png" height=70 width=70>');

jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

cadavor · Message par **cadavor** » 17 avr. 2019, 14:12

OUARZA a écrit : ↑

16 avr. 2019, 21:23

Hello la team,
Pouvez-vous me dire ce qui pose problème dans ce widget pour rafraîchir l'information ?
Merci

Code : Tout sélectionner

<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#" data-version="#version#">
    <center>
<!-- A decommenter pour l'affichage du nom -->
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name#</div>
<!---->
        <div style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" id="iconCmd#id#"></div>
    </center>
</div>
<script>
//  A décomenter pour faire disparaître la tuile si il n'y a pas de poubelles (modification de Sshafi)
//	var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
//	if ('#state#'==0) $(tuile).attr('style','display: none;');
	if ('#state#'=='Jaune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');
	if ('#state#'=='Bleue') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_bleue.png" height=70 width=70>');
	if ('#state#'=='Verte') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_verte.png" height=70 width=70>');
	if ('#state#'=='Marron') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_marron.png" height=70 width=70>');
	if ('#state#'=='Grise') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle.png" height=70 width=70>');
  	if ('#state#'=='Aucune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_croix.png" height=70 width=70>');

jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

En l'état il manque la fonction d'update...

Code : Tout sélectionner

<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#" data-version="#version#">
    <center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name#</div>
        <div style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" id="iconCmd#id#"></div>
    </center>
</div>
<script>
     jeedom.cmd.update['#id#'] = function(_options){
//  A décomenter pour faire disparaître la tuile si il n'y a pas de poubelles (modification de Sshafi)
//	var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
//	if (_options.display_value==0) $(tuile).attr('style','display: none;');

	if (_options.display_value=='Jaune') $('#iconCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');
	if (_options.display_value=='Bleue') $('#iconCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_bleue.png" height=70 width=70>');
	if (_options.display_value=='Verte') $('#iconCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_verte.png" height=70 width=70>');
	if (_options.display_value=='Marron') $('#iconCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_marron.png" height=70 width=70>');
	if (_options.display_value=='Grise') $('#iconCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle.png" height=70 width=70>');
  	if (_options.display_value=='Aucune') $('#iconCmd#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_croix.png" height=70 width=70>');
  	
  	$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

OUARZA · Message par **OUARZA** » 17 avr. 2019, 15:34

Bonjour cadavor,
Merci pour ton aide.
Pourtant elle est en bas, n'est-ce pas la même ?

Code : Tout sélectionner

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

Mathieu

cadavor · Message par **cadavor** » 18 avr. 2019, 10:44

OUARZA a écrit : ↑
17 avr. 2019, 15:34
Bonjour cadavor,
Merci pour ton aide.
Pourtant elle est en bas, n'est-ce pas la même ?
Code : Tout sélectionner
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
Mathieu

Ca c'est l'appel de la fonction pour que le widget s'affiche au chargement et ensuite le core jeedom au changement d'états de la commande associée.

Du coup il faut déclarer la fonction sinon l'appel est lancé dans le vide.
Ce que fait cette ligne (le signe = )

Code : Tout sélectionner

jeedom.cmd.update['#id#'] = function(_options){

Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Re: Mise à jour de widgets sans refresh

Qui est en ligne ?