GUI Designerボタンクラスコントロールマニュアル

1.ボタンクラスコントロールを追加する方法

図1.1に示すように、ショートカットバーまたはツールボックスアイコンをクリックしてコントロールを追加します。

図はこちら1.1コントロールの追加

注意：ショートカットバーには共通のコントロールがリストされ、ツールボックスのボタンクラスコントロールにはすべてのボタンコントロールが含まれます。

ユーザーはコントロールを追加する必要があるウィンドウをクリックし、コントロールを選択すると、マウスがアイコンを追加できます。

マウスの左ボタンをクリックして追加を続行するか、右ボタンをクリックして編集モジュールをクリックします。追加を停止する。

2.コントロール位置のサイズと外観を変更する方法

2.1位置とサイズを変更する方法

コントロールを選択するか、マウスの左ボタンをクリックしてズームコントロールをドラッグするか、右側のプロパティウィンドウをクリックします。図2.1に示すように、位置とサイズを正確に調整します。

図はこちら2.1共通プロパティの変更

2.2外観プロパティを変更する方法

コントロールを選択し、右側のプロパティウィンドウでをクリックします。→図2.2に示す。

図はこちら2.2外観プロパティの変更

“ポップアップ状態”をクリックすると、下のオプションには透明、単色、画像の3種類のオプションがあります。下の表のように、マウスをクリックすると任意に切り替えて選択できます。

図はこちら2.3画像の置き換え

注：画像の使用量が多い場合は、画像管理機能を使用してバッチ画像の追加、置換、分類、管理、具体的な操作は、画像管理の説明を参照してください。

2.3ボタンコントロールにテキストを追加する方法

ボタンコントロールにチェックを入れ、右側のプロパティウィンドウでをクリックします。→図2.4に示す。

図はこちら2.4文字の追加

テキストをクリックすると、図2.5に示すように、テキストコンテンツの追加と設定ができます。

図はこちら2.5静的テキスト

静的テキスト入力ボックスに入力します。これは、ウィンドウに直接表示できます。

3.1文字の変更方法

右にクリックします。ボタン、ポップアップフォント変更ウィンドウは、図2.6に示すように、必要に応じてフォントサイズなどを変更することができます。

図はこちら2.6フォントの変更

2.2文字の色を変更する方法

テキストの色の右側にあるボックスをクリックすると、カラーパレットがポップアップし、ニーズに応じてテキストの色を変更できます。図2.7に示すように、テキストの色はデフォルトで黒です。

図はこちら2.7文字の色の変更

2.3背景色の変更方法

背景色の右側にあるボックスをクリックすると、パレットがポップアップして背景色を変更することができ、図2.8に示すように、背景色はデフォルトで透明になります。

図はこちら2.8背景色の変更

3.4アライメントの変更方法

設定の下のボタンをクリックすると、ユーザーは必要に応じて入力されたテキストの設定を変更できます。設定は図2.9に示すように、デフォルトで中央に設定されます。

示されたもの

図はこちら2.9文字の位置合わせの修正

3.ボタンコントロールの適用

3.1コントロールの紹介

ボタンコントロールは、ユーザーがクリックするだけでアクションを実行できる生活のスイッチに似ています。ボタンコントロールはテキストと画像を表示します。このコントロールは、クリックするとページジャンプ、数値の増減などの機能をトリガーすることができます。

3.2画像を置き換える方法

ボタンコントロールを選択し、右のプロパティウィンドウをクリックして画像を変更します。ポップアップ状態はボタンが操作されていないときに表示される状態であり、押下状態はボタンを押したときに表示される状態であり、図3.1に示すように画像置換操作手順である。

図はこちら3.1画像の置き換え

シミュレーション時には，ボタンが操作されず，図3.2のようにポップアップ状態の画像が表示される.

図はこちら3.2アップ状態

ボタンをクリックし、図3.3に示すように状態表示画像を押します。

図はこちら3.3Push Stateたった今

3.3アプリケーション事例

3.3.1イベント一覧

次の表で説明するイベントのリスト。

3.3.2ウィンドウの切り替え

ウィンドウ切り替えすなわちボタンをクリックすると、現在のウィンドウからターゲットウィンドウに切り替えることができます。

