jauge pour batterie

nicoyo55 · Message par **nicoyo55** » 15 avr. 2014, 16:17

bonjour
j'aimerai représenter avec une jauge le niveau de batterie en temps réel que je relève avec un script en python qui envoi la valeur dans une base de données mysql
j'ai donc ma base de données avec la valeur en pourcentage et en Volt de la batterie mais je n'arrive pas a créer ma jauge sur le modèle speedmeter de highchart,
je reprend le code source sur le site mais j'ai toujours des erreurs si quelqu'un a un tutoriel ou a déjà fait ce genre de jauge merci pour votre aide .

Message par **helmain** » 15 avr. 2014, 20:52

Bonsoir nicoyo55,

Si tu avais communiqué les messages d'erreurs, ça nous aurait éviter d'aller à l'aveuglette, m'enfin…

Je viens de jeter un oeil sur l'API, mis à part le dessin du cadran (pane), les couleur par PlotBande, enfin des trucs que l'on a pas trop l'habitude de voir dans les scripts de graphiques, le reste semble aisé,
Ta requête récupère la dernière valeur du voltage dans ta table, valeur qu'il faut indiquer dans le bloc "series", au niveau du "data" je ne vois pas ce qui peut provoquer une erreur, surtout que c'est la seule et unique donnée que tu indiques.
Tu as bien tes accolades, parenthèses et crochets par paires un ouvrant, l'autre fermant.
Tu n'as pas oublié une virgule dans l'énumération du détail d'un groupe.
Pour ce genre de graphique, à ta place je ne m'enquiquinerais pas !
Tu commences par copier l'intégralité du script de la démo et tu le colles sur un nouveau document.
Tu appelles le script via ton navigateur sans rien modifier puisque les bibliothèques highcharts sont bien présentes aux url mentionnées.
Normalement, il doit aussi bien fonctionner que dans la démo.
Ensuite tu le customises à ton goût, en y intégrant ta requête histoire de voir si tu récupère bien ton voltage, puis ensuite tu y vas petit à petit en testant après chaque modification.
N'oublie pas de virer le petit bout de script correspondant à la petite animation qui fait bouger l'aiguille pour la démo, à moins que tu veuilles te faire plaisir !
N'oublies pas de nous dire si tu es arrivé à tes fins.

Jean-Michel

Message par **Météo Villarzel** » 15 avr. 2014, 21:10

Salut,
c'est bien une jauge du genre que tu veux ?
http://www.boock.ch/meteo/graphiques_ph ... midite.php

A+

nicoyo55 · Message par **nicoyo55** » 16 avr. 2014, 14:17

oui c'est cela mais avec des pourcentage d'une base de donnée mysql mais quand je reprend juste code de base sur highchart je n'arrive même pas a afficher la jauge d'origine j'ai réessayer plusieurs fois mais j'ai toujours des erreurs de balises ou de fonction alors que c'est le code originale du site je ne sais pas comment faire c'est mon premier graph avec highchart désolé si sa vous semble évident

merci pour vos reponses

Message par **Météo Villarzel** » 16 avr. 2014, 15:03

Je te mets le code que j'utilise pour ma jauge, je pense que tu vas facilement pouvoir l'adapter à ton cas.

1 création d'un fichier qu reprend la dernière valeur et l'encode en Json dans un fichier

Code : Tout sélectionner

<?php
// Récupération de la dernière donnée 
date_default_timezone_set("UTC");
require("mysql_connect.php");
 $result=mysql_query ("SELECT outdoorhumidity FROM data ORDER BY tstamp DESC LIMIT 0, 1") or die (mysql_error ());
 $data = array();
$count = 0;
while ($row=mysql_fetch_array($result))
{
   
  $data[] = array(  (float)$row['outdoorhumidity']);
  $count++;
}   
echo json_encode($data);
?>

Évidemment tu remplaceststamp et outdoorhumidity par tes variables et tu crées un fichier de connexion à ta bd

tu nommes ce fichier par exemple batterie.php

