ボタンコントロールの使い方は？

ボタンコントロールとは？

ボタンコントロールでは、アップまたは押下の状態を設定できます。

コントロールの背景はモノクロに設定でき、画像を設定することもできますので、押したときに実際のボタンが押された効果を見ることができます。

ボタンコントロールは、長押し、トランジェント、位置設定などのさまざまな機能を実現することもできます。

この章ではボタンコントロールの基本プロパティ、よくある応用を紹介し、工程中の画面と合わせて各応用の設定を紹介し、よくある応用は次のとおりです。

ボタンスイッチ機能：

過渡、スイッチ、セット、リセット、ロングプッシュ、遅延機能を実現

ボタンの論理機能：

2つのボタンの相互排他を実現し、コマンドを使用してマスタースイッチ機能を実現する

複数のボタンを押す：

1つのボタンと1つのアイコンでマルチステートボタン機能を実現できます

ボタンの無効化と有効化：

ボタンの遅延機能を使用して他のボタンを無効にしたり有効にしたりする

カスタム命令：

ボタン押下時にカスタムコマンドを外部に送信

1.1プロパティの紹介

このセクションでは、プロパティウィンドウの下に表示されるボタンコントロールのプロパティに焦点を当てます。

Touch the Virtual Boxシングル

ユーザーがボタンを押すと、次のような仮想ボックスが表示されます。

イベント通知

ボタンの状態が変化した場合、通知をアップロードする。

（ボタン通知を閉じると、ミニスクリプトとLUAスクリプトの対応するボタンはコールバックをトリガーせず、シリアルポート経由でコマンドを発行しません。

弾発時の写真

ボタンがアップのときに表示される画像。“切り抜き”を選択すると、画像内のボタン座標に対応する領域の画像が表示されます。

押した時の写真

ボタンを押したときに表示される画像。“切り抜き”を選択すると、画像内のボタン座標に対応する領域の画像が表示されます。

文字の状態

ボタンコントロールに文字を表示します。[はい]を選択すると、次のようにステータス別にテキストが表示されます。

1. フォント：文字サイズとスタイル
2. アップ时のカラー、押下时のカラー文字のカラー
3. アップ时の文字、押下时の文字2つの异なるに表示される文字

タッチの用途

• 画面の切り替え
• スイッチの説明
• キーのカスタマイズ
• カスタムディレクティブの定義
• ポップアップメニュー

図のように：

画面の切り替え

指定画面に切り替わり、関連パラメータの設定は次のようになります。

オプション機能は：

1. ターゲット画面：ボタンコントロールをクリックすると、指定画面に切り替わります
2. サブ画面：サブ画面は一般的に透明な背景を持つ小さなウィンドウであり、ダイアログボックスとして使用できます。ターゲットページの“背景透明”を選択して“透明”を選択し、ページに画像コントロールを設定し、画像コントロールの“パス”を選択して対応するUIを選択すると、表示効果は以下の通りです。
3. アニメーション効果：ページを切り替えるときのトランジション効果は、画面全体を左から右へ、上から下へ、フェードフェードフェード、徐々に開くなどの効果を選択できます。この機能をサポートするのはIoTのみ。
4. アニメーション範囲：指定範囲内でアニメーション効果を表示し、指定範囲外では表示しない。画面全体または指定範囲を設定できる
5. パスワード保護：パスワード保護をオンにした後、正しいパスワードを入力して画面を切り替える必要があります

スイッチの説明

プッシュボタンスイッチの機能、関連するパラメータの構成は次のとおりです。

オプション機能は：

1. 初期状態：スイッチの初期状態。
2. 操作スタイル：
   • トランジェント：リリース後、スイッチは自動的にポップアップし、タッチスイッチ機能に似ています。
   • スイッチ：押すと、スイッチはポップアップからプッシュに変わり、またはプッシュからポップアップに変わり、ロックスイッチ機能と同様に機能します。
   • セットアップ：スイッチはポップアップからプッシュにのみ変更できます。
   • リセット：スイッチは押した状態からポップアップにのみ変更できます。
   • ロングプッシュ：トランジェントボタンに似ているが、押すと100ミリ秒ごとに通知される。
   • 遅延：指定した時間を押した後に通知する
3. 内部命令：押されたりポップされたりした後に内部で実行される命令
4. 外部コマンド：押された後に外部に送信されるコマンド

キーのカスタマイズ

対応するボタンを入力値に変換します。カスタムキーボード入力テキストコントロールで使用する必要があり、ボタンコントロールはカスタムキーボードとして設計でき、ユーザーはボタンコントロールをカスタムキーとして使用する必要があります。

カスタムディレクティブの定義