1イベントの追加方法

ボタンコントロールを選択し、右のプロパティウィンドウでイベントをクリックして、図3.4に示すようにイベントを追加します。

図はこちら3.4イベントの追加

2処理方法の設定方法

処理方法右下をクリック図3.5に示すように、処理方法ウィンドウをポップアップし、ウィンドウ切り替えとターゲットウィンドウを選択します。

図はこちら3.5ウィンドウの切り替え

3.3.3ボタンコントロールの送信方法TDFH標準プロトコル

1イベントの追加方法

ウィンドウ切り替えとイベント操作方法と一致し、繰り返しません。

2処理方法の設定方法

標準プロトコルはTDFHUI編集ツールプライベートプロトコルで、変数の変更、イベントの送信などが可能です。

処理方法右下をクリック処理方法ウィンドウを表示し、コマンド送信→ [標準プロトコル]を選択してイベントコマンドを送信

→図3.6に示すようにイベント番号を設定します。

図はこちら3.6[標準プロトコル]イベントコマンドの送信

3ボタンコントロールが送信する標準プロトコル命令の表示方法

イベント番号が1に設定されている場合、シミュレーション実行ボタンをクリックします。図3.7に示すように、シミュレーション画面でボタンをクリックして送信されたコマンドを確認します。

図はこちら3.7【標準プロトコル】コマンドを送信する

3.3.4ボタンコントロールでカスタムプロトコルを送信する方法

1イベントの追加方法

ウィンドウ切り替えとイベント操作方法と一致し、繰り返しません。

2処理方法の設定方法

カスタムプロトコルは、modbusプロトコルなど、ユーザーがプロジェクト内で使用できる他のプロトコルです。

処理方法右下をクリック処理方法ウィンドウをポップアップし、コマンド送信を選択→“カスタムプロトコル”を選択シリアルポートコマンド送信→命を設定

図3.8に示す。

図はこちら3.8【カスタムプロトコル】シリアルポートコマンドを送信

注：図3.9に示すように、[カスタムプロトコル]シリアルコマンドを送信する入力ボックスをクリックすると、カスタムコマンド機能説明ウィンドウがポップアップします。

図はこちら3.9“ディレクティブ関数の説明”ウィンドウのカスタマイズ

3ボタンコントロールが送信する標準プロトコル命令の表示方法

カスタム·プロトコル·コマンドが“AB CD EF 01 $BYTE #3000 $CRC16MODBUS 1，5 $DELAY 1000”で送信されたら、“シミュレーション”をクリックして実行します。

ボタンを押す。図3.10に示すように、シミュレーション画面でボタンをクリックして送信されたコマンドを確認します。

図はこちら3.10[カスタムプロトコル]コマンドの送信

3.4ボタンコントロールをテキスト入力に使用する方法

ボタンコントロールによるテキスト入力の応用については、詳細は“入力ボックスの使用”説明書を参照してください。

3.5ボタンコントロールを使用してパラメータを設定する方法

ボタンコントロールをタップしてバルブの開閉時間を変更します。

1カスタム変数を追加します。

図3.1 1に示すように、バルブの開閉開始時間の値を格納するカスタム変数を追加します。追加手順の詳細は、“変数の適用”の説明を参照してください。

図はこちら3.11バルブ開始時間設定変数

2ボタンコントロールとテキストコントロールを追加する方法

図3.12に示すように、バルブの開始時間を表示する新しいテキストコントロールを作成します。共通モジュールのボタンコントロールとテキストコントロールをクリックして追加します。

図はこちら3.12ボタンコントロールとテキストコントロールの追加

3変数バインディングの追加方法

テキストコントロールを選択し、右側のプロパティウィンドウで変数バインディングをクリックし、追加をクリックします。バインドされたコントロールプロパティ、データソースバインディングと変換モード、変換メソッド設定、図3.9に示すように操作します。

図はこちら3.9変数バインディングの追加

4イベントの追加方法

イベントを“クリック”に追加します。操作方法は同じです。3.3.2ウィンドウの変更。

5処理方法の設定方法

