Visual HMI Draw:on_draw/redraw/Draw APIとレイヤー描画

freeFree Technical Resource

This content is free to read, suitable for basic learning and search traffic.

LUAペイントAPIの完全なセット:直線、長方形、半透明長方形、円、楕円、テキスト、画像、画面内/外部画像(SD/USBスティック)、スクリーンショット。主なメカニズムはon_draw(screen, control)制御レベルの自己描画コールバック-すべてのdraw_xxxCommandはon_drawで呼び出さなければなりません。HMI MシリーズDxシリーズ対応。

1.図面APIスプレッドシート

関数の機能パラメータ説明書は
set_pen_color(color)RGB 56 5カラー線/境界線/アウトライン/テキストストロークに作用するブラシ描画色の設定
draw_line(x0,y0,x1,y1,width)width 1~10現在のブラシに線を引く色を取る
draw_rect(x0,y0,x1,y1,fill)fill 1=パディング/0=境界線長方形、x 0 y0左上隅、x 1 y 1右下隅
draw_rect_alpha(x0,y0,x1,y1,alpha)alpha 0~255半透明のソリッド長方形、0=完全透過/255=不透明、マスクレイヤとして使用
draw_circle(x,y,r,fill)fill 0=固体/非0=白抜き値は線の太さ円を描く、x、yの中心点、r 半径
draw_ellipse(x0,y0,x1,y1,fill)外接矩形の両端,fill 同上長方形の楕円を描く
draw_image(image_id,frame_id,dstx,dsty,w,h,srcx,srcy)image_id build/image.xml; frame_idアニメーションフレームスケーリングとトリミングをサポートする絵画プロジェクト画像リソース
draw_text(text,x,y,w,h,font_id,size,color,align,charcode)align 0左/1中央/2右;charcode 0=UTF-8/1=GBK地域内のテキスト
load_surface(filename)JPEG/PNGパス外部画像の読み込みハンドル(image.binを実行しない)
draw_surface(surface,dstx,dsty,w,h,srcx,srcy)surfaceハンドルロードされた外部画像の描画、トリミングとスケーリングのサポート、on_drawで調整する必要があります。
destroy_surface(surface)ハンドルハンドル個々のレイヤーアセットの解放
destroy_all_surface()-ロードされたすべてのレイヤーを一括解除
get_surface_size(surface)ハンドルハンドルレイヤー元のピクセルの幅高さを取得
clear_image_buffer()-内部ピクチャリソースキャッシュの解放
screen_shoot(filepath)拡張子付きフルパス現在の画像はJPEG

2. on_drawトリガーメカニズム(事前に知っておく必要があります)

on_w screen_id、_idはいユーザーが直接呼び出してはならないシステムコールバック。control_id ≠ 0でなければなりません。そうでなければ、セルフドローイング機能は無効です。トリガーの条件:

  • アニメーション、ビデオ、RTCなどの動的要素を含む画面更新
  • 画面コントロールのユーザータッチ/Operation
  • スクリプトset_xxx更新コントロールプロパティ{{すくりぷとset_xxxこうしんこんとろーるぷろぱてぃ}}
  • シリアル/LUAレジスタ変更による制御状態の変化
  • redrawのアクティブな呼び出し

マルチレイヤーメカニズム:HMIは、レイヤー管理としてコントロールのZ軸順序(エディタでのコントロールの重ね順)を使用します。on_drawは、各再描画可能なコントロールに対して独立してトリガーされ、control_idを押して描画するレイヤーを決定します。例:青の長方形ID=10は下の階に“果物”、黄色の長方形ID=11は上の階に“島”を描きます。黄色は青の部分を覆います。

function on_w screen_id_id
  screen_id == 0でcontrol_id == 1の場合
    draw_surface surface[1] 293 88 222 353 0 0--表示をトリミングする
  elseif screen_id == 0とcontrol_id == 2 then
    w_
  End of Endシングル
End of Endシングル

3.カラー:RGB 56 5

すべてのカラーパラメータは16ビットRGB565であり、上位5ビットの赤(0~31)、中央6ビットの緑(0~63)、下位5ビットの青(0~31)で、範囲は0 x 0000~ 0 x FFFFである。

色はRGB(888)RGB565Lua定数の推奨事項
レッド·レッド(255,0,0)0xF800COLOR_RED = 0xF800
緑の緑(0,255,0)0x07E0COLOR_GREEN = 0x07E0
ブルー·ブルー(0,0,255)0x001FCOLOR_BLUE = 0x001F
ホワイト·ホワイト(255,255,255)0xFFFFCOLOR_WHITE = 0xFFFF
ブラック·ブラック(0,0,0)0x0000COLOR_BLACK = 0x0000

