基本コントロールドキュメント タッチパネル開発ドキュメント

アイコンコントロールの使い方は？

無料無料技术资料

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

modbus技术团队璀璨会员 約 11 分で読めます
アイコンコントロールの使い方は？

アイコンコントロールとは？

アイコンコントロールの使い方は？插图

アイコンコントロールはGIFまたはICON形式のファイルで、デフォルトのインデックスは0から始まります。アイコンコントロールを使用して、変数のさまざまな状態を視覚的に表示したり、背景画像を変更したりする

このルーチンではアイコンコントロールのよくある応用を紹介し、プロジェクト中の画面と合わせて各応用の構成を紹介し、よくある応用は次のとおりです。

  1. ステータス表示：4つのステータス表示を実現
  2. 背景アイコンの変更：4つの背景図の切り替えを実現

カテゴリー：Full Series

例程下载链接：《ICON控件应用》(点击跳转)

8.1アイコン·コントロールのプロパティ

この章では、アイコンコントロールのプロパティに焦点を当てます。プロパティウィンドウは次のとおりです。

アイコンコントロールの使い方は？插图1

表示の初期化

“はい”または“いいえ”を選択

アイコンファイル

アイコンファイルのパスの选択

透過的な処理

[透明カラーを使用] Use Transparent Colorまたは[背景にブレンド] Blend with Backgroundを選択可能

Touch Settingsシングル

タッチ設定を設定します。以下のオプションで設定できます。

  1. タッチ禁止：触れない
  2. タッチ許可：タッチすると通知がビープを表示
  3. 横方向にスライドしてフレームを変更左右にスライドしてフレームを変更
  4. 垂直方向にスライドしてフレームを変更上下方向にスライドしてフレームを変更

8.2アイコンファイルの作成

弊社のVisual TFTホストソフトウェアにアイコンファイル“ICON”作成ツールを統合し、この章では“ICON”ファイルの作成方法を紹介します。

  1. Visual TFTソフトウェアのメニューバーで、以下のように[ツール] → [アイコン生成]を選択します。アイコンコントロールの使い方は？插图2
  2. [フレームを追加]をクリックし、準備した素材を追加します。ユーザーは画像をインポートし、デフォルトで元の幅と高さの表示になりますが、幅と高さの微調整や任意のドラッグで位置調整を行い、最後に“アイコンを生成”をクリックします。操作は以下のとおり。
アイコンコントロールの使い方は？插图3

8.3ステータス表示

“ステータス更新”画面、ユーザー機器とシリアルスクリーン通信を紹介するとき、ユーザー機器はシリアルスクリーンにコマンドを送信し、アイコンコントロールのフレームを更新します。

画面の設定

[ステータス更新]画面の[背景画像]で適切なアートワークをインポートします。画面にアイコンコントロールを1個（コントロールID：1）、ボタンコントロールを3個（コントロールID：2-6）追加

プロパティの構成

アイコンのプロパティ

[アイコンファイル]をフッテージのパスに設定します。[透過処理]は“背景と融合”で，以下のように設定する.

アイコンコントロールの使い方は？插图4
[作業中]ボタン属性

アイコンのフレーム0、作業中状態を表示するために使用します。ボタンコントロール（コントロールID：2）のプロパティウィンドウで、“仮想ボックスに触れる”を“いいえ”、“押下時の画像”を対応する素材パス、“切り抜き”を“チェック”、“初期状態”を“押下”、“操作スタイル”を“スイッチ”に設定します。

アイコンコントロールの使い方は？插图5

“作業中”、“一時停止”、“停止”、“非表示”などのボタンを相互排他的効果を実現する：同時に上記のボタンを選択し、メニューバーで“編集”-“スイッチボタン相互排他的（N）”、対応するボタン“内部命令”-“押すと”が自動的に相互排他的命令を記入し、操作は次のようになります。

アイコンコントロールの使い方は？插图6

アイコン内命令の入力

  • 【内指令】→“押したとき”をクリック
  • コマンド入力ボックスをポップアップし、コマンドアシスタントを選択します。
  • コマンドアシスタントインタフェースで、左側のナビゲーションバーで[アイコンコントロール]を選択します。
  • [アイコンコントロール表示]領域のディレクティブパラメータを設定します。ルーチンのように、“ステータス表示”画面のアイコンコントロールを設定してフレーム0を表示します。
  • コピーコマンドは，次のように対内コマンドボックスに記入する
アイコンコントロールの使い方は？插图7

プレビューの実行

仮想画面、Visual TFTソフトウェア、仮想画面“仮想シリアルポート”をオンラインで実行します。[一時停止]ボタンを押すと、アイコンコントロールに対応する一時停止フレームが表示されます[状態表示]画面中のアイコンコントロール（コントロールID：1）に対して、対応する面のIDとコントロールIDを記入して、指定フレーム“2”を表示する場合、“表示”をクリックします。バーチャル画面には、“ストップフレーム”が表示され、実行効果は以下のようになります。

アイコンコントロールの使い方は？插图8

外部MCU制御

リファレンス開発パッケージkeilプログラム内のhim. dever.hファイル関数宣言およびhim. dever.cファイル内の定義

MUCコントロール指定フレーム表示