処理方法右下をクリック処理方法ウィンドウをポップアップし、変数操作を選択→変数設定を選択→ターゲット変数を設定→定数を使用します。

入力ボックスに1を入力する、すなわちボタンをクリックすると、Var0変数の値は初期値0から1になり、他の方法における変数は操作する。3.1 1に示す。

図はこちら3.11パラメータ処理方法の設定

6バルブ開始時間の取得方法

ユーザーは、プロトコルコマンドを通じてバルブの開閉時間を取得し、具体的な操作手順は、プロトコル送信コマンドを詳細に確認できます。

3.6長い押しで値をすばやく変更する方法

ボタンコントロールとテキストコントロールを追加する方法

具体的な手順は上記のとおりです。

変数バインディングの追加方法

具体的な手順は上記のとおりです。

イベントの追加方法

ボタンコントロールをチェックし、右側のプロパティウィンドウをクリックして、図3.10に示すように長押しイベントを追加します。

図はこちら3.10イベントの長さ

処理方法の設定方法

処理方法右下をクリック処理方法ウィンドウをポップアップし、変数操作を選択→変数循環増減を選択→ターゲット変数を設定→ステップを設定

図3.1 1に示すように。

図はこちら3.11処置の方法

シミュレーションデモ

シミュレーション時にボタンコントロールを長押しすると、図3.12に示すように、テキストコントロールに表示される数値が急速に増加します。

図はこちら3.12効果のシミュレーション

4.ラジオボタンラジオボタンセルフロックボタン適用適用

4.1コントロールの紹介

ラジオボタンコントロールは、オンオフ状態とオンオフ状態を持つスイッチボタンとして理解することができ、スイッチ操作を可能にします。

4.2画像を置き換える方法

ラジオボタンコントロールを選択し、右側のプロパティウィンドウをクリックして画像を変更します。

ラジオボタンをクリックして押したときは選択状態、ラジオボタンを操作しないときや選択状態から再度クリックした後のアップ状態は選択解除状態となる。操作手順を図4.1に示す.

図はこちら4.1画像の置き換え

エミュレーション時にラジオボタンが動作しないか選択状態から再度クリックした後図4.2に示すように、選択解除状態が表示されます。

図はこちら4.2未チェック状態

ラジオボタンをクリックして押すと、図4.3のように選択状態が表示されます。

図はこちら4.3チェック状態。

4.3アプリケーション事例

4.3.1イベント一覧

次の表で説明するイベントのリスト。

4.4.1ラジオボタンで送信する方法TDFH標準プロトコル

1イベントの追加方法

ラジオボタンコントロールを選択し、右のプロパティウィンドウをクリックしてイベントを追加します。図4.4に示すように、アクションメソッド。

図はこちら4.4イベントの追加

2処理方法の設定方法

処理方法右下をクリック処理方法ウィンドウをポップアップし、コマンド送信→ [標準プロトコル]を選択イベントコマンド送信→イベント設定を選択

図4.5に示すように番号付け。

図はこちら4.5[標準プロトコル]イベントコマンドの送信

4.4.2ラジオボタンを使用してカスタムプロトコルを送信する方法

1イベントの追加方法

図4.6に示すように、コマンド送信→ [カスタムプロトコル]シリアルコマンド送信→設定コマンドを選択します。

図はこちら4.6【カスタムプロトコル】シリアルポートコマンドを送信

4.4.3インターロックボタンを設定する方法

複数のラジオ·ボタンに連動して同じウィンドウにあり、いずれかのラジオ·ボタンを選択すると、残りのラジオ·ボタンは自動的に未選択状態に戻り、連動します。

図4.7に示すように、同じウィンドウ内のラジオボタンの組み合わせ名が一致するように設定します。

図はこちら4.7インターロック。

5.複数のキーアプリケーション

5.1コントロールの紹介

複数のキーコントロールセットは、ボタンコントロールの機能を実装し、ボタン上のさまざまな状態を画像で表示するのに適しています。

変数バインディングのデータ属性が画像インデックスの場合、バインディングの値に応じて状態画像のグループが呼び出され、異なる状態での自律的な切り替え機能が達成されます。

5.2画像を置き換える方法

