A la recherche du widget ConsoEau

Tags: #<Tag:0x00007fcbb8f9cca8>

Salut

Je suis surement très fatigué ce soir mais impossible de mettre la main sur la derniere version du code de ce widget.

Merci

Voici le code du mien issu de ConsoEau si ça peut te dépanner

<div  class="cmd #history# cmd tooltips cmd-widget compteurIMG#id# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <span class='cmdName' style="font-weight: bold;font-size : 12px;">#name_display#</span>
	<div class= "conso_position#id#">
		<img id="IMGmeter#id#" class="IMGmeter#id#" alt="Meter" >
    	<span class="stateint1_conso#id#"></span> 
    	<span class="stateint2_conso#id#"></span>
        <span class="stateint3_conso#id#"></span>
        <span class="stateint4_conso#id#"></span>
        <span class="statedec1_conso#id#"></span> 
    	<span class="statedec2_conso#id#"></span> 
        <span class="statedec3_conso#id#"></span> 
        <span class="unite_conso#id#">#unite#</span>
	</div>
	<div id="gauge#id#" class=" indicator"></div>
    <!--<div style="#displayHistory# font-size: 0.8em;position:absolute;width:100%;" class="historyDisplay#id#">
		<span title="Min" class="tooltips">#minHistoryValue#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue#</span>|<span title="Max" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
	</div>-->
  			<div class="cmdStats #hide_history#" >
				<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
  			</div> 
  
  
<script>
 
    
    jeedom.cmd.update['#id#'] = function(_options){  
      var valeur=_options.display_value;
      //var valeur=valeur*1000;
      var stri = "0000" + Math.floor(valeur/1000)
      var xi = stri.length;
      var intNum1 = stri.charAt(xi-4);
      var intNum2 = stri.charAt(xi-3);
      var intNum3 = stri.charAt(xi-2);
      var intNum4 = stri.charAt(xi-1);  
      var strd = "00" + Math.floor(Math.round((valeur/1000 - stri) * 100000)/100);
      var xd = strd.length; 
      var decNum1 = strd.charAt(xd-3);
      var decNum2 = strd.charAt(xd-2);
      var decNum3 = strd.charAt(xd-1);      
      
      $('.cmd[data-cmd_id=#id#] .stateint1_conso#id#').text(intNum1);
      $('.cmd[data-cmd_id=#id#] .stateint2_conso#id#').text(intNum2);
      $('.cmd[data-cmd_id=#id#] .stateint3_conso#id#').text(intNum3);
      $('.cmd[data-cmd_id=#id#] .stateint4_conso#id#').text(intNum4);
      $('.cmd[data-cmd_id=#id#] .statedec1_conso#id#').text(decNum1);
      $('.cmd[data-cmd_id=#id#] .statedec2_conso#id#').text(decNum2);
      $('.cmd[data-cmd_id=#id#] .statedec3_conso#id#').text(decNum3);      
      $('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

    document.getElementById("IMGmeter#id#").src="data/customTemplates/dashboard/cmd.info.numeric.Superbricolo_Compteur_Eau_Froide/compteur eau froide.png";
  

  
  	if ('#petit#' == 1) {
    	$('div.compteurIMG#id#').css('width','90px');
      	$('div.compteurIMG#id#').css('min-height','80px');
      	$('div.conso_position#id#').css('left','5px');
      	$('span.statedec1_conso#id#').css('font-size','20px');
        $('span.statedec2_conso#id#').css('font-size','20px');
        $('span.statedec3_conso#id#').css('font-size','20px');
       	$('span.statedec1_conso#id#').css('top','28px');
        $('span.statedec2_conso#id#').css('top','28px');
        $('span.statedec3_conso#id#').css('top','28px');
      	$('span.statedec1_conso#id#').css('right','26px');
        $('span.statedec2_conso#id#').css('right','18px');
        $('span.statedec3_conso#id#').css('right','10px');
      	$('span.stateint1_conso#id#').css('font-size','20px');
        $('span.stateint2_conso#id#').css('font-size','20px');
        $('span.stateint3_conso#id#').css('font-size','20px');
        $('span.stateint4_conso#id#').css('font-size','20px');
      	$('span.stateint1_conso#id#').css('top','28px');
        $('span.stateint2_conso#id#').css('top','28px');
        $('span.stateint3_conso#id#').css('top','28px');
        $('span.stateint4_conso#id#').css('top','28px');
      	$('span.stateint1_conso#id#').css('right','59px');
        $('span.stateint2_conso#id#').css('right','52px');
        $('span.stateint3_conso#id#').css('right','45px');
        $('span.stateint4_conso#id#').css('right','38px');
      	$('span.unite_conso#id#').css('font-size','8px');
      	$('span.unite_conso#id#').css('top','57px');
      	$('span.unite_conso#id#').css('right','30px');
      	$('img.IMGmeter#id#').css('width','80px');
      	$('img.IMGmeter#id#').css('height','80px');
    }
  
</script>  

<style>
@font-face {
    font-family: "Digital-7";
    src:  url("data/fonts/digital-7.eot?") format("eot"),
      url("data/fonts/digital-7.woff") format("woff"),
      url("data/fonts/digital-7.ttf") format("truetype"),
      url("data/fonts/digital-7.svg#Digital-7") format("svg");
    font-weight:normal;
    font-style:normal;
}
 
 
span.stateint1_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	letter-spacing: 2px;
  	color: White;
  	position: absolute;
  	top: 49px;
    right: 144px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
  
  span.stateint2_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	letter-spacing: 2px;
  	color: White;
  	position: absolute;
  	top: 49px;
    right: 134px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
  
  span.stateint3_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	letter-spacing: 2px;
  	color: White;
  	position: absolute;
  	top: 49px;
    right: 124px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
  
  span.stateint4_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	letter-spacing: 2px;
  	color: White;
  	position: absolute;
  	top: 49px;
    right: 114px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
  
span.statedec1_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	color: White;
  	position: absolute;
  	top: 49px;
  	right: 105px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
  
span.statedec2_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	color: White;
  	position: absolute;
  	top: 49px;
  	right: 95px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }

  
span.statedec3_conso#id# {
    font-family: "Digital-7"; 
    font-size:20px;
  	color: White;
  	position: absolute;
  	top: 49px;
  	right: 85px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }

  
span.unite_conso#id# {
    font-size:10px;
  	font-weight: bold;
  	color: #000;
  	position: absolute;
  	top: 33px;
  	right: 110px;
  }

img.IMGmeter#id# {
  	width: 240px;
  	height: 200px;
}
  
div.compteurIMG#id# {
  	width:242px;
  	min-height : 220px;
}
  
div.conso_position#id# {
  	float: center; 
  	position: absolute;
  	left: 1px;
  	top: 20px;
}

</style>
      
</div>

Merci
manque juste les images je pense non ? :slight_smile:

compteur eau froide

Voici l’image. Je pensais que tu n’avais besoins que du code. As tu besoin des fonts également?

1 J'aime

Je veux bien tout si tu le proposes avec tant de gentillesse :smiley:

Merci!

Salut,

Je profites de ce message pour rappeler que les archives restent disponibles notamment concernant les widgets issus du plugin widgets de la V3 :
Index of /archives/widget (jeedom.com)

5 J'aimes

fonts-4.zip.txt (17,5 Ko)
Voici les fonts --> enlever l’exention .txt pour dézipper.

1 J'aime

Merci pour l’info. Je ne le savais pas. :slightly_smiling_face:

1 J'aime

Merci à vous deux !!