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

無料無料技术资料

这篇内容可直接阅读,适合用于基础学习和検索引流。

LUAペイントAPIの完全なセット:直線、長方形、半透明長方形、円、楕円、テキスト、画像、画面内/外部画像(SD/USBスティック)、スクリーンショット。主なメカニズムはon_draw(screen, control)制御レベルの自己描画コールバック-すべてのdraw_xxx命令は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などの動的要素を含む画面更新
  • 画面コントロールのユーザータッチ/操作
  • スクリプト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チュートリアル“図面”、著作権すべてのの大彩科技。

この資料を実際のプロジェクトに活用しませんか?

ツールセンターで電文解析、CRCチェック、デバイスデバッグを行うか、要件を送信して選定と接続のアドバイスを受けましょう。

エンジニア会員

この記事を実行可能なデバッグ資料に

登録すると、高度な電文解析、資料パックのダウンロード、コード例、エンジニアリングケース、優先技術サポートが利用可能に。実際のプロジェクト納品に最適です。

高度なツール無制限
資料パックとコードパック
完全なエンジニアリングケースライブラリ
優先技術サポート窓口

发表回复

あなたのメールアドレスアドレス不会被公开。 必須項目已用 * 标注