複数のキーコントロールセットを選択し、右側のプロパティウィンドウをクリックして画像を変更します。“追加”をクリックすると、さまざまな状態画像のセットが追加されます。ボタンが操作されていないときに表示される状態をアップ状態とし、ボタンが押されているときに表示される状態を押し状態とし、具体的な手順を図5.1に示す。

図はこちら5.1画像の置き換え

シミュレーション時にボタンを操作せずにポップアップ状態1の画像を表示します（図5.2）。

図はこちら5.2アップ状態

ボタンをクリックして押すと、図5.3に示すように、押し状態1の画像が表示されます。

図はこちら5.3Push Stateたった今

5.3アプリケーション事例

5.3.1イベント一覧

次の表で説明するイベントのリスト。

プロトコル関連の操作はボタン操作に似ており、繰り返しはありません。

5.3.2複数のキーセットを使用して異なる画像を動的に切り替える方法

メインインターフェース（ウィンドウNEW1）内の複数組のキーをクリックすると、モード選択インターフェース（ウィンドウNEW2）に切り替わり、モード選択インターフェース内で、必要なモードをクリックして選択し、メインインターフェースに戻ると、メインインターフェース内の複数組のキー画像に対応するモード画像が表示され、このモードがオンになる。

操作手順は

プロジェクトを開くか、新規に作成するには、一般的なコントロールモジュールのウィンドウをクリックし、図5.4に示すように2つのウィンドウを追加します。

図はこちら5.4ウィンドウの追加

2 、ウィンドウNEW1の中に複数組のキーコントロールを追加し、複数組のキーを選択して追加とイベントを設定し、操作手順を図5.5に示す。

図はこちら5.5複数のキーグループとイベントの追加

3 、ウィンドウNEW1の複数のキーコントロールを選択し、プロパティーウィンドウ内の変数バインディングをクリックし、変数バインディングを行い、操作手順を図5.6に示す。

図はこちら5.6複数のキーセット変数バインディング

4 、ウィンドウNEW2をクリックし、2つのボタンコントロールを追加し、2つのボタンコントロールに両方のイベントを追加し、イベントのトリガーはすべてクリックで、そのうちの1つのイベントはウィンドウをNEW1に切り替えることで、もう1つのイベントは“変数操作”-“変数設定”で、ターゲット変数は“Var0”変数をバインドし、設定値は設定定数で、最初のボタンは入力ボックスに“0”を入力し、2つ目のボタンは入力ボックスに“1”を入力し、図5.7に示すように入力します。

図はこちら5.7ボタンコントロールのイベント設定

5 、ボタンコントロールの画像を設定して、図5.8に示すように注：複数組のボタンの画像設定は同じです。画像置換とシミュレーションデモ”と再しない。

図はこちら5.8イメージの設定

シミュレーションデモでは、複数のキーセットをクリックするとNEW2ウィンドウに切り替わり、ボタン2をクリックするとNEW1ウィンドウに切り替わり、複数のキーセット画像には図5.9と5.10に示すように、切り替えられた2つ目の画像が表示されます。

図はこちら5.10ボタンをクリック。1

図はこちら5.9ボタンをクリック。2

6. 3つの状態マルチキーアプリケーション

6.1コントロールの紹介

3状態マルチグループキーは、マルチグループキーと同じ機能を持ちますが、ボタンを無効状態（使用不可状態）に設定するための無効状態表示機能が追加されています。

6.2画像を置き換える方法

3状態マルチキーコントロールを選択します。右側のプロパティウィンドウをクリックして、図6.1に示すように、3つの状態のマルチセットキーの画像修正を行います。

図はこちら6.1画像の置き換え

ポップアップ状態1は、三状態の複数組のキーが操作されていないときに表示される状態である;

押下1は三组のキーを押下した时に表示されるである;

無効状態1は三態複数組のキーを有効にしない場合に表示される状態である.

シミュレーション時に三状態複数組のキーが操作されない場合は、図6.2に示すように、ポップアップ状態1を表示する。

図はこちら6.2アップ状態1

3状態複数のキーをクリックして押すと、図6.3に示すように、押し状態1が表示されます。