カスタム16進形式のデータを送信します。つまり、ユーザー設定ボタンを押すと、デバイスはカスタムデータパケットをアップロードします。フレーム末尾がFF FC FF FFであるメッセージを送信できず、ビッグカラープロトコルと競合します。

ポップアップメニュー

メニューコントロールとテキストコントロールを協同して使用する必要があり、ボタンをクリックするとメニューがポップアップし、ユーザーはポップアップしたメニューを選択した後、テキストコントロールと協力して、選択したデータを表示する

1.2プッシュボタンスイッチ機能の応用

【ボタンスイッチ機能】画面では、ボタンの過渡·オン·オフ·セット·リセット·長押し·遅延機能を紹介します。

画面の設定

[ボタンスイッチ機能]画面の“背景画像”に対応するアートワークをインポートします。この画面にボタンコントロールを设ける

プロパティの構成

1. 過渡ボタンの過渡機能を例にとると、“仮想枠に触れる”を“いいえ”、“押下時の画像”を処理した画像を選択、“クロップ”にチェック、“タッチ用途”を“スイッチ説明”、“操作スタイル”を“過渡”に設定します。同様に、他のボタンの“仮想ボックスに触れる”、“押したときの画像”、“トリミング”、“タッチ使用”の設定は同じですが、操作スタイルの設定が異なります。
2. スイッチ設定ボタンのオン/オフ機能は、【操作スタイル】が“オン/オフ”となります。
3. 置位設定ボタンの置位機能は、【操作スタイル】が“置位”で、次のようになります。
4. リセットボタンのリセットは、“初期”が“押下”、“操作スタイル”が“リセット”で、次のようになります。
5. 設定ボタンを長押しする長押し機能は、“操作スタイル”が“長押し”、“長押し遅延”が“0.1 s”で、次のようになります。
6. 遅延設定ボタンの遅延機能は、“操作スタイル”が“遅延”、“長押し遅延”が“5秒”になっています。

プレビューの実行

仮想画面、Visual TFTソフトウェア、仮想画面“仮想シリアルポート”をオンラインで実行します。[コマンドアシスタント]を開き、左側のナビゲーションバー [ボタンコントロール]を選択して、[ボタンコントロールのアップと押下の状態を設定]のコマンドパラメータを設定します。設定画面（画面ID：0）でボタンコントロール（コントロールID：1）を押す。仮想画面では、ボタンコントロールはポップアップからプッシュに変わり、実行効果は次のようになります。

MCUコントロールボタンの状態

参照開発パッケージkeilプログラムのhim.dever.hファイル関数宣言とhim.dever.cファイルの定義。例えば、ユーザがボタン状態を設定する必要がある場合は、ボタン設定関数SetButtonValueを直接呼び出すことができ、コードは次のとおりである。

/** *****************************************************************
** 名     void SetButtonValue uint16 screen_id
**                                        uint16 control_id、
**                                        uchar value;
** 詳細はこちら    Essbaseの設定ボタンの状態
** input parameters  
**                   screen_id画面ID [screen_id画面ID]
**                   control_idコントロールIDコントロールID
**                   valueの意味     ボタンの
** output parametersなし
** Returned value    CLARiXなし
*******************************************************************/
{
  ……
  SetButtonValue 1，1，1; //画面ID1、コントロールID1、ボタン押下
  ……
}

1.3ボタン論理機能の応用

“ボタン論理機能応用”画面では、ボタンの相互排他、メインスイッチ制御機能を紹介します。

ボタンミューテックス

画面の設定

[ボタンスイッチ機能]画面の“背景画像”に対応するアートワークをインポートします。この画面には、次のようにボタンコントロールを設置します。

プロパティの構成

“スタート”ボタン：設定[仮想ボックスに触れる]を“いいえ”、[押下時の画像]設定した画像を選択し、[トリミング]、[タッチの目的]を“スイッチ説明”、[操作スタイル]を“スイッチ”にチェックします。

同様に、ボタン“Stop”の[仮枠に触れる]、[押下时の画像]、[切り抜き]、[タッチ用途]、[操作スタイル]のは同じであるが、[初期]は[アップ]にされている

相互排他的構成

ミューテックスボタンの設定方法は次のとおりです。同時に、ボタン“スタート”と“ストップ”を選択し、次に“メニュー”-“編集”-“スイッチボタンミューテックス”をクリックし、ボタンミューテックスをオンにし、自動的にボタンにボタンバッチ処理命令を追加します。

プレビューの実行

バーチャルスクリーンを実行し、ボタン“スタート”と“ストップ”をクリックすると、同時に押すことができるボタンは1つだけです。次のように

プッシュボタンスイッチ制御

画面の設定

[ボタンスイッチ機能]画面の“背景画像”に対応するアートワークをインポートします。この画面にボタンコントロールを設定します。次のようにします。

プロパティの構成