例えば、ユーザはアイコンコントロールの第1フレームを実現する必要がある場合、テキストバンク表示関数AnimationPlayFrameを直接呼び出すことができ、コードは次のとおりです。

/** **********************************************************************
** 名    void AnimationPlayFrame uint16 screen_id
**                                           uint16 control_id、
**                                           uint8 frame_id
** 詳細はこちら    Bipedフレーム表示の指定
** input parers screen_id   画面IDです。
**                   control_idコントロールIDコントロールID
**                   frame_id    フレームの指定
** output parametersなし
** Returned value   CLARiXなし
************************************************************************/
{
    ……
    AnimationPlayFrame 0 1 1//画面ID0コントロールID1アイコンコントロールのフレーム1を表示
    ……
}

8.3背景画像の変更

画面の設定

[背景画像の修正]画面の[背景画像]に対応するアートワークをインポートします。以下のように画面にアイコンコントロール1個（コントロールID：1）、ボタンコントロール3個（コントロールID：2-4）を追加します。

アイコンコントロールの使い方は？插图9

プロパティの構成

アイコンのプロパティ

[アイコンファイル]を素材のパス、[透明処理]を[背景と融合]に設定し、以下のように設定します。

アイコンコントロールの使い方は？插图10
[前の記事]ボタンの属性

コントロールプロパティの設定

アイコンの直前のフレームを表示するために使用します。ボタンコントロール（コントロールID：2）のプロパティウィンドウで、[仮想ボックスに触れる]を[いいえ]、[画像をポップ]を対応する素材パス、[切り抜き]を[チェック]、[押下時の画像]を対応する素材パス、[切り抜き]を[チェック]に設定し、プロパティを以下のように設定します。

アイコンコントロールの使い方は？插图11

前のフレーム内コマンドを入力する

  • クリック【内指令】→“押下時”，ポップアップ指令記入枠
  • “Directive Assistant”を選択
  • コマンドアシスタントインタフェースで、左側のナビゲーションバーで[アイコンコントロール]を選択します。
  • “アイコンコントロール表示”領域の指令パラメータを設定し、例えばルーチン中、“背景画像を修正”画面中のアイコンコントロールが前のフレームを表示するように設定する
  • このコマンドをコピーし、コマンドアシスタントを閉じて、コマンドボックスにコマンドを貼り付けます。
アイコンコントロールの使い方は？插图12

同様に、ボタンの“次のフレーム”設定はボタンの“前のフレーム”設定に似ています。コマンドアシスタントで次のフレームを選択し、コマンドを対応するボタン内のコマンドにコピーするだけです。

プレビューの実行

仮想画面、Visual TFTソフトウェア、仮想画面“仮想シリアルポート”をオンラインで実行します。“次”ボタンを押すと、アイコンコントロールは次のフレームに対応して表示を切り替えます。“背景画像を修正”画面中のアイコンコントロール（コントロールID：1）に対して、対応する換面IDとコントロールIDを記入して、“次のフレーム”をクリックします。仮想画面では、アイコンコントロールは次の背景効果として表示され、実行効果は次のようになります。

アイコンコントロールの使い方は？插图13

外部MCU制御

リファレンス開発パッケージkeilプログラム内のhim. dever.hファイル関数宣言およびhim. dever.cファイル内の定義

MUC前のフレームの表示を制御する

例えば、ユーザがアイコンコントロールを制御して前のフレームを表示する必要がある場合は、API関数AnimationPlayPrevを直接呼び出すとよい。コードは次のとおりである。

/** *********************************************************************
** 名    void AnimationPlayPrev uint16 screen_id
**                                          uint16_id
** 詳細はこちら     ViewCube直前フレーム表示ViewCube直前フレームヒョウジ
** input parameters screen_id画面ID
** control_id       EssbaseコントロールID
** output parametersなし
** Returned value   CLARiXなし
***********************************************************************/
{
    ……
    AnimationPlayPrev 0 1//画面ID0コントロールID1のアイコントロールは前のフレームを表示する
    ……
}
MUCは次のフレームを制御する

例えば、ユーザが次のフレームを表示するようにアイコンコントロールを制御する必要がある場合、API関数AnimationPlayNextを直接呼び出すとよい。

/** *********************************************************************
** 名    void AnimationPlayNext uint16 screen_id
**                                           uint16_id
** 詳細はこちら     ViewCube直前フレーム表示ViewCube直前フレームヒョウジ
** input parameters screen_id画面ID
**                    control_idコントロールIDコントロールID
** output parametersなし
** Returned value   CLARiXなし
***********************************************************************/
{
    ……
    AnimationPlayNext 0，1//画面ID0コントロールID1のアイコンコントロールは次のフレームを表示します
    ……
}
打赏微海报シェア
AI おすすめ阅读
関連タグ
この資料を実際のプロジェクトに活用しませんか？

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

エンジニア会員

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

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

高度なツール無制限
資料パックとコードパック
完全なエンジニアリングケースライブラリ
優先技術サポート窓口
会員特典を見る まずはデバッグツールを使う
KEEP READING

関連技術資料

2026年9月5日 Modbusプロトコルをタッチスクリーンで使用する方法は？ 2026年8月7日 Modbusチュートリアル6：データロギング制御（シリアルモニター Modbusアラームロギング） 2023年7月19日 GUI Designerシミュレーションデバッグ使用マニュアル

发表回复

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