ensuite dans le code du graphique, tu appels ce fichier comme ceci
$.getJSON('batterie.php', function(data) {
C'est à la ligne 14 ci-dessous

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1"> 
<HEAD>
<script type="text/javascript" src="jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>



<script type="text/javascript">

$(function () {
$.getJSON('batterie.php', function(data) {

	
    $('#container').highcharts({
	
	    chart: {
	        type: 'gauge',
	        plotBackgroundColor: null,
	        plotBackgroundImage: '',
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	    
	    title: {
	        text: 'Humidité extérieure'
	    },
		credits: {
            text: 'Météo Villarzel',
            href: '',
			position: {
	align: 'center',
	x: 0,
	verticalAlign: 'bottom',
	y: -35
}
			},
	    
	    pane: {
	        startAngle: -150,
	        endAngle: 150,
	        background: [{
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#FFF'],
	                    [1, '#333']
	                ]
	            },
	            borderWidth: 0,
	            outerRadius: '109%'
	        }, {
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#333'],
	                    [1, '#FFF']
	                ]
	            },
	            borderWidth: 1,
	            outerRadius: '107%'
	        }, {
	            // default background
	        }, {
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#4aabe4'],
	                    [1, '#c3e1f6']
	                ]
	            },
	            borderWidth: 0,
	            outerRadius: '105%',
	            innerRadius: '0%'
	        }]
	    },
	       
	    // the value axis
	    yAxis: {
	        min: 0,
	        max: 100,
	        
	        minorTickInterval: 'auto',
	        minorTickWidth: 1,
	        minorTickLength: 10,
	        minorTickPosition: 'inside',
	        minorTickColor: '#666',
	
	        tickPixelInterval: 50,
	        tickWidth: 2,
	        tickPosition: 'inside',
	        tickLength: 10,
	        tickColor: '#666',
	        labels: {
	            step: 1,
	            rotation: 'auto'
	        },
	        title: {
	            text: '%'
	        },
	        plotBands: [{
	            from: 0,
	            to: 30,
	            color: '#7adeec'
	        }, {
	            from: 30,
	            to: 60,
	            color: '#39b8e3'
	        }, {
	            from: 60,
	            to: 100,
	            color: '#1f9bdc'
	        }]        
	    },
		plotOptions: {
			gauge: {
				dial: {
				// dial=aiguille
					radius: '80%',
					backgroundColor: 'black',
					borderColor: 'black',
					borderWidth: 1,
					baseWidth: 3,
					topWidth: 0,
					baseLength: '70%', // of radius
					rearLength: '20%'
				},pivot: {
				// centre aiguille
					radius: 10,
					borderWidth: 1,
					borderColor: 'gray',
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
						stops: [
							[0, 'white'],
							[1, 'gray']
						]
					}	
				},dataLabels: {
                    enabled: true,
                    borderRadius: 5,
                    format: '{y} %',
                    // backgroundColor: 'rgba(252, 255, 197, 0.7)',
                    borderWidth: 1,
                    borderColor: '#AAA',
                    y: 65
                }
			}
		},
	    series: [{
	        name: 'Humidité',
	        data: data,
			tooltip: {
	            valueSuffix: ' %'
	        }
	    }]
	
	
	});
});
});
</script> 
    </head>
<body>
<div id="container" style="width: 270px; height: 300px; margin: 0 auto"></div>	
</body>
</html>

Modifies aussi le chemin vers ton fichier jquery
<script type="text/javascript" src="jquery.min.js"></script>

Il te reste à consulter l'api pour personnalisé ta jauge

A+

Message par **helmain** » 16 avr. 2014, 20:33

Pour m'amuser un peu, je me suis fait une petite jauge histoire de voir si les piles de l a console de ma VP2 ne sont pas nases.
Voilà le résultat : ici
Par contre, je suis une grosse feignasse alors moins j'écris de code et mieux je me porte.

Déjà l'histoire d'écrire systématiquement deux scripts alors qu'il est aisé d'en écrire qu'un seul me fait bondir, mais faire tout un scénario pour transférer une et une seule donnée, alors là je dis NON !!

Peut importe de quelle façon on récupère la valeur du voltage, que ce soit par requête, ou obtenu comme moi directement dans Cumulus on arrive à la même variable que j'ai laissée baptisée $battery.
N'ayant que cette variable non occursée ce n'est pas la peine de faire tout un tralala avec json et compagnie et à écrire deux scripts.
Pour ceux qui ne le savent pas, on peut passer la valeur d'une variable php à javascript.
Comment ?? Tout simplement :
Déjà faut récupérer la variable php, et la mettre en forme comme je l'ai fait, si c'est nécessaire.
Comme Cumulus m'envoie 4,59v, je remplace la virgule par un point, et le v par rien.

Code : Tout sélectionner

 <?php require("../cumulus/cumuluswebtags.php");
 $battery=str_replace(",",".",$battery);
 $battery=str_replace("v","",$battery);
 ?>

Puis dans le javascript je récupère ma variable mise en forme au dessus :

