From 787fba05668d2f1669bf9bb8237576c8526d591d Mon Sep 17 00:00:00 2001 From: BmdOnline Date: Sun, 9 Feb 2014 21:51:17 +0100 Subject: [PATCH] =?UTF-8?q?Double=20gauges=20(Puissance=20&=20Intensit?= =?UTF-8?q?=C3=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ajout de la seconde gauge (paramétrable, activé par défaut) - Paramétrage des seuils des gauges - Bugfix Calendrier (correction de l'affichage du bouton sans image) --- README.md | 98 ++++++++++++++++++--- config.php | 24 +++++- config.sample.date.php | 24 +++++- config.sample.ftimestp.php | 24 +++++- config.sample.timestp.php | 24 +++++- json.php | 41 +++++---- teleinfo.css | 31 ++++--- teleinfo.js | 172 +++++++++++++++++++++++-------------- teleinfo.php | 2 +- 9 files changed, 325 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index c882f76..a17378e 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,9 @@ - change : Ajout d'icônes pour illustrer les boutons de navigation. (BmdOnline) * Graphiques + - change : Affichage de double gauge (puissance & intensité). (energy01 & BmdOnline) + * Une option permet de n'afficher que la puissance. + - change : Paramétrage des seuils limites des gauges dans le fichier "config.php". (BmdOnline) - change : L'échelle de la gauge instantanée s'ajuste automatiquement. (energy01 & BmdOnline) - change : Affiche toutes les périodes tarifaires, et pas seulement "Base" ou "HP/HC". (BmdOnline) - change : Revue de l'affichage de la légende des graphiques quotidien et historique. (BmdOnline) @@ -128,6 +131,26 @@ Voir [Graphique Conso Electrique Téléinfo EDF avec Highcharts (v2)](http://pen ###Version 1 Voir [Graphique Conso Electrique Téléinfo EDF avec Highcharts](http://penhard.anthony.free.fr/?p=111) +###Gauge instantanée +#### Donnée à afficher +Il est possible d'afficher une ou deux gauges. +Dans le cas d'une seule gauge affichée, c'est la puissance qui est sélectionnée. +Dans le cas de deux gauges, l'intensité s'affichera à côté. + +L'option se situe dans le fichier "config.php" : +```php +$config["doubleGauge"] = true; // true : affiche intensité en plus de la puissance +``` + +#### Rafraichissement automatique +Il est possible d'activer ou désactiver le rafraichissement automatique des gauges. + +L'option se situe dans le fichier "config.php" : +```php +$config["refreshAuto"] = true; // active le rafraichissement automatique +$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +``` + ###Templates Actuellement, 2 modèles de mise en page sont proposés pour chacun des affichages (desktop & mobile). Par défaut, les templates ne sont pas activés. L'affichage utilise des fichiers HTML préparés. @@ -135,16 +158,12 @@ Par défaut, les templates ne sont pas activés. L'affichage utilise des fichier #### Gestion par fichiers HTML Des fichiers sont proposés pour chacun des modes d'affichage. -Pour changer de modèle, il faut adapter le fichier "teleinfo.php" : +Pour changer de modèle, il faut adapter le fichier "config.php" : ```php - } else { - header("Vary: User-Agent"); - if ($mobile) { - readfile("tpl/teleinfo.tabs.mobile.html"); - } else { - readfile("tpl/teleinfo.tabs.html"); - } - } +$config["useTemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) +(...) +$config["notemplate"]["desktop"] = "tpl/teleinfo.tabs.html"; +$config["notemplate"]["mobile"] = "tpl/teleinfo.tabs.mobile.html"; ``` * Pour la vesion desktop, les fichiers : @@ -157,7 +176,15 @@ Pour changer de modèle, il faut adapter le fichier "teleinfo.php" : #### Gestion par templates Le moteur de template utilisé est RainTPL. Il est possible de modifier les pages en utilisant la syntaxe adéquate. -Pour changer de modèle, il faut remplacer le contenu du répertoire "tpl/files"... +Pour changer de modèle, il faut adapter le fichier "config.php" : +```php +$config["useTemplate"] = true; // utilise les templates pour afficher les page HTML (utilise RainTPL) +$config["template"]["desktop"] = "teleinfo"; +$config["template"]["mobile"] = "teleinfo.mobile"; +(...) +``` + +Il faut également remplacer le contenu du répertoire "tpl/files"... * Pour la vesion desktop, depuis : - tpl/files/desktop - lineaire - tpl/files/desktop - onglets @@ -174,7 +201,56 @@ Remarque : Pour le bon fonctionnement du programme, il faut choisir un template desktop ET un template mobile. Par défaut, le programme est réglé sur les templates avec onglets. -###Thèmes +###Apparence +####Couleur des graphiques +Chaque donnée affiché en graphique a une couleur paramétrable. + +Pour changer les couleurs, il faut adapter le fichier "config.php" : +```php +// couleurs de chacune des séries des graphiques +$teleinfo["COULEURS"] = array( + "MIN" => "green", // Seuil de consommation minimale sur la période + "MAX" => "red", // Seuil de consommation maximale sur la période + "PREC" => "#DB843D", // Période précédente + "BASE" => "#2f7ed8", + "HP" => "#c42525", + "HC" => "#2f7ed8", + "HPJB" => "#2f7ed8", + "HPJW" => "#8bbc21", + "HPJR" => "#910000", + "HCJB" => "#77a1e5", + "HCJW" => "#a6c96a", + "HCJR" => "#c42525", + "HN" => "#2f7ed8", + "HPM" => "#c42525", + "I" => "blue" // Intensité +); +``` + +####Aspect des gauges +Les différents seuils des gauges sont paramétrables ainsi que les couleurs associées. + +Pour régler ces seuils, il faut adapter le fichier "config.php" : +```php +// couleurs des bandes des gauges +$teleinfo["BANDS"] = array( + "W" => array( + 300 => "#55BF3B", // de 0 à 300 + 1000 => "#DDDF0D", // de 300 à 1000 + 3000 => "#FFA500", // de 1000 à 3000 + 10000 => "#DF5353" // supérieur à 3000 + ), + "I" => array( + 5 => "#55BF3B", // de 0 à 5 + 10 => "#DDDF0D", // de 5 à 10 + 20 => "#FFA500", // de 10 à 20 + 100 => "#DF5353" // supérieur à 20 + ) +); +``` + + +####Thèmes Actuellement, 3 thèmes sont proposés (classique, clair & sombre). Pour en changer, il faut modifier le fichier "tpl/inc.lib.html", en spécifiant respectivement : ```php diff --git a/config.php b/config.php index eff7a23..6ecfbd0 100644 --- a/config.php +++ b/config.php @@ -2,10 +2,12 @@ /*********************************/ /* Paramètres du programme */ /*********************************/ -$config["refreshAuto"] = true; // active le rafraichissement automatique -$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["refreshAuto"] = true; // active le rafraichissement automatique +$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["doubleGauge"] = true; // true : affiche intensité en plus de la puissance -$config["usetemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) + +$config["useTemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) $config["template"]["desktop"] = "teleinfo"; $config["template"]["mobile"] = "teleinfo.mobile"; $config["notemplate"]["desktop"] = "tpl/teleinfo.tabs.html"; @@ -143,6 +145,22 @@ "I" => "blue" // Intensité ); +// couleurs des bandes des gauges +$teleinfo["BANDS"] = array( + "W" => array( + 300 => "#55BF3B", // de 0 à 300 + 1000 => "#DDDF0D", // de 300 à 1000 + 3000 => "#FFA500", // de 1000 à 3000 + 10000 => "#DF5353" // supérieur à 3000 + ), + "I" => array( + 5 => "#55BF3B", // de 0 à 5 + 10 => "#DDDF0D", // de 5 à 10 + 20 => "#FFA500", // de 10 à 20 + 100 => "#DF5353" // supérieur à 20 + ) +); + /*********************/ /* Données EDF */ /*********************/ diff --git a/config.sample.date.php b/config.sample.date.php index eff7a23..6ecfbd0 100644 --- a/config.sample.date.php +++ b/config.sample.date.php @@ -2,10 +2,12 @@ /*********************************/ /* Paramètres du programme */ /*********************************/ -$config["refreshAuto"] = true; // active le rafraichissement automatique -$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["refreshAuto"] = true; // active le rafraichissement automatique +$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["doubleGauge"] = true; // true : affiche intensité en plus de la puissance -$config["usetemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) + +$config["useTemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) $config["template"]["desktop"] = "teleinfo"; $config["template"]["mobile"] = "teleinfo.mobile"; $config["notemplate"]["desktop"] = "tpl/teleinfo.tabs.html"; @@ -143,6 +145,22 @@ "I" => "blue" // Intensité ); +// couleurs des bandes des gauges +$teleinfo["BANDS"] = array( + "W" => array( + 300 => "#55BF3B", // de 0 à 300 + 1000 => "#DDDF0D", // de 300 à 1000 + 3000 => "#FFA500", // de 1000 à 3000 + 10000 => "#DF5353" // supérieur à 3000 + ), + "I" => array( + 5 => "#55BF3B", // de 0 à 5 + 10 => "#DDDF0D", // de 5 à 10 + 20 => "#FFA500", // de 10 à 20 + 100 => "#DF5353" // supérieur à 20 + ) +); + /*********************/ /* Données EDF */ /*********************/ diff --git a/config.sample.ftimestp.php b/config.sample.ftimestp.php index cbcad3d..7803385 100644 --- a/config.sample.ftimestp.php +++ b/config.sample.ftimestp.php @@ -2,10 +2,12 @@ /*********************************/ /* Paramètres du programme */ /*********************************/ -$config["refreshAuto"] = true; // active le rafraichissement automatique -$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["refreshAuto"] = true; // active le rafraichissement automatique +$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["doubleGauge"] = true; // true : affiche intensité en plus de la puissance -$config["usetemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) + +$config["useTemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) $config["template"]["desktop"] = "teleinfo"; $config["template"]["mobile"] = "teleinfo.mobile"; $config["notemplate"]["desktop"] = "tpl/teleinfo.tabs.html"; @@ -143,6 +145,22 @@ "I" => "blue" // Intensité ); +// couleurs des bandes des gauges +$teleinfo["BANDS"] = array( + "W" => array( + 300 => "#55BF3B", // de 0 à 300 + 1000 => "#DDDF0D", // de 300 à 1000 + 3000 => "#FFA500", // de 1000 à 3000 + 10000 => "#DF5353" // supérieur à 3000 + ), + "I" => array( + 5 => "#55BF3B", // de 0 à 5 + 10 => "#DDDF0D", // de 5 à 10 + 20 => "#FFA500", // de 10 à 20 + 100 => "#DF5353" // supérieur à 20 + ) +); + /*********************/ /* Données EDF */ /*********************/ diff --git a/config.sample.timestp.php b/config.sample.timestp.php index 28f7836..36e84e5 100644 --- a/config.sample.timestp.php +++ b/config.sample.timestp.php @@ -2,10 +2,12 @@ /*********************************/ /* Paramètres du programme */ /*********************************/ -$config["refreshAuto"] = true; // active le rafraichissement automatique -$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["refreshAuto"] = true; // active le rafraichissement automatique +$config["refreshDelay"] = 120; // relancé toutes les 120 secondes +$config["doubleGauge"] = true; // true : affiche intensité en plus de la puissance -$config["usetemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) + +$config["useTemplate"] = false; // utilise les templates pour afficher les page HTML (utilise RainTPL) $config["template"]["desktop"] = "teleinfo"; $config["template"]["mobile"] = "teleinfo.mobile"; $config["notemplate"]["desktop"] = "tpl/teleinfo.tabs.html"; @@ -143,6 +145,22 @@ "I" => "blue" // Intensité ); +// couleurs des bandes des gauges +$teleinfo["BANDS"] = array( + "W" => array( + 300 => "#55BF3B", // de 0 à 300 + 1000 => "#DDDF0D", // de 300 à 1000 + 3000 => "#FFA500", // de 1000 à 3000 + 10000 => "#DF5353" // supérieur à 3000 + ), + "I" => array( + 5 => "#55BF3B", // de 0 à 5 + 10 => "#DDDF0D", // de 5 à 10 + 20 => "#FFA500", // de 10 à 20 + 100 => "#DF5353" // supérieur à 20 + ) +); + /*********************/ /* Données EDF */ /*********************/ diff --git a/json.php b/json.php index 9595e0c..d2aa41b 100644 --- a/json.php +++ b/json.php @@ -1,7 +1,7 @@ 0) { $row = mysql_fetch_array($result); - $maxP = max($valP, $row["PAPP"]); - $maxI = max($valI, $row["IINST1"]); + $max["W"] = max($val["W"], $row["PAPP"]); + $max["I"] = max($val["I"], $row["IINST1"]); }; mysql_free_result($result); - $datetext = strftime("%c",$date_deb); + //$datetext = strftime("%c",$date_deb); + $datetext = date("d/m G:i", $date_deb); + + $seuils["W"] = array ( + 'min' => 0, + 'max' => ceil($max["W"] / 500) * 500, // Arrondi à 500 "au dessus" + ); - $seuilsP = array ( + $seuils["I"] = array ( 'min' => 0, - 'max' => ceil($maxP / 500) * 500, // Arrondi à 500 "au dessus" + 'max' => ceil($max["I"] / 5) * 5, // Arrondi à 5 "au dessus" ); + $series["W"] = "Watts"; + if ($config["doubleGauge"]) { + // Ajoute la série Intensité + $series["I"] = "Ampères"; + } + // Subtitle pour la période courante $subtitle = "Option tarifaire : ".$optarifStr." (".$Isousc." A)
"; $subtitle .= "Période tarifaire : ".$ptecStr."
"; @@ -130,10 +142,8 @@ function instantly () { default : break; } - $subtitle .= "Puissance Max : ".intval($maxP)." W
"; - $subtitle .= "Intensité Max : ".intval($maxI)." A
"; - // Puissance / Max - // Intensité / Max + $subtitle .= "Puissance Max : ".intval($max["W"])." W
"; + $subtitle .= "Intensité Max : ".intval($max["I"])." A
"; $instantly = array( 'title' => "Consommation du $datetext", @@ -142,9 +152,10 @@ function instantly () { 'ptec' => array($ptec => $ptecStr), 'demain' => $demain, 'debut' => $date_deb*1000, // $date_deb_UTC, - 'W_name' => "Watts", - 'W_data'=> $valP, - 'W_seuils' => $seuilsP, + 'series' => $series, + 'data'=> $val, + 'seuils' => $seuils, + 'bands' => $teleinfo["BANDS"], 'refresh_auto' => $config["refreshAuto"], 'refresh_delay' => $config["refreshDelay"] ); diff --git a/teleinfo.css b/teleinfo.css index 4c95b72..a2b817f 100644 --- a/teleinfo.css +++ b/teleinfo.css @@ -6,8 +6,8 @@ html.busy, html.busy * { /* Graphiques */ #chart0 { /*float: left; */ - width: 300px; - height: 300px; + width: 100%; /*400px;*/ + height: 600px; } #chart1 { @@ -20,6 +20,20 @@ html.busy, html.busy * { height: 400px; } +@media ( min-width: 900px ) { + /* for devices with high resolution */ + #chart0 { + width: 500px; + height: 300px; + } + #chart1 { + width: 800px; + } + #chart2 { + width: 800px; + } +} + #chart0_legende { display: none; text-align: center; @@ -41,16 +55,6 @@ html.busy, html.busy * { margin-bottom: 10px; } -@media ( min-width: 900px ) { - /* for devices with high resolution */ - #chart1 { - width: 800px; - } - #chart2 { - width: 800px; - } -} - .chart { margin: 0 auto; margin-bottom: 20px !important; @@ -159,7 +163,8 @@ select[class="select_chart2"] { } /* Hide datepicked input (keep only button) */ -.hasDatepicker { +.hasDatepicker, +.ui-datepicker-trigger { display: none !important; } diff --git a/teleinfo.js b/teleinfo.js index ddcc8f7..97c4372 100644 --- a/teleinfo.js +++ b/teleinfo.js @@ -60,42 +60,56 @@ function init_chart0_navigation() { } -function init_chart0(data) { +function init_chart0(data, serie) { "use strict"; - return { - chart: { - renderTo: 'chart0', - animation: animation, - type: 'gauge', - plotBackgroundColor: null, - plotBackgroundImage: null, - plotBorderWidth: 0, - plotShadow: false, - events: { - load: function (chart) { - this.setTitle(null, { - text: 'Construit en ' + (new Date() - start) + 'ms' - }); - if ($('#chart0_legende').length) { - if (data.subtitle.length > 0) $('#chart0_legende').show(); - $("#chart0_legende").html(data.subtitle); - } - this.debut = data.debut; - init_chart0_navigation(); - } - }, - borderColor: '#EBBA95', - borderWidth: 2, - borderRadius: 10 - }, - title: { - text: 'Puissance instantanée' - }, - credits: { - enabled: false - }, - pane: { + // Préparation des séries à afficher (nombre de gauges) + var serieNames = []; + if (serie !== undefined) { + serieNames.push(serie); + } else { + $.each(data.series, function (serie_name, serie_title) { + serieNames.push(serie_name); + }); + } + + // Eléments du graphique + var graphPanes = []; + var plotBands = []; + var graphYAxis = []; + var graphSeries = []; + var gPos; + var gStep = 100 / serieNames.length; + var centerPos = []; + var band_min; + $.each(serieNames, function (serie_num, serie_name) { + gPos = (gStep / 2) + (gStep * serie_num); + if ($("#chart0").height() <= $("#chart0").width()) { + centerPos = [ // Horizontal + Highcharts.numberFormat(gPos, 0) + '%', + '50%' + ]; + } else { + centerPos = [ // Vertical + '50%', + Highcharts.numberFormat(gPos, 0) + '%', + ]; + } + + band_min = 0; + plotBands = []; // RAZ + $.each(data.bands[serie_name], function (band_max, band_color) { + plotBands.push({ + from: Math.min(band_min, data.seuils[serie_name].max), + to: Math.min(band_max, data.seuils[serie_name].max), + color: band_color + }); + band_min = band_max; + }); + + graphPanes.push({ + center: centerPos, + //size: '70%', // A prévoir startAngle: -150, endAngle: 150, background: [{ @@ -126,12 +140,11 @@ function init_chart0(data) { outerRadius: '105%', innerRadius: '103%' }] - }, - - // the value axis - yAxis: { - min: data.W_seuils.min, - max: data.W_seuils.max, + }); + graphYAxis.push({ + min: data.seuils[serie_name].min, + max: data.seuils[serie_name].max, + pane: serie_num, minorTickInterval: 'auto', minorTickWidth: 1, @@ -139,55 +152,88 @@ function init_chart0(data) { minorTickPosition: 'inside', minorTickColor: '#999', - tickPixelInterval: 50, + tickInterval: data.seuils[serie_name].max / 10, // 10 graduations au total tickWidth: 2, - tickPosition: 'inside', tickLength: 15, + tickPosition: 'inside', tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { - text: 'Watts' + text: data.series[serie_name] // 'Watts' }, - plotBands: [{ - from: Math.min(0, data.W_seuils.max), - to: Math.min(300, data.W_seuils.max), + plotBands: plotBands,/*[{ + from: Math.min(0, data.seuils[serie_name].max), + to: Math.min(300, data.seuils[serie_name].max), color: '#55BF3B' // green }, { - from: Math.min(300, data.W_seuils.max), - to: Math.min(1000, data.W_seuils.max), + from: Math.min(300, data.seuils[serie_name].max), + to: Math.min(1000, data.seuils[serie_name].max), color: '#DDDF0D' // yellow }, { - from: Math.min(1000, data.W_seuils.max), - to: Math.min(3000, data.W_seuils.max), + from: Math.min(1000, data.seuils[serie_name].max), + to: Math.min(3000, data.seuils[serie_name].max), color: '#FFA500' // orange }, { - from: Math.min(3000, data.W_seuils.max), - to: Math.min(10000, data.W_seuils.max), + from: Math.min(3000, data.seuils[serie_name].max), + to: Math.min(10000, data.seuils[serie_name].max), color: '#DF5353' // red - }] - }, + }]*/ + }); + graphSeries.push({ + name : data.series[serie_name], + data : [data.data[serie_name]], + yAxis: serie_num + }); + }); + return { + chart: { + renderTo: 'chart0', + animation: animation, + type: 'gauge', + plotBackgroundColor: null, + plotBackgroundImage: null, + plotBorderWidth: 0, + plotShadow: false, + events: { + load: function (chart) { + this.setTitle(null, { + text: 'Construit en ' + (new Date() - start) + 'ms' + }); + if ($('#chart0_legende').length) { + if (data.subtitle.length > 0) $('#chart0_legende').show(); + $("#chart0_legende").html(data.subtitle); + } + this.debut = data.debut; + init_chart0_navigation(); + } + }, + borderColor: '#EBBA95', + borderWidth: 2, + borderRadius: 10 + }, + title: { + text: data.title // 'Puissance instantanée' + }, + credits: { + enabled: false + }, tooltip: { formatter: function () { var tooltip; //puissance=data.W_data; //fraicheur=data.date; - tooltip = '' + Highcharts.numberFormat(this.y, 0) + ' Watts
'; + tooltip = '' + Highcharts.numberFormat(this.y, 0) + ' ' + this.series.name + '
'; tooltip += 'Le ' + Highcharts.dateFormat('%A %e %B %Y à %H:%M', data.debut) + '
'; return tooltip; } }, - - series: [{ - name : data.W_name, - data : [data.W_data] - /*tooltip: { - valueSuffix: ' Watts' - }*/ - }] + pane: graphPanes, + yAxis: graphYAxis, + series: graphSeries, }; } diff --git a/teleinfo.php b/teleinfo.php index 2ac893e..fe5bf87 100644 --- a/teleinfo.php +++ b/teleinfo.php @@ -13,7 +13,7 @@ $mobile = (($detect->isMobile()) || (isset($_GET['mobile']) && ($_GET['mobile']==1))); // Use template ? - if ($config["usetemplate"]) { + if ($config["useTemplate"]) { // Templace RainTPL if (!is_dir('cache')) { mkdir('cache',0705); chmod('cache',0705); }