ボタン1、ボタン2、ボタン3を設定し、“仮想枠に触れる”を“いいえ”、“押下時の画像”を選択し、“トリミング”をチェックし、“タッチ用途”を“スイッチ説明”、“操作スタイル”を“スイッチ”に設定します。

設定ボタンをすべて開き、“仮想ボックスに触れる”を“いいえ”、“押したときの画像”を選択し、“トリミング”にチェックを入れ、“タッチの目的”を“スイッチ説明”、“操作スタイル”を“スイッチ”にします。

ボタンコントロールを選択（コントロールID：6）

1. プロパティバーの[対内命令] → [アップ时]
2. コマンド入力ボックスをポップアップし、コマンドアシスタントを選択します。
3. ディレクティブ·キャストバーで、ボタン·コントロールを選択します。
4. 設定画面ID1、ボタンコントロール1の状態が押下されると、クリック押下が指令を生成する
5. ディレクティブを内部ディレクティブ·ウィンドウにコピーする

同様に、ボタンコントロールID2とID3のボタンを押すと、4-5ステップを繰り返すことができます。ボタンコントロールID6がポップアップされたときに、ボタンコントロールID1、2、3のボタンアップ状態を設定する処理は同様である

プレビューの実行

仮想画面、Visual TFTソフトウェア、仮想画面“仮想シリアルポート”をオンラインで実行します。[コマンドアシスタント]を開き、左側のナビゲーションバーの[コントロール値の一括更新]を選択し、[複数のコントロール値の更新]コマンドパラメータを設定します。設定“画面ID”は“1”を選択し、“ボタンタイプ”は“ボタンコントロール”、“ボタンID”はそれぞれ3、4、5、“値”はいずれも1を記入します。仮想画面では、ボタンコントロールがポップアップからプッシュに変わり、実行効果が表示されます。

PS：同時に送信コマンド1ボタン1ボタン1ボタン1ボタン設定制御をサポートしており、実行効果を実証しません。

MCU一括制御ボタンの状態

参照開発パッケージkeilプログラムのhim.dever.hファイル関数宣言とhim.dever.cファイルの定義。例えば、ユーザーが同じページのボタン状態を一括設定する必要がある場合、一括設定ボタン関数BatchSetButtonValueを直接呼び出してください。

/** *****************************************************************

** 名    void BatchSetButtonValue uint16 control_id
**                                             uint8;
** 詳細はこちら    - 現在のページのボタン状態を一括更新
** input parameters 
**                  control_idコントロールIDコントロールID
**                  state state     ボタンの
** output parametersなし
** Returned value   CLARiXなし
*******************************************************************/
{
    BEGIN_CMD; //命令の開始
    BatchSetButtonValue 1 1; //コントロールID1、ボタンの押下
    BatchSetButtonValue 2 1; //コントロールID2、ボタン押下
    ……
    END_CMD; //命令の末尾
}

1.4シングルボタンマルチステートアプリケーション

1つのボタンと1つのアイコンでマルチステートボタンを実現する機能を紹介する“シングルボタンマルチステート”画面

画面の設定

[シングルボタンマルチステート]画面の“背景画像”に対応するアートワークをインポートします。この画面にボタンコントロールを設定します。次のようにします。

プロパティの構成

アイコンコントロールのプロパティを設定し、“アイコンファイル”作成したICONファイルを選択し、以下のように設定します。

ボタンコントロール（コントロールID：2）を選択し、プロパティバーに“仮想ボックスをタッチする”を“いいえ”に設定し、ボタンを押して対応するコマンドを記入します。手順は以下の通りです。

1. 【対内コマンド】→“押したとき”コマンド記入ボックスをポップアップ
2. “Directive Assistant”を選択
3. コマンドアシスタントインタフェースで、左側のナビゲーションバーで[アイコンコントロール]を選択します。
4. “アイコンコントロール表示”領域の指示パラメータを設定し、対応するパラメータを入力します。設定画面（画面ID：2）のアイコンコントロール（コントロールID：1）の場合は、次のフレームをクリックします。
5. コマンドを“対内コマンド”→“押下時”のウィンドウにコピーすると、以下のようになります。

プレビューの実行

バーチャルスクリーンを実行し、ボタンをクリックするとアイコンがポーリング表示されます。Visual TFTソフトウェアと仮想スクリーンは“仮想シリアルポート”でオンラインになります。[コマンドアシスタント]を開き、左側のナビゲーションバー [アイコンコントロール]を選択して、[アイコンコントロール表示]のコマンドパラメータを設定します。設定画面画面ID 2におけるボタンコントロールコントロールID 1のアイコンコントロールは、第1フレームを表示する。バーチャル画面では、ボタンは“Pauseを一時停止”と表示され、以下のように動作します。

MCU設定アイコンの表示

