DeviceLib für myGEKKO
DDF-Handbuch / Teil B – GUI-DDF (SVG)

Schritt-für-Schritt & Checkliste (GUI)

Schritt für Schritt

  1. Ziel festlegen: Welches System/Element, welche Werte, welche Kachelgrößen (504, 508, 1004, 1008, Vollansicht)?
  2. Datenquellen klären: $.CTRLVAR.<var> (Element), $.CTRLROOTVAR.<pfad>, $.VAL.<alias> (vorher $.ISVAL) oder Items der eigenen Geräte-DDF. Nicht mehr: $.VARLOCAL / $.VARGLOBAL / $.VARMAIN.

  3. DDF-Gerüst anlegen:

    *GENERAL
;DEVICE;<Widgetname>
;MANUFACTURER;myGEKKO
;TYPE;Graphical user interface
;PROTOCOL;SVG (DDF)
;VERSION_NR;1
;MODEL_NR;1
;ID;0x110000XX00010100
;MIN_CONTROL_VERSION;V10384-11
*GROUP;ID;ALIAS;NAME
;0;MYWIDGET;Mein Widget
*OBJECT;GROUP;ID;ALIAS;SVG;SVGANIMATE;SVGEVENT
;0;0;Widget;"<svg alias='Main' viewBox='0 0 200 100' width='200' height='100'>…</svg>";"…";"…"

  4. Vorlage(n) zeichnen im Koordinatensystem der viewBox. Nur die unterstützten Elemente verwenden, einfache Hochkommas, Platzhalter $(KEY).

  5. Zeichenformel schreiben: Eingänge lesen → Werte mit PRINT formatieren → SWITCH $.GUI.WIDGETTYPE → GUI.setWindow → GUI.paintSVG('Main',x,y,w,h,0,'KEY',wert,…);.
  6. Optional Ereignisse: SVGEVENT mit $.MOUSE.*, $.MOUSE.HANDLED setzen, Werte per $.CTRLVAR.x := …; schreiben.
  7. Optional Animation: GUI.setTimer(0.5); am Ende der Zeichenformel.
  8. Testen in allen Kachelgrößen sowie in hellem und dunklem Theme ($.GUI.COLOR*).

Minimal-Widget (vollständig)

*GENERAL
;DEVICE;Mini Thermometer
;MANUFACTURER;myGEKKO
;TYPE;Graphical user interface
;PROTOCOL;SVG (DDF)
;VERSION_NR;1
;MODEL_NR;1
;ID;0x110000XX00020100
*GROUP;ID;ALIAS;NAME
;0;DEMO;Demo
*OBJECT;GROUP;ID;ALIAS;SVG;SVGANIMATE;SVGEVENT
;0;0;Thermo;"<svg alias='T' viewBox='0 0 200 100' width='200' height='100'>
 <style>
 .bg { fill: #0c1a32 }
 .val { fill: #ffffff; font-weight: 600 }
 </style>
 <rect class='bg' x='0' y='0' width='200' height='100' rx='6' ry='6'/>
 <rect x='10' y='70' width='180' height='8' rx='4' ry='4' fill='#1c2f4e'/>
 <rect x='10' y='70' width='$(BAR)' height='8' rx='4' ry='4' fill='$(COL)'/>
 <text class='val' x='100' y='55' font-size='28' text-anchor='middle'>$(TEMP) °C</text>
</svg>";"t := $.CTRLVAR.rgstate[0];
bar := (t+20)/60*180;
IF bar < 0 THEN
 bar := 0;
ENDIF;
IF bar > 180 THEN
 bar := 180;
ENDIF;
col := '#2DB42D';
IF t > 30 THEN
 col := '#C00000';
ENDIF;
GUI.setWindow(0,0,200,100,1.0);
stemp := PRINT(FLOAT,'%.1f',t);
sbar := PRINT(FLOAT,'%.1f',bar);
GUI.paintSVG('T',0,0,200,100,0,'TEMP',stemp,'BAR',sbar,'COL',col);";"$.MOUSE.HANDLED:=0;"

Note

Das Beispiel ist aus der dokumentierten Syntax konstruiert. Die Datenquelle $.CTRLVAR.rgstate[0] setzt voraus, dass das Widget an einem Element mit dieser Variable hängt. Ob Funktionsaufrufe wie PRINT(…) direkt als Argument von GUI.paintSVG ausgewertet werden, ist nicht eindeutig belegt (zu klären). Deshalb werden die Werte hier vorher Variablen zugewiesen.

Checkliste

← Walkthrough: DEMO_DDF.csv Formelinterpreter-Referenz →