2024.08.15, 86HMI Editor 1.2.
You can download the 86HMI Editor User Manual file ここ.
1. 概要
1.1 概要
86HMIエディタは、86Duino IDEを利用するエンジニアや設計者向けに特別に設計された強力なヒューマン・マシン・インタフェース(HMI)ツールです。LVGL7.11 をベースにしており、シンプルで使いやすいインタフェースを提供し、アプリケーションのニーズを満たす、様々なHMIインタフェースを簡単に構築および編集できます。（LVGL の詳細については以下のリンクをご参照ください) https://docs.lvgl.io/7.11/index.html)
86HMIエディタを使用すると、イメージボタン、ラベル、画像、チャート、スイッチなど、86Duino制御システムのHMIインタフェースを簡単に設計できます。このツールは、基本的なインタフェース設定をサポートするだけでなく、様々なアプリケーションのニーズを満たす豊富なコンポーネントライブラリも提供します。さらに、86HMIエディタには、手動コーディングプロセスなしで対応するコードを開始できる強力なコード生成機能も備わっています。これにより、コーディングプロセスがより効率的になり、エラーのリスクが低くなります。
初心者でも、また経験豊富なHMI設計者でも、86HMIエディタは、制御アプリケーションのニーズに合わせて、精巧で豊富な機能をもつHMIインタフェースを設計するのに役立つ理想的なツールです。
このマニュアルでは、この強力なツールの活用方法について詳しく説明し、次のような様々な機能と特徴を習得できるようにします：
- 開発インタフェース機能セクションの紹介。マテリアルテーマ設定ツール、カスタムグラフィック、サウンド効果、フォント・ファイル・ソースの保存と取得、言語の切り替えなどが含まれます。
- 下記のコンポーネント表示画像のように、各コンポーネントの構成と紹介を設定します。
- 補助ツールの活用。発生したコンポーネントイベントなどのイーブン・バーを事前に設定できる多機能の設定ツールを含みます。
2. 86HMIのインストールと起動
2.1 86Duino IDEをインストール
次のリンクから86Duino IDE をダウンロードします。 https://www.qec.tw/software/.
ダウンロード後、.zipファイルを解凍してください。86duino.exe をダブル・クリックすると、追加のソフトウェアをインストールなしにプログラムを起動できます。
*警告 Windowsの警告メッセージがポップ・アップ表示された場合は、[詳細情報] をクリックし、[続行] をクリックしてください。 .. ..
86Duino Coding IDE 500を開くと、次のページが表示されます。
2.2 86HMIの起動
86Duino IDEを起動した後、下記のボタンをクリックして86HMI ツールを開くことができます。
2.2.1 QECマスタの選択
起動後、対応するQECマスタ・デバイスを選択して設定してください。
- QEC-M-043T==> 4.3”LCDディスプレイを搭載
- QEC-M-070T ==> 7”LCDディスプレイを搭載
- QEC-M-090T ==> 9”LCDディスプレイを搭載
- QEC-M-150T ==> 15”LCDディスプレイを搭載
2.2.2 ボードオプション
画面の回転：
HMIディスプレイの方向設定は、ユーザーのHMI LCDの実際の使用方向と一致します。作業領域でプロジェクトを編集し、QECにアップロードすると、HMIは選択した方向に従って設定されます。
後程、HMIで編集するときに、作業画面の向きも設定に応じて横向きまたは縦向きに変更されます。
 |  |
