ARM mbed環境を使用してプロトタイプの測定デバイスを作成することに関する一連の出版物を続けています。今日は、タッチ入力での作業の基本について話しています。

発行サイクルの内容：

[パート1]使用されるソフトウェアおよびハードウェアソリューションの概要。
[パート2] FT800グラフィックスコントローラー入門。周辺機器に既製のmbedライブラリを使用します。
[パート3] HYT-271センサーの接続。周辺機器用の独自のライブラリをmbedで作成して公開します。
[パート4]アプリケーション開発：プログラム構造、タッチスクリーンでの作業。
[パート5]アプリケーション開発：画像の表示、ロシア化の問題。
[パート6]ハウジング部品の印刷

前の3つの記事の結果に基づいて、mbed-projectを受け取りました。これは、SPIおよびI2CインターフェイスとARM mbedでのサポートを備えた任意のデバッグボードの動作ファームウェアにコンパイルできるプログラムです。テスト対象は、Silicon LabsのSLSTK3400Aデバッグボード、AtmelのATSAMD21-XPRO、WiznetのWIZwiki-W7500Pでした。

実装されたプログラムは、HYT温度および相対湿度センサーをポーリングし、測定結果をRiverdi TFTディスプレイに出力するという2つのタスクを実行します。プロジェクトはdeveloper.mbed.orgで入手できます。

本日、基本プロジェクトの拡張を開始します-単一の作業画面の代わりに、メニューといくつかのサブセクションが表示され、これらの間でタッチインターフェイスを使用して切り替えることができます。

1. TFTモジュールの構造

そのため、使用されるRiverdi TFTモジュールは、ディスプレイ自体、FTDIのFTDxxシリーズグラフィックコントローラー、およびタッチコントローラー、オーディオコントローラーなどの追加コンポーネントで構成されています。メーカーのウェブサイトで利用可能なTFTモジュールの完全なリストを見つけることができ、ETF ウェブサイトで倉庫から利用可能なポジションと現在の価格を見つけることができます。

ディスプレイは、対角線、解像度、明るさ、バックライトのタイプ、取り付けまたは装飾フレームの存在、タッチスクリーンのタイプが異なります-容量性および抵抗性TFTと、タッチ入力をサポートしないディスプレイが製造されます。統合グラフィックスコントローラーはディスプレイ機能と一致します。FT800コントローラーは抵抗ディスプレイ用、FT801は容量性ディスプレイ用、古いFT81xモデルは比較的高解像度およびその他の追加機能をサポートしています。

私は、黒の装飾的なフレームで作られた4.3 ''の対角線を持つuxTouchシリーズのかわいいRVT43ULFNWC00モジュールを使用します。モジュールには静電容量式タッチスクリーンがあり、それに応じて統合グラフィックコントローラーFT801があります。

Riverdi TFTモジュールの制御手順についてはすでに説明しました。制御コントローラーはFT801チップに接続され、グラフィックコントローラーと簡単なコマンドを交換します。つまり、特定のFT801レジスタを読み書きします。コントロールコントローラーから受信したコマンドに従って、グラフィックコントローラーはディスプレイと対話します。画像を描画および表示し、タッチ入力とオーディオチャネルの操作を実装します。

容量性TFTモジュールでは、抵抗スクリーンを備えたモデルとは異なり、個別のタッチパネルコントローラーがインストールされます。ただし、この追加のハードウェアユニットの存在は、プログラマーの観点からTFT制御プロセスに影響しません。

2.タッチデータの取得

FT801グラフィックコントローラーは、標準および高度なタッチ入力モードの両方をサポートしています。最初のケースでは、シングルタッチのみを検出でき、高度なモードではマルチタッチがサポートされます。使用される動作モードは、REG_CTOUCH_EXTENDEDレジスタの値によって決まります。

0：拡張モード
1：FT800互換モード-標準のシングルタッチモードがデフォルトモードです。

私はシングルタッチモードのみを使用します。第一に、私のアプリケーションにとって、その機能は非常に十分であり、第二に、この方法はFT800ベースのモジュールと互換性があります。

TFTディスプレイがタッチされると、タッチパネルコントローラーはタッチ領域の「生」データをFT801に送信します。このデータは、グラフィックコントローラーのREG_CTOUCH_RAW_XYレジスタに書き込まれます。その後、FT801はタッチ座標（x、y）を計算し、結果をREG_TOUCH_TAG_XYレジスタに格納します。座標計算は、REG_CTOUCH_RAW_XYからのデータと座標マトリックスが格納されるマトリックス変換であり、REG_CTOUCH_TRANSFORM_AからREG_CTOUCH_TRANSFORM_Fまでのレジスターに格納されます。 REG_CTOUCH_TRANSFORMレジスタにはまだ戻っていません。

