Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Widgets information Round et Square

Réservé à l'utilisation et la création de widgets dans JEEDOM
Grzywa
Timide
Messages : 4
Inscription : 24 sept. 2017, 09:42

Re: Widgets information Round et Square

Message par Grzywa » 30 sept. 2017, 02:33

bien ... après la mise à jour de Jeedom 3.1.5, ça marche maintenant.

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 01 oct. 2017, 09:34

Merci @Loic
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 04 déc. 2017, 18:46

Comment expliquez vous cela :
pb Temp.JPG
pb Temp.JPG (10.31 Kio) Consulté 2174 fois
pb Temp1.JPG
pb Temp1.JPG (16.42 Kio) Consulté 2174 fois
Comment puis-je le corriger?
merci
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

Avatar de l’utilisateur
DuplO
Actif
Messages : 716
Inscription : 17 sept. 2015, 14:04

Re: Widgets information Round et Square

Message par DuplO » 05 déc. 2017, 10:37

Hello,

Je ne vais pas aider sur ton souci désolé mais poser une autre question :)

Je vois 3 valeurs sous le widget, est ce min, moy et max ?
Si oui comment fais tu pour les afficher ?

Merci

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 05 déc. 2017, 12:52

DuplO a écrit :
05 déc. 2017, 10:37
Hello,

Je ne vais pas aider sur ton souci désolé mais poser une autre question :)

Je vois 3 valeurs sous le widget, est ce min, moy et max ?
Si oui comment fais tu pour les afficher ?

Merci
Oui c'est bien min moy et max.
L'affichage se fait tout seul via le widget il me semble
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

Avatar de l’utilisateur
DuplO
Actif
Messages : 716
Inscription : 17 sept. 2015, 14:04

Re: Widgets information Round et Square

Message par DuplO » 05 déc. 2017, 13:54

Ba moi j'ai rien ... Snif ...
Je vais gratter.

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 05 déc. 2017, 14:37

DuplO a écrit :
05 déc. 2017, 13:54
Ba moi j'ai rien ... Snif ...
Je vais gratter.
Il faut faire afficher les statistiques dans les propriété(rouage) puis paramètre de ta valeur
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

Avatar de l’utilisateur
DuplO
Actif
Messages : 716
Inscription : 17 sept. 2015, 14:04

Re: Widgets information Round et Square

Message par DuplO » 05 déc. 2017, 15:04

Youpi !!
Merci, je n'aurai pas trouvé car il m'a afflu aller modifier les paramètres dans la configuration des commandes.

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widgets information Round et Square

Message par cadavor » 06 déc. 2017, 13:08

Dams a écrit :
04 déc. 2017, 18:46
Comment expliquez vous cela :

pb Temp.JPG

pb Temp1.JPG

Comment puis-je le corriger?
merci
Essaye :

Code : Tout sélectionner

-80:lightblue&...
Ca marche de suite.