| 0° & 180° | 90° & 270° |
B. デフォルトのフォント：
デフォルトのフォントは CJKフォント(中国語、日本語、韓国語)で、ほとんどの各国語フォントをサポートしています。
LVGL組み込みフォントは、英語のみをサポートするLVGLの組み込みフォントです。
2.2.3 編集ページに入る
対応するスクリーン・サイズを選択したら、[OK] をクリックして、作業領域ページに入ります。
86HMI編集ページに正常に入ると、このページが表示されます。
2.2.4 編集の完了
編集後、コード生成ボタンをクリックして 86HMIを 86Duino IDEコードに転送し、プロジェクトファイルを保存してページを閉じる必要があります。ユーザーは 86Duino Coding IDEまたは ArduBlockを通じて API を利用できます。86Duino IDEインタフェースを介して生成されたプロジェクトのHMI APIには、オリジナルのコードファイル (.cpp) とヘッダファイル(.h) が必要です。
86HMIプロジェクトに外部リソースがある場合、生成の進行が完了するとリマインダウィンドウが表示されます。このとき、[exData を開く] ボタンを使用して外部リソースのフォルダを開き、ファイルを外部ストレージ領域にコピーできます。
追加情報：
86HMIはプログラムコードを生成した後、メインプログラム・ページ (.ino) に次のプログラムコードを自動的に生成します。いずれか 1つでも欠けていると、86HMIは動作しません。
- 86HMIのヘッダファイルのインクルード
#include “myhmi.h” - 86HMI関数の初期化
void setup() { Hmi.begin();}
3. ユーザーインタフェース
3.1 機能の概要
各ページ領域で86HMI編集インタフェースの主な機能の説明:
- アプリケーションボタン:
プロジェクトツールバーのショートカット。 - タイトル:
86Duino Coding IDEのプロジェクトタイトル。 - ウィンドウ機能:
ウィンドウモードの最小化、最大化、閉じる、などが含まれます。 - プロジェクトツールバー:
プロジェクトの新規作成/開く/保存/名前を付けて保存、画像/サウンド/フォントリソースの管理、テーマ設定など。 - 作業領域:
作業場所で表示されるオブジェクトは、QECマスタにアップロードされたUIと同じになります。 - 作業領域ズーム:
作業領域のスケールを選択します。 - ツールボックス:
オプションのオブジェクト関数のリスト - プロパティグリッドとイベントグリッド:
オブジェクトとページのプロパティグリッドとイベントグリッド。 - ページリスト:
86HMIでデザインされたページの一覧です。 - ページツールバー:
ページの追加/削除/コピーを含みます。 - オブジェクトリスト:
現ページ内のすべてのオブジェクトを表示します。
3.2 機能の説明
3.2.1 アプリケーションボタン
アプリケーション・プログラム・ボタンは、プロジェクトツールバーの機能をショートカット・メニューに整理し、ウィンドウサイズ問題によりプロジェクトツールバーが表示されなくなるのを回避します。
リストには、次の機能が含まれています：
- ファイル: New Project(新プロジェクト)、Open Project(プロジェクトを開く)、Save Project(プロジェクトの保存)、Save as...(名前を付けて保存)、Import Project(プロジェクトのインポート)
- リソース: リソースライブラリ管理
- テーマの選択: テーマの管理
- テーマ設定: テーマコンフィギュレータ
- LangID（言語ID）: オブジェクト言語コンテンツのデフォルト設定
- コード生成: コードを生成し、プロジェクトを保存して閉じます
- ヘルプ: クリックすると、QEC公式WebページのQECユーザー・マニュアル・ページが開きます
- 終了: 86HMI編集プログラムを閉じます
プロジェクトのインポート
. プロジェクトのインポート ト機能を使用すると、他のプロジェクトから選択したページを現在のプロジェクトに取り込むことができ、デザイン要素や機能の再利用が容易になります。このセクションでは、この機能で利用できる能力とオプションについて説明します。
主な特徴
- 自動リソース統合
インポートされたページに関連付けられた画像とサウンド効果は、現在のプロジェクトに自動的に統合されます。 - UIテンプレートの構築
事前に設計されたUIページまたはパラメータ設定をインポートすることで、ユーザーは類似したページの開発と設計にかかる時間を大幅に短縮できます。 - 異なる画面の解像度やデバイス固有のプロジェクトへの適応
プロジェクトは、QEC-M-070T から QEC-M-150T のような、異なる解像度のデバイス間で転送できます。また、特定の機能 (回転要素など) を備えたデバイスへのプロジェクトの転送もサポートしています。
スケーリングオプション
インポート中に異なる画面構成が検出された場合、ユーザーは次のスケーリングオプションから選択できます：
- 画面への自動適応
元のアスペクト比を維持しながら、インポートされたページを現在のプロジェクトの画面サイズに合わせて自動的に拡大縮小します。 - 固定したスケーリング
ユーザーは、インポートされた要素のスケーリング比率を手動で設定し、必要に応じて配置を調整できます。
注記： アスペクト比を調整できない要素は、水平方向または垂直方向のスケーリングの設定の影響を受けません。
イベント命令処理
インポートされたページ内のイベント命令は次のように処理されます：
- ページ変更: インポートされたプロジェクトのページIDに合わせて調整します。
- サウンド再生: インポートされたプロジェクト内のサウンド効果リソースIDに合わせて調整します。
- カスタム命令: 調整なしでそのままインポートされます。
- グローバルコード: インポートされません。
注記： インポート後、ページIDが異なる場合があり、プロジェクト全体で要素IDが変更される可能性があります。したがって、IDEで ArduBlock、カスタム命令、または APIを使用する場合、ユーザーはインポートされたページの新しい IDと一致するように参照を更新する必要があります。
3.2.2 タイトル
タイトルには、86HMIエディタのバージョンとプロジェクト名が表示されます(86Duino Coding IDEプロジェクト名と同期されます)。
追加情報：
編集マーク（*）： 86HMIプロジェクトが編集されると、プロジェクト・タイトルの後に“*”が追加され、プロジェクトを保存すると消えます。
3.2.3 ウィンドウ機能
86HMIウィンドウを最小化、最大化（ウィンドウ・モード）にしたり、閉じたりすることができます。
最大化/ウィンドウ・モードの画像を以下に示します：
- すでに最大化/ウィンドウモードの場合
- 最大化モードまたはウィンドウモードではない場合、境界線をドラッグしてサイズを変更することができます。
3.2.4 プロジェクトツールバー
新プロジェクト作成、プロジェクトを開く、プロジェクトの保存、名前を付けて保存
機能の説明:
- New Project: 新しいプロジェクトを開きます。
- Open Project: Open an existing project; the stored project path will be changed after being opened.
- Save Project: プロジェクトを保存すると、プロジェクトパスはデフォルトで 86Duino Coding IDEによって自動的に管理されます。
- Save as : プロジェクトを別名で保存します。保存後、プロジェクトへのパスが変更されます。
追加情報：
通常、86Duino IDEプロジェクトを通じて 86HMIを開くと、その86HMIプロジェクト名は 86Duino Coding IDEによって作成されたプロジェクト名と同期され、プロジェクトのパスも自動的に管理されます (場所は 86Duino IDEプロジェクト内の“data”で、ファイル拡張子は .hpj です)。
リソースライブラリ管理
リソースには、画像、サウンド、フォントのリソースが含まれており、ユーザーは対応するリソースを管理できます。
リソースライブラリ内のファイルは最終的にQECで使用されるため、背景画像が画面サイズを超えるものや、曲全体などの大きすぎるファイルの使用は推奨されません。
外部データストレージのリソースでは、ユーザーは PCを通じてファイルを手動でアップロードする必要があります。
独自にデザインまたは定義した画像、サウンド、フォント のファイルを使用するユーザーは、使用する前にそれらのファイルをリソースライブラリに追加する必要があります。ファイルを事前にリソースライブラリに追加するメカニズムにより、それらのファイルが複製され、HMIエディタの管理が容易になり、編集モードでのファイルの編集が防止され、リソースの合計容量がチェックされて通知されます (左下の合計サイズ セクションに反映されます)。
以下の3つのボタンは、それぞれ、画像、サウンド、フォントのファイルのリソース管理機能に対応しています。
画像ファイルリソース
画像ファイルとして .png および .jpgをサポートします。
新しい画像リソースを追加するには 
をクリックし、“+” をクリックして、対応したフォルダ内の必要な画像ファイルを選択します。
アップロードが完了すると、ウィンドウのプレビューとファイル情報が右側に表示されます。
その中で、ユーザーは、説明行を変更して、認識しやすいように画像ファイル名を定義できます。
後に、画像プロパティを使用するときに、ユーザーは事前にインポートした画像ファイルを選択できます。これらのファイルは、以下に示すようにリソースリストのドロップ・ダウン・メニューに表示されます。
QECマスタの画像処理時間を節約するには、ライブラリに保存する前に、HMIに表示されるサイズに合わせて画像を編集する必要があります。
画像ファイルは、壁紙の背景としても使用できますが、サイズが LCD作業領域のサイズと一致しない場合は繰り返し表示されます。したがって、壁紙をフル・サイズで表示するには、選択したLCD作業領域と同じサイズに画像を調整する必要があります。4.3”/7”/9” QECマスタのサイズは 800x480 ですが、15” QECマスタのサイズは 1024x768 です。
サウンドファイルリソース
サウンドファイルとして .wav および .mp3をサポートします。
新しいサウンドリソースを追加するには、 
をクリックし、“+” をクリックして、対応するフォルダで必要なサウンドファイル (警告音、通知音など) を選択します。
右側のプレビューモードで音が正しいかどうか確認できます。
フォント・ファイル・リソース
以下の組み込みフォントオプションを使用して、フォント・ファイルとして、otf、ttf、および ttcをサポートします：
- microhei: QEC組み込み(CJK) - 中国語、日本語、その他多くの言語フォントをサポートします。
- Montserrat_n: LVGL組み込み - LVGL組み込みフォントは英語のみをサポートします。
新しいフォントリソースを追加するには、 
をクリックし、“+”をクリックして、対応するフォルダで必要なフォント・ファイルを選択します。
必要なフォントファイルをインポートしたら、テーマコンフィギュレータの「フォント」でフォントを選択できます。
追加情報：
内部と外部の違い
ユーザーが独自に定義した画像、サウンド、またはフォントのファイルを内部に追加すると、ファイルはまずdata\Resource\MyHMI\Imageの下のプロジェクト・パスに保存されます。ファイルは、自動的に 各QECマスタのEMMCに書き込まれます。
ユーザーが外部に独自定義の画像、サウンド、またはフォントのファイルを追加する場合、そのファイルは exDataフォルダの下のプロジェクトパスに保存されます。そしてユーザーは exDataフォルダを SD/USBなどの外部ハード・ドライブに手動でコピーする必要があります。この機能は、独自定義ファイルが多すぎたり、大きすぎたりすることによるQECマスタのEMMCの容量不足を回避するためのものです。
追加情報：
リソースの削除
ライブラリ内の画像ファイルやサウンドのファイルを削除する場合は、プロジェクトがリソースを使用しているかどうかを確認してください。使用している場合は、削除が無効になり、使用中のリソース・ファイルのコンポーネント属性を他のオプションに変更してライブラリから削除する必要があります。
フォントリソースを削除できるようにするには、まずテーマコンフィギュレータからフォントファイルを削除する必要があります。
テーマ管理
現在、ユーザーには 2つのテーマと合計 3つの色が提供されており、テーマコンフィギュレータでは 4つのテーマ色と6つのフォント構成を設定できます。
このうち、デフォルトのテーマと色は次のとおりです。
- マテリアル・テーマのライト色:
- マテリアル・テーマのダーク色:
- ナイトテーマの黒色:
デフォルトのテーマと色に加えて、ユーザーは「テーマコンフィギュレータ」をクリックして色とフォントを変更できます。
テーマ・コンフィギュレータでは、4つのテーマ色と6つのフォント構成を設定できます。
- テーマカラーの設定:
- フォント設定:
現在、すべてのオブジェクトは 4つのデフォルトのテーマ色と6つのデフォルトのフォント設定を共有しており、ユーザーは自分の選択に基づいてデフォルトの色と設定を変更できます。編集後、ユーザーはオブジェクトのプロパティ領域で対応する構成を選択するだけで、構成を適用できます。
ユーザーは、オブジェクトプロパティの [Options] の下にあるObjColorで様々なテーマ色を設定できます。
ユーザーは、オブジェクトプロパティの [Options] の [TextFont] で様々なフォント設定を選択することもできます。
デフォルトのテーマ色を変更する必要がある場合は、テーマ・コンフィギュレータ・バーの「Marterial(マテリアル)」の下にある「Customize(カスタマイズ)…」を選択します。
テーマ・コンフィギュレータ・バーで「カスタマイズ…」を選択し、「テーマ・コンフィギュレータ」をクリックすると、ユーザーの要望に基づいてテーマの色をカスタマイズできるようになります。
色合わせについては、カラーコード・フィールドにグラフィック編集ソフトウェアのカラーコードを直接入力できます。
追加情報：
補助色設定における色とコンポーネント間の対応は、LVGLの基盤となるプログラムコードの設定に関係します。詳細な対応については、LVGL 公式サイトの紹介や LVGLのソース・コードを参照してください。
LVGL公式ウェブサイトのアドレス： https://docs.lvgl.io/7.11/.
オブジェクト言語コンテンツのデフォルト設定
LangID（言語ID）は、LangIDを個別のテキスト設定に切り替えて、API、ArduBlockビルディングブロック、またはイベントコマンドを通じて言語切り替え機能を実現することで、86HMIを複数の言語にすばやく設定できる機能です。LangIDを切り替えた後、テキスト属性を含む各オブジェクトを、対応する言語に個別に変更する必要があります。
現在、ユーザー設定には 9つのLangIDをサポートしています。
LangID を設定する方法は、新しい機能オブジェクトを追加した後です。ボタンやラベルオブジェクトを追加するなど、最初に LangID 1から 9のいずれかの設定を選択します。次に、右側のプロパティ設定ウィンドウのテキストフィールドに移動し、希望する言語テキストを入力します (翻訳ソフトウェアで翻訳された言語テキストを使用して、テキスト・フィールドに貼り付けることができます)。次に、LangID 1から 9のいずれかの設定を選択して言語テキストを設定し、切り替える希望の言語テキストを入力します。最大 9つの異なる言語テキストを設定できます。
この機能を利用してフォント言語を切り替える：
ウィンドウの右側にある 
( 
の下）を使用するか、API および ArduBlockビルディング・ブロックと共に使用して、言語切り替えイベントの LangIDを切り替える命令を実行します。
コード生成
編集後、コード生成ボタンをクリックして 86HMIを86Duino IDEコードに転送し、プロジェクト・ファイルを保存してページを閉じる必要があります。ユーザーは 86Duino Coding IDEまたは ArduBlockを通じて API を利用できます。86Duino IDEインタフェースを介して生成されたプロジェクトのHMI APIには、オリジナル・コード ・ファイル (.cpp) とヘッダファイル (.h) が必要です。
86HMI プロジェクトに外部リソースがある場合、生成の進行が完了するとリマインダ・ ウィンドウが表示されます。このとき、[exData を開く] ボタンを使用して外部リソースのフォルダを開き、ファイルを外部ストレージスペースにコピーできます。
追加情報：
86HMIはプログラムコードを生成した後、メインプログラム・ページ (.ino) に次のプログラムコードを自動的に生成します。いずれか 1つでも欠けていると、86HMI は動作しません。
3.2.5 ツールボックス
ツールボックスは、86HMIウィンドウの左側にあります。
この領域にはすべてのオブジェクトが保持され、ユーザーが選択できるようにカテゴリに分類されます。
オブジェクトの使用方法とパラメータの詳細については、第 4 章「オブジェクト機能の設定」を参照してください。
オブジェクトカテゴリ
 |  |  |
| プリミティブウィジェット | コントロールウィジェット | 視覚化ウィジェット |
 |  | |
| 入力ウィジェット | メニューウィジェット |
3.2.6 作業領域
この領域にはオブジェクトが表示され、このセクションでは作業領域に関連付けられた機能について説明します。
オブジェクトの追加
ツールボックスには多くのオブジェクトがあります。ユーザーは「ドラッグ」または「ダブルクリック」することでそれらを作業領域に追加できます。
オブジェクトの位置を移動する (ショートカット：矢印キー)
選択ボックス内で左クリックして位置をドラッグします。
ズーム（等倍のショートカット：Shiftキーを押したまま）
サイズを左クリックして、選択ボックスの周りのボックスをドラッグ・アンド・ドロップします。
作業領域のズーム比
作業領域の表示比率を切り替えることができ、様々なサイズの画面に適合します。
オブジェクト・ツールバー
コピー、貼り付け、削除、オブジェクトシーケンスの調整、元に戻すまたはやり直し、などの編集可能なオブジェクト機能。
- Copy (ショートカットキー: Ctrl+C): 選択したオブジェクトをコピーします。
- Paste (ショートカットキー: Ctrl+V): 最後にコピーしたオブジェクトを貼り付けます。貼り付けられたオブジェクトは、新しいオブジェクトが貼り付けられたことを認識するために移動します。
- Delete (ショートカット: 削除): 選択したオブジェクトを削除します。
注記：
オブジェクトのID番号は一意です。オブジェクトのID番号は +1ずつ増加します。編集した元のオブジェクトを削除した場合、新しいオブジェクトのID番号は削除したオブジェクトと同じにはなりません。例えば、p1b1(ボタン) を削除して新しいものを追加すると p1b2 になり、p1b2を削除して新しいものを追加するとp1b3になります。ユーザーはコントロール・オブジェクトをID番号で識別できるため、ID番号が正しいかどうかに注記：意してください。
また、削除したオブジェクトを復元ショートカットで復元した場合、パイプ・ライン番号は変更されません。オブジェクトが削除される前と同じになります。
- Move Up: 選択したオブジェクトを 1レベル上に移動します。
- Move Down: 選択したオブジェクトを 1レベル下に移動します。
- Redo (ショートカット・キー: Ctrl+Shift+Z / Ctrl+Y): 回復した操作をキャンセルします。
- Undo (ショートカット: Ctrl+Z): 操作を前のステップに戻します。
追加情報：
Undo(元に戻す)機能とRedo(やり直し)機能。
- 多くのオブジェクトのテキスト関連属性は、LangID機能をサポートしています。異なるLangIDのテキスト属性は別々に保存されるため、元に戻す（Undo）またはやり直す（Redo）と、異なるLangIDのテキスト属性が変更され、編集領域に何のアクションも行われなくなる可能性があります。
- 元に戻す/やり直しは、イベント内の追加/削除/変更コマンドをアクションとして扱いません。ただし、元に戻す/やり直しアクションがオブジェクトに影響を与えて削除する場合、オブジェクト内のすべてのイベントが記録され、逆方向に追加されたときにイベントが復元されます。
- 元に戻す/やり直しはページ属性設定のみサポートし、ページの追加、削除、コピーなどはサポートしません。
- 86HMIエディタでは、ページ (ページ変更コマンド)、画像リソース (画像ソース属性など)、サウンドリソース (サウンド再生コマンド)、フォントリソース (テーマフォント) などの一部のカウンタによって削除機能が制限されます。
カウンタがゼロにリセットされると削除可能になりますので、これらのカウンタに影響するオブジェクトを削除した後にページ/ソースを削除すると、復元された対応する設定がデフォルト値に戻ります。たとえば、Page1のButton p1b1のクリック・イベントで[Add a Page Change: p2]コマンドを使用した場合です。この時点ではPage 2が使用中のため、削除できません。しかし、[Delete Button p1b1]を実行するとカウンタがゼロにリセットされ、その後、Page2が削除されます。元に戻す機能を使用して[Delete Button p1b1]を逆に実行した場合、ボタンp1b1のページ変更は、p2に設定することができなくなり、設定はNone（デフォルト値）に戻ります。同様に、画像リソースを削除すると、画像関連オブジェクトのImageSource（画像ソース）属性に影響し、サウンド・リソースを削除するとサウンド再生コマンドに影響します。フォントリソースについては、テーマ機能の操作が元に戻すおよびやり直しの範囲外であるため、フォントリソースは元に戻すおよびやり直し操作には影響しません。
3.2.7 ページ管理
ページは 86HMI の主背景です。このセクションでは、ページ管理に関連する機能について説明します。
ページリスト
作業エリアの表示をページ・リストで選択したページに切り替えます。
ページツールバー
- Add Page: 新しい空白のページを作成します。
- Delete Page: 選択したページ (ページ内のすべてのコンポーネントを含む) を削除します。
- Copy Page: 選択したページ (そのページ内のすべてのコンポーネントを含む) を新しいページにコピーします。
注記：
ページを削除して新しいページを追加した場合、ページ番号は元のページ番号に戻らず、+1ずつ増加します。例えば、Page2 を削除して新しいページを追加した後、新しいページは Page3になります。86HMIエディタでコードを再生成した後、Page3のコードが再度、再生成されるため、Page2に関連するコードを 1個ずつ修正する必要があります。86Duino IDEでプログラムコードを編集した後、Page2 に関連するオブジェクトIDを 1個ずつ修正する必要があります。そうしないと、最終的なプログラムコードにエラーメッセージが表示され、オブジェクトIDが見つかりません。
3.2.8 プロパティグリッドとイベントグリッド
このセクションでは、ページとオブジェクトのプロパティおよびイベント・グリッドの構成について説明します。
プロパテグリッド
選択したページまたはオブジェクトの属性を一覧表示し、属性を変更して、座標、長さ、幅などを変更するなどのカスタマイズされた効果を実現できます。
A. オブジェクトプロパティ:
ID、名前、コンテンツ、座標位置、コンポーネントの色、オブジェクトのサイズ、フォントとフォントサイズの選択、その他の属性パラメータ設定が含まれます。
オブジェクトの使用方法とパラメータの詳細については、第 4 章「オブジェクト機能の設定」を参照してください。
B. ページプロパティ:
ID、名前、コンテンツ、壁紙、タイマ・パラメータ設定が含まれます。
ページ・プロパティ・グリッドについては以下で説明します。
- Wallpaper: ページの壁紙(画像リソースについては、画像ファイルリソースを参照してください)
- TimerMode: タイマのトリガ方法
- One Shot: このページに入ってからイベントを実行する時間間隔(ミリ秒) の長さ (1 回のみ実行)。
- Periodic: このページに入った後に 時間間隔 (ms) でイベントを何回繰り返すか。
- TimerInterval (ms): タイマ・トリガ間の間隔。
- TimerEnable: タイマが有効、または無効。
イベントグリッド
選択されたページやオブジェクトのイベントやコマンドをリスト表示します。現在は、ページと一部のオブジェクトのみサポートされています。この機能は、オブジェクトやページによって実行される事前定義されたイベントを使用できるため、コード編集にかかる時間を節約できます。
- Event Menu: コンポーネントとページで実行されるイベントを選択します。
- Add instruction: 新しいイベント命令を追加します。
- Delete instruction: イベント命令を削除します。
- Edit instruction: イベント命令を編集します。
- Move Up: 命令の順序を先に移動します。
- Move Down: 命令の順序を後に移動します。
追加情報：
命令には実行順序があります。リストの上位にある命令が最初に実行され、最後の命令まですべて実行されます。
A. オブジェクトイベント:
イベントをサポートするオブジェクト: Button、ToggleButton、ImageButton、ImageToggleButton
- Button / ImageButtonオブジェクトのイベント条件: Clicked(クリック)、Pressing(押下)
- ToggleButton / ImageToggleButtonオブジェクトのイベント条件: Checked(チェック済み)、Unchecked(未チェック)
B. ページイベント:
ページ・イベント条件： Enter, Leave, TimerEventTriggered
このパラメータは、ページのプロパティと共に使用する必要があります。
- Enter: 現在のページに入るためのイベントをトリガします
- Leave: 現在のページを離れるイベントをトリガします
- TimerEventTriggered: 現在のページタイマによって設定された時間でイベントをトリガします
注記：
ページタイマの設定は、イベントのトリガメカニズムに関連しています。ユーザーがイベントの操作に慣れていない場合、予想を超える動作をするプログラムを作成してしまう可能性があります。
例えば、ユーザーが意図せずに 2つのページのイベントを設定して、ページに入った直後に互いのページ変更コマンドを呼び出すようにしてしまうことがあります。ページ 1に入った後、すぐにページ変更コマンドを呼び出してページ 2に入ります。ページ 2に入った後、すぐにページ変更コマンドを呼び出してページ 1に入ります。このようにすると、ページ変更のサイクルから抜け出すことができなくなります。
C. イベント命令関数
次の命令を追加できます: Page Change（ページ変更）、Set Language（言語設定）、Play Sound（サウンド再生）、Custom Instruction（カスタム命令）
Page Change（ページ変更）の使用法：
イベントのあるオブジェクトを選択した後：
- 対応するイベントを選択 (この例ではクリック)
- 底部の + をクリックして命令を追加
- ページ変更命令を選択
- 切り替えるページを選択(この例では p1)。
Set Language（言語設定）の使用法：
イベントのあるオブジェクトを選択した後：
- 対応するイベントを選択 (この例ではクリック)
- 底部の + をクリックして命令を追加
- 言語設定の指示を選択
- 切り替える LangIDを選択 (この例では LangID 2)
Play Sound（サウンド再生）の使用法:
イベントのあるオブジェクトを選択した後：
- 対応するイベントを選択 (この例ではクリック)
- 底部の + をクリックして命令を追加
- サウンド再生命令を選択
- 切り替えるサウンドを選択(この例では Isnd0)
追加情報：
Custom Instruction（カスタム命令）
カスタム命令を使用すると、ユーザーは、編集コードを使用して、オブジェクトまたはページで実行されるイベントを編集できます。このオプションは、高度なプロフェッショナルオプションのため、編集する前にユーザーが 86Duinoプログラムに精通している必要があります。
3.2.9 オブジェクトリスト
オブジェクトリスト領域。このセクションでは、オブジェクトリストの使用方法について説明します。
各ページとオブジェクトには独立したIDがあります。86HMIで編集した後は、プログラムがどのページまたはオブジェクトを対象としているかを認識できるように、この IDをインデックスとして使用する必要があります。
オブジェクトリストには、現在のページのすべてのオブジェクトが上から下まで表示され、リスト内のオプションは作業領域内のオブジェクトと同じです。機能オブジェクトを編集する場合、オブジェクトのオブジェクトIDが右下のウィンドウにリストされます。編集プロセス中に、入力座標が作業領域の範囲外になったり、他のオブジェクトの下に重なって見えなくなったりした場合は、作業領域内のオブジェクトのリストを使用して調整が必要なオブジェクトIDを見つけ、位置や順序を調整して修正することができます。
オブジェクトリスト内の順序は、オブジェクト間のレイヤの順序です。ユーザーは、ツールバーの上下機能を使用してレイヤを上下に移動し、オブジェクトの表示順序を決定できます。
下の図に示すように、オブジェクトリストで覆われたオブジェクトを選択し、[レイヤを上へ] ボタンをクリックして上に移動して表示させると、オブジェクトリスト内のオブジェクトの順序が同期して変更されます。
4. オブジェクト機能の設定
このセクションでは、ツールボックス内のすべてのオブジェクトを設定して使用する方法について説明します。
4.1 プリミティブウィジェット
プリミティブウィジェットには次のオブジェクトがあります。
4.2 コントロールウィジェット
コントロールウィジェットには次のオブジェクトがあります：
- Button（ボタン）
- ToggleButton（トグルボタン）
- ImageButton（画像ボタン）
- ImageToggleButton（画像トグルボタン）
- Switch（スイッチ）
- Checkbox（チェックボックス）
- Slider（スライダ）
- ImageSlider（画像スライダ）
- ArcSlider（円弧スライダ）
4.3 視覚化ウィジェット
視覚化ウィジェットには次のオブジェクトがあります。
- Bar（バー）
- ImageBar（画像バー）
- ArcBar（円弧バー）
- Gauge（ゲージ）
- ImageGauge（画像ゲージ）
- LED
- Table（表）
- TextList（表リスト）
- Chart（チャート）
- Oscilloscope（オシロスコープ）
4.4 入力ウィジェット
入力ウィジェットには次のオブジェクトがあります。
4.5 メニューウィジェット
メニューウィジェットには次のオブジェクトがあります。
5. 操作と高度な機能
5.1 概要
この章ではすべての86HMIオブジェクトの基本操作と高度な機能を紹介します。
86HMIエディタのコード生成機能を使用して HMI API(アプリケーション・プログラミング・インタフェース) を生成し、プログラムを記述せずに HMIを作成します。
コード生成後、プロジェクトは保存し閉じられ、ユーザーは 86Duino Coding IDEまたは ArduBlockを使用して API を使用できます。86Duino Coding IDE、86HMIエディタ、ArduBlockツールは、次の図に示すような関連性があります。
86HMIエディタは、コード生成後に、プロジェクトディレクトリの下にメインプログラム、myhmi.cpp、myhmi.h、およびデータフォルダを生成します。
データフォルダには次のものが含まれます：
- 86HMIエディタプロジェクト： _project.hpj
- ArduBlockプロジェクト： _ardublock.abp
- 2つのリソースのディレクトリ。リソースは、IDEへのアップロード用に提供される内部リソースである Resourceと、ユーザーが外部領域にコピーする必要がある exDataです。
まず、86HMIによって生成されるコードとファイルについて説明します。
| コード | 説明 |
|---|---|
| Main program (.ino) | Depend on your project name. |
| myhmi.cpp | Depends on your project name. |
| myhmi.h | 86HMI Header file. |
5.1.1 Main program (.ino)
メインプログラムとプロジェクト名はカスタマイズできます。
86HMIはプログラムコードを生成した後、メインプログラム・ページ (.ino) に次のプログラムコードを自動的に生成します。いずれか 1つでも欠けていると、86HMI は動作しません。
- 86HMIのヘッダファイルのインクルード
include “myhmi.h” - 86HMI関数の初期化
void setup() {
Hmi.begin();
}
5.1.2 ヘッダファイル(myhmi.h)
86HMIのヘッダファイル。ユーザーが使用するメインの MyHMIクラスが含まれており、すべてのページ、オブジェクト、およびリソース変数を宣言します。概要は、次のとおりです。
5.1.3 実装ファイル(myhmi.cpp)
myhmi.cpp には、MyHMIの実装、ページ/オブジェクトの初期化、データ構造、および LVGLイベント・ハンドラが含まれています。86HMIエディタのイベント命令は、イベント・ハンドラにプログラムと命令を配置します。
86HMIエディタ・バージョン1.0.2.7では、グローバル・コードが追加され、このファイルの先頭に配置されるため、グローバル変数、関数などを追加できます。#include を使用して外部ライブラリを使用することもできます。
注記：
MyHMIは LVGLオブジェクトの user_dataにデータを保存するため、APIをスキップして LVGLオブジェクトを直接操作する場合は、user_dataを上書きしないように注意してください。
5.1.4 イベント・タイムラインのサンプル
86HMI環境では、イベントの処理と管理は、慎重に設計されたタイムラインを通じて調整されます。このタイムラインを使用すると、イベント・トリガと対応するスクリプトの実行を設定および監視して、動的でインタラクティブなユーザー・インタフェースを作成できます。
実際には、各イベントは、ボタンのクリック、センサの読み取り値の変更など、特定のユーザー・アクションまたはシステムの変更に対応します。例えば、event1はボタンのクリックなどです。
イベント処理アーキテクチャ
86HMIは、LVGLライブラリに基づくイベント処理システムを使用します。このシステムにより、開発者はイベントをトリガする条件を設定し、これらのイベントに応答する特定のスクリプトまたは動作を紐づけできます。
- HMIイベント・セグメント：
ここでは、いくつかの条件とスクリプトが相互に定義されています (例: 「IF event1 THEN script1」)。 これにより、特定のイベントがトリガされたときに対応するスクリプトが実行されます。 - タスク処理:
hmi_task_handler()は、イベント・ブロックをループして LVGLコンポーネントを更新し、ユーザーインタフェースが最新のデータと状態を反映するようにする、継続的に実行される関数です。
イベント・ブロックとスクリプトの実行
イベントがトリガされると、イベント・ブロックに割り当てられ、対応するスクリプトが実行されます。各イベントには明確な開始 (トリガ・ ポイント) と終了 (スクリプト実行完了) があるため、イベント処理が整理され、追跡可能になります。
5.2 API関数
このセクションでは、86HMIコンポーネントが APIでどのように動作するかについて説明します。初期化部分については、次のように記述されます。
初期化部分については、次のように記述されます。
- ユーザーが使用できるように、オブジェクト Hmiを事前に構成するか、自分で構成することができます。
- MyHMIビルダには初期化はありません。
- .
begin()を呼び出すと、MyHMIは初期化され、1つのMyHMIオブジェクトのみに制限されます。 - 初期化には、LVGL、フォント、画像、サウンドが含まれ、
widgetsInit()はすべてのHMIページ/オブジェクトを構成します。 - 最後に、タスクがマウントされ実行されます。
hmi_task_handler()は LVGL と様々な状態の更新を行います。
追加情報： パラメータ
- コマンド、状態、イベントのメソッドには、オーバーロードの 3つのメソッドがあり、そのパラメータは IDとして直接使用される lv_obj_t* id か、または Name.2として使用される char* nameです。
- カスタマイズされたオブジェクトのいくつかのメソッドには、より多くのクラス・パラメータが含まれており、IDに対応する型がクラスそのものではない場合があります。例えば、オシロスコープなどです。
5.2.1 検索関数
5.2.2 汎用関数
Page（ページ）
ページについては、 ページ管理を参照ください。
LangID
LangIDについては、 オブジェクト言語Content (内容)： デフォルト設定を参照ください。
Sound（サウンド）
サウンド・ファイルリソースについては、サウンド・ファイルリソースを参照ください。
MessageBox（メッセージ・ボックス）
AlarmBanner（アラームバーナー）
5.2.3 Object Functions
このセクションでは、各コンポーネントの APIコマンド関数、ステータス関数、イベント関数について説明します。
イベントでは、現在のHMIイベントをキャプチャし、イベント・ブロックがイベントが発生したかどうかを判断できるようにし、イベントが確立された場合にスクリプトを実行します。
通常、下記に示すように、 BEGIN_HMI_EVENT_PROC で始まり、 END_HMI_EVENT_PROCで終わります。
オブジェクト汎用関数
すべてのオブジェクトに設定できます。
* オブジェクトの機能については、各オブジェクトの説明ページを参照してください。
付録
A-1 About LVGL
86Duino Coding IDE 500は、 LVGL 7.11.0を使用します。
LVGL(Light and Versatile Graphics Library)は、使いやすいグラフィカル要素、美しい視覚効果、低メモリ占有を備えた組込みGUIを作成するために必要なすべてを提供する、フリーのオープン・ソース・グラフィック・ライブラリです。
主な特徴：
- ボタン、チャート、リスト、スライダ、画像などの強力なビルディングブロック
- アニメーション、アンチエイリアス、不透明度、スムーズスクロールを備えた高度なグラフィック
- タッチパッド、マウス、キーボード、エンコーダなどの様々な入力デバイス
- UTF-8エンコードによる多言語サポート
- マルチディスプレイのサポート、即ち、複数のTFT、モノクロ・ディスプレイを同時に使用可能
- 完全にカスタマイズ可能なグラフィック要素
- ハードウェアに依存しないため、あらゆるマイクロコントローラやディスプレイで使用可能
- 少ないメモリで動作するスケーラブル (64kBフラッシュ、16 kB RAM)
- OS、外部メモリ、GPUはサポートされていますが、必須ではありません
- 高度なグラフィック効果でもシングル・フレーム・バッファ操作が可能
- 最大限の互換性のために Cで書かれています (C++ 互換)
- ハードウェアなしで、PC上で組込みGUI設計を開始するためのシミュレータ
- MicroPythonへのバインディング
- 迅速なGUIデザインのためのチュートリアル、例、テーマ
- 資料はオンラインとオフラインで利用可能
- MITライセンスに基づくフリー、オープンソース
LVGLの詳細については、LVGL Webサイトを参照ください： https://docs.lvgl.io/7.11/index.html.
A-2 カスタム命令
メインプログラム (.ino) で HMIメソッドを使用するだけでなく、これらのメソッドをカスタム命令で使用することもできます。
カスタム命令を使用すると、ユーザーはエディタコードを使用して、オブジェクトまたはページで実行されるイベントを編集できます。このオプションは高度なプロフェッショナルオプションであり、編集する前にユーザーが 86Duinoプログラムに精通している必要があります。
86HMIエディタでは、編集をより便利にするために検索とクイック入力メニューが追加されました。グローバルコードも追加され、myhmi.cppの先頭に配置され、グローバル変数、関数などを追加できます。 #include を使用して外部ライブラリを使用することもできます。
注記：
ローカル・スクリプトで showMessageBox を使用する場合、このメソッドではブロックされず、直接 -1 が返されます。
86Duino のリファレンスのテキストは Arduino レファレンス を編集したもので、 Creative Commons Attribution-ShareAlike 3.0 License下でライセンスされています。リファレンス内のコードサンプルはパブリックドメインとして公開されています。
