Forum Domoticz en français

Reprenez le contrôle de votre domotique
https://easydomoticz.com/forum/

Jauge

https://easydomoticz.com/forum/viewtopic.php?t=4593

Page 1 sur 1

Jauge

Publié : 18 août 2017, 13:09
par fab0030
Bonjour,
Je travaille tant bien que mal sur une jauge à ajouter à monitor.
J ai un dernier point qui m'emmerde avant de pouvoir partager complètement un truc qui fonctionne.
La jauge ne se rafraîchit pas ! J ai du mal à trouver comment faire.

ci dessous les fichiers html et js
A savoir que je récupère la valeur domoticz via le js (url device+parse json)

html :

Code : Tout sélectionner

	<!--	
			A ajouter dans index.html :
			<script type="text/javascript" src="js/jauge.js"></script>
			<script type="text/javascript" src="js/labels.js"></script>
			
			créer également un fichier vide nommé label.js dans le dossier js
	-->


	
	
<script>
$('head').append('<link rel="stylesheet" href="css/page9.css">');
</script>




<div class="cnt v-wrap">
<div class="v-box">
      <body>

	  
	  
        <div class="chart-gauge"> </div>
		<style type="text/css" src="css/page9.css">
		            .chart-gauge
            {
				position: relative;
				margin:150px auto 0;
				left:-100px;
				width: 400px
             } 
            .chart-first
            {
                fill: #9FBD35;
            }
            .chart-second
            {
                fill: #F2BA3A;
            }
            .chart-third
            {
                fill: #FB3033;
            }

            .needle, .needle-center
			{
                fill: #FFFFFF;
            }
            .text {
                color: "#112864";
                font-size: 16px;
            }

            svg {
              font: 10px sans-serif;
            }
			
			
			
		</style>
		
		
    </body>

	<div>

	<div id="ls_cell9_1"></div><div id="cell9_1">--</div><div id="desc_cell9_1">cell9_1</div>


	</div>
	
<!-- fin contenu -->
</div>		
			
</div>
et .js :

Code : Tout sélectionner

	
///////////////////////// data à modifier //////////////////////////

var name = "Consommation électrique";	// titre jauge

var gaugeMaxValue = 7000; 				// valeur maxi jauge

var ip_domoticz = '192.168.1.55';  		// ip domoticz

var port_domoticz = '8080';				// port domoticz

var id_device = '42'; 					// device domoticz dont on souhaite afficher la jauge //42

var donnee = "Data";			// résultat souhaité - terme trouvé par http://IPDMZ:PORTDMZ/json.htm?type=devices&rid=N°DEVICE

var couleur_titre = "#FFFFFF"			// couleur titre

var couleur_result = "#FFFFFF"			// couleur résultat affiché

var couleur_mini = "#FFFFFF"			// couleur valeur mini jauge

var couleur_milieu = "#FFFFFF"			// couleur valeur moitiée jauge

var couleur_maxi = "#FFFFFF"			// couleur valeur maxi jauge

//////////////////////////////////////////////////////////////////////////////



//////////////////////////////////////////////////////////////////////////////



var value = 0;							// ne pas modifier



$(document).ready(function () {	
	getval(showalert);
	

});


function getval( callback ){

   var url = 'http://' + ip_domoticz + ':' + port_domoticz + '/json.htm?type=devices&rid=' + id_device;
   
		$.getJSON(url, function (data) {
		
		callback(data.result[0][donnee]);

		
		
    });
	
	
};