Code : Tout sélectionner

	    series: [{
	        name: 'Voltage',
	        data: [<?php echo $battery;?>],
	        dataLabels: {
	            formatter: function () {
	                var volts = this.y,
	                    pourcent = Math.round(100/6*volts );
	                return '<span style="color:#339">'+ volts + ' volts</span><br/>' +
	                    '<span style="color:#933">' + pourcent + ' %</span>';
	            },

Et c'est tout !! C'est bête hein ?
Pourquoi aller s'enquiquiner avec deux script, quand c' est si simple !!
Pour le fun voilà le script au complet :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
      <!-- 1. Add these JavaScript inclusions in the head of your page -->
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
      <script type="text/javascript" src="//code.highcharts.com/highcharts.js"></script> 	
      <script type="text/javascript" src="//code.highcharts.com/highcharts-more.js"></script> 
      <script type="text/javascript" src="//code.highcharts.com/modules/exporting.js"></script>
     
      <!-- 2. Add the JavaScript to initialize the chart on document ready -->
 <?php require("../cumulus/cumuluswebtags.php");
 $battery=str_replace(",",".",$battery);
 $battery=str_replace("v","",$battery);
 ?>
<script type="text/javascript">  
$(function () {
    var chart;        
         $(document).ready(function() {      
         var highchartsOptions = Highcharts.setOptions(Highcharts.theme);		 
         Highcharts.setOptions({
        lang: {
        months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        shortMonths: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
        exportButtonTitle: "Exporter",
        printButtonTitle: "Imprimer",
        rangeSelectorFrom: "Du:",
        rangeSelectorTo: "A:",
        rangeSelectorZoom: "Période:",
        resetZoom: 'RAZ Zoom',
        resetZoomTitle: 'Initialiser zoom ? 1:1',
        downloadPNG: "Télécharger au format PNG image",
        downloadJPEG: "Télécharger au format JPEG image",
        downloadPDF: "Télécharger au format PDF document",
        downloadSVG: "Télécharger au format SVG vector image",
        exportButtonTitle: "Exporter image ou document",
        printButtonTitle: "Imprimer le graphique",
        loading: "Chargement...",
        thousandsSep: ""
        }
        
      });
        chart = new Highcharts.Chart({
            chart: {
            renderTo: 'container',
	        type: 'gauge',
	        alignTicks: false,
	        plotBackgroundColor: null,
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	
	    title: {
	        text: 'Charge des piles console VP2'
	    },
		credits: {
            text: 'Tout le temps laniaque',
            href: 'http://toutletempslaniaque.net'
        },	    
	    pane: {
	        startAngle: -150,
	        endAngle: 150
	    },	        
	
	    yAxis: [{
	        min: 0,
	        max: 4.5,
	        lineColor: '#339',
	        tickColor: '#339',
	        minorTickColor: '#339',
	        offset: -25,
	        lineWidth: 2,
	        labels: {
	            distance: -20,
	            rotation: 'auto'
	        },
	        tickLength: 5,
	        minorTickLength: 5,
	        endOnTick: false
	    }, {
	        min: 0,
	        max: 100,
	        tickPosition: 'outside',
	        lineColor: '#933',
	        lineWidth: 2,
	        minorTickPosition: 'outside',
	        tickColor: '#933',
	        minorTickColor: '#933',
	        tickLength: 5,
	        minorTickLength: 5,
	        labels: {
	            distance: 12,
	            rotation: 'auto'
	        },
	        offset: -20,
	        endOnTick: false
	    }],
	
	    series: [{
	        name: 'Voltage',
	        data: [<?php echo $battery;?>],
	        dataLabels: {
	            formatter: function () {
	                var volts = this.y,
	                    pourcent = Math.round(100/4.5*volts );
	                return '<span style="color:#339">'+ volts + ' volts</span><br/>' +
	                    '<span style="color:#933">' + pourcent + ' %</span>';
	            }, 
	            backgroundColor: {
	                linearGradient: {
	                    x1: 0,
	                    y1: 0,
	                    x2: 0,
	                    y2: 1
	                },
	                stops: [
	                    [0, '#DDD'],
	                    [1, '#FFF']
	                ]
	            }
	        },
	        tooltip: {
	            valueSuffix: ' Volts'
	        }
	    }]
	
	});
});
});
</script>
   </head>
   <body>
<!-- 3. Add the container -->
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

</body>
</html>

Amusez-vous bien !!

Message par **Météo Villarzel** » 16 avr. 2014, 20:45

Bin m’engueule pas Jean-Mi

je fais ce que je peux, d'accord je te l'accorde ton code est plus simple et en plus tus peux aussi faire le calcul du pourcentage, je vais le garder pour moi

A la base mon script était pour reprendre plusieurs valeurs et comme il était déjà fait et que je suis encore plus flemmard que toi...

Bon juste une précision le 100% de la batterie n'est pas de 6 volts, mais 4.69V en tous cas mesuré avec la console branchée sur secteur.

Bonne soirée.

Message par **helmain** » 16 avr. 2014, 22:25

Mais non Pierre-André je ne t'engueule pas !!
J'explique aux gens !

Bon pour en revenir au script, je ne vois pas ce qui a bloqué nicoyo55.
Il n'y a rien d'extraordinaire.
Comme il n'y a que 3 piles de1,5 volts j'ai modifié le script avec un max de 4,5 volts, donc la console est chargée à 102% !!

Message par **Météo Villarzel** » 16 avr. 2014, 23:18

Bon voilà encore un exemple qui reprend une valeur d'une base de données.
http://www.boock.ch/meteo/graphiques_php/jauge_test.php

Code : Tout sélectionner

<?php
// appel du script de connexion
require("mysql_connect.php");                     
$sql="select max(tstamp) from data";
$query=mysql_query($sql);                  
$list=mysql_fetch_array($query);     
$stop=$list[0];
$start=$stop-(60);

$sql = "SELECT tstamp, outdoortemperature  FROM data where tstamp >= '$start' and  tstamp <= '$stop' ORDER BY 1";  
$query=mysql_query($sql);                   
$i=0;
while ($list = mysql_fetch_assoc($query)) {      
if (date("I",time())==0) {                                                          
	$dtime[$i]=($list['tstamp']+3600)*1000;
	} 
else {
	$dtime[$i]=($list['tstamp']+7200)*1000;
  } 
$dtemp[$i]=$list['outdoortemperature']*1;					

$i++;
}
	
  ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1"> 
<title></title>     
      <!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>           
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>  
<script type="text/javascript" src="http://code.highcharts.com/themes/grid.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
   
      <!-- 2. Add the JavaScript to initialize the chart on document ready -->
      <script type="text/javascript">  
    function comArr(unitsArray) { 
        var outarr = [];
        for (var i = 0; i < dTime.length; i++) {
         outarr[i] = [dTime[i], unitsArray[i]];
        }
      return outarr;
    } 
    
$(function () {
    var chart;        
         $(document).ready(function() {      
         var highchartsOptions = Highcharts.setOptions(Highcharts.theme);       
         Highcharts.setOptions({
        
      });
        chart = new Highcharts.Chart({
            chart: {
            renderTo: 'container',
           type: 'gauge',
           alignTicks: false,
           plotBackgroundColor: null,
           plotBackgroundImage: null,
           plotBorderWidth: 0,
           plotShadow: false
       },
   
       title: {
           text: 'test'
       },
            
       pane: {
           startAngle: -150,
           endAngle: 150
       },           
   
       yAxis: [{
           min: 0,
           max: 40,
           tickPosition: 'outside',
           lineColor: '#933',
           lineWidth: 2,
           minorTickPosition: 'outside',
           tickColor: '#933',
           minorTickColor: '#933',
           tickLength: 5,
           minorTickLength: 5,
           labels: {
               distance: 12,
               rotation: 'auto'
           },
           offset: -20,
           endOnTick: false
       }],
   
       series: [{
           name: 'temp',
           data: comArr(dTemp),
           
           tooltip: {
               valueSuffix: ' °C'
           }
       }]
   
   });
});
});
eval(<?php echo  "'var dTime =  ".json_encode($dtime)."'" ?>);
eval(<?php echo  "'var dTemp =  ".json_encode($dtemp)."'" ?>);

   </script>
   </head>
   <body>
      <div id="container" style="width: 900px; height: 450px; margin: 0 auto"></div>
   </body>
</html>

Pour J.-M : je sais pas besoin de passer par start-stop, mais ça me faisait ch.. de chercher

Message par **helmain** » 17 avr. 2014, 09:14

Ton script d'exemple est très bien, quand même, mais juste une petite explication sur la ligne suivante :

$dtemp[$i]=$list['outdoortemperature']*1;

En bout de ligne, la valeur résultat de la requête est multipliée par 1.

C'est simplement parce que celle-ci est au format texte et pour HighCharts/HighStock il faut qu'elle soit en numérique.

Pour des valeurs de 20°, 21°, 22° au format texte on récupère ceci : ["20","21","22"] et au format numérique ceci : [20,21,22]
Le simple fait de multiplier par 1 ce qui ne modifie pas la valeur du résultat qu'il soit positif ou négatif, convertit le format de texte en numérique.

if (date("I",time())==0) {
$dtime[$i]=($list['tstamp']+3600)*1000;
}
else {
$dtime[$i]=($list['tstamp']+7200)*1000;

Pour les lignes définissant la valeur de $dtime[$i] avec application de l'heure d'été ou pas, le passage en millièmes de secondes nécessaire pour javascript en multipliant le timestamp par 1000, a converti de fait le résultat au format numérique.

Bonne journée à tous.

jauge pour batterie

jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie

Re: jauge pour batterie