VisualHMI-Zeichnung: on _ draw / redraw / drawing API und hierarchisches Zeichnen

LUA Zeichnung API vollständige Reihe: Gerade Linie, Rechteck, Halbdurchlässig Rechteck, Kreis, Ellipse, Text, Bilder, Bildschirm / externe Bilder (SD / U-Laufwerk), Screenshots. Der Kernmechanismus ist einon_draw(screen, control)Self-draw - Rückruf auf Steuerebene - alle draw_xxx - Befehle müssen in on _ draw aufgerufen werden, um wirksam zu werden. Gilt für die HMI & M-Serie und die Dx-Serie.

1. Zeichnung API-Zusammenfassung

2.

on_draw (screen_id, control_id) ist ein- Systemruf, der nicht direktaufrufen kann. control _ id muss ≠ 0 sein, sonst ist die Funktion unwirksam. Triggerbedingung:

• Bildschirm mit Animation, Video, RTC und anderen dynamischen Elementen aktualisiert
• Benutzer Berührung / Manipulation Bildschirmsteuerelemente
• Skript set_xxx Aktualisierung der Steuereigenschaften
• Serial Port / LUA Registrierung verursacht eine Änderung des Steuereigensstatus
• Aktive Aufrufe redraw ()

Multilayer Mechanismus: HMI verwendet die Z-Achse - Reihenfolge der Steuerelemente (Steuerelemente im Editor) als Schichtenverwaltung. on _ draw wird unabhängig von jedem neu zeichnbaren Steuerelement ausgelöst und drückt auf control _ id, um zu bestimmen, auf welche Ebene zeichnet. Beispiel: Das blaue Rechteck ID = 10 zeichnet „Frucht" in der unteren Ebene, das gelbe Rechteck ID = 11 zeichnet „Insel" in der oberen Ebene, wobei das Gelb den blauen Teil bedeckt.

function on_draw(screen_id, control_id)
  if screen_id == 0 and control_id == 1 then
    draw_surface(surface[1], 293, 88, 222, 353, 0, 0)  -- 裁剪显示
  elseif screen_id == 0 and control_id == 2 then
    draw_surface(surface[2], 314, 158, 180, 250, 0, 0)
  end
end

3. Farbe: RGB565

Alle Farbparameter sind 16 - Bit RGB565: hohe 5 - Bit Rot (0 ~ 31), mittlere 6 - Bit Grün (0 ~ 63) und niedrige 5 - Bit Blau (0 ~ 31), Bereich 0x0000 ~ 0xFFFF.

4 Anwendungsbeispiele: 15 Arten von Zeichnungsschalter

4.1 Engineering Konfiguration

15 Wörter Einstellung Taste voll assoziiert LW6101, Konstante Werte 1 ~ 15 in der Folge entsprechen: Linie / Rechteck / halbe Rechteck / Kreis / Ellipse / BildID / Text / Bildschirm-Bild / Zerstörung Bilder / Zerstörung aller Bilder / Erhalten Bildgröße / Video-Fenster Screenshot / Screenshot / Zeichnen SD-Disk / Zeichnen USB-Bild. 15 - Bit-Status - Anzeige zugeordnet LW6100 Schnitt-Pinsel - Farbe.

4.2 Framework: Mode-Tabelle + Switch-Distribution

penColor = {0xF800, 0x001F}      -- 红、蓝
CUR_COLOR = 0xF800                -- 初始颜色
draw_type = 0                     -- 当前绘制类型

mode = {                          -- 绘制类型表
  line = 1, rect = 2, rect_alpha = 3, circle = 4, ellipse = 5,
  imageId = 6, text = 7, surface_path3 = 8, destroyOne = 9,
  destroyAll = 10, getSurface = 11, videoShoot = 12,
  screenShoot = 13, surface_pathsd = 14, surface_pathusb = 15
}

function on_update(slave, vtype, addr)
  if addr == 0x6100 then
    CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]  -- 切画笔
  elseif addr == 0x6101 then
    draw_type = get_uint16(VT_LW, addr)                -- 切绘制类型
  end
  redraw()                                              -- 触发重绘
end

function on_draw(screen_id, control_id)
  set_pen_color(CUR_COLOR)
  local switch = {
    [mode.line] = function(control)                    -- 键值1
      draw_line(225, 253, 405, 253)                    -- 默认宽度1
      draw_line(508, 128, 508, 378, 5)                 -- 宽度5
    end,
    [mode.rect] = function(control)                    -- 键值2
      draw_rect(225, 128, 225+180, 128+250, 0)         -- 不填充
      draw_rect(418, 163, 418+180, 128+180, 1)         -- 填充
    end,
    [mode.rect_alpha] = function(control)              -- 键值3
      draw_rect_alpha(225, 128, 225+180, 128+250, 200) -- 透明度200
      draw_rect_alpha(418, 163, 418+180, 128+180, 230) -- 透明度230
    end,
    [mode.circle] = function(control)                  -- 键值4
      draw_circle(300, 253, 100, 0)                    -- 实心
      draw_circle(450, 253, 150, 1)                    -- 空心(线宽1)
    end,
    [mode.ellipse] = function(control)                 -- 键值5
      draw_ellipse(225, 128, 225+180, 128+250, 0)      -- 实心
      draw_ellipse(418, 163, 418+180, 128+180, 1)      -- 空心
    end,
    [mode.text] = function(control)                    -- 键值7
      draw_text("VisualHMI", 100, 300, 200, 40,
                0, 24, CUR_COLOR, 1, 0)               -- 居中 UTF-8
    end,
  }
  if switch[draw_type] then
    switch[draw_type](control)
  end
end

Externe Bilder (SD / USB-Laufwerk) und Screenshots

-- 加载 SD 卡图片（load_surface 支持 JPEG/PNG）
if draw_type == mode.surface_pathsd then
  surface[1] = load_surface("1:/pic.png")
  redraw()
end

-- on_draw 里绘制
if draw_type == mode.surface_pathsd then
  if surface[1] then
    draw_surface(surface[1], 225, 128, 180, 250, 0, 0)
  end
end

-- 截图到 SD 卡
if draw_type == mode.screenShoot then
  screen_shoot("1:/shot.jpg")
end

Externe Bilder mit load _ surface geladen, die mit load_surface geladen werden, werden nicht in das Projekt image.binEs ist die Laufzeit, aus dem Dateisystem gelesen. Destroy _ surface muss freigegeben werden, sonst wird der Speicher leck; große Bilder oder PNGs mit transparenten Kanälen essen speziell den Speicher.

Aus dem VisualHMI-Entwicklungsdokument von Guangzhou Dacai Technology (hmi-doc.gz-dc.com) LUA-Tutorial "Zeichnen", das Urheberrecht liegt bei Dacai Technology.