Hierbij een voorbeeld van het gebruik van de BeeClear API op een Raspberry Pi (maar werkt natuurlijk op elke web browser).
http://mxx.ovh/dAjsrAc1gn/IMG_2278.jpg
De temperatuur komt via een api van mijn Netatmo en de energie metrics komen van BeeClear. Dit alles op een eenvoudige webbrowser (Epiphany) omdat ik het scherm op de Raspberry Pi niet werkend krijg in combinatie met Chromium.
Dit alles is gemaakt met PHP een klein beetje Java-script. Ik kan het volledige script hier wel plaatsen maar dat werkt alleen als je ook een Netatmo hebt (voor de temperatuur).
Het gedeelte waarmee ik via PHP de data ophaal staat hieronder.
Deze php files worden included in de hoofdpagina en vanuit de hoofdpagina kunnen de variabelen dan gebruikt worden.
Bijvoorbeeld, $data_bc_current laat dus het huidige verbruik zien en $data_bc_getval_elek_today laat het totaal verbruik van vandaag tot en met nu zien.
De grafiekjes zijn wat lastiger en worden vanuit de hoofdpagina als volgt aangeroepen:
<?php echo "<img src=\"graph.php?".$get_elek_graph."\" alt=\"\" />"; ?>
<?php echo "<img src=\"graph.php?".$get_gas_graph."\" alt=\"\" />"; ?>
De parameters ($get_elek_graph en $get_gas_graph, die de inhoud van de grafiek bepalen) worden met de getoonde PHP scripts gegenereerd.
Het graph.php script staat hieronder ook weergegeven (3de script), overigens heb ik dit ergens van internet 'geleend' en iets aangepast.
Dat is zo'n beetje de opzet. Mocht je de scripts willen hebben dan kan ik die met alle plezier opsturen maar dan moet je zelf de Netatmo zooi er uit slopen (of je moet ook toevallig een Netatmo hebben).
Script 1, haal het huidige verbruik op.
<?php
date_default_timezone_set ("Europe/Amsterdam");
$url = 'http://beeclear.local/bc_current';
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($curl);
$data_bc_current = json_decode($json, TRUE);
?>
Scripts 2, haal het gebruik van vandaag per uur en het totaal op.
<?php
date_default_timezone_set ("Europe/Amsterdam");
$epoch=time();
$epoch=$epoch- ($epoch % 86400) - 3600;
$url = "http://beeclear.local/bc_getVal?type=gas&date=$epoch&duration=day&period=hour";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($curl);
$data_bc_getval = json_decode($json, TRUE);
$gas_total=0;
$get_gas_graph="";
for($i=1; $i<24; $i++) {
$get_gas_graph.=$i."h=".$data_bc_getval['meetwaarden'][0]['val'][$i]['g']."&";
$gas_total+=$data_bc_getval['meetwaarden'][0]['val'][$i]['g'];
}
$data_bc_getval_gas_today = sprintf('%0.3f', $gas_total/1000);
$url = "http://beeclear.local/bc_getVal?type=elek&date=$epoch&duration=day&period=hour";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($curl);
$data_bc_getval = json_decode($json, TRUE);
$elek_total=0;
$get_elek_graph="";
for($i=1; $i<24; $i++) {
$this_elek=$data_bc_getval['meetwaarden'][0]['val'][$i]['v']+$data_bc_getval['meetwaarden'][0]['val'][$i]['vl'];
$get_elek_graph.=$i."h=".$this_elek."&";
$elek_total+=$this_elek;
}
$data_bc_getval_elek_today = sprintf('%0.3f', $elek_total/1000);
#echo $data_bc_getval_elek_today;
?>
Script 3, grafiekjes maken
<?php
# ------- The graph values in the form of associative array
# values array is filles from other function
#$values= array( "1" => 100, "2" => 250, "3" => 300 );
$values = $_GET;
$img_width=220;
$img_height=120;
$margins=20;
# ---- Find the size of graph by substracting the size of borders
$graph_width=$img_width - $margins * 2;
$graph_height=$img_height - $margins * 2;
$img=imagecreate($img_width,$img_height);
$bar_width=5;
$total_bars=count($values);
$gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);
# ------- Define Colors ----------------
$bar_color=imagecolorallocate($img,40,255,0);
$xvalues_color=imagecolorallocate($img,255,255,255);
$background_color=imagecolorallocate($img,0,0,0);
$border_color=imagecolorallocate($img,0,0,0);
$line_color=imagecolorallocate($img,220,220,220);
# ------ Create the border around the graph ------
#imagefilledrectangle($img,1,1,$img_width-2,$img_height-2,$border_color);
imagefilledrectangle($img,0,0,$img_width,$img_height,$border_color);
imagefilledrectangle($img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color);
# ------- Max value is required to adjust the scale -------
$max_value=(intval(max($values)/500)+1)*500;
$ratio= $graph_height/$max_value;
# -------- Create scale and draw horizontal lines --------
$horizontal_lines=4;
$horizontal_gap=$graph_height/$horizontal_lines;
for($i=1;$i<=$horizontal_lines;$i++){
$y=$img_height - $margins - $horizontal_gap * $i ;
imageline($img,$margins,$y,$img_width-$margins,$y,$line_color);
$v=intval($horizontal_gap * $i /$ratio);
imagestring($img,0,0,$y-5,$v,$xvalues_color);
}
# ----------- Draw the bars here ------
for($i=0;$i< $total_bars; $i++){
# ------ Extract key and value pair from the current pointer position
list($key,$value)=each($values);
$x1= $margins + $gap + $i * ($gap+$bar_width) ;
$x2= $x1 + $bar_width;
$y1=$margins +$graph_height- intval($value * $ratio) ;
$y2=$img_height-$margins;
#imagestring($img,0,$x1+3,$y1-10,$value,$bar_color);
if ( $i % 4 == 0 ) {
imagestring($img,0,$x1+3,$img_height-15,$key,$xvalues_color);
}
imagefilledrectangle($img,$x1,$y1,$x2,$y2,$bar_color);
}
header("Content-type:image/png");
imagepng($img);
?>
http://mxx.ovh/dAjsrAc1gn/IMG_2278.jpg
De temperatuur komt via een api van mijn Netatmo en de energie metrics komen van BeeClear. Dit alles op een eenvoudige webbrowser (Epiphany) omdat ik het scherm op de Raspberry Pi niet werkend krijg in combinatie met Chromium.
Dit alles is gemaakt met PHP een klein beetje Java-script. Ik kan het volledige script hier wel plaatsen maar dat werkt alleen als je ook een Netatmo hebt (voor de temperatuur).
Het gedeelte waarmee ik via PHP de data ophaal staat hieronder.
Deze php files worden included in de hoofdpagina en vanuit de hoofdpagina kunnen de variabelen dan gebruikt worden.
Bijvoorbeeld, $data_bc_current laat dus het huidige verbruik zien en $data_bc_getval_elek_today laat het totaal verbruik van vandaag tot en met nu zien.
De grafiekjes zijn wat lastiger en worden vanuit de hoofdpagina als volgt aangeroepen:
<?php echo "<img src=\"graph.php?".$get_elek_graph."\" alt=\"\" />"; ?>
<?php echo "<img src=\"graph.php?".$get_gas_graph."\" alt=\"\" />"; ?>
De parameters ($get_elek_graph en $get_gas_graph, die de inhoud van de grafiek bepalen) worden met de getoonde PHP scripts gegenereerd.
Het graph.php script staat hieronder ook weergegeven (3de script), overigens heb ik dit ergens van internet 'geleend' en iets aangepast.
Dat is zo'n beetje de opzet. Mocht je de scripts willen hebben dan kan ik die met alle plezier opsturen maar dan moet je zelf de Netatmo zooi er uit slopen (of je moet ook toevallig een Netatmo hebben).
Script 1, haal het huidige verbruik op.
<?php
date_default_timezone_set ("Europe/Amsterdam");
$url = 'http://beeclear.local/bc_current';
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($curl);
$data_bc_current = json_decode($json, TRUE);
?>
Scripts 2, haal het gebruik van vandaag per uur en het totaal op.
<?php
date_default_timezone_set ("Europe/Amsterdam");
$epoch=time();
$epoch=$epoch- ($epoch % 86400) - 3600;
$url = "http://beeclear.local/bc_getVal?type=gas&date=$epoch&duration=day&period=hour";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($curl);
$data_bc_getval = json_decode($json, TRUE);
$gas_total=0;
$get_gas_graph="";
for($i=1; $i<24; $i++) {
$get_gas_graph.=$i."h=".$data_bc_getval['meetwaarden'][0]['val'][$i]['g']."&";
$gas_total+=$data_bc_getval['meetwaarden'][0]['val'][$i]['g'];
}
$data_bc_getval_gas_today = sprintf('%0.3f', $gas_total/1000);
$url = "http://beeclear.local/bc_getVal?type=elek&date=$epoch&duration=day&period=hour";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($curl);
$data_bc_getval = json_decode($json, TRUE);
$elek_total=0;
$get_elek_graph="";
for($i=1; $i<24; $i++) {
$this_elek=$data_bc_getval['meetwaarden'][0]['val'][$i]['v']+$data_bc_getval['meetwaarden'][0]['val'][$i]['vl'];
$get_elek_graph.=$i."h=".$this_elek."&";
$elek_total+=$this_elek;
}
$data_bc_getval_elek_today = sprintf('%0.3f', $elek_total/1000);
#echo $data_bc_getval_elek_today;
?>
Script 3, grafiekjes maken
<?php
# ------- The graph values in the form of associative array
# values array is filles from other function
#$values= array( "1" => 100, "2" => 250, "3" => 300 );
$values = $_GET;
$img_width=220;
$img_height=120;
$margins=20;
# ---- Find the size of graph by substracting the size of borders
$graph_width=$img_width - $margins * 2;
$graph_height=$img_height - $margins * 2;
$img=imagecreate($img_width,$img_height);
$bar_width=5;
$total_bars=count($values);
$gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);
# ------- Define Colors ----------------
$bar_color=imagecolorallocate($img,40,255,0);
$xvalues_color=imagecolorallocate($img,255,255,255);
$background_color=imagecolorallocate($img,0,0,0);
$border_color=imagecolorallocate($img,0,0,0);
$line_color=imagecolorallocate($img,220,220,220);
# ------ Create the border around the graph ------
#imagefilledrectangle($img,1,1,$img_width-2,$img_height-2,$border_color);
imagefilledrectangle($img,0,0,$img_width,$img_height,$border_color);
imagefilledrectangle($img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color);
# ------- Max value is required to adjust the scale -------
$max_value=(intval(max($values)/500)+1)*500;
$ratio= $graph_height/$max_value;
# -------- Create scale and draw horizontal lines --------
$horizontal_lines=4;
$horizontal_gap=$graph_height/$horizontal_lines;
for($i=1;$i<=$horizontal_lines;$i++){
$y=$img_height - $margins - $horizontal_gap * $i ;
imageline($img,$margins,$y,$img_width-$margins,$y,$line_color);
$v=intval($horizontal_gap * $i /$ratio);
imagestring($img,0,0,$y-5,$v,$xvalues_color);
}
# ----------- Draw the bars here ------
for($i=0;$i< $total_bars; $i++){
# ------ Extract key and value pair from the current pointer position
list($key,$value)=each($values);
$x1= $margins + $gap + $i * ($gap+$bar_width) ;
$x2= $x1 + $bar_width;
$y1=$margins +$graph_height- intval($value * $ratio) ;
$y2=$img_height-$margins;
#imagestring($img,0,$x1+3,$y1-10,$value,$bar_color);
if ( $i % 4 == 0 ) {
imagestring($img,0,$x1+3,$img_height-15,$key,$xvalues_color);
}
imagefilledrectangle($img,$x1,$y1,$x2,$y2,$bar_color);
}
header("Content-type:image/png");
imagepng($img);
?>