SVG LineBox Math
Praxisbeispiel: Zwei positive Leistungswerte zusammenführen
Ein Wechselrichter kann Lade- und Entladeleistung als zwei getrennte, jeweils positive Werte bereitstellen. Für eine gemeinsame Leistungsanzeige muss daraus ein Wert entstehen, dessen Vorzeichen die Flussrichtung unterscheidet. SVG LineBox Math berechnet diese Differenz direkt im Browser des Displays. Zusätzliche Home-Assistant-Template-Sensoren oder Automationen sind dafür nicht erforderlich: Home Assistant liefert die Sensorwerte, der Display-Computer übernimmt die Rechnung. Die bestehende Verbindung und Werteübertragung verursachen weiterhin Last.
Editor: Werte erfassen und berechnen
Die farbigen Hilfswidgets machen die Verarbeitung im Editor nachvollziehbar. Rot und Blau unterscheiden die beiden positiven Eingangswerte; die graue MathBox zeigt das berechnete Ergebnis. Die Anschlussbuchstaben und Griffe sind Editor-Hilfen.
| Widget | Aufgabe im Beispiel |
|---|---|
| Zwei Number-Widgets, rot und blau | Je einen Sensorwert für Laden beziehungsweise Entladen einlesen und über den aktivierten Datenfluss-Ausgangspunkt weitergeben. Die Farben dienen der Unterscheidung, sie bestimmen kein Vorzeichen. |
| Wert-Verbindungen | Die Number-Ausgänge mit den Math-Eingängen O und M verbinden und das berechnete Ergebnis vom Ausgang A an die Leistungsanzeige weitergeben. Diese Leitungen sind in der Runtime unsichtbar. |
| SVG LineBox Math, grau | Beide positiven Eingänge voneinander abziehen und die resultierende Leistung samt Vorzeichen über A ausgeben. |
| Industrial-Batterieanzeige | Die berechnete Leistung darstellen. Temperatur und Ladezustand bleiben separate Messwerte; sie sind nicht Bestandteil dieser Differenzrechnung. |
| SVG-Lines | Den dargestellten Energiefluss zwischen Solarmodulen und Batterie sichtbar machen. Sie können animiert werden; ihre Richtung muss zur jeweiligen Start-/Zielzuordnung und Vorzeichenkonvention passen. |
| Number-Anzeigen an den Solarleitungen | Die jeweilige Solarleistung anzeigen; diese Werte gehören nicht zu den beiden Eingängen der Batterie-Differenzrechnung. |
| Industrial-Solarmodule | Die beiden PV-Quellen grafisch darstellen. |
Im Editorbild sind O = 1249 und M = 0 angeschlossen; die MathBox zeigt 1249. Für diese Zuordnung lautet die Differenz O - M. Richte O und M als Eingänge und A als Ausgang ein. Aktiviere Rechnung 1, wähle Eigene Formel, trage O - M und unter Ausgänge A ein. Ergebnis intern an Eingang übergeben bleibt ausgeschaltet. Aktiviere bei beiden Number-Widgets den Ausgangspunkt und verbinde jeweils genau diesen Punkt.
Die Bedeutung des Vorzeichens legst du durch die Sensorzuordnung fest. Wenn O die Ladeleistung und M die Entladeleistung liefert, gilt:
| Ladeleistung O | Entladeleistung M | Ergebnis O − M | Bedeutung |
|---|---|---|---|
| 1249 W | 0 W | +1249 W | Laden |
| 0 W | 420 W | −420 W | Entladen |
| 0 W | 0 W | 0 W | Kein Nettofluss |
Sind die Sensoren umgekehrt angeschlossen, kehrt sich die Bedeutung des Vorzeichens um. Für die entgegengesetzte Konvention verwende M - O. Bei gleichzeitig positiven Werten zeigt die Differenz den Nettofluss, nicht beide Einzelleistungen. Eine echte 0 ist ein gültiger Eingangswert; ein fehlender oder ungültiger Sensorwert wird nicht automatisch durch null ersetzt.
Runtime: Anzeige ohne Hilfswidgets
Die Runtime zeigt die fertige Visualisierung. Die Batterie-Leistung erscheint blau, die Temperatur magenta und der Ladezustand grün. Der Richtungspfeil unterstützt die Zuordnung des Energieflusses. Die Aufnahmen stammen aus unterschiedlichen Momenten; die Messwerte müssen daher nicht übereinstimmen.
Ab Studio 0.1.287 setzt du bei den beiden Hilfs-Number-Widgets und der MathBox oben im Reiter WIDGET die Checkbox In Runtime verstecken und speicherst das Projekt. Sie bleiben im Editor sichtbar und bearbeitbar, erscheinen aber nicht auf dem Display. Ihre Werteübergaben und Rechnungen laufen weiter. Die sichtbaren Leistungsanzeigen, Batterieelemente und SVG-Lines bleiben eingeblendet.
Die Berechnung läuft pro geöffnetem Display im jeweiligen Browser. Sie erzeugt durch die lokale Wertübergabe keine zusätzliche HA-Entität und schreibt das Ergebnis nicht automatisch nach Home Assistant zurück. Wenn das Display beziehungsweise sein Browser geschlossen ist, läuft dort auch diese Berechnung nicht weiter.
Alternative Zuordnung: Batterie → Wechselrichter
Ein Number-Widget kann einen Entitäts- oder Vorschauwert an Math liefern. Aktiviere seinen Ausgangspunkt unter Datenfluss und verbinde genau diesen Punkt mit einem aktiven Math-Eingang. Für unsichtbare Leitungen nutze Wert-Verbindungen oder ab 0.1.285 SVG-Lines mit explizitem Z-Index −100 oder kleiner. Die Darstellung verschwindet in der Runtime, die Werte bleiben aktiv.
Wenn P zur Batterie und O aus der Batterie fließt, gilt für eine Linie Batterie → Wechselrichter:
| Einstellung | Wert |
|---|---|
| O | Eingang; sensor.hyper_2000_eg_1_output_pack_power |
| P | Eingang; sensor.hyper_2000_eg_1_pack_input_power |
| A | Ausgang |
| Rechnung 1 | Aktivieren; Eigene Formel |
| Formel | O - P |
| Ausgänge | A |
| Interne Übergabe | Aus |
Beide Sensoren dürfen positive Zahlen liefern: O = 0, P = 1252 ergibt −1252 W (Laden); O = 150, P = 0 ergibt +150 W (Entladen). Bei gleichzeitig aktiven Werten ergibt sich der Nettofluss. Eine echte 0 ist gültig. „Eingang O: Wert fehlt …“ bedeutet, dass kein gültiger Wert über die Verbindung ankommt: Ausgang aktivieren, passenden Ausgangspunkt prüfen und das Linienziel dem Eingang O zuordnen. Fehlende Werte werden nicht als Null behandelt.
Ab 0.1.141 blendet In Runtime ausblenden unter Berechnung nur die Darstellung aus; alle Rechnungen und Wertübergaben bleiben aktiv. Die Variante Wert-Berechnung in HA Grafik – Datenfluss verwendet dieselbe Logik und startet mit dieser Option eingeschaltet. Wert-Konverter und unsichtbare Wert-Verbindungen können vorgeschaltet werden.
Ab Studio 0.1.138 enthält der vergrößerte Dialog vier getrennte Rechnungen. Jede hat eine eigene Aktivierung, Formel beziehungsweise Durchschnittsberechnung, Ausgangsliste und Ergebnisvorschau. Rechnung 1 übernimmt bei älteren Projekten die bisherige Berechnung und ihre Ausgänge; Rechnungen 2–4 sowie alle internen Eingangsübergaben sind zunächst aus.
Größe, Icon und Farben
Ab 0.1.140 stehen im Reiter WIDGET dieselben fünf CSS-Bereiche wie bei den Basis-Widgets bereit: CSS Allgemein, CSS Font & Text, CSS Hintergrund, CSS Ränder und CSS Schatten und Abstand. Damit lassen sich Position, Anzeige, Transparenz, Schrift, Textausrichtung, Hintergrundbild, Rahmen, Eckenradius, Schatten und Innen-/Außenabstände einstellen. Schriftgröße, Textausrichtung, Eckenradius und Innenabstand werden auch für LineBox Math übernommen. Die Dockpunkte behalten beim Abrunden ihre bisherigen geometrischen Positionen; größere Radien können die sichtbare Rahmenkante von den Eckpunkten entfernen. Der zusätzliche CSS-Stil hat weiterhin Vorrang vor den entsprechenden Feldern. Der Reiter CSS enthält dagegen das globale Projekt-CSS.
Ab 0.1.139 sind Breite und Höhe unabhängig zwischen 32 und 2000 px einstellbar: im Berechnungsdialog oder über die Größenanfasser im Editor. Rechteckige Formen sind möglich. Die 16 Dockpunkte behalten ihre relative Position; Leitungen treten weiterhin rechtwinklig ein. Bei kleinen Widgets werden die Editor-Markierungen kleiner, damit sie nicht überlappen. Für bequemes Zuordnen der Buchstaben empfiehlt sich eine größere Editoransicht; in der Runtime sind die Markierungen ausgeblendet.
Unter Darstellung wählst du ein optionales Icon, seine Größe (8–512 px) und Farbe sowie Hintergrund-, Rahmen- und Ergebnistextfarbe. Icons werden an den verfügbaren Platz angepasst. Die Färbung setzt ein färbbares Icon voraus; mehrfarbige Rasterbilder behalten ihre Bildfarben. Ergebnis anzeigen lässt sich ausschalten, ohne Berechnung oder Weitergabe zu stoppen. Für 32 × 32 px sind ein Icon und ausgeblendeter Ergebnistext sinnvoll.
Zusätzlicher CSS-Stil erlaubt unterstützte Inline-Deklarationen, zum Beispiel border-radius: 4px; opacity: 0.8;. Er wird nach den Farbfeldern angewendet und kann diese überschreiben. URLs und ausführbare Ausdrücke sind darin nicht zugelassen.
Kleines Editorbeispiel mit Icon und ausgeblendetem Ergebnistext.
Unter CSS Ränder ist ein Eckenradius von 24 px eingestellt. Die sichtbaren Editor-Anschlüsse behalten ihre Position.
Darstellung in der Runtime
Runtime-Testszene: Quadrat und Ergebnis bleiben sichtbar, die Leitungen treten rechtwinklig ein und aus. Anschlussbuchstaben und Auswahlgriffe des Editors sind ausgeblendet. Das Ergebnis folgt der eingestellten Rechnung und der Summierung je belegtem Eingangsanschluss.
Vier Rechnungen und Ausgangszuordnung
Der aktuelle Screenshot zeigt die getrennten Rechnungen und die aktivierte interne Übergabe an C. So kann Rechnung 2 das Ergebnis von Rechnung 1 direkt weiterverarbeiten.
Berechnung auf dem Display-Computer
Die Berechnungen laufen im Browser des jeweiligen Display-Computers. Home Assistant liefert die Entitätswerte; SVG LineBox Math berechnet daraus die Ergebnisse und gibt sie innerhalb der Visualisierung an andere Widgets weiter. Auch verkettete Rechnungen mit mehreren Ein- und Ausgängen benötigen dafür weder zusätzliche HA-Entitäten noch HA-Automationen.
Damit übernimmt der Display-Computer die Rechenarbeit und die Darstellung. Jedes geöffnete Display berechnet seine eigene Visualisierung. Home Assistant bleibt für die Verbindung und den Austausch der Entitätswerte zuständig; diese Kommunikation verursacht weiterhin Last. Die lokalen Math-Ergebnisse werden durch die interne Dockpunktübergabe nicht automatisch in Home Assistant gespeichert.
Berechnungen stehen nur zur Verfügung, solange die Visualisierung geöffnet ist und ihr Browser ausgeführt wird. Für Abläufe, die auch bei ausgeschaltetem Display zuverlässig weiterlaufen sollen, bleibt eine serverseitige Berechnung oder HA-Automation erforderlich.
Ausgänge konfigurieren
Stelle zuerst oben die Rollen der Anschlüsse ein. Trage dann je aktivierter Rechnung unter Ausgänge (z. B. E,F;H) die gewünschten Buchstaben ein. Komma, Semikolon und Leerzeichen sind als Trennzeichen erlaubt; Kleinbuchstaben werden ebenfalls erkannt. E,F;H ordnet dasselbe Ergebnis den drei Ausgängen E, F und H zu. Jeder dieser Punkte muss ein aktiver Ausgang sein. Ist ein Buchstabe als Eingang eingerichtet, erscheint ein Hinweis; eine widersprüchliche Zuordnung lässt sich nicht übernehmen. Ein Ausgang darf nur einer Rechnung zugeordnet sein. Ein Ausgang ohne Zuordnung liefert keinen Wert.
Ergebnisse intern weiterverarbeiten
Jede Rechnung hat die zunächst ausgeschaltete Option Ergebnis intern an Eingang übergeben. Erst nach dem Einschalten kannst du unter Interner Eingang einen einzelnen aktiven Eingangs-Buchstaben wählen. Andere Rechnungen dürfen diesen Buchstaben anschließend in ihren Formeln verwenden. Die interne Übergabe ersetzt an diesem Punkt die externen Leitungswerte; nach dem Ausschalten gelten wieder die angeschlossenen Leitungen. Pro Eingang ist nur ein internes Ergebnis erlaubt. Die Reihenfolge der Rechnungsnummern spielt für die Auflösung von Abhängigkeiten keine Rolle.
Beispiel mit A = 150 und B = 30:
| Rechnung | Formel | Ausgänge | Interne Übergabe | Ergebnis |
|---|---|---|---|---|
| 1 | A + B | E,F;H | eingeschaltet → Eingang C | 180 |
| 2 | C * 2 | G | aus | 360 |
| 3 | A - B | I | aus | 120 |
| 4 | deaktiviert | — | aus | — |
Eine Rechnung darf ihr Ergebnis nicht an einen Eingang zurückführen, von dem sie selbst abhängt. Direkte und indirekte Rückkopplungen sowie doppelte Zuordnungen werden gemeldet und vor dem Übernehmen zurückgewiesen. Bei Durchschnitt aller belegten Eingänge zählen auch aktiv zugewiesene interne Eingänge mit; eine Übergabe dieser Durchschnittsrechnung an ihren eigenen Eingangsbereich wäre daher eine Rückkopplung.
Ein Rechenfehler wie Division durch null stoppt die betreffende Rechnung und ihre abhängigen Rechnungen. Unabhängige Rechnungen arbeiten weiter. Fehlende Werte sind nur dann relevant, wenn die Rechnung diesen Eingang verwendet; eine Durchschnittsrechnung benötigt gültige Werte an allen belegten Eingängen. Der Dialog zeigt Hinweise pro Rechnung. Bei kleinen Bildschirmen wird der Inhalt scrollbar und die Rechnungsbereiche stehen untereinander.
Grundlagen und Beispiel einer Einzelrechnung
Das folgende Bild zeigt den ursprünglichen Dialog aus Studio 0.1.137. Die Berechnung funktioniert weiterhin als Rechnung 1 im erweiterten Dialog.
Das Bild zeigt den Berechnungsdialog mit Durchschnitt aller belegten Eingänge. Eingang A enthält bereits die Summe seiner beiden Leitungen (100 + 50 = 150), Eingang B liefert 30. Daher lautet das Ergebnis 90. G ist als Ausgang eingerichtet und gibt dieses Ergebnis weiter. Die grünen Buchstaben A, B und G kennzeichnen angeschlossene Punkte; die orangefarbenen Buchstaben sind ohne Leitung. Ein unverbundener Eingang mit — zählt beim Durchschnitt nicht mit. Bei dieser Berechnungsart ist das Formelfeld deaktiviert, seine bisherige Formel bleibt jedoch erhalten.
Ab Studio 0.1.137 steht SVG LineBox Math ebenfalls unter HA Grafik – Spezial. Es bleibt als Quadrat im Editor und in der Runtime sichtbar. Seine 16 Anschlüsse heißen im Uhrzeigersinn A–P, beginnend links oben: A–E oben, E–I rechts, I–M unten und M–A links. Jede Seite besitzt drei zusätzliche Punkte zwischen ihren Ecken. Im Editor sind angeschlossene Punkte grün und freie Punkte orange, mit kontrastreichen Buchstaben; in der Runtime verschwinden die Markierungen. Leitungen treten rechtwinklig ein. A/E werden von oben, I/M von unten angefahren; die seitlichen Punkte über ihre jeweilige Seitenkante.
Wähle das Widget und öffne Berechnung bearbeiten. Dort stellst du Breite und Höhe (32–2000 px), die Rollen Aus, Eingang und Ausgang für jeden Buchstaben sowie die Berechnung ein. Neue Andockpunkte sind zunächst ausgeschaltet; eine Eingangs- oder Ausgangsrolle im Dialog aktiviert den jeweiligen Punkt. Alle Punkte lassen sich auch im Bereich Andockpunkte gemeinsam einschalten.
Eigene Formel unterstützt +, -, *, /, Klammern, Zahlen mit Dezimalpunkt und die Buchstaben A–P. Multiplikation und Division gehen vor Addition und Subtraktion. Beispiel: (A + B) / C. Mehrere Leitungen an einem Eingang werden zunächst mit Vorzeichen summiert: A mit 100 und 50 ergibt 150; B mit 30 ergibt bei A - B den Wert 120. Durchschnitt aller belegten Eingänge zählt jeden belegten Eingangsanschluss einmal, hier also (150 + 30) / 2 = 90; unbelegte Punkte bleiben unberücksichtigt.
Die Vorschau zeigt Eingangswerte und Ergebnis. Ausgänge geben das Ergebnis intern an SVG-Lines, weitere LineBoxes und Widgets mit numerischer Dockpunktübernahme weiter. Eine zusätzliche HA-Entität ist nicht nötig. Fehlende oder ungültige angeschlossene Werte, nicht belegte Formel-Eingänge, Division durch null und Rückkopplungen stoppen die Ausgabe. Das Widget zeigt dann — mit Fehlerhinweis; Formeln werden ohne JavaScript-Ausführung ausgewertet. Der Dialog übernimmt Änderungen erst mit Anwenden und unterstützt Rückgängig.