Hi,
ist es möglich einen Wert, z.B. Prozentwert in IPSView wie einen Tacho darzustellen?
Also eine Tachoscheibe als Bild, 0 bis 100% und dann bewegt sich nur je nach Wert der Variable der Zeiger dementsprechend.
Grüße
Hi, mit ips alleine nicht aber mit Highcharts/highstock geht sowas.
Bei mir wird bspw die warmwassertemparatur dargestellt.
Gesendet von iPhone mit Tapatalk
Das ist hübsch. Hast Du ein Beispielscript gerade verfügbar?
Gesendet von iPhone mit Tapatalk
Die Dinge findest Du unter Highcharts Demo unter Gauges. Wenn Du auf den jeweiligen Gauge klickst gibt es die Auswahl EDIT IN JSFIDDLE, dort kannst Du den Code einsehen und wenn Du was änderst auch gleich sehen wie es dann aussieht.
Hi,
ich versuche grade die Konfiguration anhand der Beispiele auf der Highcharts-Seite hinzubekommen. Es gibt aber ein paar Probleme.
Mein Script sieht zur Zeit so aus:
<?php
Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden
// IPS Variablen ID´s
$CfgDaten['ContentVarableId']= XXXXX; // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
$CfgDaten['HighChartScriptId']= XXXXX; // ID des Highcharts Scripts
// Highcharts oder Highstock (default = Highcharts
$CfgDaten['Ips']['ChartType'] = 'Highcharts';
// Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
if (!isset($CfgDaten["StartTime"]))
$CfgDaten["StartTime"] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())); // ab heute 00:00 Uhr
if (!isset($CfgDaten["EndTime"]))
$CfgDaten["EndTime"] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten["EndTime"] = time(); // = bis jetzt
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
// wenn Popup dann muss die WebfrontConfigId und der Titele übergeben werden
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = XXXXX;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// Serienübergreifende Einstellung für das Laden von Werten
$CfgDaten['AggregatedValues']['HourValues'] = -1; // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
$CfgDaten['AggregatedValues']['DayValues'] = -1; // ist der Zeitraum größer als X Tage werden Tageswerte geladen
$CfgDaten['AggregatedValues']['WeekValues'] = -1; // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
$CfgDaten['AggregatedValues']['MonthValues'] = -1; // ist der Zeitraum größer als X Tage werden Monatswerte geladen
$CfgDaten['AggregatedValues']['YearValues'] = -1; // ist der Zeitraum größer als X Tage werden Jahreswerte geladen
$CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000; // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen $CfgDaten['AggregatedValues']['MixedMode'] = false; // alle Zeitraumbedingungen werden kombiniert
$CfgDaten['AggregatedValues']['MixedMode'] = false;
// **************************************************************************************
// *** Highcharts Options ***
// **************************************************************************************
// Ab hier werden die Bereiche des Highchart-Objektes parametriert.
// Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
// Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/
// **************************************************************************************
// *** chart *** http://www.highcharts.com/ref/#chart
// **************************************************************************************
$CfgDaten['chart']['type'] = 'gauge';
$CfgDaten['chart']['plotBackgroundColor'] = NULL;
$CfgDaten['chart']['plotBackgroundImage'] = NULL;
$CfgDaten['chart']['plotBorderWidth'] = 0;
$CfgDaten['chart']['plotShadow'] = false;
// **************************************************************************************
// *** title *** siehe http://www.highcharts.com/ref/#title
// **************************************************************************************
$CfgDaten['title']['text'] = "Ventilöffnung"; // Überschrift des gesamten Charts
// **************************************************************************************
// *** pane *** siehe http://www.highcharts.com/ref/#pane
// **************************************************************************************
$CfgDaten['pane']['startAngle'] = -150;
$CfgDaten['pane']['endAngle'] = 150;
// **************************************************************************************
// *** yAxis *** http://www.highcharts.com/ref/#yAxis
// **************************************************************************************
$CfgDaten['yAxis']['min'] = 0;
$CfgDaten['yAxis']['max'] = 100;
$CfgDaten['yAxis']['minorTickInterval'] = 'auto';
$CfgDaten['yAxis']['minorTickWidth'] = 1;
$CfgDaten['yAxis']['minorTickLength'] = 10;
$CfgDaten['yAxis']['minorTickPosition'] = 'inside';
$CfgDaten['yAxis']['minorTickColor'] = '#666';
$CfgDaten['yAxis']['tickPixelInterval'] = 30;
$CfgDaten['yAxis']['tickWidth'] = 2;
$CfgDaten['yAxis']['tickPosition'] = 'inside';
$CfgDaten['yAxis']['tickLength'] = 10;
$CfgDaten['yAxis']['tickColor'] = '#666';
$CfgDaten['yAxis']['labels']['step'] = 2;
$CfgDaten['yAxis']['labels']['rotation'] = 'auto';
$CfgDaten['yAxis']['title']['text'] = "%";
// **************************************************************************************
// *** series *** http://www.highcharts.com/ref/#series
// **************************************************************************************
$serie = array();
$serie['name'] = "Ventil-Öffnungswinkel";
$serie['Id'] = XXXXX;
$CfgDaten['series'][] = $serie;
// Highcharts-Theme
// $CfgDaten['HighChart']['Theme']="grid.js"; // von Highcharts mitgeliefert: dark-green.js, dark-blue.js, gray.js, grid.js
$CfgDaten['HighChart']['Theme']="gray.js"; // IPS-Theme muss per Hand in in Themes kopiert werden....
// Abmessungen des erzeugten Charts
$CfgDaten['HighChart']['Width'] = "100%"; // in px, 0 wird auch in 100% konvertiert
$CfgDaten['HighChart']['Height'] = 300; // in px
// -------------------------------------------------------------------------------------------------------------------------------------
// und jetzt los ......
$s = IPS_GetScript($CfgDaten['HighChartScriptId']); // Id des Highcharts-Scripts
include($s['ScriptFile']);
// das ist ab V3.000 der neue Aufruf
RunHighcharts($CfgDaten);
?>
Als Fehlermeldung beim Ausführen erhalte ich dann:
Fatal error: Cannot unset string offsets in /var/lib/symcon/scripts/XXXXX.ips.php on line 347
Abort Processing during Fatal-Error: Cannot unset string offsets
Error in Script /var/lib/symcon/scripts/XXXXX.ips.php on Line 347
Das ist im highcharts.php folgende Zeile:
unset ($cfgAxis['Name']);
Kann mir jemand auf die Sprünge helfen? Ich möchte erst mal einen ganz simplen Tacho darstellen, ohne Färbungen oder ähnliches. Das kommt dann später 
Viele Grüße
Dirk
Hi,
Boui
Ich such den Schnipsel mal raus. Ich musste da was externes bauen weil sich der Zeuge wie bei einem „echtem Tacho“ ohne reload aktualisieren sollte…
Gesendet von iPhone mit Tapatalk
Das wäre nett. Dank Dir schon mal vorab.
Gesendet von iPhone mit Tapatalk
Hi,
so, ich habe mal ein bisschen gesucht und wenn Ihr das so macht, sollte es sogar klappen.
Zuerstmal habe ich Highcharts so wie hier implementiert
HighchartsPHP
Danach habe ich eine String-Variable mit dem Profil ~HTML und darunter ein Script mit folgendem Inhalt erstellt
<?php
if (!isset($_IPS['getHTML'])){
$idOfContentVariable = IPS_GetParent($_IPS['SELF']); // eine String Variable mit Profil ~HTML
$scriptId = $_IPS['SELF'];
$s = "<iframe src='./user/IPS-Highcharts.php?ScriptId=$scriptId' width='100%' height='450' frameborder='0' scrolling='no' ></iframe>";
SetValueString($idOfContentVariable, $s);
return;
}
$varId = 20558 /*[Steuerelemente\Heizung\Wasserspeicher\Pokeys-Shared Slots Heizungsprogramm\Shared Slot 2 # WW IST\Temparatur]*/;
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
);
$chart->title->text = '';
$chart->pane = array(
array(
'startAngle' => -155,
'endAngle' => 155,
'background' => null,
'lineColor' => '#FFFFFF'
)
);
$chart->yAxis = array(
array(
'min' => 45,
'max' => 70,
'minorTickPosition' => 'outside',
'minorTickLength' => 10,
'minorTickColor' => '#fff',
'tickWidth' => 2,
'tickPosition' => 'outside',
'tickInterval' => 5,
'tickColor' => '#fff',
'tickLength' => 10,
'labels' => array(
'rotation' => 'auto',
'distance' => 15,
'step' => 1,
'style' => array(
'color' => '#FFFFFF'
),
),
'plotBands' => array(
array(
'from' => 45,
'to' => 55,
'color' => '#3366ff',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 55,
'to' => 60,
'color' => '#fdcd00',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 60,
'to' => 65,
'color' => '#fc9900',
'innerRadius' => '100%',
'outerRadius' => '105%'
),
array(
'from' => 65,
'to' => 70,
'color' => '#f90301',
'innerRadius' => '100%',
'outerRadius' => '105%'
)
),
'pane' => 0
)
);
$chart->plotOptions->gauge->dataLabels->enabled = false;
$chart->plotOptions->gauge->dial->backgroundColor = 'silver';
$chart->plotOptions->gauge->dial->rearlength = '15%';
$chart->plotOptions->gauge->dial->radius = '110%';
$chart->plotOptions->gauge->pivot->backgroundColor = 'silver';
$chart->tooltip->valueSuffix = '';
$chart->tooltip->followPointer = false;
$chart->series = array(
array(
'data' => array(GetValue($varId)),
'title' => 'Temperatur',
'name' => 'Temperatur',
'tooltip' => array(
'valueSuffix' => ' °C'
),
'yAxis' => 0
)
);
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 CallbackFunc(data){
var chart = $(\'#container\').highcharts();
var point = chart.series[0].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) }, 5000);
}
}
);
</script>
</body>
</html>';
echo $s;
?>
Hoffe es nützt euch was.
Viele Grüße
Super. Läuft bereits und macht optisch echt was her.
Danke
Hi,
hübsche Lösung habe ich gleich mal Probiert.
Ist es Normal das man den Script Triggern muss um den Aktuellen Wert zu haben?
Gruß
Ja.
Ich ziehe dazu die Aktualisierungen auseinander und vergebe ungerade Werte, um keine Überlastung zu produzieren.
Hab halt schon einige Highcharts.
Gesendet von iPhone mit Tapatalk
Hi,
um sich immer den aktuellen Wert anzeigen zu lassen,
habe ich mich an diesen Post von ‚khc‘ gehalten:
Gruß
Olli
Ich grab das mal aus weil die Überschrift gar so schön passt.
Der letzte geile Sch… zum Thema Tacho, diverse analoge Anzeigen uvm. ist das JSLive Modul von @Acer90
Hier erklärt:
Gehört für mich zu den Must Haves!
Cheers Seppm
1 „Gefällt mir“