Ich hab ein bisschen mit den VU-Meter Beispielen herumgespielt…
Dazu der Code:
<?php
if (!isset($_IPS['getHTML'])){
$idOfContentVariable = IPS_GetParent($_IPS['SELF']); // eine String Variable mit Profil ~HTML
$scriptId = $_IPS['SELF'];
$s = "<iframe src='./user/IPS-HighchartsPHP.php?ScriptId=$scriptId' width='100%' height='150' frameborder='0' scrolling='no' ></iframe>";
SetValueString($idOfContentVariable, $s);
return;
}
$varId = 12419 /*[Garten\Klima\Netatmo Wetterstation\OutdoorModule_Temperature]*/ ; //Variable welche angezeigt werden soll
$varId2 = 17332 /*[Garten\Klima\UV-Sensor\UV-Index]*/;
$varId3 = 16687 /*[Garten\Klima\Windmesser\Windgeschwindigkeit]*/;
require_once "Ghunti/HighchartsPHP/Highchart.php";
require_once "Ghunti/HighchartsPHP/HighchartJsExpr.php";
require_once "Ghunti/HighchartsPHP/HighchartOption.php";
require_once "Ghunti/HighchartsPHP/HighchartOptionRenderer.php";
use Ghunti\HighchartsPHP\Highchart;
use Ghunti\HighchartsPHP\HighchartJsExpr;
$chart = new Highchart();
$chart->includeExtraScripts();
$chart->credits = array (
'enabled' => false
);
$chart->exporting = array (
'enabled' => false
);
$chart->chart = array(
'type' => 'gauge',
'backgroundColor' => "rgba(255,255,255, 0.0)",
'plotBorderWidth' => 0,
'plotBackgroundImage' => null,
'height' => 200
);
$chart->title->text = '';
$chart->pane = array(
array(
'startAngle' => -55,
'endAngle' => 55,
'background' => null,
'center' => array('15%', '100%'),
'size' => 300,
'lineColor' => '#FFFFFF'
),
array(
'startAngle' => -55,
'endAngle' => 55,
'background' => null,
'center' => array('50%', '100%'),
'size' => 300
),
array(
'startAngle' => -55,
'endAngle' => 55,
'background' => null,
'center' => array('85%', '100%'),
'size' => 300
)
);
$chart->yAxis = array(
array(
'min' => -20,
'max' => 40,
'minorTickPosition' => 'outside',
'tickPosition' => 'outside',
'tickInterval' => 5,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'step' => 1,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => -20,
'to' => 0,
'color' => '#08298A',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 0,
'to' => 15,
'color' => '#01A9DB',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 15,
'to' => 27,
'color' => '#FFFF00',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 27,
'to' => 40,
'color' => '#DF0101',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 0,
'title' => array(
'text' => '<span style="color:white">T / °C</span>',
'y' => -40
)
),
array(
'min' =>0,
'max' => 12,
'minorTickPosition' => 'outside',
'tickPosition' => 'outside',
'tickInterval' => 1,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => 0,
'to' => 2,
'color' => 'rgba(129, 223, 62, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 2,
'to' => 5,
'color' => 'rgba(244, 247, 35, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 5,
'to' => 7,
'color' => 'rgba(245, 119, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 7,
'to' => 10,
'color' => 'rgba(245, 47, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 10,
'to' => 12,
'color' => 'rgba(245, 29, 227, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 1,
'title' => array(
'text' => '<span style="color:white">UV-Index</span>',
'y' => -40
)
),
array(
'min' =>0,
'max' => 30,
'minorTickPosition' => 'outside',
'tickPosition' => 'outside',
'tickInterval' => 2.5,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => 0,
'to' => 4,
'color' => 'rgba(129, 223, 62, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 4,
'to' => 8,
'color' => 'rgba(244, 247, 35, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 8,
'to' => 12,
'color' => 'rgba(245, 119, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 12,
'to' => 20,
'color' => 'rgba(245, 47, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 20,
'to' => 30,
'color' => 'rgba(245, 29, 227, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 2,
'title' => array(
'text' => '<span style="color:white">Wind m/s</span>',
'y' => -40
)
)
);
$chart->plotOptions->gauge->dataLabels->enabled = true;
$chart->plotOptions->gauge->dial->backgroundColor = 'white';
$chart->plotOptions->gauge->dial->radius = '100%';
$chart->tooltip->valueSuffix = '';
$chart->tooltip->followPointer = true;
$chart->series = array(
array(
'data' => array(GetValue($varId /*[Garten\Klima\Netatmo Wetterstation\OutdoorModule_Temperature]*/)),
'title' => 'Temperatur',
'name' => 'Temperatur',
'tooltip' => array(
'valueSuffix' => ' °C'
),
'yAxis' => 0
),
array(
'data' => array(GetValue($varId2 /*[Garten\Klima\UV-Sensor\UV-Index]*/)),
'name' => 'UV-Index',
'tooltip' => array(
'valueSuffix' => ''
),
'yAxis' => 1
),
array(
'data' => array(GetValue($varId3 /*[Garten\Klima\Windmesser\Windgeschwindigkeit]*/)),
'name' => 'Windgeschwindigkeit',
'tooltip' => array(
'valueSuffix' => ' m/s'
),
'yAxis' => 2
)
);
ob_start();
$chart->printScripts();
$hc_scripts = ob_get_contents();
ob_end_clean();
$hc_renderOptions = $chart->renderOptions();
//echo $hc_renderOptions;
//return;
$s='
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
'.$hc_scripts.'
</head>
<body>
<div id="container"></div>
<script type="text/javascript" >
function getvalCallback(callback){
$.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId.'\', function(data) {
callback(data);
});
}
function getvalCallback2(callback){
$.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId2.'\', function(data) {
callback(data);
});
}
function getvalCallback3(callback){
$.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId3.'\', function(data) {
callback(data);
});
}
function CallbackFunc(data){
var chart = $(\'#container\').highcharts();
var point = chart.series[0].points[0],
newVal,
inc = 0;
var newVal = Number(data);
point.update(newVal);
};
function CallbackFunc2(data){
var chart = $(\'#container\').highcharts();
var point = chart.series[1].points[0],
newVal,
inc = 0;
var newVal = Number(data);
point.update(newVal);
};
function CallbackFunc3(data){
var chart = $(\'#container\').highcharts();
var point = chart.series[2].points[0],
newVal,
inc = 0;
var newVal = Number(data);
point.update(newVal);
};
$(\'#container\').highcharts(
'. $hc_renderOptions . ',
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {getvalCallback(CallbackFunc) }, 1000);
setInterval(function () {getvalCallback2(CallbackFunc2) }, 1000);
setInterval(function () {getvalCallback3(CallbackFunc3) }, 1000);
}
}
);
</script>
</body>
</html>';
echo $s;
?>
Grüße
hoep