Le code du widget affecte la couleur qui si la valeur est supérieure à celle spécifiée (même si c'est la première)
Donc si la valeur est inférieure à la premiere valeur donnée en paramétre pour définir la couleur, il devrait mettre du gris (mais bon le code n'est pas très propre, il y a des cas qui reste ambigu)
En tout cas chez ca marche très bien ainsi.
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 06 déc. 2017, 14:33

cadavor a écrit :
06 déc. 2017, 13:08
Dams a écrit :
04 déc. 2017, 18:46
Comment expliquez vous cela :

pb Temp.JPG

pb Temp1.JPG

Comment puis-je le corriger?
merci
Essaye :

Code : Tout sélectionner

-80:lightblue&...
Ca marche de suite.

Le code du widget affecte la couleur qui si la valeur est supérieure à celle spécifiée (même si c'est la première)
Donc si la valeur est inférieure à la premiere valeur donnée en paramétre pour définir la couleur, il devrait mettre du gris (mais bon le code n'est pas très propre, il y a des cas qui reste ambigu)
En tout cas chez ca marche très bien ainsi.
Ok merci
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

Chrisbrive
Timide
Messages : 61
Inscription : 06 mai 2017, 22:55
Localisation : Brive la Gaillarde

Re: Widgets information Round et Square

Message par Chrisbrive » 15 janv. 2018, 14:24

Bonjour, merci pour le widget avec un beau design et les différents paramétrages.

Cordialement Christophe

misterbebel
Timide
Messages : 16
Inscription : 27 févr. 2017, 22:19

Re: Widgets information Round et Square

Message par misterbebel » 06 févr. 2018, 23:06

Bonjour,

Super widget, cependant l'image de fond ne s'affiche pas...

Image



Vous avez une idée ?

OniZuk4
Timide
Messages : 47
Inscription : 02 janv. 2015, 10:06

Re: Widgets information Round et Square

Message par OniZuk4 » 05 déc. 2018, 11:20

Même problème chez moi sous IE ou FullyKiosK, mais apparait sous Chrome…
A voir s'il y a possibilité de dépoussiérer le code car ce Widget est fort pratique mais étant invisible sous FK cela est dommage pour la partie Design... :|

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Widgets information Round et Square

Message par MarcF » 14 déc. 2018, 20:12

Bonjour

Merci pour ce widget qui est très joli sur le dashboard
par contre ce matin en version mobile et avec des températures négatives je n'avais plus les ronds mais juste la température
quand les temp sont devenues positives aucun pb
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Widgets information Round et Square

Message par MarcF » 15 déc. 2018, 08:26

MarcF a écrit :
14 déc. 2018, 20:12
Bonjour

Merci pour ce widget qui est très joli sur le dashboard
par contre ce matin en version mobile et avec des températures négatives je n'avais plus les ronds mais juste la température
quand les temp sont devenues positives aucun pb
En complément c'est pire que ça je n'ai pas les mêmes températures négatives dans mon virtuel entre le dashboard et la version mobile
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widgets information Round et Square

Message par cadavor » 19 mars 2019, 11:08

Voici le code compatible avec Jeedom V3
Version PC :

Code : Tout sélectionner

<div class="#history# tooltips cmd cmd-widget roundWidget#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#">
    <span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span>
    <div class="DisplayRound#id#">
   		<div class="DisplayRoundIMG#id#" id="iconRound#id#">
      	</div>
		<div class="roundState#id#">
        	<span class="intRound#id#" id="intRoundValue#id#"></span>
          	<span class="decRound#id#" id="decRoundValue#id#"></span>
      	</div>
        <div class="roundUnite#id#">#unite#</div>
  		<div style="#displayHistory#;" class="history#id# col-xs-12 center-block">
          	<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> 
          	<br><i class="#tendance#"></i>
      	</div>
  	</div>

<style>

  @font-face {
    font-family: stateFont;
    src:url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.eot?") format("eot"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.woff") format("woff"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.ttf") format("truetype"),
      	url("plugins/widget/core/template/dashboard/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/dashboard/cmd.info.numeric.Round/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/erasdust.ttf');
  }
  
  div.roundWidget#id# {
       width: 90px;
       min-height: 90px;
  }
  
  div.DisplayRound#id# {
    position: relative;
  	}
  
  div.DisplayRoundIMG#id# {
    position:absolute;
    width: 100%;
    z-index:1;

  }
  
  span.intRound#id# {
    font-family: stateFont; 
    font-size:20px;
  	color: white;
  }
  
  span.decRound#id# {
    font-family: stateFont; 
    font-size:15px;
  	color: white;
  }
    
  div.roundState#id# {
    position:absolute;
    width: 100%;
    text-align: center;
    top: 25px;
    z-index:2;
  }
  
  div.roundUnite#id# {
    font-family: uniteFont; 
    font-size:12px;
    color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    top: 47px;
    z-index:2;
  }
  
  img.roundImg#id# {
    width: 80px;
    height: 80px;
  }
  
  div.history#id# {
    font-size:8px;
  	color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    top: 80px;
    z-index:2;
  }
</style>
  