function showalert(val) {  

//var value = val;
var value = val.split(' ')[0] //à utiliser si unité derrière la valeur retournée par domoticz

// alert(value);	// pour test retour valeur - à supprimer quand ok

// données à calculer 
var percentValue = value / gaugeMaxValue; 

////////////////////////

var needleClient;


(function(){


var barWidth, chart, chartInset, degToRad, repaintGauge,
    height, margin, numSections, padRad, percToDeg, percToRad, 
    percent, radius, sectionIndx, svg, totalPercent, width;

    
  percent = percentValue;

  numSections = 1;
  sectionPerc = 1 / numSections / 2;
  padRad = 0.025;
  chartInset = 10;
    
  // Orientation of gauge:
  totalPercent = .75;

  el = d3.select('.chart-gauge');

  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 20
  };

  width = el[0][0].offsetWidth - margin.left - margin.right;
  height = width;
  radius = Math.min(width, height) / 2;
  barWidth = 40 * width / 300;


  
  //Utility methods 
  
  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };

  // Create SVG element
  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  // Add layer for the panel
  chart = svg.append('g').attr('transform', "translate(" + ((width + margin.left) / 2) + ", " + ((height + margin.top) / 2) + ")");


  chart.append('path').attr('class', "arc chart-first");
  chart.append('path').attr('class', "arc chart-second");
  chart.append('path').attr('class', "arc chart-third");
    

  arc3 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc2 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc1 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)

  repaintGauge = function () 
  {
    perc = 0.5;
    var next_start = totalPercent;
    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(perc / 3);
    next_start += perc / 3;


    arc1.startAngle(arcStartRad).endAngle(arcEndRad);

    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(perc / 3);
    next_start += perc / 3;

    arc2.startAngle(arcStartRad + padRad).endAngle(arcEndRad);

    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(perc / 3);
      
    arc3.startAngle(arcStartRad + padRad).endAngle(arcEndRad);

    chart.select(".chart-first").attr('d', arc1);
    chart.select(".chart-second").attr('d', arc2);
    chart.select(".chart-third").attr('d', arc3);

      
  }
/////////

    var dataset = [{metric:name, value: value}]

    var texts = svg.selectAll("text")
                .data(dataset)
                .enter();
     
    texts.append("text")
         .text(function(){
              return dataset[0].metric;
         })
         .attr('id', "Name")
         .attr('transform', "translate(" + ((width + margin.left) / 6) + ", " + ((height + margin.top) / 1.5) + ")")
         .attr("font-size",25)
         .style("fill", couleur_titre);				//couleur titre jauge
      

   var trX = 180 - 210 * Math.cos(percToRad(percent / 2)); 
var trY = 195 - 210 * Math.sin(percToRad(percent / 2));
// (180, 195) are the coordinates of the center of the gauge.

displayValue = function() {
                texts.append("text")
                    .text(function(){
                        return dataset[0].value;
                    })
                    .attr('id', "Value")
                    .attr('transform', "translate(" + trX + ", " + trY+ ")")
                    .attr("font-size",18)
                    .style("fill", couleur_result);		// couleur résultat affiché
            }
      
  
  
    texts.append("text")
        .text(function(){
            return 0;
        })
        .attr('id', 'scale0')
        .attr('transform', "translate(" + ((width + margin.left) / 100 ) + ", " + ((height + margin.top) / 2) + ")")
        .attr("font-size", 15)
        .style("fill", couleur_mini);				// couleur valeur mini jauge
                    
    texts.append("text")
        .text(function(){
            return gaugeMaxValue/2;
        })
        .attr('id', 'scale10')
        .attr('transform', "translate(" + ((width + margin.left) / 2.15 ) + ", " + ((height + margin.top) / 30) + ")")
        .attr("font-size", 15)
        .style("fill", couleur_milieu);				// couleur valeur moitié jauge
                    
                    
    texts.append("text")
        .text(function(){
            return gaugeMaxValue;
        })
        .attr('id', 'scale20')
        .attr('transform', "translate(" + ((width + margin.left) / 1.03 ) + ", " + ((height + margin.top) / 2) + ")")
        .attr("font-size", 15)
        .style("fill", couleur_maxi);				// couleur valeur maxi jauge				
    
  var Needle = (function() {

    //Helper function that returns the `d` value for moving the needle
    var recalcPointerPos = function(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2);
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
     
        
        return "M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY;
        
        
        
        
    };

    function Needle(el) {
      this.el = el;
      this.len = width / 2.5;
      this.radius = this.len / 8;
    }

    Needle.prototype.render = function() {
      this.el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
        
        
        
        
      return this.el.append('path').attr('class', 'needle').attr('id', 'client-needle').attr('d', recalcPointerPos.call(this, 0));
        
       
    };

    Needle.prototype.moveTo = function(perc) {
      var self,
          oldValue = this.perc || 0;

      this.perc = perc;
      self = this;

      // Reset pointer position
      this.el.transition().delay(100).ease('quad').duration(200).select('.needle').tween('reset-progress', function() {
        return function(percentOfPercent) {
          var progress = (1 - percentOfPercent) * oldValue;
          
            
                
            
          repaintGauge(progress);
          return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
        };
      });

      this.el.transition().delay(300).ease('bounce').duration(1500).select('.needle').tween('progress', function() {
        return function(percentOfPercent) {
          var progress = percentOfPercent * perc;
          
          repaintGauge(progress);
          return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
        };
      });

    };
    
      
    return Needle;

  })();
    
 
    
  needle = new Needle(chart);
  needle.render();
  needle.moveTo(percent);

  setTimeout(displayValue, 1350);
    
    

})();


};
Si l'un de vous à une idée !! suis preneur
merci