原則として、タッチを検出するためにREG_TOUCH_TAG_XYからのデータを使用できますが、より便利なツールがプログラマーに提供されます。

これらのツールの中で最も簡単なのはタグ（TAG）です。ラベルは、グラフィックオブジェクトに割り当てることができる1〜255の番号です。長方形、点、線、ボタン、テキストなど。マークされたグラフィックの領域をタッチすると、REG_TOUCH_TAGレジスタで対応するラベルの値が設定されます。したがって、オブジェクトのタッチを検出するために、ホストコントローラーは定期的にREG_TOUCH_TAGレジスタをポーリングし、受信した値を目的のオブジェクトに割り当てられたラベルと比較する必要があります。

FT801コントローラーはクリックトラッキングもサポートしています。タッチポイントと指定された座標を持つポイントとの間の角度または直線距離の自動計算です。この場合、ラベルの設定に加えて、その追跡パラメーター（Track（）コマンド）を設定する必要があり、うつ病をチェックするには、REG_TOUCH_TAGではなくREG_TRACKERレジスタをチェックします。

ただし、次の例に移りましょう。

2.1。既製のウィジェットを操作する

まず、ウィジェット（グラフィックスコントローラにハードウェアで実装されるグラフィカルオブジェクト）を検討します。タッチインターフェイスの3つの最も単純なウィジェットは、ボタン、一連のボタン、およびスライダーです。

単純なコマンドを使用して、FT800_2ライブラリに含まれるウィジェットを描画します。これは、シリーズの2番目の記事で説明しました。このような単純な関数を使用して、図に示す要素を描画します。

TFT.FgColor(0xC1004D); TFT.Keys(27, 127, 271, 41, 29, 0, "123"); TFT.Button(26, 33, 120, 36, 27, OPT_FLAT, "Button"); TFT.Slider(244, 45, 161, 17, 0, 17, 100);

要素が表示されるだけでなく、タッチに応答するためには、作成されたオブジェクトにラベルを追加し、ラベルを保存するレジスタをポーリングする必要があります。

オブジェクトの要素多数のボタン（キー）ラベルが自動的に割り当てられるため、ボタン "1"、 "2"および "3"の押下を検出するには、レジスタREG_TOUCH_TAGをポーリングするだけで十分です。

  TFT.Keys(27, 127, 271, 41, 29, 0, "123"); char pressedButton = TFT.Rd8(REG_TOUCH_TAG);

ボタン要素には手動でラベルを付ける必要があります。

  TFT.DL(TAG(1)); TFT.Button(26, 33, 120, 36, 27, OPT_FLAT, "Button"); char pressedButton = TFT.Rd8(REG_TOUCH_TAG);

スライダーを使用する場合、トラッキングが使用されます-ラベルの設定に加えて、トラッキングパラメーターを設定するTrackコマンドを実行する必要があり、8ビットREG_TOUCH_TAGではなく32ビットREG_TRACKERレジスタをポーリングする必要があります。

 char sliderVal = 0; TFT.Track(244, 45, 161, 17, 2); ... while(1) { TFT.DL(TAG(2)); TFT.Slider(244, 45, 161, 17, 0, sliderVal, 255); int pressedSlider = TFT.Rd32(REG_TRACKER); sliderVal = (pressedSlider >> 16) * 255 / 65536; }

上記のコードを使用すると、スライダーの位置を登録し（この場合、0から255に変更）、スライダーの現在の位置に応じてスライダーを再描画できます。

2.2。スクリーンキャリブレーション

実際、感覚要素の操作のために、グラフィック要素の説明を含む表示リストを作成し、対応するレジスタを調べるだけでは不十分です。

実際には、TFTモジュールをオンにして初期化すると、グラフィックコントローラーのすべてのレジスタがデフォルト値にリセットされます。少し前に、押された座標を計算するために、REG_CTOUCH_TRANSFORMレジスタに格納されているマトリックスが使用されると述べました。したがって、初期化後のこれらのレジスタも「空」であり、そこに正しい値を書き込むために、タッチスクリーンを較正する必要があります。

キャリブレーションには、グラフィックコプロセッサーCMD_CALIBRATEの命令が使用されます。大まかに言って、この命令が到着すると、FT8xxグラフィックスコントローラーは、クリックする必要があるディスプレイに3つのポイントを次々に表示します。 3つのタッチの座標に従って、必要な値がREG_CTOUCH_TRANSFORMレジスタに入力されます。

