A la recherche du widget ConsoEau

guilloome · Avril 7, 2021, 7:07

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

superbricolo · Avril 7, 2021, 8:21

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>

guilloome · Avril 8, 2021, 6:44

Merci
manque juste les images je pense non ?

superbricolo · Avril 8, 2021, 6:49

compteur eau froide

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

guilloome · Avril 8, 2021, 7:17

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

Merci!

Salvialf · Avril 8, 2021, 7:32

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)

superbricolo · Avril 8, 2021, 7:50

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

superbricolo · Avril 8, 2021, 7:53

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

guilloome · Avril 8, 2021, 8:00

Merci à vous deux !!