図はこちら6.3Push Stateたった今1

図6.4に示すように、3状態マルチキーがイネーブル状態でない場合は、無効状態1を表示する。

図はこちら6.4無効なステータス

6.3アプリケーション事例

6.3.1イベント一覧

次の表で説明するイベントのリスト。

プロトコル関連の操作はボタン操作に似ており、繰り返しはありません。

6.3.23状態マルチキーを無効にする方法

以下の例は加湿器ボタンの設定で説明します。加湿ボタンをクリックすると加湿器が作動し始め、自動モードボタンをクリックすると加湿ボタンが無効な状態になります。

操作手順は

1 、図6.5に示すように、複数のキーセットと3状態のマルチセットキーを追加します。

図はこちら6.5マルチグループキーとトリプルステートマルチグループキーの追加

2、各コントロールの位置と大きさを調整し、その画像置換を設定する（注：複数のキーセットは自動モード、3状態複数のキーセットは加湿モード）。

図はこちら6.6位置のサイズ変更と画像の置き換え

図6.7に示すように、キーコントロールの複数のセットを選択し、2つのイベントを追加して設定し、イベントのトリガーはクリックであり、2つのイベントの処理方法とターゲット変数はクリックです。

図はこちら6.7複数のキーのセットに対するイベント設定

図6.8に示すように、複数のキーセットの変数バインディングを設定し、バインドされるコントロールプロパティはピクチャーインデックス、データソースバインディング、変換モードなどの設定操作です。

図はこちら6.8複数のキーセットの変数バインディング

newmode変数は次のとおりです。

Automode変数は次のとおりです。

5 、3つの状態のマルチグループキーコントロールを選択してイベントを追加し、イベントはクリック、イベント処理方法とパラメータ設定、図6.9に示すようにトリガーされます。

6.93状態マルチキーのイベント設定

図6.10に示すように、2つの3状態マルチセットキー変数バインディングを追加し、2つの変数がバインドされた制御プロパティとデータソースと変換モードの設定操作を設定します。

注：無効状態の設定は、3状態の複数グループのキーを変数バインドする必要があり、バインドされた制御属性は、操作イネーブル、データソース、変換モード、変換方法、変換パラメータの設定を参照図6.10に示すように、自動変数の値は0と比較され、偽の場合、3状態の複数グループのキーは無効状態であり、真の場合、3状態の複数グループのキーは有効状態です。

図はこちら6.103状態マルチキー変数バインディング

シミュレーションデモ時に、加湿ボタンをクリックして加湿モードをオンにします。自動モードボタンをクリックすると、図6.1 1、図6.1 2に示すように、加湿ボタンは無効状態になります。

図はこちら6.11加湿ボタンを押す。

図はこちら6.12自動モードをクリック。

7.複数グループのラジオボタン適用

7.1コントロールの紹介

マルチセットラジオボタンコントロールは、マルチセットキー機能に似ており、ラジオボタンの機能を含むだけでなく、画像を介して異なる状態を表示することもでき、複数のスイッチセットに解釈することができます。変数バインディングのデータプロパティが画像インデックスの場合、バインディングの値に応じてスイッチ画像のグループが呼び出され、スイッチ画像の自律的な切り替えの効果が達成され、コントロールは異なる状態の押下またはポップ表示効果を表示できます。

7.2画像を置き換える方法

複数グループのラジオボタンコントロールを選択し、右側のプロパティウィンドウをクリックして、複数グループのラジオボタンイメージを変更し、操作手順を図7.1に示すようにします。

図はこちら7.1画像の置き換え

選択されていない状態1は、複数組のラジオボタンが操作されない時に表示される状態である;

未选択が1を押し、组のラジオボタンが未选択を押し下げる中に表示されるである;

选択1は、组のラジオボタンが押下された时に表示される;

選択状態1を押すと、複数のラジオボタンの選択状態から押されている間に表示される状態です。

シミュレーション時に複数のラジオボタンが動作しない場合は、図7.2に示すように、非選択状態1が表示されます。

図はこちら7.2未チェック状態1

複数のラジオボタンが未選択状態の押下中に未選択状態を表示します。図7.3に示すように、1。