FT800_2は、キャリブレーションの標準機能を提供します

  DLstart(); DL(CLEAR_COLOR_RGB(64,64,64)); DL(CLEAR(1,1,1)); DL(COLOR_RGB(0xff,0xff,0xff)); Text((DispWidth/2), (DispHeight/2), 27, OPT_CENTER, "Please Tap on the dot"); Calibrate(0); Flush_Co_Buffer(); WaitCmdfifo_empty();

キャリブレーション機能は、TFTディスプレイの初期化の最後に呼び出す必要があります。次のようになります。

ビデオプロジェクトはdeveloper.mbed.orgで入手できます。

もちろん、デバイスをオンにするたびにユーザーに画面のキャリブレーションを強制するのは奇妙です。したがって、一度キャリブレーションし、REG_CTOUCH_TRANSFORM_A ... REG_CTOUCH_TRANSFORM_Fレジスタの内容を読み取り、データを保存し、TFTモジュールを初期化した後、プログラムでREG_CTOUCH_TRANSFORMレジスタに入力することは理にかなっています。

キャリブレーションデータは一部のEEPROMに保存できます。良心が非常に不器用な行動を許す場合は、次のように「キャリブレーション」できます。

 void Display::Calibration() { char calibration[25] = {98, 99, 0, 0, 182, 254, 255, 255, 245, 142, 248, 255, 117, 254, 255, 255, 34, 98, 0, 0, 123, 154, 248, 255}; for (int i = 0; i < 24; i++) { (*_TFT).Wr8(REG_TOUCH_TRANSFORM_A + i, calibration[i]); } }

3.独自のプロジェクトでタッチインターフェイスを使用する

私の最後のアプリケーションは、温度と相対湿度に関する現在のデータといくつかのサブセクションを表示するメインメニューです。

次の記事でのみ画像出力とロシア化の問題に対処するため、今日は半完成プロジェクトを分析します。

セクション間を移動するには、2つの列挙があります。 1つ目は、グラフィックオブジェクトに割り当てられたすべてのラベルです。

 typedef enum { NONE_PRESS, CURR_TEMP_PRESS, CURR_HUM_PRESS, MENU_PRESS, } pressValues;

2番目は、切り替える画面のリストです。

 typedef enum { MENU_SCREEN, CURR_HUM_SCREEN, CURR_TEMP_SCREEN, } screenValues;

アプリケーションのロジックは次のとおりです。

  disp.activeScreen = MENU_SCREEN; disp.pressedButton = NONE_PRESS; // change active screen depending on pressed area while(1) { dataUpdate(); disp.pressedButton = disp.GetTouch(); // Main menu screen if (disp.activeScreen == MENU_SCREEN) { disp.MainMenu(SENSOR.humidity, SENSOR.temperature); if (disp.pressedButton) { wait_ms(150); if (disp.pressedButton == CURR_TEMP_PRESS) { disp.activeScreen = CURR_TEMP_SCREEN; } else if (disp.pressedButton == CURR_HUM_PRESS) { disp.activeScreen = CURR_HUM_SCREEN; } disp.pressedButton = NONE_PRESS; } // Any other screen } else { // You can back to main menu from any screen if (disp.pressedButton == MENU_PRESS) { disp.pressedButton = NONE_PRESS; disp.activeScreen = MENU_SCREEN; } else { // Screen with current temperature / humidity if (disp.activeScreen == CURR_TEMP_SCREEN) { disp.CurrentTemperature(SENSOR.temperature); } else if (disp.activeScreen == CURR_HUM_SCREEN) { disp.CurrentHumidity(SENSOR.humidity); } } } }

3つの画面すべてを描画するには、単純なグラフィックプリミティブ（LINES、POINTS、EDGE_STRIP_B、およびRECTS）と、テキストと数字を表示するためのウィジェットのみが使用されます。「恐れるのをやめ、mbed [パート2]に恋をする方法」という記事を読んだ後は、メニュー項目とグラフの描画について質問がないはずなので、タッチ入力要素の実装のみに焦点を当てます。

メインメニューの一部のボタンにはさまざまなサイズの画像と線が~~あり、ボタンの角が丸くなるので、~~ FTDIの既製のウィジェットは使用しません。したがって、私のボタンはボタンウィジェットではなく、四角形の上にテキスト文字列やその他の要素が表示されます。

