GUI-API (Zeichenfunktionen)
Die Zeichenfunktionen werden in der SVGANIMATE-Formel als GUI.<funktion>(…) aufgerufen. Funktionsnamen sind nicht case-sensitiv (GUI.paintSVG = GUI.paintsvg). Alle Koordinaten sind logische Einheiten des mit GUI.setWindow gesetzten Fensters.
Parameteranzahl entscheidet
Der Renderer unterscheidet Varianten an der Anzahl der Parameter. Zu wenige Parameter führen dazu, dass nichts gezeichnet wird, und zwar ohne Fehlermeldung.
Farben
- Format
0xAARRGGBBoder0xRRGGBB. - Alpha-Byte
00wird als voll deckend behandelt, sonst gilt Alpha/255.0xFF…ist also ebenfalls deckend. 0x01FFFFFFist die interne Konvention für „transparent“.- Theme-Farben:
$.GUI.COLORBKG,$.GUI.COLORFRG,$.GUI.COLORFNT.
Transformation (optional)
Viele Funktionen akzeptieren am Ende 5 weitere Parameter: cx, cy, scalex, scaley, angle. Das ist eine Rotation/Skalierung um den Punkt (cx, cy).
Referenz
GUI.setWindow(x, y, w, h, scale);
Legt das logische Koordinatensystem w × h fest. Es wird mit dem Faktor min(W/w, H/h) · scale seitenverhältnistreu eingepasst und zentriert. Genau 5 Parameter. x/y werden gelesen, im Code aber nicht weiter verwendet (zu klären).
GUI.setTimer(sekunden);
Plant ein erneutes Zeichnen. 0 = aus. Werte unter 0,05 s werden auf 50 ms angehoben. Unter 1 s erfolgt ein verzögertes Repaint. Ob Werte ≥ 1 s ein Repaint auslösen, geht aus gSvg.cpp nicht hervor (zu klären). Die Entwicklerdoku (xlsx) nennt 0,2 s als Minimum. Verwenden Sie für Animationen ≥ 0,2 s.
GUI.paintSVG(alias, x, y, w, h, winkel, KEY1, WERT1, KEY2, WERT2, …);
Zeichnet die SVG-Vorlage alias des eigenen Objekts in das Rechteck (x, y, w, h). Sie wird um winkel Grad um die Rechteckmitte gedreht. Die Paare KEY, WERT ersetzen $(KEY) in der Vorlage.
- Mindestens 7 Parameter, sonst greift die Variante ohne Parameter.
- Ohne Platzhalter übergeben Sie ein Dummy-Paar, z. B.
GUI.paintSVG('Logo',0,0,100,100,0,'X','');.
GUI.paintSvg();
Ohne Parameter: zeichnet das erste SVG des Objekts unverändert in die gesamte Kachel.
GUI.paintSvgLib(GRUPPE.ALIAS, x, y, w, h, winkel, KEY, WERT, …);
Wie paintSVG, aber mit einem Symbol aus der Bibliothek, z. B. 'HEATING.PUMP' oder 'GEN.BASE'. Auch hier mindestens 7 Parameter.
GUI.fillRect(x, y, w, h, …); / GUI.rect(…);
| Parameter | Ergebnis |
|---|---|
5: x,y,w,h,farbe |
gefülltes Rechteck |
6: x,y,w,h,linienfarbe,linienbreite |
nur Rahmen |
7: x,y,w,h,füllfarbe,linienbreite,linienfarbe |
Füllung + Rahmen |
8: x,y,w,h,farbe1,farbe2,linienbreite,linienfarbe |
Verlauf farbe1→farbe2 + Rahmen |
13: wie 8 + cx,cy,sx,sy,winkel |
mit Transformation |
rect und fillRect verwenden im Code denselben Zweig. Die Parameteranzahl bestimmt, ob gefüllt wird.
GUI.fillEllipse(x, y, w, h, …); / GUI.ellipse(…);
Ellipse im umschreibenden Rechteck (x, y, w, h). Es gelten dieselben Varianten wie bei fillRect, mit einer Ausnahme: Bei weniger als 7 Parametern wird nicht gefüllt. Für eine gefüllte Ellipse verwenden Sie also mindestens x,y,w,h,füllfarbe,linienbreite,linienfarbe. Beispiel aus der Visualization Library: GUI.fillEllipse(holeX,holeY,holeSize,holeSize,cbackground,0,cbackground);.
GUI.fillPie(x, y, w, h, start, winkel, …); / GUI.pie(…);
Kreis- bzw. Ellipsensegment im Rechteck (x, y, w, h). start und winkel werden in Grad angegeben.
| Parameter | Ergebnis |
|---|---|
8: …,farbe,linienbreite |
Segment, Rahmen in derselben Farbe |
9: …,farbe,linienbreite,linienfarbe |
Segment + Rahmen |
10: …,farbe1,farbe2,linienbreite,linienfarbe |
Segment mit zwei Farben (bei ungleichen Farben ist die Reihenfolge im Code vertauscht, zu klären) |
| 15: wie 10 + Transformation |
pie zeichnet nur den Rahmen. Abgeleitet aus den Beispielen (Gauge: „kleine Werte links“ bei Winkel 180) liegt 0° rechts (3 Uhr), und positive Winkel laufen gegen den Uhrzeigersinn (zu verifizieren).
GUI.fillPie(donutX, donutY, donutSize, donutSize, currentAngle, sweep, ringColor, ringColor, 1, ringColor);
GUI.line(x1, y1, x2, y2, farbe, breite [, cx, cy, sx, sy, winkel]);
Linie. Mindestens 6 Parameter verwenden (die Breite wird immer gelesen).
GUI.fillPath(füllfarbe, linienfarbe, linienbreite, x1, y1, x2, y2, …); / GUI.path(…);
Geschlossener Polygonzug. Mit transparenter Füllfarbe (0x01FFFFFF) entsteht nur der Umriss.
GUI.fillSvgPathD(x, y, w, h, d, farbe1, farbe2, linienfarbe, linienbreite [, cx, cy, sx, sy, winkel]);
Zeichnet einen SVG-Pfad (d-String) in logischen Koordinaten. Mindestens 9 Parameter.
Warning
Gefüllt wird nur, wenn das Alpha-Byte von farbe1 größer als 1 ist. Für Flächen also 0xFF… verwenden. Mit 0xRRGGBB entsteht nur eine Linie der Stärke ≥ 1.
GUI.text(text, x, y, schrifthöhe, halign, valign, farbe, hintergrund [, cx, cy, sx, sy, winkel]);
halign:left|middle|right(Defaultmiddle)valign:top|middle|bottom(Defaultmiddle)- Mindestens 7 Parameter. Text max. 254 Zeichen. Die Schrifthöhe wird mit der Skalierung leicht gedämpft (Faktor max. 1,2–1,3).
GUI.paintSysIcon(x, y, w, h, typ, sysid, zustand);
Zeichnet ein Systemicon. typ = 'COLOR' | 'DARK' | 'WHITE', sysid = 0…45, zustand = 0…2 (Default 1). Die Höhe wird ignoriert, das Icon ist quadratisch (w × w). 7 Parameter angeben.
Neu (04.11.2026)
Funktion GUI.showInputDialog (Quelle: gSvg.cpp). Parameter und Dialogtypen präzisiert am 09.11.2026.
GUI.showInputDialog(alias);
Öffnet den Standard-Eingabedialog des Systems (mindestens 1 Parameter).
Präzisiert (09.11.2026)
Der Parameter ist ein varmap-Alias – dieselbe Schreibweise wie bei $.VAL.<alias> / $.VAR.<alias>. Erlaubt sind relative Aliase ('roomtemp') und absolute Aliasnamen mit Punktpfad ('systems.demo.roomtemp', analog zum früheren $.VARGLOBAL.systems.…). Der Alias muss bereits geladen sein (z. B. zuvor über $.VAL.… / $.ISVAL.… angesprochen), sonst findet getFormat kein Format. Beim Bestätigen schreibt das Widget den Wert über getsetbyAlias zurück. Ein Wert wird nur geschrieben, wenn die Berechtigung (perm) ≠ 0 ist.
Der Dialogtyp richtet sich nach dem Format des Alias:
| Format | Dialog |
|---|---|
| ENUM | Auswahlliste (mit Eintrag … = −999) |
| FLOAT | Zahleneingabe mit Einheit, Min und Max |
INTEGER und Einheit RGB |
Farbwähler |
| INTEGER | Zahleneingabe (ganzzahlig) mit Einheit, Min und Max |
| STRING | Texteingabe (Länge 0…255) |
/* relativer Alias */
IF $.ISVAL.roomtemp > 0 THEN
GUI.showInputDialog('roomtemp');
ENDIF;
/* absoluter Alias (Punktpfad wie früher bei $.VARGLOBAL.systems.…) */
IF $.ISVAL.systems.demo.roomtemp > 0 THEN
GUI.showInputDialog('systems.demo.roomtemp');
ENDIF;
(Schematische Beispiele.) Der Alias muss schon geladen sein – deshalb prüft das Beispiel zuerst $.ISVAL.….
Übergabe der Argumente
Laut Formula.cpp (Stand 04.11.2026) wird jedes Argument eines GUI.*-Aufrufs einzeln aufgelöst und als Liste an den Renderer übergeben: String-Literal ('…') → Text, Zahl → unverändert, sonst Abfrage über den Variablen-Callback (Text, wenn vorhanden, sonst Zahl). Ob Ausdrücke (WINKEL - 2) und Funktionsaufrufe (PRINT(…)) vorher berechnet werden, geht aus dieser Stelle nicht hervor (zu klären). Die Originalbibliotheken verwenden beides. Am sichersten ist es, Werte vorher einer Variable zuzuweisen:
WINKEL := 180 - ((VALUE - RMIN) * 180 / (RMAX - RMIN));
strTemp := PRINT(FLOAT,'%.1f',VALUE);
GUI.paintSVG('Main',0,0,200,100,0,'TEMP',strTemp);
Beispiel (aus SVG_CHARTS, Gauge)
GUI.setWindow(0, 0, 280, 280, 1);
GUI.fillRect(0, 0, 280, 280, 0xFFFFFFFF, 0xFFFFFFFF, 0, 0xFFFFFFFF);
WINKEL := 180 - ((VALUE - RMIN) * 180 / (RMAX - RMIN));
GUI.fillPie(30, 30, 220, 220, 0, 45, 0xFFE53935, 0xFFE53935, 0, 0xFFE53935);
GUI.fillPie(30, 30, 220, 220, 45, 45, 0xFFFF9800, 0xFFFF9800, 0, 0xFFFF9800);
GUI.fillPie(30, 30, 220, 220, 90, 90, 0xFF2FC55A, 0xFF2FC55A, 0, 0xFF2FC55A);
GUI.fillPie(55, 55, 170, 170, 0, 360, 0xFFFFFFFF, 0xFFFFFFFF, 0, 0xFFFFFFFF);
GUI.fillPie(30, 30, 220, 220, WINKEL - 2, 4, 0xFF000000, 0xFF000000, 0, 0xFF000000);
GUI.text(VALUE_TEXT, 140, 140, 34, 'middle', 'middle', 0xFF000000, 0xFFFFFFFF);