Re: Jauge

Publié : 01 sept. 2017, 13:41
par fab0030
Ça y est, j'ai inséré une ou des jauges dans mes pages monitor !

Exemple avec deux jauges
Image

Pour cela j'ai utilisé les jauges que vous trouverez ici : http://justgage.com/
Vous trouverez également le lien vers GitHub pour télécharger deux fichiers js nécessaires.

Ces deux fichiers sont justgage.js et raphael-2.1.4.min.js
Placer ces deux fichiers dans le dossier js

Ajouter dans index.html les lignes

Code : Tout sélectionner

<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js"></script>
Créer un fichier css (ex : page10.css) dans le dossier css (presque logique!)

Code : Tout sélectionner

#gauge
     {
   	position: fixed;
    	top: 145px;
    	left: 100px;

}


#gauge2
     {
   	position: fixed;
    	top: 145px;
    	left: 500px;

}]
il me sert juste à positionner les jauges dans la page

Créer un fichier html dans le dossier pages ou insérer dans une de vos pages

Code : Tout sélectionner

<script>
	
	$('head').append('<link rel="stylesheet" href="css/page10.css">');
        	
			
		////////////////////////////jauge 1/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
        var g = new JustGage({
            id: "gauge",
            value: 0,
            min: 0,
            max: 10000,
            title: "Conso élec.",
			customSectors : [{"lo":0,"hi":5000,"color":"#a9d70b"},
							{"lo":5001,"hi":7500,"color":"#f9c802"},
							{"lo":7501,"hi":10000,"color":"#ff0000"}],
			levelColorsGradient: false
		
        });
		
		
		////////////////////////////jauge 2/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
		var g2 = new JustGage({
            id: "gauge2",
            value: 0,
            min: 0,
            max: 50,
            title: "Temp ext",
			decimals: true,
			customSectors : [{"lo":0,"hi":20,"color":"#a9d70b"},
							{"lo":21,"hi":30,"color":"#f9c802"},
							{"lo":31,"hi":50,"color":"#ff0000"}],
			levelColorsGradient: false
		
        });
		
		////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

		function funky() {

		////////////////////////////jauge 1/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
			$.ajax({
			url: "http://192.168.1.55:8080/json.htm?type=devices&rid=42",
			dataType: 'json',
			success: function(data) {
			test = data.result[0].Data;					// résultat souhaité - terme trouvé par http://IPDMZ:PORTDMZ/json.htm?type=devices&rid=N°DEVICE - ex : Data
			value1 = test.split(' ')[0]; 				//à utiliser si texte derrière la valeur retournée (ex : 1230 watt)
			},	
			});

			var test = value1;
			
            g.refresh(test);

		////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
		////////////////////////////jauge 2/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
			$.ajax({
			url: "http://192.168.1.55:8080/json.htm?type=devices&rid=20",
			dataType: 'json',
			success: function(data) {
			value2 = data.result[0].Temp;				// résultat souhaité - terme trouvé par http://IPDMZ:PORTDMZ/json.htm?type=devices&rid=N°DEVICE - ex : Data
			//value2 = test2.split(' ')[0]; 			//à utiliser si texte derrière la valeur retournée (ex : 1230 watt)
			},	
			});
			
			var test2 = value2;
			
            g2.refresh(test2);
			
		///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
		
		}
			

		setInterval(funky, 5000);						// temps de rafraichissement en ms	
		

    </script>