<script>
  	function TypeCouleur(valeur) {
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        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+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }
  	  
  	jeedom.cmd.update['#id#'] = function(_options) {
      var validColor = ['red', 'blue', 'lightblue', 'orange', 'black', 'green', 'purple', 'brown', 'pink', 'sand', 'slategrey', 'yellow'];

      var testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
      var fontcolor2 = "#fontcolor#";
      if (testfontcolor == false) {
          $('span.intRound#id#').css('color',fontcolor2);
          $('span.decRound#id#').css('color',fontcolor2);
          $('div.roundUnite#id#').css('color',fontcolor2);
          //console.log('Font color2 : '+ fontcolor2);
      }

      var tailleRound = (is_numeric('#taille#')) ? parseFloat('#taille#') : 1.0;
      var widthRound = Math.round ( 90*tailleRound );
      var heightRound = Math.round ( 90*tailleRound );
      var ecart = Math.abs(Math.round((90 - widthRound)/2));
      if ( '#textshadow#'  == 'yes' ) {
          $('span.intRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('span.decRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('div.roundUnite#id#').css('text-shadow','1px 1px 1px #000000');
      }
      $('div.roundWidget#id#').css('width',''+widthRound+'px');
      $('div.roundWidget#id#').css('min-height',''+heightRound+'px');
      $('div.DisplayRound#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.DisplayRoundIMG#id#').css('left','-'+(ecart-5)+'px');
      }

      //Récupération des décimales
      var valeur = _options.display_value;
      //console.log('valeur : '+valeur);
      //var signNum = Math.sign(valeur);
      var signNum = (valeur>=0)?1:-1;
      var intNum = parseInt(valeur);
      var decNum = Math.abs(Math.round((valeur - intNum) * 10));
      // CAD
      //console.log('signNum : '+signNum);
      //console.log('intNum : '+intNum);
      //console.log('decNum : '+decNum);
      if (decNum >= 10) {
          decNum = 0;
          intNum += (1 * signNum);
      }
      // CAD
      if (signNum == "-1" && intNum == "0") {
          var intNum = "-0";
      }
      //console.log('intNum : '+intNum);

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

      if (longueurint > 3) {
          if (decNum != 0) {
              $('span.intRound#id#').css('font-size','15px');
              $('span.decRound#id#').css('font-size','10px');
              $('div.roundState#id#').css('top','28px');
          }
          else if (longueurint > 5) {
              $('span.intRound#id#').css('font-size','15px');
              $('span.decRound#id#').css('font-size','10px');
              $('div.roundState#id#').css('top','28px');
          }
      }
      
      var color_value = "#couleur#";
      var test = TypeCouleur(color_value);
      //console.log('Test : '+test);
      if (test == 'objet') {
          var arrayVal = color_value.split('&'), cleVal;
          para = new Object();
          for(var cle in arrayVal){
              cleVal = arrayVal[cle].split(':');
              para[cleVal[0]] = cleVal[1];
              if (parseFloat(valeur) >= parseFloat(cleVal[0])) {
                  couleur2 = para[cleVal[0]];
              }
          }
      } else if (test == 'nom') {
          couleur2 = "#couleur#";
      } else {
          couleur2 = "grey";
      }
      
      if ($.inArray(couleur2, validColor) == -1) couleur2 = 'grey';
      
      if ('#reflet#'  == 'yes') {
        couleur2 += "_wr";
      }
      $('#iconRound#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Round/'+couleur2+'.png" class="roundImg#id#">');

      $('#intRoundValue#id#').text(intNum);
      if (decNum != 0) {
          $('#decRoundValue#id#').text('. '+decNum);
      }
      
      $('.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#'});
          
  </script> 
</div>
Version Mobile :

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:12px;
    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;
    }
  
  	jeedom.cmd.update['#id#'] = function(_options) {
      var validColor = ['red', 'blue', 'lightblue', 'orange', 'black', 'green', 'purple', 'brown', 'pink', 'sand', 'slategrey', 'yellow'];
      var 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(_options.display_value) >= 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 = _options.display_value;
  	  //console.log('valeur : '+valeur);
      //var signNum = Math.sign(valeur);
      var signNum = (valeur>=0)?1:-1;
      var intNum = parseInt(valeur);
      var decNum = Math.abs(Math.round((valeur - intNum) * 10));
      // CAD
      //console.log('signNum : '+signNum);
      //console.log('intNum : '+intNum);
      //console.log('decNum : '+decNum);
      if (decNum >= 10) {
          decNum = 0;
          intNum += (1 * signNum);
      }
      // CAD
      if (signNum == "-1" && intNum == "0") {
          var intNum = "-0";
      }
      //console.log('intNum : '+intNum);
  	
      //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 ($.inArray(couleur2, validColor) == -1) couleur2 = 'grey';
      
      if ('#reflet#'  == 'yes') {
        couleur2 += "_wr";
      }
      $('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/'+couleur2+'.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));
      if ( '#textshadow#'  == 'yes' ) {
          $('span.intMobileRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('span.decMobileRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('div.roundMobileUnite#id#').css('text-shadow','1px 1px 1px #000000');
      }
      $('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');
      }
      
      $('.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#'});
          
  </script> 
</div>
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 19 mars 2019, 12:47

cadavor a écrit :
19 mars 2019, 11:08
Voici le code compatible avec Jeedom V3
Version PC :

Code : Tout sélectionner

<div class="#history# tooltips cmd cmd-widget roundWidget#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#">
    <span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span>
    <div class="DisplayRound#id#">
   		<div class="DisplayRoundIMG#id#" id="iconRound#id#">
      	</div>
		<div class="roundState#id#">
        	<span class="intRound#id#" id="intRoundValue#id#"></span>
          	<span class="decRound#id#" id="decRoundValue#id#"></span>
      	</div>
        <div class="roundUnite#id#">#unite#</div>
  		<div style="#displayHistory#;" class="history#id# col-xs-12 center-block">
          	<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> 
          	<br><i class="#tendance#"></i>
      	</div>
  	</div>

<style>

  @font-face {
    font-family: stateFont;
    src:url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.eot?") format("eot"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.woff") format("woff"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.ttf") format("truetype"),
      	url("plugins/widget/core/template/dashboard/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/dashboard/cmd.info.numeric.Round/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/erasdust.ttf');
  }
  
  div.roundWidget#id# {
       width: 90px;
       min-height: 90px;
  }
  
  div.DisplayRound#id# {
    position: relative;
  	}
  
  div.DisplayRoundIMG#id# {
    position:absolute;
    width: 100%;
    z-index:1;

  }
  
  span.intRound#id# {
    font-family: stateFont; 
    font-size:20px;
  	color: white;
  }
  
  span.decRound#id# {
    font-family: stateFont; 
    font-size:15px;
  	color: white;
  }
    
  div.roundState#id# {
    position:absolute;
    width: 100%;
    text-align: center;
    top: 25px;
    z-index:2;
  }
  
  div.roundUnite#id# {
    font-family: uniteFont; 
    font-size:12px;
    color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    top: 47px;
    z-index:2;
  }
  
  img.roundImg#id# {
    width: 80px;
    height: 80px;
  }
  
  div.history#id# {
    font-size:8px;
  	color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    top: 80px;
    z-index:2;
  }
</style>
  
<script>
  	function TypeCouleur(valeur) {
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        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+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }
  	  
  	jeedom.cmd.update['#id#'] = function(_options) {
      var validColor = ['red', 'blue', 'lightblue', 'orange', 'black', 'green', 'purple', 'brown', 'pink', 'sand', 'slategrey', 'yellow'];

      var testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
      var fontcolor2 = "#fontcolor#";
      if (testfontcolor == false) {
          $('span.intRound#id#').css('color',fontcolor2);
          $('span.decRound#id#').css('color',fontcolor2);
          $('div.roundUnite#id#').css('color',fontcolor2);
          //console.log('Font color2 : '+ fontcolor2);
      }

      var tailleRound = (is_numeric('#taille#')) ? parseFloat('#taille#') : 1.0;
      var widthRound = Math.round ( 90*tailleRound );
      var heightRound = Math.round ( 90*tailleRound );
      var ecart = Math.abs(Math.round((90 - widthRound)/2));
      if ( '#textshadow#'  == 'yes' ) {
          $('span.intRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('span.decRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('div.roundUnite#id#').css('text-shadow','1px 1px 1px #000000');
      }
      $('div.roundWidget#id#').css('width',''+widthRound+'px');
      $('div.roundWidget#id#').css('min-height',''+heightRound+'px');
      $('div.DisplayRound#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.DisplayRoundIMG#id#').css('left','-'+(ecart-5)+'px');
      }

      //Récupération des décimales
      var valeur = _options.display_value;
      //console.log('valeur : '+valeur);
      //var signNum = Math.sign(valeur);
      var signNum = (valeur>=0)?1:-1;
      var intNum = parseInt(valeur);
      var decNum = Math.abs(Math.round((valeur - intNum) * 10));
      // CAD
      //console.log('signNum : '+signNum);
      //console.log('intNum : '+intNum);
      //console.log('decNum : '+decNum);
      if (decNum >= 10) {
          decNum = 0;
          intNum += (1 * signNum);
      }
      // CAD
      if (signNum == "-1" && intNum == "0") {
          var intNum = "-0";
      }
      //console.log('intNum : '+intNum);

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

      if (longueurint > 3) {
          if (decNum != 0) {
              $('span.intRound#id#').css('font-size','15px');
              $('span.decRound#id#').css('font-size','10px');
              $('div.roundState#id#').css('top','28px');
          }
          else if (longueurint > 5) {
              $('span.intRound#id#').css('font-size','15px');
              $('span.decRound#id#').css('font-size','10px');
              $('div.roundState#id#').css('top','28px');
          }
      }
      
      var color_value = "#couleur#";
      var test = TypeCouleur(color_value);
      //console.log('Test : '+test);
      if (test == 'objet') {
          var arrayVal = color_value.split('&'), cleVal;
          para = new Object();
          for(var cle in arrayVal){
              cleVal = arrayVal[cle].split(':');
              para[cleVal[0]] = cleVal[1];
              if (parseFloat(valeur) >= parseFloat(cleVal[0])) {
                  couleur2 = para[cleVal[0]];
              }
          }
      } else if (test == 'nom') {
          couleur2 = "#couleur#";
      } else {
          couleur2 = "grey";
      }
      
      if ($.inArray(couleur2, validColor) == -1) couleur2 = 'grey';
      
      if ('#reflet#'  == 'yes') {
        couleur2 += "_wr";
      }
      $('#iconRound#id#').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Round/'+couleur2+'.png" class="roundImg#id#">');

      $('#intRoundValue#id#').text(intNum);
      if (decNum != 0) {
          $('#decRoundValue#id#').text('. '+decNum);
      }
      
      $('.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#'});
          
  </script> 
</div>
Version Mobile :

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:12px;
    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;
    }
  
  	jeedom.cmd.update['#id#'] = function(_options) {
      var validColor = ['red', 'blue', 'lightblue', 'orange', 'black', 'green', 'purple', 'brown', 'pink', 'sand', 'slategrey', 'yellow'];
      var 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(_options.display_value) >= 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 = _options.display_value;
  	  //console.log('valeur : '+valeur);
      //var signNum = Math.sign(valeur);
      var signNum = (valeur>=0)?1:-1;
      var intNum = parseInt(valeur);
      var decNum = Math.abs(Math.round((valeur - intNum) * 10));
      // CAD
      //console.log('signNum : '+signNum);
      //console.log('intNum : '+intNum);
      //console.log('decNum : '+decNum);
      if (decNum >= 10) {
          decNum = 0;
          intNum += (1 * signNum);
      }
      // CAD
      if (signNum == "-1" && intNum == "0") {
          var intNum = "-0";
      }
      //console.log('intNum : '+intNum);
  	
      //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 ($.inArray(couleur2, validColor) == -1) couleur2 = 'grey';
      
      if ('#reflet#'  == 'yes') {
        couleur2 += "_wr";
      }
      $('#iconRound#id#').append('<img src="plugins/widget/core/template/mobile/cmd.info.numeric.Round/'+couleur2+'.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));
      if ( '#textshadow#'  == 'yes' ) {
          $('span.intMobileRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('span.decMobileRound#id#').css('text-shadow','1px 1px 1px #000000');
          $('div.roundMobileUnite#id#').css('text-shadow','1px 1px 1px #000000');
      }
      $('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');
      }
      
      $('.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#'});
          
  </script> 
</div>
Merci
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

dvb
Actif
Messages : 1442
Inscription : 15 févr. 2015, 22:50

Re: Widgets information Round et Square

Message par dvb » 19 mars 2019, 22:40

C'est fonctionnel, merci encore pour le partage :-)
DIY 4*2GHz - 4Go RAM - SSD
- ctrl 1-wire Dallas + IPX800 + X880
- ctrl RFXcom + Oregon (température) + Anémomètre
- ctrl Gen5 + Wallplug + fgrm-222 + Benext + Everspring AN157-6 + Aeon Key Fob+ ...

steve115
Timide
Messages : 13
Inscription : 27 juin 2018, 22:56

Re: Widgets information Round et Square

Message par steve115 » 26 mars 2019, 22:46

Bonjour à tous

excusez ma question de débutant :-)
Je n'arrive pas à comprendre comment changer les paramètres ( par exemple la couleur ).
Je viens de lire plus haut dans les discussions d'afficher les stat ... mais j'ai beau regarder ...

Bref merci d'avance

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widgets information Round et Square

Message par Dams » 27 mars 2019, 06:20

steve115 a écrit :
26 mars 2019, 22:46
Bonjour à tous

excusez ma question de débutant :-)
Je n'arrive pas à comprendre comment changer les paramètres ( par exemple la couleur ).
Je viens de lire plus haut dans les discussions d'afficher les stat ... mais j'ai beau regarder ...

Bref merci d'avance
Il faut aller sur ton équipement par exemple sonde exterieur sur la ligne température cliquer à droite sur le petit rouage, ici tu accède aux réglage de configuration de commande, aller à l'onglet affichage et en bas ajouter avec le bouton + un ou plusieurs paramètres optionnel widget par exemple:
- nom: reflet ; valeur: yes
- nom: couleur ; valeur: blue
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 6 invités