HighChart-Tipps: zentrale Farbverwaltung
Vorweg und zum Verständnis
hier geht es um die Homeautomations-Software IP-Symcon sowie um die Integration der HighCharts-Bibliothek ins IP-Symcon nach KHC. Bevor Du jetzt voreilig weiter klickst:
falls Du HighCharts verwendest: irgendwann wirst Du auch auf die Idee kommen, Farben zentral verwalten zu wollen. Wenn man aber bereits 40 HighCharts und mehr am Start hat… und diese alle nachträglich anpassen muss….. dann lieber gleich zu Beginn ein wenig mehr Aufwand in eine solche Verwaltung stecken – ich weiß, wovon ich rede :-)
Zweck der Veranstaltung
mit zunehmender Anzahl von HighCharts in meinem IPS-System wuchs der Wunsch, für gewisse Standard-Graphen die Farbzuordnungen zentral zu verwalten um ein einheitliches Design in allen Charts zu realisieren. Ich habe mir z.B. angewöhnt, z.B. für Temperaturen grundsätzlich Rot, für Luftdruck Grün, für Helligkeit Gelb usw. usw. zu nutzen. Aber was genau ist Rot, Gelb oder Grün? Ist es dieses Rot oder dieses Rot (wahrscheinlich wird man den Unterschied kaum erkennen)? Und wie bekomme ich die bisher verwendete Farbe raus, wenn ich nach Wochen ein neues Chart implementieren will? Wie ändere ich die Farben jedes der derzeit 50 Charts, wenn ich z.B. das Design meiner Webseite ändern will?
wie funktionierts?
Allgemein üblich ist, für Farben codierte Angaben zu machen, z.B. im RGB-Format (z.B. rgb 255,255,255 steht für Weiß) oder im Hex-Format (#FFFFFF steht ebenfalls für Weiß). Ich habe mich für die Hex-Codierung entschieden. Im „Farbverwaltungsscript“ werden alle Standard-Farben gepflegt, die man meint zu brauchen oder vereinheitlichen will. Das Script schreibt diese dann in eine String-Variable. In den Scripts, in denen man diese Farbzuordnungen benötigt, wird der Code-Schnipsel „Importscript Farbzuordnungen “ eingebaut. Dieser Schnipsel ruft die Funktion „getArraybyString“ auf, welche in dem Script aus dem Datenstring der IPS-String-Variable ein Array mit den Farbzuordnungen zur Verfügung stellt. Im Grunde wird aus dem Datenstring („Sonnenstand,#FFC400;Temperatur,#E91515;„) ein Array gebaut, wobei die Array-Keys nicht numerisch sind, sondern sprechende Namen enthalten (Beispiel: der Key „Temperatur“ entspricht der Farbdefinition für Temperatur-Graphen). in den jeweiligen Scripts wird der gewünschte Wert aus dem Array geholt – das war’s schon.
Implementierung der Farbverwaltung ins IP-Symcon
- Anlegen einer Kategorie, Name „HC Standard-Farben“ (am besten unter der Kategorie, die die bestehenden HighCharts-Scripte enthält
- Anlegen einer String-Variable unter der neu angelegten Kategorie, Name „Standardfarben-Array„
- Anlegen des Farbverwaltungs-Scripts unter der neu angelegten Kategorie
- unten stehenden Code des Farbverwaltungsscripts in das neu angelegte IPS-Script kopieren
- ein weiteres Script mit sprechendem Namen (Beispiel: „CreateArraybyString„) anlegen, wichtig: das Script muss unter dem Filenamen „CreateArraybyString.ips.php“ gespeichert werden, hierzu bitte bei der Scriptanlage unter Optionen/benutze speziellen Dateinamen „CreateArraybyString.ips.php“ angeben!
- unten stehenden Code „Funktion Create Array by String“ in das eben angelegte Script kopieren und abspeichern
- ID der eben angelegten String-Variable ( Name „Standardfarben-Array“ ) im Farbverwaltungsscript (Konfig-Bereich) pflegen
- Script ausführen => nun sind schon mal die ersten Werte in der Variable und stehen zur weiteren Verwendung zur Verfügung
Anwendung innerhalb der HighCharts-Scripte
- Code aus dem „Importscript Farbzuordnungen“ möglichst weit oben in das gewünschte HighCharts-(Config)Script (oder jedes beliebig andere Script) einfügen
- statt der Farbangabe in den Series-Daten eines jeden Graphen (bisher: „color: ‚#123456‘, “ ) den entsprechenden Array-Key angeben: „color: ‚$Farb_Array[‚Temperatur‘]‘, “ !wichtig! der Array-Variable muss unbeding in Anführungszeichen oben (‚ ‚) stehen!
ein kompletter Series-String sieht dann so aus:
Farbverwaltungsscript
das Farbverwaltungsscript dient dazu, die zu verwaltenden Zuordnungen „Graph <=> Graph-Farbe“ aufzunehmen und anschließend in einem definierten Format in eine IPS-Stringvariable abzulegen. Hat man neue Farbzuordnungen gepflegt, wird das Script ausgefühhrt. Zur Kontrolle wird der komplette Datenstring unten in der IPS-Echoausgabe angezeigt. Die im Script definierten Zuordnungen nach dem Schreiben in die Variable nicht löschen sondern bei Bedarf lediglich erweitern!
Anmerkung: der letzte Datensatz darf nicht mit ‚;‘ abgeschlossen werden!
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<? ####### Beispielcode für andere Scripte ######################################## /* // Farb-Array-ID include "CreateArraybyString.ips.php"; $Farb_Array_ID = 34214 ; // Stringvar Standardfarben Array $Farb_Array_String = getValueString($Farb_Array_ID); $Farb_Array = getArrayFromString($Farb_Array_String, $kvDelimiter=',', $dsDelimiter=';'); //print_r($Farb_Array); */ ####### Beispielcode für andere Scripte Ende ################################### // +++++ Konfig ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ $Farb_Array_ID = 34214 /*[HighCarts\HC Standard-Farben\Farb-Array]*/ ; // Stringvar Standardfarben Array // +++++ Konfig Ende ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // HighCharts Standard-Farben $Farb_Array = 'Sonnenstand,#FFC400; Temperatur,#E91515; Feuchte,#00D4FF;<br /> Luftdruck,#2AFF2A;<br /> Helligkeit,#FF8C00;<br /> Niederschlagsdauer,#696969;<br /> Niederschlagsmenge,#4682BF;<br /> Niederschlagsintensität,#176BBF;<br /> Niederschlag,#818181; UVB,#8002A3;<br /> UVI,#FF00D4 ';<br /><br />// String bereinigen <br />$Farb_Array = str_replace(" ",'',$Farb_Array); <br />// Return entfernen <br />$Farb_Array = str_replace(" ",'',$Farb_Array); <br />//Tab entfernen <br />// String in Var schreiben setValueString($Farb_Array_ID, $Farb_Array); echo $Farb_Array; ?> |
|
1 |
Funktions-Script “CreateArraybyString.ips.php”
dieser Code ist eine universell verwendbare Funktion und wird in diesem Kontext benötigt, um aus dem in der String-Variable gespeicherten String ein Array mit Farbzuordnungen zu generieren. Die Besonderheit (wie oben schon angesprochen) ist hier, dass das Array sprechende Keys enthält. Falls man die Key-Namen nicht im Kopf hat, kann man sich das komplette Array innerhalb des Scripts mit print_r( $Farb_Array ) ausgeben lassen.
Das Array sieht im Ergebnis z.B. so aus:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Array ( [Sonnenstand] => #FFC400 [Temperatur] => #E91515 [Feuchte] => #00D4FF [Luftdruck] => #2AFF2A [Helligkeit] => #FF8C00 [Niederschlagsdauer] => #696969 [Niederschlagsmenge] => #4682BF [t] => #176BBF [Niederschlag] => #818181 [UVB] => #8002A3 [UVI] => #FF00D4 ); |
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<? /* Funktion macht aus einem String ein Array, String-Format: 'Temperatur,#E91515;Feuchte,#00D4FF...' ; Datensatz-Delimiter , Key-/Value Delimiter Beispiel: Temperatur = Array-Key #E91515 = Array-Value Input-String: Temperatur,#E91515;Feuchte,#00D4FF... Output-Array: Array ( [Temperatur] => #E91515 [Feuchte] => #00D4FF [Luftdruck] => #2AFF2A [Helligkeit] => #FFAA00 [UVI] => #FF00D4 ) */ function getArrayFromString($str, $keyDelimiter, $dsDelimiter) { $resultArray = array(); if(is_string($str)) { $ds = explode($dsDelimiter, $str); if(is_array($ds)) { foreach($ds as $keyArray) { $key = explode($keyDelimiter, $keyArray); $resultArray[$key[0]] = $key[1]; } } } return $resultArray; } ?> |
Importscript Farbzuordnungen
dieser Scriptschnipsel kann in jedes beliebige Script eingefügt werden. Wichtig ist, dass zunächst die Variable definiert wird, die die Farbzuordnungsdaten enthält.
Code:
|
1 2 3 4 5 6 |
// Farb-Array-ID include "CreateArraybyString.ips.php"; $Farb_Array_ID = 34214 /*[HighCarts\HC Standard-Farben\Standardfarben-Array]*/ ; $Farb_Array_String = getValueString($Farb_Array_ID); $Farb_Array = getArrayFromString($Farb_Array_String, $kvDelimiter=',', $dsDelimiter=';'); //print_r($Farb_Array); |
|
1 |
|
1 |
<br /><br /><br /> |