参照開発パッケージkeilプログラムのhim.dever.hファイル関数宣言とhim.dever.cファイルの定義。例えば、ユーザがアイコンを設定して指定フレームを表示する必要がある場合は、アイコンの表示フレームを設定する関数AnimationPlayFrameを直接呼び出すとよい。

/** *****************************************************************

** 名     void AnimationPlayFrame uint16 screen_id
**                                            uint16 control_id、
**                                            uint8 frame_id;
** 詳細はこちら    ProdNameで指定されたフレームを表示するアイコンを設定
** input parameters screen_id画面ID
**                    control_idコントロールIDコントロールID
**                    frame_idフレームの指定[frame_idふれーむのしてい]
** output parametersなし
** Returned value   CLARiXなし
*******************************************************************/

{
  ……
  AnimationPlayFrame 2 1 1; //画面ID2、コントロールID1のアイコンがフレーム1を表示
  ……
}

1.5ボタンの禁止と有効化

“ボタンの禁止と有効化”画面では、コマンド制御ボタンの禁止と有効化を紹介します。

画面の設定

[ボタンの禁止と有効]画面の“背景画像”に対応するアートワークをインポートします。この画面には、次のように3つのボタンコントロール（コントロールID：1、2、3）が设けられる

プロパティの構成

ボタン1、2、3のプロパティを設定し、“仮想枠に触れる”を“いいえ”に設定します。設定ボタン3のプロパティは、“仮想ボックスに触れる”を“いいえ”、“押下時の画像”を選択し、“トリミング”をチェックし、“初期状態”を“押下”、“操作スタイル”を“遅延”、“長押し遅延”を“5 s”に設定し、以下のように設定します。

ボタンのイネーブル/無効を設定する：ボタンコントロールを選択（コントロールID：3）

1. プロパティバーの[対内命令] → [アップ时]
2. コマンド入力ボックスのポップアップ
3. コマンド·アシスタント·インターフェイスでコマンド·アシスタントを選択します。
4. 左側のナビゲーションバーで“禁止/有効スクリーン更新”を選択し、対応するパラメータを入力します。ルーチンのように、コントロール画面（画面ID：3）のアイコンコントロール（コントロールID：1）で、“コントロールを有効にする”をクリックします。
5. 生成したコマンドをコマンドウィンドウにコピーし，以下のように他のボタンのイネーブル/無効操作処理を参照すればよい.

プレビューの実行

仮想画面、Visual TFTソフトウェア、仮想画面“仮想シリアルポート”をオンラインで実行します。[コマンドアシスタント]を開き、左側のナビゲーションバー [禁止/有効コントロール]を選択し、[コントロール機能を禁止または有効にする]コマンドパラメータを設定します。設定画面画面ID 3中のボタンコントロールコントロールID 1のボタンコントロールはタッチ禁止とする。仮想画面では、タッチボタン1が無効です。

MCUコントロールボタン禁止/有効

参照開発パッケージkeilプログラムのhim.dever.hファイル関数宣言とhim.dever.cファイルの定義。例えばユーザがボタンのタッチを禁止する必要がある場合は、ボタン禁止/イネーブル関数SetControlEnable（）を直接呼び出すとよい。コードは以下のようになる

/** *****************************************************************

** 名     void SetControlEnable uint16 screen_id
**                                           uint16 control_id、
**                                           uint8 enable;
** 詳細はこちら    :   タッチコントロールのイネーブルを設定する
** input parameters   screen_id画面ID [screen_id画面ID]
**                     control_idコントロールIDコントロールID
**                     enableの意味    Essbaseコントロールが有効かどうか
** output parametersなし
** Returned value   CLARiXなし
*******************************************************************/
{
  ……
  SetControlEnable 2 1 1; //画面ID3、コントロールID1のボタンはタッチ禁止
  ……
}

1.6カスタム·ディレクティブの適用

“カスタムコマンド”画面、ボタンがカスタムコマンドを外部に送信する機能を紹介

画面の設定

[ボタンスイッチ機能]画面の“背景画像”に対応するアートワークをインポートします。この画面には、次のようにボタンコントロール（コントロールID：1）が1つ設置されます。

プロパティの構成

ボタン1のプロパティを設定し、“仮想枠に触れる”を“No”、“イベント通知”を“No”、“押下時の画像”を設定した画像を選択し、“切り抜き”をチェックし、“タッチ用途”を“カスタムコマンド”、“ポップアップ時”を“カスタム16進コマンド”、“55 00”、“押下時”をカスタム16進コマンド“55 01”を選択し、以下のように構成する

プレビューの実行

仮想画面を実行し、画面を右クリックして[パラメータ設定]ウィンドウをポップアップし、カスタマイズをクリックしてコマンドを送信すると、実行効果は以下の通りです。

ルーチンファイル：