Bibliotheken

Es gibt drei Quellen wiederverwendbarer Grafik:

Bibliothek	Datei	Art
Systemlibrary_SVG	`myGEKKO.Graphical user interface.LIBRARY.Systemlibrary_SVG.1_0xC800000100010100_.csv`	`PROTOCOL;LIBRARY`, SVG-Symbole in `SVGGROUP`/`SVG`
SVG Visualization Library	`myGEKKO.Graphical user interface.SVG (DDF).SVG Visualization Library.1(0x1100000100010100).csv`	`PROTOCOL;SVG (DDF)`, Diagramm-Widgets als `SVGANIMATE`-Formeln
SVG_CHARTS	`SVG_CHARTS/SVG_CHARTS.csv`	`PROTOCOL;SVG`, Beispiel-Widgets DOUGHNUT und GAUGE

Systemlibrary_SVG (LIBRARY)

Aufbau

*GENERAL
;DEVICE;Systemlibrary SVG
;MANUFACTURER;myGEKKO
;TYPE;Graphical user interface
;PROTOCOL;LIBRARY
;VERSION_NR;1
;MODEL_NR;1
;ID;0xC800000100010100
*SVGGROUP;ID;ALIAS;DE;IT;EN
;0;GEN;Geräte;;Devices
;1;TELENOT;Telenot;Telenot;Telenot
;2;UNITS;Einheiten;;Units
;3;STATUS
;4;HEATING;Heizung;Riscaldamento;Heating
*SVG;GROUP;ID;ALIAS;DE;IT;EN;DESCRIPTION;SVG
;0;0;BASE;;;;Controller;"<svg viewBox='0 0 100 100' …> … </svg>"

*SVGGROUP: ID, ALIAS, sprachabhängige Namen (DE, IT, EN).
*SVG: GROUP, ID, ALIAS, Sprachnamen, DESCRIPTION, SVG.
Interner Schlüssel: GROUP·1000 + ID. Aliasname: <GRUPPENALIAS>.<ALIAS>, z. B. GEN.BASE oder HEATING.PUMP.
Die Bibliothek wird beim Controller als svglibs.csv abgelegt und bei Änderung (mtime) neu geladen.

Inhalt (Version 1)

Gruppe	Symbole
`GEN` (Geräte)	`BASE`, `PICO`, `NOVA` (Controller)
`TELENOT`	`SIGNALING` (Signalgeber), `MOTION` (Bewegungsmelder), `MAGNETIC` (Magnetkontakt)
`UNITS` (Einheiten)	`TEMP`, `POWER`, `WIND`, `SUN`, `VOLUME`, `AIRQUALITY`, `VOLTAGE`, `CURRENT`, `SOLAR`
`STATUS`	`WINDOW`, `DOOR`, `MOVING`, `HEATING`, `BATTERY`, `COUNTER`
`HEATING` (Heizung)	`2/2 VALVE`, `3/2 VALVE`, `4/2 VALVE`, `PUMP`, `CONSUMER`, `HEAT EXCHANGER`, …

Konventionen der Symbole

viewBox='0 0 100 100', Größe 100 %.
Klasse .style für die feste Kontur, Klasse .status für den zustandsabhängigen Teil (fill: state bzw. stroke: state, siehe Hinweis zu state).
Das Symbol DOOR arbeitet mit Platzhaltern, die über paintSvgLib funktionieren:

<path    visibility='$(STATE)>0'  d='M 82.5 7.5 L 36 3 L 36 97 L 82.5 92.5 Z' stroke='black' fill='$(COLOR)'/>
<rect    visibility='$(STATE)<=0' x='25' y='15' width='50' height='77.5' rx='4' ry='4' stroke='black' fill='$(COLOR)'/>

Aufruf:

GUI.paintSvgLib('STATUS.DOOR', 10, 10, 40, 40, 0, 'STATE', ITEM.DOOROPEN, 'COLOR', '#2DB42D');

SVG Visualization Library (SVG (DDF))

Eine GUI-DDF mit fertigen Diagramm-Widgets, die vollständig über Formeln gezeichnet werden (Feld SVG leer).

