Personalizzare i grafici di wview con pChart

Da MeteoNetwork Wiki.
Jump to navigation Jump to search

Premessa

Prima di tutto dobbiamo installare mysql, php e le php-gd sul nostro muletto, ovviamente il tutto in locale; partiamo!


1) Installiamo php mysql e le librerie gd, diamo:

apt-get install apache2-mpm-prefork libapache2-mod-php5 mysql-server php5-mysql php5-gd php5-cli


2) Installiamo phpmyadmin, che ci faciliterà la vita nella gestione del database:

apt-get install phpmyadmin 


Creare il database


Ora bisogna creare il database dove wview andrà a "salvare" i dati storici con intervallo (5,10,20 o 30 minuti, a seconda di come avete settato l'intervallo nel pannello di controllo di  wview)

Sempre da terminale, diamo:

wview-mysql-export create [root_mysql_user_password] 

al posto di [root_mysql_user_password] dobbiamo scrivere la password scelta in fase di installazione di mysql, poi diamo:

wview-mysql-create [admin_username] [admin_password] [db_username] [db_password] [db_name] 

poi,

wview-mysql-export debug 

Bene, il database è creato, le fondamenta le abbiamo costruite; ora passiamo a "popolare" il database.

Accediamo al pannello di controllo di wview, e selezioniamo l'ultima "TAB" SQL EXPORT e compiliamo i pochi campi con tutte le informazioni sul nostro database


Automatizziamo le operazioni con Crontab

Dobbiamo automatizzare l'operazione di inserimento dei dati generati da wview nel databse, diamo da terminale:

crontab -e

nell'ultima riga aggiungiamo:

1,6,11,16,21,26,31,36,41,46,51,56 * * * * $exec_prefix/wview-mysql-export 

(di default $exec_prefix equivale a /usr/bin)

Fatto!


Creazione dei grafici

Scarichiamo e copiamo via SSH sul nostro muletto (sempre in locale!) la libreria P-CHART (http://www.pchart.net/download) dove vogliamo (io

l'ho copiata in "/etc/wview/").

Qui di seguito un script esempio (grafico delle temperature in °C in funzione dell'ora):

<?php /* Include all the classes */
include("/PERCORSO DI INSTALLAZIONE PCHART/pchart/class/pDraw.class.php");
include("/PERCORSO DI INSTALLAZIONE PCHART/pchart/class/pImage.class.php");
include("/PERCORSO DI INSTALLAZIONE PCHART/pchart/class/pData.class.php");

/* Create your dataset object */
$myData = new pData();

/* Connect to the MySQL database */
$db = mysql_connect("NOME_HOST", "USERNAME", "PASSWORD");
mysql_select_db("NOME_DB",$db);

/* Build the query that will returns the data to graph */
$Requete = "select * from (select * from archive order by dateTime DESC limit 10) as archive order by dateTime ASC";
$Result = mysql_query($Requete,$db);
while($row = mysql_fetch_array($Result))
{
/* Push the results of the query in an array */
$dateTime[] = $row["dateTime"];
$outTemp[] = 0.56*($row["outTemp"]-32);

}


/* Prepare some nice data & axis config */
$myData = new pData();
$myData->addPoints($outTemp,"Temperatura");
$myData->setAxisName(0,"");
$myData->setAxisUnit(0,"°C");
$myData->setPalette("Data",array("R"=>55,"G"=>91,"B"=>127));

/* Create the X serie */
$myData->addPoints($dateTime,"dateTime");
$myData->setAbscissa("dateTime");
$myData->setXAxisDisplay(AXIS_FORMAT_DATE,"H:i");
$myData->setAbscissaName("");

/* Will replace the whole color scheme by the "light" palette */
$myData->loadPalette("palettes/navy.color", TRUE);
/* DIMENSIONI TOTALI IMMAGINE */
$myData = new pImage(790,250,$myData);

/* Choose a nice font */
$myData->setFontProperties(array("FontName"=>"/PERCORSO INSTALLAZIONE PCHART/fonts/calibri.ttf","FontSize"=>10));


/* DIMENSIONI GRAFICO AERA INTERNA TRATTEGGIATA*/
$myData->setGraphArea(60,40,700,210);


$myData->drawGradientArea(0,0,750,240,DIRECTION_VERTICAL,array("StartR"=>240,"StartG"=>240,"StartB"=>240,"EndR"=>180,"EndG"=>180,"EndB"=>180,"Alpha"=>100));
$myData->drawGradientArea(0,0,750,240,DIRECTION_HORIZONTAL,array("StartR"=>240,"StartG"=>240,"StartB"=>240,"EndR"=>180,"EndG"=>180,"EndB"=>180,"Alpha"=>20));


/* Add a border to the picture */
$myData->drawRectangle(0,0,750,240,array("R"=>0,"G"=>0,"B"=>0));
$myData->drawText(20,30,"Temperatura Esterna ultime 6h",array("FontSize"=>15,"Align"=>TEXT_ALIGN_BOTTOMLEFT));

/* Write the chart legend */
$myData->drawLegend(550,30,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));

/* Compute and draw the scale */
$myData->drawScale(array("CycleBackground"=>TRUE,"DrawSubTicks"=>TRUE,"GridR"=>0,"GridG"=>0,"GridB"=>0,"GridAlpha"=>10));

$SplineSettings = array("R"=>255,"G"=>255,"B"=>255,"ShowControl"=>TRUE);
$myData->drawSplineChart($SplineSettings);

/* Build the PNG file and send it to the web browser */
$myData->Render("/PERCORSO_SALVATAGGIO/prova.png");
?>


COME CONFIGURARE LO SCRIPT?

1) NOME_HOST: dato che siamo in lcale, dovremo inserire tra le "" localhost

2) USERNAME: inserite, sempre tra le "" l'username scelto, potrebbe essere root