図はこちら7.3未チェック状態押し1

図7.4に示すように、複数のラジオボタンを押すと選択状態1が表示されます。

図はこちら7.4チェック状態。1

複数のラジオボタンの選択状態からの選択状態の押下中の表示図7.5に示すように、1を押します。

図はこちら7.5選択状態を押す。1

7.3アプリケーション事例

7.3.1イベント一覧

次の表で説明するイベントのリスト。

プロトコル関連の操作はボタン操作に似ており、繰り返しはありません。

7.3.2複数のラジオボタンを使用して異なる画像を動的に切り替える方法

必要なモード別ボタン（ボタンコントロール）をクリックすると、対応するモードオンボタン（マルチセットラジオボタンコントロール）が選択された対応するモード画像を表示し、モードオンボタンをクリックするとモードがオンになる。

操作手順は

図7.6に示すように、3つのボタンコントロールとラジオボタンの複数のセットを追加します。

図はこちら7.6コントロールの追加

図7.7に示すように、コントロールのサイズと位置を調整して設定し、コントロールの画像を置き換えます。

図はこちら7.7コントロールの位置とサイズの調整と画像の置き換え

図7.8に示すように、ボタンコントロールを選択して、それぞれイベントを追加し、3つのイベントトリガーはすべて“クリック”であり、処理方法とターゲット変数などのパラメータ設定操作です。

図はこちら7.8ボタンコントロールイベント設定

図7.9に示すように、2つのマルチグループラジオボタンの変数バインディングを追加する。

図はこちら7.9複数のラジオボタンのグループに対する変数バインディング

Var0とVar1の変数は：

シミュレーションデモ時に、給気モードをクリックして、複数のラジオボタンが給気モードの画像を表示し、複数のラジオボタンをクリックして給気モードを開きます。

除湿モードをクリックすると、複数組のラジオボタンが除湿モードの画像を表示し、複数組のラジオボタンをクリックして除湿モードを開く;

冷凍モードをクリックし、複数のラジオボタンをクリックして冷凍モードの画像を表示し、複数のラジオボタンをクリックして選択し、図7.10 、7.1 1、7.12に示すように冷凍モードをオンにします。

図はこちら7.10風モードを開く。

図はこちら7.11除湿モードのオン

図はこちら7.12冷凍モードの開始

8. 3状態マルチグループラジオボタンアプリケーション

8.1コントロールの紹介

3状態マルチグループラジオボタンコントロールはマルチグループラジオボタン機能と互換性があり、無効状態表示機能も追加されています。設定可能なボタンは無効です（使用できない状態）。

8.2画像を置き換える方法

3状態マルチグループラジオボタンを選択します。右側のプロパティウィンドウをクリックして、図8.1に示すように、3状態マルチグループラジオボタンの画像修正を行います。

図はこちら8.1画像の置き換え

非選択状態1：3状態のマルチグループラジオボタンが操作されていないときに表示される状態;

未选択押下 1：三组ラジオボタン未选択押下中时に表示される;

选択1：三グループラジオボタンを押したときに表示される;

选択押下 1：三グループラジオボタンのために选択から押下中に表示される;

無効状態1：3状態マルチグループラジオボタンが有効になっていない場合に表示される状態。

シミュレーション時に3状態マルチセットラジオボタンが動作しない場合は、図8.2に示すように、非選択状態1が表示されます。

図はこちら8.2未チェック状態1

図8.3に示すように、3状態マルチグループラジオボタン未選択状態押下中に未選択状態を表示します。

図はこちら8.3未チェック状態押し1

図8.4に示すように、3状態マルチグループラジオボタンを押すと選択状態1が表示されます。

図はこちら8.4チェック状態。1

3状態マルチグループラジオボタン選択状態からのプッシュ中に選択状態が表示されます図8.5に示すように1。

図はこちら8.5選択状態を押す。1

無効状態は、トリプルステートマルチグループラジオボタンが有効になっていないときに表示される状態です。

図はこちら8.6無効なステータス

8.3イベント一覧

次の表で説明するイベントのリスト。

プロトコル関連の操作はボタン操作に似ており、繰り返しはありません。