長方形などの「通常の」グラフィックオブジェクトのラベル（TAG）は、ウィジェットの使用と同じ方法で設定されます。 TAGコマンド（CURR_HUM_PRESS）の呼び出し後に記述されたすべてのグラフィックオブジェクトには、ラベルCURR_HUM_PRESSが割り当てられます。マークされたオブジェクトのリストを終了するには、TAG（）を新しい引数で呼び出すか、TAG_MASK（0）コマンドを使用してラベルの割り当てを禁止します。 TAG_MASK（0）を使用する場合、次のTAG（）の呼び出しの前に、タグ付け（TAG_MASK（1））を有効にすることを忘れないでください。

また、クリックを視覚化することも検討する価値があります。私の場合、これはこれのために行われます：

a）前のフレームがTFTディスプレイに表示された後、ボタンのタッチが固定されると、新しいフレームでボタンの色が濃い青から青に変わります（以下のコードを参照）。

b）フレームを青いボタンで表示した後、150ミリ秒の遅延が実行されます（上記のコードを参照）。

 void Display::MainMenu(float humidity, float temperature) { ... (*_TFT).DL(TAG_MASK(1)); (*_TFT).DL(TAG(CURR_HUM_PRESS)); (*_TFT).DL(COLOR_RGB(9, 0, 63)); //     ,       if (pressedButton == CURR_HUM_PRESS) { (*_TFT).DL(COLOR_RGB(75, 70, 108)); } (*_TFT).DL(BEGIN(RECTS)); (*_TFT).DL(VERTEX2II(12, 62, 0, 0)); (*_TFT).DL(VERTEX2II(12 + 400, 62 + 93, 0, 0)); (*_TFT).DL(COLOR_RGB(255, 255, 255)); (*_TFT).Text(12 + 10, 62 + 5, 30, 0, "Current humidity (rH)"); //      (32 -> "32%") CreateStringTempHum(humidityStr, humidity, 0); (*_TFT).Text(12 + 10, 62 + 45, 31, 0, humidityStr); (*_TFT).DL(TAG_MASK(0)); ... }

メインメニューのすべてのボタンは同じ方法で形成されます。 [現在の温度]ボタンをクリックすると、温度変化のグラフが表示された画面に移動し、相対湿度の変化のグラフが表示された画面の[現在の湿度]をクリックします。

グラフのある画面から、メインメニューに戻るリンクをクリックして、メインメニューに戻ることができます。このようなリンクを作成するには、同じツールが使用されます-TAGラベル（MENU_PRESS）、その後にグラフィックオブジェクトが記述されます-テキスト行と行（下線）。

  (*_TFT).DL(TAG_MASK(1)); (*_TFT).DL(TAG(MENU_PRESS)); (*_TFT).DL(COLOR_RGB(0, 0, 0)); (*_TFT).Text(14, 240, 22, 0, "Back to main menu"); (*_TFT).DL(BEGIN(LINES)); (*_TFT).DL(LINE_WIDTH(8)); (*_TFT).DL(VERTEX2F(15 * 16, 260 * 16)); (*_TFT).DL(VERTEX2F(155 * 16, 260 * 16)); (*_TFT).DL(TAG_MASK(0));

次のようになります。

プロジェクトのソースコードはdeveloper.mbed.orgで入手できます。

このプロジェクト、およびピンクのウィジェットを使用したデモプロジェクト、および以前の記事で説明したプログラムは、Silicon LabsのSLSTK3400Aボード、AtmelのATSAMD21-XPRO、WiznetのWIZwiki-W7500Pで正常に起動されます。使用するGPIOの名前を変更し、コンパイルする前にターゲットボードを交換するだけです。なぜmbedが好きですか？

おわりに

結論として、私は伝統的に読者の注意に感謝し、Habréについて書いている製品の使用に関する質問は、私のプロフィールで指定されたメールアドレスにも送信できることを思い出させます。

恐れることをやめてmbedを愛する方法[パート4]

1. TFTモジュールの構造

2.タッチデータの取得

2.1。既製のウィジェットを操作する

2.2。スクリーンキャリブレーション

3.独自のプロジェクトでタッチインターフェイスを使用する

おわりに

More articles:

恐れることをやめてmbedを愛する方法[パート4]

1. TFTモジュールの構造

2.タッチデータの取得

2.1。 既製のウィジェットを操作する

2.2。 スクリーンキャリブレーション

3.独自のプロジェクトでタッチインターフェイスを使用する

おわりに

More articles:

2.1。既製のウィジェットを操作する

2.2。スクリーンキャリブレーション