Hallo Acer90,
vielen Dank für dieses tolle Modul das IP-Symcon optische massiv aufwertet, ich habe es mal testweise installiert und bin extrem beeindruckt! Werde es hier und dort im Webfront einsetzen wollen.
Habe keine Fehlermeldung für Dich, trotzdem eine Frage: Wie sind die Parameter (Farben, Schriftgrößen, Längen, Breite, Dicken etc.) in den Bilder im zweiten Posting eingestellt? Habe es hier versucht, es nachzustellen, aber die Möglichkeiten sind ja so gigantisch…
Joachim
ich exportiere dir am wochenende einmal die config, und pack sie unter den postings, dann könnt ihr die importieren, unten unter configuration.
@JPaeper welches Bild meinst Du denn? Dann ziehe ich den Export und erkläre gleich noch, wo wie welche Einstellungen zu welchem Ergebnis führen.
Gruß
Burkhard
…ich meinte die Wh-Anzeigen…
Joachim
Hier kommt es schon:
Gauge-wh.zip (906 Bytes)
Ich schreibe heute Abend noch nen Kurztrip durch die Einstellungen, wo was dafür eingestellt werden muss.
Erstmal für Dich:
1.) Download der Datei
2.) Entpacken
3.) Datei importieren:
Dann hast Du die Grundkonfiguration für den Halbkreis. Solltest Du mehr als einen Halbkreis wollen, änderst Du den Punkt: „Einstellen der Radialanzeige“:
Wie gesagt, mehr Infos kommen heute Abend.
Gruß
Burkhard
@Burki24 Würde das gern morgen mal oben in den 1. Post schreiben, wenn du damit kein problem hast
@JPaeper Hab schnell mein Pc angeworfen, die konfigurationsdatei, sind jetzt in den entsprechenden Post direkt unter den bildern
Super! Vielen Dank!
Ich hoffe, das importieren hat funktioniert. Muss heute überraschend nochmal weg. Also wird es mit der Anleitung leider erst zu morgen klappen. 
Gruß
Burkhard
Einstellungen für die Gauge, oder „Was bewirkt was?“
@JPaeper Ich hoffe, das hilft Dir. 
1. Vorlage
Kreisförmigen Anzeige (CanvasGauges-Radial)
Waagerechte, gerade Anzeige (CanvasGauges-Linear)
Senkrechte, gerade Anzeige (CanvasGauges-Linear(vertical))
Kompass (Anzeige von z.B. Windrichtung)
2. Titel
Erklärt sich wohl von selber.
3. Platte
Gestaltet den Hintergrund. Die Platte wird immer als ganzes dargestellt. Sollte also nicht zum Einsatz kommen, wenn Ihr nur einen Halbkreis darstellen wollt:
Bei der Platte kann man den Varbverlauf gestalten. Dabei ist Haupt die Farbe des Zentrums und Ende die Farbe am Rand. Zusätzlich kann man noch den Transparent-Level bestimmen:
4. Nadel/Zeiger
Die Nadel definiert das Design des Anzeigers. Hier gibt es zwei Formen:
Der Pfeil geht immer über die Mitte der Gauge hinaus oder endet in der Mitte. Er stellt eine Kompassnadel dar:
Dabei bestimmt der Startpunkt die Länge der gegenpoligen Seite (Süd). Der Endpunkt Die Länge der Nordnadel:
Der Zeiger(Linie) Ist eine Pegelanzeige:
Hier bestimmt der Startpunkt die Entfernung vom Mittelpunkt und das Ende die Nähe zum Rand. Mit der Breite bestimmen wir die Dicke des Zeigers:
5. Wert
Hier kann definiert werden, mit welcher Farbe/Schrift der Wert als Text UNTER der Gauge dargestellt wird. WICHTIG: Wenn Ihr eine Halbkreis-Gauge entwerft, solltet Ihr die Nutzung der Wert-Anzeige vermeiden. Diese erscheint nicht direkt unter dem Halbkreis, sondern unterhalb des gedachten Vollkreis, also weit entfernt von der dargestellten Gauge:
Das lässt sich auch nicht anders ausrichten.
6. Fortschrittsbalken
Neben der Nadel/Zeigerdarstellung bietet die Gauge noch die Anzeige eines Fortschrittbalkens:
Ihr seht am äusseren Rand der Skala einen Balken. Dem können zwei Farben zugeordnet werden:
Hauptfarbe: Die Farbe, die den gesamten Balken darstellt
Fortschritt: Farbe, die bis zur Position der Nadel/Zeiger angezeigt wird. Daneben kann man über die Breite noch die Stärke des Balkens definieren (für die, die es heftig wollen):
Wer jetzt keine Nadel/Zeiger mag, kann auch nur mit dem Fortschrittsbalken arbeiten:
Dazu wird die Nadel/Zeiger einfach ausgeschaltet.
7. Schritte/Zwischenwerte
WICHTIG: Die Zwischenschritte sind unabhängig von den vergebenen Maximalwerten der Skala. Wenn Ihr also bei min. und max. die Rahmenbedingungen für die Anzeige der Werte bestimmt hat dass keinen Einfluss auf die hier vergebenen „Strokes“.
Einer der interessantesten Punkte bei den Einstellungen. Hier wird die Skala definiert und z. B. die Warnbereiche:
Als erstes Bestimmt Ihr hier die Schritte:
Danach die Highlights, also die farblich hervorgehobenen Bereiche in der Skala:
Diese beiden Konfigurationen ergeben praktisch die Skala, die Ihr oben seht. Farbwahl und hervorgehobene Bereiche könnt Ihr komplett selber festlegen.
Dann Könnt Ihr noch die Menge der Zwischenschritte (ohne Wertanzeige) bestimmen:
WICHTIG: Hier müsst Ihr mind. 2 angeben. Bei 1 wird kein Zwischenschritt angezeigt.
Als letztes vergebt Ihr die Farben für die Skala:
8. Einstellungen der Radialanzeige
Hier wird der Radial-Gauge bestimmt. Die Werte werden in Grad angegeben
Bei einem Halbkreis Fange ich bei Startwinkel 90° an und möchte eine Skala von 180° haben (Winkel der Anzeige):
Wenn ich einen Start und einen Endpunkt haben möchte, kann ich das mit verschieben der Winkel erreichen. Wenn ich also den Startwinkel auf 45° und den Winkel der Anzeige auf 270° festlege, sieht die Gauge so aus:
9. Einstellungen der Linearanzeige
Seite Schritte bestimmt den Grundlegenden Aufbau des Linear-Gauge
Beidseitig:
Links (Oben):
Rechts (Unten):
Bei den Werten (Nummern) verhält es sich genauso.
Auch bei den Linearen Gauges funktionieren Nadel und Fortschrittsbalken gleichermaßen.
10. Animation
Die Gauges sind animiert (Ausschlag der Nadel/Zeiger und der Fortschrittsbalken). Hier könnt Ihr die Geschwindigkeit und den Effekt einstellen. Ich habe beispielsweise mal den Bounce-Effekt mit einer relativ langsamen Geschwindigkeit zur Veranschaulichung genommen:
Dies sind nur Beispiele, am Besten, Ihr spielt hier selber mal mit den verschiedenen Effekten, die Zur Verfügung stehen.
Auf die anderen Punkte (Experte, Konfiguration und öffne Link) gehe ich hier nicht ein, da dies nur helfen soll, ansehnliche Gauges zu erstellen.
Ich hoffe, dass hilf ein wenig und zeigt, welche Möglichkeiten einem die Module von @Acer90 zur Visualisierung von Werten zur Verfügung stellen.
Viele Grüße
Burkhard
Der Doughnut und der Pie (verdammt, kriege Hunger 
):
Dieses Modul ist noch etwas umfangreicher als die Gauge. Aber seht selbst…
Als Erstes müsst Ihr Euch entscheiden, ob Ihr eine Torte oder einen Doughnut haben wollt. Dies regelt Ihr unter dem Punkt „Typ“. Diese Auswahl hat zum Teil Auswirkungen auf die folgenden Einstellungen.
1. Titel
Anders als bei der Gauge kann bei dem Pie/Doughnut die Position des Titels verändert werden.
Alles Andere ist hier selbsterklärend.
2. Legende
Unter Legende kann das Aussehen der Auflistung der Datenpunkte modifiziert werden. Die möglichen Einstellungen hier sind selbsterklärend.
Kurz nur zum Thema Schriftauswahl:
Wir haben einige der von Google-Fonts ( Browse Fonts - Google Fonts) zur Verfügung gestellten Schriften als Vorauswahl in die Module integriert. Damit sollten alle Bedürfnisse abgedeckt sein. Von kondensed bis auffällig. Bitte schaut Euch immer an, welche Auswirkung die Schriftauswahl hat.
Am Besten macht es sich, über „öffne Link“ das Ergebnis Eurer Einstellungen direkt im Browser zu betrachten. Ihr braucht den Link nur einmalig aufrufen und er passt sich immer, wenn Ihr auf „Einstellungen übernehmen“ klickt an.
Der Punkt „Box Breite“ bestimmt in der Legende die Breite der Farbbox:
Boxbreite 10: 
Boxbreite 120: 
Position: Position der LEgende (LInks, rechts, oben, unten
Ausrichtung: Legt die vertikale Position im Doughnut/Pie fest:
Links/Anfang:
Links/Mitte:
Links/Ende: 
3. Tooltips
Wenn Ihr den Doughnut oder den Pie ohne Werte darstellen wollt, und nur die Daten sehen wollt, wenn Ihr auf das entsprechende Feld geht, dann kommen die Tooltips zum Einsatz:
Dabei gibt es zwei Positionen der Tooltips: „Nearest“, also zentral im Bereich, so wie im Bild oben. Und „Average“ dementsprechend weit entfernt vom Bereich:
Bei den Tooltips könnt Ihr den Einzelwert (Point/Index) oder die Werte der gesamten Datenreihe (dataset) anzeigen lassen:
Als nettes Gimick könnt Ihr dann noch die Ecken des Tooltips mittels „Eckradius“ anpassen. Auf die Möglichkeiten der Schriftvariationen werde ich hier im Einzelnen nicht mehr eingehen, da ich diese als selbsterklärend erachte.
4. Drehung (Rotation)
Die Drehung (Rotation) ist nur für den Doughnut verfügbar!
Für den Doughnut ist die Drehung ein sehr brauchbares Gimmick. Wie Ihr seht, arbeite ich bei den Demo-Bildern immer nur mit einem Viertel Doughnut (Den Rest hab ich einfach mal weg gefuttert 
)
Okay, eigentlich nur, weil man mit nem Viertel weniger Platz braucht und gewisse Einstellungen besser Visualisieren kann.
Aber zu den Werten:
„Anfang“ gibt den Start-Winkel des Doughnuts an. 0° entspricht hier demzufolge Oben. 180° Also Unten. Die Länge gibt den Umfang vor. Damit wird also der Doughnut beschnitten. 360° gibt einen ganzen Doughnut, 270° einen Dreiviertel, 180° einen Halben und 90° logischerweise dann einen Viertel.
Wenn mir also ein Viertel reicht, kann ich dann noch mit dem Anfang bestimmen, ob er Oben anfängt (Siehe Bilder oben) oder, ob er versetzt anfängt. Gebe ich also bei Anfang statt 0° 45° ein, sieht das Ganze so aus:
Also eine Menge Möglichkeiten zum Spielen.
5. Animation
Wie schon bei der Gauge, sind auch Doughnut und Pie animiert. Was das genau bedeutet zeige ich Euch an einem kleinen Beispiel. Bitte auch hier austesten, was geht (ist gar nicht so schwer).
Spätestens jetzt dürfte Jeder wissen, ich LIEBE Bouncing.
@Acer90 hat unter dem Punkt Animation den Link der Quelle gesetzt ( Easing Functions Cheat Sheet (easings.net)). Da erfahrt ihr im Detail, was bei welcher Animation passiert. Das erspart mir hier ne Menge Tipparbeit. Danke @Acer90 
6. DataLabels
Die DataLabels beschreiben die Werte, die in den einzelnen Datenbereichen angezeigt werden. Verankerung und Ausrichtung geben hier die Position in dem Datenbereich der Grafik an. Verankerung regelt die Position am Äußeren Rand (Ende) der Daten, Mittig (mittig) oder am Inneren Rand (Anfang):
Mit der „Ausrichtung“ kann man dann die Position noch fein justieren. So bedeutet zum Beispiel:
Verankerung: mittig | Ausrichtung: Rechts, das das Daten Label rechts des Mittelpunkts des Datenfeldes angezeigt wird.
Auch hier die große Bitte: Testet es aus. Jede Position im kleinsten Detail hier zu nennen, sprengt mal eben den Rahmen.
7. Daten
Den meisten Platz in diesem kleinen Tutorial werde ich nämlich für die Datenpflege benötigen.
Um das mit den Daten verständlich zu machen, fangen wir mal bei Excel an :
Wir haben ein Gitte mit Spalten und Zeilen. Jede Zeile entspricht einer Reihe von Daten. Dabei geht es nicht um archivierte Daten eines Zeitraums sondern vielmehr um Daten einer Aktorensorte:
Und schon hat man die ersten Doughnuts gebacken. Als Pie sieht das dann ähnlich aus:
Natürlich kann man auch hier noch nette Gimmicks nutzen:
Reihenfolge: Sowohl in den Datasets, also auch in den Listenelementen kann ich die REihenfolge bestimmen.
DataLabels kann ich ein und ausschalten und bei Bedarf kann ich die Eigenschaften der DataLabels pro Listenelement entgegen der globalen Vorgabe nochmal anpassen.
Es ist übrigens jedem selbst Überlassen, ob er die Werte nach Aktoren oder nach Einsatzort listet. Dies dient hier nur als Beispiel zur Veranschaulichung.
Solltet Ihr noch Fragen zu den Einstellungen haben, dann kommt gerne auf uns zu. Dies war ein kleiner Einblick, was die Doughnuts und PIEs ermöglichen. Auch hier nochmal Danke an @Acer90 für die ganze Arbeit, die da im Hintergrund steckt.
Viele Grüße
Burkhard
@Acer90 ,
kleines Dankeschön dafür, dass Du mich und @Fonzo so tapfer in der Alpha-Phase ertragen hast.
Wow, für das Modul und die Anleitung größten Respekt.
Das scheint mir mal wieder etwas zu sein, das sich zu testen lohnt, um mal abseits meiner geliebten Highcharts zu schauen, was noch so geht.
@Boui ,
das ist gerade mal der Anfang. Da kommt noch viel mehr. @Acer90 hat noch ne ganze Tüte voller Überraschungen parat. 
Das hört sich gut an 
Das Modul ist klasse…
Vielen Dank dafür 
Hallo Acer,
ich habe nun testweise anstatt Grafana dein Modul laufen.
Leider habe ich das Problem, dass die Nadel ganz unten stehen bleibt und zwar dann, wenn die View neu geladen und dann kein neuer Wert für die jeweilige Gauge gesendet wurde.
Das ist beim Stromverbrauch kein Problem, der ändert sich alle Sekunden.
Problematisch ist es bei der Inhaltsanzeige der Wasserzisterne und beim Boiler.
Speziell bei der Wasserzisterne kann es schon vorkommen, dass lange kein neuer Wert übermittelt wird.
Der Zeiger bleibt somit immer unten.
Wie kann ich das lösen?
@Loewenkoenig ich kann aktuell noch nicht reproduzieren, kannst du bitte einmal im Modul die Konfiguration exportieren und mir schicken.