4.アプリケーション:15種類の描画タイプスイッチ

4.1エンジニアリング構成

15ワード設定ボタンは完全にLW6101に関連付けられており、定数値1~15は順番に対応しています:直線/長方形/半透明長方形/円/楕円/画像ID/テキスト/画面内画像/画像を破壊/すべての画像を破壊/画像サイズを取得/ビデオウィンドウスクリーンショット/スクリーンショット/SD画像を描画/USBスティック画像を描画します。15ビットのステータスライトは、LW6100カットブラシカラーを関連付けます。

4.2フレーム:modeテーブル+ switchディストリビューション

penColor = {0xF800 0x001F}      - 赤と青
CUR_CO = 0xF800                初期の色は
draw_type = 0                     --現在の描画タイプ

mode = {                          --描画タイプ表
  line = 1 rect = 2 rect_= 3 le = 4 pse = 5
  imageId = 6 text = 7 surface_path3 = 8 destroyOne = 9
  destroyAll = 10、getSurface = 11、videoShoot = 12、
  screenShoot = 13、_path = 14、_path = 15
}

function on_update slave vtype
  addr == 0 x 6100の場合
    CUR_CO = Color [get_uint16_LW 1] --カットブラシ
  elseif addr == 0 x 610 1 then
    draw_type = get_uint16 VT_LW addr                --カット描画タイプ
  End of Endシングル
  redraw                                              --再描画のトリガー
End of Endシングル

function on_w screen_id_id
  set_pen_color CUR_CO
  ローカルスイッチ= {
    [mode.line] = function                    キー値1。
      draw_line 225、253、405、253                    - デフォルト幅1
      draw_line 508、128、508、378、5                 【幅5】
    end
    [mode.rect] = function                    【Key Value 2】
      w_rect         - 満たされない。
      w_rect         - 充填する。
    end
    [mode.rect_alpha] = function制御              【Key Value 3】
      draw_rect_alpha 225 128 225 +180 128+250 200--透明度200
      draw_rect_alpha 418、163、418+180、128+180、230--透明度230
    end
    [モード]。[le] = function                  キー値4。
      draw_circle 300、253、100、0                    --ソリッド。
      w_                    --白抜き線の太さ1
    end
    [mode.pse] = function                 【Key Value 5】
      w_      --ソリッド。
      w_      【HOLLOW】
    end
    [mode.text] = function                    【Key Value 7】
      draw_text“VisualHMI”100 300 200 40
                0 24 CUR_COLOR 1 0               --中央UTF-8
    end
  }
  switch[draw_type]の場合
    switch[draw_type] control
  End of Endシングル
End of Endシングル

5.外部画像(SD/USBディスク)とスクリーンショット

--SDカード画像のロード(load_surfaceはJPEG/PNGをサポート)
if w_type == mode._paththen
  [1] = load_
  redraw
End of Endシングル

-on_drawで描く
if w_type == mode._paththen
  表面[1]の場合
    w_
  End of Endシングル
End of Endシングル

-SDカードへのスクリーンショット
if draw_type == mode.screenShoot then
  screen_shoot "1/.jpg"
End of Endシングル

load_surfaceでロードされた外部画像プロジェクトに入らないimage.bin実行時にファイルシステムから読み取ります。使用済みはdestroy_surfaceを解放する必要があります。そうでなければ、メモリリークがあります。大きな画像や透明チャンネルのPNGは特にメモリを消費します。

5つの穴draw_xxxはon_drawコールバックで呼び出されます。on_updateでは何も表示されません。②コントロールID ≠ 0コントロール0は自己描画をトリガーしません。draw_circle/draw_ellipseのfillセマンティクスはdraw_rectとは逆です。円と楕円0=固体、非0=中空、長方形1=塗りつぶし/0=境界線、混ぜないでください。④ draw_imageのimage_idプロジェクトbuild/image.xmlを調べるファイル名ではなくDestroy_surfaceを使用するHMIメモリが小さく、リークが直接クラッシュします。

広州大彩科技Visual HMI開発ドキュメント(hmi-doc.gz-dc.com)LUAチュートリアル“図面”、著作権所有の大彩科技。

Put this resource to use in a real project?

Go to the Tool Center for message parsing, CRC verification and device debugging, or submit your requirements for selection and integration advice.

Engineer Membership

Turn this article into actionable debugging resources

After activation, you can use advanced message parsing, resource pack downloads, code examples, engineering cases and priority technical support, suitable for real project delivery.

Unlimited Advanced Tools
Resource & Code Packs
Complete Engineering Case Library
Priority Technical Support

Leave a Reply

Your email address will not be published. Required fields are marked *.