円形プログレスバーコントロールとは何ですか？
ユーザーとコンピュータのインタラクション体験がますます高くなるにつれて、シリアルスクリーンアプリケーションの範囲はますます広くなり、従来の長方形のプログレスバーは、いくつかの特別なアプリケーションには適用できません。そこで、当社はソフトウェアに新しい円形プログレスバー制御を導入しました。クールな画像を背景として設定し、表示効果を高め、開始角度と終了角度を自由に選択してパラメータ値をイメージ表示することができます。
このルーチンでは、円形プログレスバー制御の応用を紹介し、円形プログレスバー制御をスライドさせて温度値を変更することを実現します。
対象範囲タイプF、ベーシックタイプ非サポート
ダウンロードリンク：円形プログレスバーコントロールの適用”クリックジャンプ
15.1円形プログレスバーのコントロールプロパティの説明{{えんどうプログレスバーこんとろーるぷろぱてぃのせつめい}}
円形進行状況バーコントロールのプロパティウィンドウは次のとおりです。
プログレスバーの幅
プログレスバーの太さを設定します。
充填の方法
進行状況バーのスタイル、色または画像を選択できます。
- 色：単色表示。
- 【画像】：画像を使用する際にプログレスバーのスタイルを自分でデザインできます
開始角度
プログレスバーの開始位置（円形プログレスバーの値は角度で、最大角度は359、360度は0度）は以下の通りです。
終了角度
円形進行状況バーの終了位置を次のように示す
スライド調整
円形プログレスバーのコントロールには、以下のように4つのタイプがあり、無効、開始角度、終了角度、または両方の角度から選択できます。
- 禁止：タッチで調節できません。
- [終了角度]：進行状況バーをタッチして終了位置をドラッグします。
- 開始角度：プログレスバーの開始位置にタッチプログレスバーをドラッグ
- [2つの角度]：両端をタッチしてプログレスバーをドラッグできます。
タッチ位置。
円形プログレスバーコントロールのタッチ位置、オプションのエンドまたはプログレスバー。
[終了]：円形のプログレスバーの端をクリックまたはスライドさせるだけで値を変更できます。
プログレスバー：プログレスバーをタップまたはスワイプして値を変更できます。
角度の制限
円形進行状況バーコントロールの制限角度。次のように、はいまたはいいえオプションです。
[はい]：ドラッグ範囲は開始角度と終了角度の間でのみ使用できます。
[いいえ]：角度制限はなく、自由にスライドできます。
通知の方法
円形進行状況バーコントロールの通知方法は、次のように解除またはスライドしたときに選択できます。
リリース時：進行状況バーをドラッグしても発行せず、リリース時にコマンドを発行します。
スライド：プログレスバーをドラッグしながらコマンドを送信します。
スライダ·アイコン
スライダースタイルを追加でき、画像フォーマットは完全に透明なPNGを推奨します。
15.2円形プログレスバーコントロール
[円形プログレスバーコントロール]画面は、シリアル画面で円形プログレスバーコントロールのアプリケーションを紹介します。
画面の設定
[円形プログレスバーコントロール]画面の“背景画像”に、対応するアートワーク画像のインポート画面に円形プログレスバーコントロール（コントロールID：1）とテキストコントロール（コントロールID：2）を追加します。
プロパティの構成
円形プログレスバーコントロールのプロパティウィンドウで、“プログレスバーの厚さ”を“10”、“塗りつぶし方”を“色”、“色”を“黄色”、“開始角度”を“180”、“終了角度”を“360”、“スライド調整”を“終了角度”、“タッチ位置”を“終了角度”、“制限角度”を“はい”、“通知方式”を“スライド時”、“スライダアイコン”をアイコンのパスとして設定します。プロパティは以下のように設定します。
LUAスクリプト
LUAエディタを開く
ホストコンピュータVisual TFT内部にLUA開発コンパイル環境が統合されているので、メニューバー【ツール】をクリックして、以下のように“LUAエディタ”を選択します。
API関数説明{{APIかんすうせつめい}}
Lua TechnologyはLUAスクリプト用の豊富なAPIインターフェイス関数を提供しており、具体的な関数はドキュメント“IoT LUAスクリプトAPI”で確認できます。このチュートリアルのドキュメントで説明するセクションの関連インタフェース関数
- set_value（スクリーン、コントロール、値）
注：画面内のコントロールの値を指定します。
パラメータscreenターゲット画面ID
ControlターゲットコントロールID
valueターゲット·コントロールの値
- 関数on_control_notify screen control value
注：ボタンコントロールのクリック、テキストコントロールの変更、スライドバーの変更は、このコールバック関数を実行します。
パラメータscreenターゲット画面ID
ControlターゲットコントロールID
valueターゲット·コントロールの値
スクリプトの作成
LUAスクリプトを使用して、円形進行状況バーの値をテキストコントロールに関連付けます。円形プログレスバーコントロールをスライドさせると、コールバック関数on_control_notifyが呼び出され、円形プログレスバーコントロールの値が関数に渡されます。値とテキストコントロールの値を関連付ける手順は次のとおりです。
--ユーザーがタッチでコントロールを変更した後、このコールバック関数を実行します。
ボタンコントロールのクリック、テキストコントロールの変更、スライダーの変更は、このイベントをトリガーします。
function on__noscreen value
地域温度= 0
画面== 0、制御== 1の場合
そして、Then
温度=値0 x FFFF
Temperature = Temperature - 180/5
set_value 0 2 Temperature
End of Endシングル
End of EndシングルLUAスクリプトが円形プログレスバーの値を設定する場合、set_value関数を呼び出します。開始角度が180、終了角度が270の場合、set_value 0，1 180<< 16| 27 0円。
外部MCU制御
上記のルーチン効果を達成するためにLUAスクリプトを使用したくない場合は、ユーザーマイクロコントローラを介して円形プログレスバーコントロールを制御し、開発パッケージkeilプログラムのhim.dever.hファイル関数宣言とhim.dever.cファイルの定義を詳細に参照してください。
円形のプログレスバー制御の端にスライドし、シリアルスクリーンを送信します。MCUはコマンドを解析した後、NotifyAngleProgress関数を呼び出し、解析された円形のプログレスバーの値を関数に渡し、次のようにテキストコントロールの値を関数に設定します。
注：このコントロール値は4バイトで、最初の2バイトは“開始角度”、次の2バイトは“終了角度”です。円形プログレスバーの開始角度を180度、終了角度を270に設定すると、次のようになります。EE B 1 10 0 0 0 1 0 0 B 4 01 0E FF FC FF FF FF
| フレームヘッド | 構成命令 | コントロールの設定 | 画面IDです。 | コントロールID | 開始角度__H | 開始角度_L | 終了角度_H | 終了角度_L | Frame Tailシングル |
|---|---|---|---|---|---|---|---|---|---|
| EE | B1 | 10 | 00 00 | 00 01 | 00 | B4 | 01 | 0E | FF FC FF FF |
/** ********************************************************************
** 関数の名前 : NotifyAngleProgress
** 詳細はこちら ProdNameの円形進行状況バーのコントロール通知
** input parameters screen_id画面ID
** control_idコントロールIDコントロールID
** value：円形プログレスバーのコントロール値
** output parametersなし
** Returned value CLARiXなし
*********************************************************************/
void NotifyAngleProgress(uint16 screen_id, uint16 control_id, uint32 value)
{
……
float text vlaue = 0;
if screen_id == 0_id == 1 {
textVlaue =値0 x FFFF;
TextVlaue = TextVlaue 180/5;
SetTextInt32 0 2 TextVlaue 1 1;
}
……
}MCUが円形プログレスバー制御を制御する必要がある場合、コードは次のようになります。
/** ********************************************************************
** 名 Set_AngleProgress
** uint16 control_id、
** uint16 start
** uint16 end
** 詳細はこちら ProdNameの円形進行状況バーの設定
** input parameters screen_id画面ID
** control_idコントロールIDコントロールID
** スタートします Bipedの開始角度
** End of Endシングル ViewCubeの終了角度
** output parametersなし
** Returned value CLARiXなし
*********************************************************************/
{
……
Set_AngleProgress 0 1 180 360;//設定画面0、コントロール1の円形プログレスバーの開始角度は180、終了角度は360
……
}プレビューの実行
バーチャルスクリーンを実行し、画面中の円形プログレスバーコントロール（コントロールID：1）の端（スライダアイコン）をドラッグすると、画面がコマンドを発行し、同時に、関連するテキストコントロール（コントロールID：2）の数値表示が同期して更新されます。Visual TFTソフトウェアとバーチャルスクリーンは“仮想シリアルポートペア”でオンラインになります。[コマンドアシスタント]を開き、左側のナビゲーションバー [円形プログレスバー]を選択し、[プログレスバーの角度を設定]領域のコマンドパラメータを設定します。ルーチンのように、制御画面内の円形プログレスバーコントロール（コントロールID：1）とテキストコントロール（コントロールID：2）に対応するパラメータを入力し、“送信”をクリックします。バーチャルスクリーンに対応するコントロールが対応する状態を表示し、実行効果は次のとおりです。
发表回复