RS HighChartsPHP Spielwiese für IP-Symcon

Nach dem ich den RS Energy Forecast vollständig auf HighCharts 4.0 und HighChartsPHP umgestellt habe, habe ich angefangen, eine Spielwiese zum testen und entwickeln zu bauen. Auch wenn es eine Testumgebung ist, habe ich Wert auf nachvollziehbaren und leicht lesbaren Code gelegt (könnte aber noch besser werden).

Die erste Fassung stelle ich mal in den Download.

Erläuterungen, Anleitungen und Erweiterungen werde ich hier in den kommenden Tagen und Wochen ergänzen.

Für wen?

Für völlige Neueinsteiger ist das hier sicher to much. Aber wer die IP-Symcon Basics (Variablen, Scripte, WFE) und die AC_Get-Befehle beherrscht (PHP setze ich ebenfalls voraus), der kommt hiermit sicher weiter und hat eine komfortables Test- und Spiel-Universum. Die Übersetzung (aus dem IPS-Script heraus) in ein lauffähiges HTML-Dokument mit Einbettung der HighCharts-relevanten JS Codes wird einem hiermit schon mal vollständig abgenommen.

Keinesfalls ist dies ein Plug-and-Play Fertigprojekt => es ist eine Experimentier-Umgebung, die dem Entwickler die „nebensächlichen“ Dinge abnehmen soll, so dass man sich auf IPS-spezifische Dinge konzentrieren kann.

Es würde mich natürlich freuen, wenn sich hieraus auch Fertigprojekte für die freie Wildbahn entwickeln :-)

Das Konstrukt

Ordnerstruktur auf der Festplatte

Diese Installation ist völlig eigenständig und dürfte nicht mit anderen, evtl. parallel installierten HC-Welten in Konflikt kommen:

• die HighChartPHP-Klassen habe ich in einem IPS-Script (+ Config-Script) zusammengefasst
• die HighChart 4.0 Library befindet sich in einem eigenständigen Ordner unter „\webfront\user\RS_HighCharts\js“

Somit kann man diese Installation bedenkenlos im eigenen System einbauen. Weiterhin braucht man sich nicht um die Einbindung der jeweils benötigten HC-Libs kümmern: ein 

reicht hier völlig aus (wobei 55128.ips.php die HighChartsPHP beinhaltet, siehe auch unten Screenshot vom Objektbaum).

Man braucht sich als Anwender also weder um die HighChartsPHP noch um die HighCharts 4.0 Library kümmern – schon gar nicht auf Dateiebene. Alles ist aus der Konsole bzw. via Script direkt erreichbar.

Ablage der fertigen Chart-Files im tmp-Ordner

Weiterhin habe ich jquery 2.1.0 mit eingebaut. Zu guter Letzt befindet sich noch ein „\tmp“-Ordner im Projektverzeichnis. Hier werden alle HighChart-Ergebnisse abgelegt. Diese werden via iframe in der Content-Variable  eingebunden und erzeugen so das im WFE sichtbare HighChart. PS: die im ‚\tmp‘-Ordner abgelegten Charts sind auch außerhalb des Webfronts lauffähig -> sie beinhalten eine vollständige HTML-Webseite (falls man diese Charts vielleicht in einen weiteren Webserver einbauen will).

Die Beispiele

Beispielscript Strom/-Temperatur mit IPS-Anbindung

Im Beispiel sind 2 HighChart-Scripte enthalten: 

1x ein Boxplot (ohne weitere Datenanbindung an IPS)

1x Strom-und Temperaturanzeige für den heutigen Tag (mit IPS-Anbindung)

Das Strom- und Temperatur-Script ist für die Aufnahme von IPS-Daten vorgesehen: einfach die ID’s für eigene Variablen angeben (am Besten auch Strom und Temperatur), anschließend Script starten und ab ins WFE: staunen.

Eigene Experimente

Eigenes Beispiel-Chart einbauen

Wer auch eigene Experimente machen will (also neue, eigene Charts basteln will), legt sich am Besten

• ein weiteres Beispiel-Script an,
• kopiert den kompletten Script-Inhalt aus einem bestehenden Beispiel,
• legt unterhalb des Scripts eine sogenannte Content-Variable an (= String-Variable mit ‚~HTML‘-Variablenprofil),
• gibt im neuen Script die ID dieser Variable an,
• legt einen Link von dieser Content-Variable in die Kategorie ‚RS HC Spielwiese‘. Hier entweder unter ‚linke Seite‘ oder ‚rechte Seite‘.

Und schon erscheint das neue Chart im Inhaltswechlser im WFE (das Script muss natürlich schon ein HC-Chart erzeugt haben!).

Nun muss man nur noch die richtige Logging-Variable zuweisen und ggf. Anpassungen nach eigenem Geschmack vornehmen. Voila – das erste eigene HighChart ist fertig.

spätere Updates

will man dieses Paket später mal updaten (es ist sehr wahrscheinlich, dass ich hier in Zukunft Erweiterungen einstellen), so sollte man alles, was sich nach der Installation im Config-Ordner befindet, auch drin stehen lassen. Für diejenigen,die sich mit dem Project Exporter nicht auskennen (was man nicht muss): ohne Installationsprotokolle keine späteren Updates.

Tipp:

Wer zukünftige Updates nutzen will, gleichzeitig aber eigene HighChart-Configs vor dem Überschreiben schützen will, sollte nicht in den Beispielen rumfrickeln! Besser ist es, eine eigene Kategorie im Projekt (oder wo anders) zu erstellen, und die eigenen Kreationen dort abzulegen. So ist sicher gestellt, dass diese bei späteren Updates durch das Installerscript nicht überschrieben werden.

Installation

Objektbaum der V 0.2 mit Kategorie für selbst erstellte und vor Überschreiben geschützte Scripte

Im Download ist eine komplett in IPS integrierte HighChartsPHP sowie HighCharts 4.0 Installation enthalten (derzeit noch keine Highstocks-Library!). Dank RS Project Exporter eine One-Click Geschichte!

Einfach Install-Script aus dem Download in IP-Symcon starten – fertig!

Versions-Historie

V 0.1: Initial-Version

V 0.2: Versionsdetails

Quellen

HighChartsPHP

HighCharts-Library