3) PASSWORD: inserite la password del nome utente (se avete scelto alla riga precedente root, la password sarà quella scelta in fase di installazione di apache)

4) NOME_DB: è il nome del database che contiene i dati (per comodità io l'ho nominato wview)

5) Quali dati vogliamo visualizzare nel grafico? Basta dare un'occhiata alla struttura della tabella 'archive' qui un riassunto:

   barometer --> UMIDITA
pressure --> PRESSIONE
altimeter REAL,
inTemp REAL,
outTemp REAL,
inHumidity REAL,
outHumidity REAL,
windSpeed REAL,
windDir REAL,
windGust REAL,
windGustDir REAL,
rainRate REAL,
rain REAL,
dewpoint REAL,
windchill REAL,
heatindex REAL,
ET REAL,
radiation REAL,
UV REAL,
extraTemp1 REAL,
extraTemp2 REAL,
extraTemp3 REAL,
soilTemp1 REAL,
soilTemp2 REAL,
soilTemp3 REAL,
soilTemp4 REAL,
leafTemp1 REAL,
leafTemp2 REAL,
extraHumid1 REAL,
extraHumid2 REAL,
soilMoist1 REAL,
soilMoist2 REAL,
soilMoist3 REAL,
soilMoist4 REAL,
leafWet1 REAL,
leafWet2 REAL,
rxCheckPercent REAL,
txBatteryStatus REAL,
consBatteryVoltage REAL,
hail REAL,
hailRate REAL,

una volta scelto il parametro, basta modificare le seguenti righe:

/* Push the results of the query in an array */

 $dateTime[]   = $row["dateTime"];
 $outTemp[] = $row["outTemp"];


al posto di $row["outTemp"]; possiamo scrivere $row["windDir"]; , $row["inTemp"]; , eccecc


6) Per quanto concerne la riga di scelta del font:


/* Choose a nice font */

$myData->setFontProperties(array("FontName"=>"/PERCORSO DI INSTALLAZIONE PCHART/pChart/fonts/calibri.ttf","FontSize"=>10)); 

DOBBIAMO TASSATIVAMENTE INDICARE IL PERCORSO ASSOLUTO DEL FONT SCELTO!


7)Stabiliamo dove vogliamo che lo script salvi il grafico generato (il percorso DEVE essere assoluto, ad es. /etc/wview/grafici)


/* Build the PNG file and send it to the web browser */
$myData->Render("PERCORSO_SALVATAGGIO");


Bene, ora che lo abbiamo configurato, copiamo lo script nella cartella pChart in locale; fatto ciò ed avviato dovremo avere il grafico generato.

Conversioni

Tutti i dati caricati nel databse di wview non sono nel sistema metrico, ma nel sistema anglosassone (°F,inch,eccecc). Qui di seguito trovate una tabella riassuntiva con i relativi tag per convertire da sistema anglossassone a metrico:

VOCE DATABASE
FORMULA
TAG HTML
outTemp
T=(outTemp-32)/1.8
$outTemp[] = 0.56*($row["outTemp"]-32);
barometer
Pr=barometer x 33.8639
$outTemp[] = 33.8639*($row["barometer"]);


Automatizziamo le operazioni con Crontab

Per "creare" i grafici dobbiamo far eseguire a crontab questa semplice riga. Come sempre, da terminale:

nano /etc/crontab

ed aggiungiamo in fondo la seguente riga:

* * * * * php -q PERCORSO ASSOLUTO DELLO SCRIPT PHP (es. /var/www/grafico.php)


Per caricare i grafici generati in locale sullo spazio ftp del nostro sito, installiamo ncftp, da riga di comando:

apt-get install ncftp

Una volta installato, apriamo nuovamente crontab e digitiamo da terminale :

nano /etc/crontab 

Aggiungiamo in fondo la seguente riga:

*/20 * * * * root ncftpput -u [USERNAME] -p [PASSWORD] [HOST] [PERCORSO_FILE DESTINAZIONE] [PERCORSO IMMAGINE LOCALE] 

Salviamo, ed ora anche il caricamento del grafico avverrà in automatico ogni 20 minuti!