Hallo Wolfgang,
anbei Skript für eine (funktionierende) Anzeige meiner Wettersensoren auf der Startseite.
<?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;
}
//$value = 10311 /*[Haus\Erdgeschoss\Verpackung\EDS1068 Sensor\Alarm\LightHighAlarmState]*/;
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' => 0,
'max' => 100,
'minorTickPosition' => 'outside',
'tickPosition' => 'outside',
'tickInterval' => 10,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'step' => 1,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => 0,
'to' => 50,
'color' => 'rgba(129, 223, 62, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 50,
'to' => 65,
'color' => 'rgba(244, 247, 35, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 65,
'to' => 80,
'color' => 'rgba(245, 119, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 80,
'to' => 100,
'color' => 'rgba(245, 47, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 0,
'title' => array(
'text' => '<span style="color:white">rel. LF / %</span>',
'y' => -40
)
),
array(
'min' =>950,
'max' => 1050,
'minorTickPosition' => 'outside',
'tickPosition' => 'outside',
'tickInterval' => 10,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => 950,
'to' => 970,
'color' => 'rgba(245, 47, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 970,
'to' => 990,
'color' => 'rgba(245, 119, 29, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 990,
'to' => 1020,
'color' => 'rgba(244, 247, 35, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 1020,
'to' => 1050,
'color' => 'rgba(129, 223, 62, 0.9)',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 1,
'title' => array(
'text' => '<span style="color:white">Luftdruck / mBar</span>',
'y' => -40
)
),
array(
'min' =>0,
'max' => 50,
'minorTickPosition' => 'outside',
'tickPosition' => 'outside',
'tickInterval' => 5,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => 0,
'to' => 10,
'color' => '#00BFFF',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 10,
'to' => 20,
'color' => '#0080FF',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 20,
'to' => 30,
'color' => '#0040FF',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 30,
'to' => 40,
'color' => '#0000FF',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 40,
'to' => 50,
'color' => '#4000FF',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 2,
'title' => array(
'text' => '<span style="color:white">Regen heute l/m²</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(26003 /*[Garten\Klima\Klima Mittelwerte\Luftfeuchtigkeit]*/)),
//'title' => 'Temperatur',
'name' => 'rel. Luftfeuchtigkeit',
'tooltip' => array(
'valueSuffix' => ' %'
),
'yAxis' => 0
),
array(
'data' => array(GetValue(11797 /*[Garten\Klima\Klima Mittelwerte\Luftdruck]*/)),
'name' => 'Luftdruck',
'tooltip' => array(
'valueSuffix' => ' mBar'
),
'yAxis' => 1
),
array(
'data' => array(GetValue(48499 /*[Garten\Klima\Regenmesser\Regen heute]*/)),
'name' => 'Regenmenge',
'tooltip' => array(
'valueSuffix' => ' l/m²'
),
'yAxis' => 2
)
);
ob_start();
$chart->printScripts();
$hc_scripts = ob_get_contents();
ob_end_clean();
$hc_renderOptions = $chart->renderOptions();
//echo $hc_renderOptions;
//return;
$varId = 26003 /*[Garten\Klima\Klima Mittelwerte\Luftfeuchtigkeit]*/ ; //Variable welche angezeigt werden soll
$varId2 = 11797 /*[Garten\Klima\Klima Mittelwerte\Luftdruck]*/;
$varId3 = 48499 /*[Garten\Klima\Regenmesser\Regen heute]*/;
$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 getvalCallback7(callback){
$.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId.'\', function(data) {
callback(data);
});
}
function getvalCallback8(callback){
$.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId2.'\', function(data) {
callback(data);
});
}
function getvalCallback9(callback){
$.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId3.'\', function(data) {
callback(data);
});
}
function CallbackFunc7(data){
var chart = $(\'#container\').highcharts();
var point = chart.series[0].points[0],
newVal,
inc = 0;
var newVal = Number(data);
point.update(newVal);
};
function CallbackFunc8(data){
var chart = $(\'#container\').highcharts();
var point = chart.series[1].points[0],
newVal,
inc = 0;
var newVal = Number(data);
point.update(newVal);
};
function CallbackFunc9(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 () {getvalCallback7(CallbackFunc7) }, 5000);
setInterval(function () {getvalCallback8(CallbackFunc8) }, 5000);
setInterval(function () {getvalCallback9(CallbackFunc9) }, 5000);
}
}
);
</script>
</body>
</html>';
echo $s;
?>
Beste Grüße
hoep