*GENERAL
;PROTOCOL;SVG (DDF)
;ID;0x1100000100010100
;MIN_CONTROL_VERSION;V10384-11
*GROUP;ID;ALIAS;NAME
;27;ANALYSIS ;Analysis
;7;ENERGY METER;Energy meter
*OBJECT;GROUP;ID;ALIAS;SVG;SVGANIMATE;SVGEVENT
;27;0;Donut (sum);;"…"

Gruppe	Objekte
27 ANALYSIS	`Donut (sum)`, `Column (sum)`, `Bar (sum)`, `Donut (ind)`, `Nested (ind)`, `Bar (ind)`, `Column (ind)`, `Gauge (°) (ind)`, `Gauge (-) (ind)`, `Thermometer (ind)`, `Thermometer (°) (ind)`
7 ENERGY METER	`Overview`

Die Gruppen-IDs (27, 7) entsprechen den myGEKKO-Systemtypen (Analyse, Energiezähler), an deren Elementen die Widgets angezeigt werden. (sum) stellt die Summe der bis zu 4 Werte dar, (ind) die Einzelwerte.

Muster einer Zeichenformel („Donut (sum)“, gekürzt)

name1 := $.CTRLVAR.sg[0];      value1 := $.CTRLVAR.rgstate[0];   unit1 := $.CTRLVAR.sgunit[0];
cbackground := $.GUI.COLORBKG; clabel := $.GUI.COLORFRG;         clegend := $.GUI.COLORFNT;
color1 := 0xFFC00000; color2 := 0xFF0066CC; color3 := 0xFF2DB42D; color4 := 0xFFFFBC00;
SWITCH $.GUI.SIZE
CASE 0:    GUI.setWindow(0,0,100,100,1.0);  donutSize := 80; showLegend := 1;
CASE 504:  GUI.setWindow(0,0,50,50,1.0);    donutSize := 49; showLegend := 0;
CASE 1004: GUI.setWindow(0,0,75,37.5,1.0);  donutSize := 36; showLegend := 1;
ENDSWITCH;
sum := 0;
IF LEN(name1) != 0 THEN sum := value1; ENDIF;
…
currentAngle := 90;
FOR varx := 1 TO 4 BY 1 DO
  …
  sweep := value / sum * 360;
  GUI.fillPie(donutX, donutY, donutSize, donutSize, currentAngle, sweep, ringColor, ringColor, 1, ringColor);
  currentAngle := currentAngle + sweep;
ENDFOR;
GUI.fillEllipse(holeX, holeY, holeSize, holeSize, cbackground, 0, cbackground);
GUI.text(PRINT(FLOAT,'%.1f',sum), centerX, centerY, fvalue, 'middle', 'middle', clabel, cbackground);

Daraus ergeben sich diese Prinzipien:

Eingänge stehen am Anfang ($.CTRLVAR.*).
Theme-Farben kommen aus $.GUI.*, Akzentfarben sind konstant. Die myGEKKO-Analysefarben sind Rot #C00000, Blau #0066CC, Grün #2DB42D und Gelb #FFBC00.
Layout je Größe über SWITCH $.GUI.SIZE, jeweils mit eigenem setWindow.
Leere Kanäle (Name leer) werden übersprungen (LEN(name) != 0).
Die Schriftgröße ist relativ: $.GUI.FONTLABEL * Faktor.

SVG_CHARTS

Zwei kompakte, gut kommentierte Beispiele (DOUGHNUT, GAUGE) mit festem Fenster GUI.setWindow(0, 0, 280, 280, 1);. Sie lesen ihre Werte über $.CTRLROOTVAR.heiz.an0.rgstate[n] bzw. …an1.rmin/rmax. Kommentare stehen als /* … */. Sie sind gut geeignet, um die GUI-API zu lernen. Die Notiz zum Doughnut erklärt:

GUI.fillPie(x, y, width, height, startAngle, angleSize, color1, color2, borderWidth, borderColor); zeichnet ein gefülltes Kreis- oder Ellipsensegment. Dabei bestimmen x und y die Position der linken oberen Ecke, width und height die Größe, startAngle den Startwinkel, angleSize die Winkelgröße, color1 und color2 die Füllfarbe(n) sowie borderWidth und borderColor Rahmenbreite und -farbe.