<style>

        .size-1 {
            width: 100%;

        }
		
		.size-2 {
            width: 200%;

        }

</style>


	<div class="cnt v-wrap">
	<div class="v-box">
	
	<div>
	
	<div id="gauge" class="gauge size-1">
	<div id="gauge2" class="gauge2 size-2">
	
	</div>
En fonction du retour json de la mesure que vous souhaitez récupérer il faut adapter les lignes.
Si après la mesure il y a une unité :

Code : Tout sélectionner

			test = data.result[0].Data;					// résultat souhaité - terme trouvé par http://IPDMZ:PORTDMZ/json.htm?type=devices&rid=N°DEVICE - ex : Data
			value1 = test.split(' ')[0]; 				//à utiliser si texte derrière la valeur retournée (ex : 1230 watt)
			},	
			});

			var test = value1;
Si il n'y a pas d'unité :

Code : Tout sélectionner

			value1 = data.result[0].Data;					// résultat souhaité - terme trouvé par http://IPDMZ:PORTDMZ/json.htm?type=devices&rid=N°DEVICE - ex : Data
			//value1 = test.split(' ')[0]; 				//à utiliser si texte derrière la valeur retournée (ex : 1230 watt)
			},	
			});

			var test = value1;
Voili voila, la façon de faire n'est peut être pas la meilleure...mais chez moi ça fonctionne et c'est plutôt sympa visuellement.

De plus les jauges sont assez facilement modifiables pour adapter à vos goûts...

Re: Jauge

Publié : 01 sept. 2017, 18:55
par Phebus06
Oh très joli tout ça :D
Bravo

Re: Jauge

Publié : 01 sept. 2017, 21:17
par LSBdu68
Salut,
Beau boulot très sympa ........... je vais tester.
Merci pour le partage.

Re: Jauge

Publié : 02 sept. 2017, 11:44
par fab0030
Merci ;)
En complément, comme je l'ai écrit vous pouvez modifier pas mal de paramètres (valeur min max affichées ou non, couleurs secteurs/titre/valeur, forme, effet,....). Deux solutions : soit appliquer à toutes les jauges auquel cas les modifs peuvent peuvent être faites dans le fichier justgage.js (les paramètres sont bien décrits....en anglais évidemment), soit appliquer à une seule jauge auquel cas il faut ajouter ou modifier des lignes dans le fichier html.
Ex sur la jauge n°2 il y a une décimale qui a été ajoutée par la ligne decimals: true,

Code : Tout sélectionner

var g2 = new JustGage({
            id: "gauge2",
            value: 0,
            min: 0,
            max: 50,
            title: "Temp ext",
			decimals: true,
			customSectors : [{"lo":0,"hi":20,"color":"#a9d70b"},
							{"lo":21,"hi":30,"color":"#f9c802"},
							{"lo":31,"hi":50,"color":"#ff0000"}],
			levelColorsGradient: false
		
        });
A vous de chercher un peu sur les forums pour les modifs qui vous intéressent !!
Fuseau horaire sur UTC+02:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru