ノリタケ伊勢株式会社

このシリーズでは、Arduinoに7インチタッチディスプレイ（GT-SPシリーズ「GTWV070S3A00P」）を接続し、様々なプロジェクトを進める過程を解説しています。

前回はGT-SP上に設置された装飾されたスライダーを操作し、Arduinoに接続されたサーボモーターを制御しました。今回はスライダーの制御可動範囲をGT-SP上に設置されたオブジェクトより細かく制御します。

この記事を読むにあたって、過去の内容（「Arduinoにつながれたサーボモーターの制御」、「Arduinoから得られた値を、視認性の高いデザインにする」）が基礎となります。そこで紹介したオブジェクトの装飾技術などを応用しますので、まだの方はぜひ前回の記事もご覧ください。

今回は、前回の記事で利用したサーボモーターを使います。新しい要素として、別ページを設置し、「エディットオブジェクト」によりサーボモータの可動範囲を作りました。また、それに伴いプログラムも用意しました。

スライダーの左右に角度の「最小角度」「最大角度」を表示し、ページ移動用のボタンなども用意しました。ページに移動時には移動先のページ名を送信するようにしました（プレフィックス）。これにより、Arduino側でどのページか判断することでページにあった動作を行えます。

他にはスライダーを動かしたり、範囲を設定した際に操作名を含む文字列の頭に付けて（プレフィックス）同時に送ることで、どういった動作がされているかArduino側で把握しやすいようにしました。

具体的には以下の通りです。

ページ移動機能：ページ移動ボタンを押した際に、移動先のページ名を送信する機能を追加。

操作識別機能：各操作を行う前に、どの操作が行われたかをホスト側で識別できるよう、操作名を先頭に記述した文字列を送信する。

エラー表示機能：不正な値が入力された場合に表示するPOPUPページを新たに追加。

それぞれの細かいデザインについては、前回の記事を参考にしてください。

また、ボタンの共通デザインについては以下の設定をしています。

BUTTONのプロパティよりColor OFF（ボタンが押されていないとき）のOFF Text Colorを0x00FFFFFFに、OFF Back Colorを0x005F5F5Fに。Color ON（ボタンが押されたとき）のON Text Colorを0x00FFFFFFに、ON Back Colorを0x003F3F3Fに設定します。

これに加え、ボタンテキスト（Text0）のフォントを前回の記事を参考に設定します。

今回は3つのページを用意します。1ページ目はスライダーを操作するページ。このページにはスライダーを設置し、角度の「最小角度」と「最大角度」、そして現在のサーボモーターの角度を表示するオブジェクトがあります。

2ページ目はスライダーの角度の「最小角度」と「最大角度」を設定するページです。1ページ目と2ページ目にはそれぞれページ切り替えボタンもあります。

3ページ目はスライダーのポップアップ用のエラーメッセージページです。こちらは2ページ目のスライダーの「最小角度」「最大角度」を設定する際、スライダーの範囲外（0度～180度以外）だった場合に表示されるエラーメッセージ画面が入っています。

「PAGE_0」と「PAGE_1」にはそれぞれのページを行き来するボタン（BUTTON_0とBUTTON_2）を用意します。その際、Arduino側で今どのページに居るのかを判断するためにDATA_TX_FIXでそれぞれのページの名称を送ります。

写真はPAGE_0にある「BUTTON_0」のEvent Editウィンドウです。DATA_FX_FIXのVALにTEXTで「PAGE_1」を入れてセットします。PAGE_1にある「BUTTON_2」には同様にして「PAGE_0」をセットします。このプレフィックスを入れてあげる事で、プログラム上で動作を変更します。

3ページ目のエラーページはポップアップ用のページの為、サイズの調整を行います。

3ページ目（PAGE_2）のプロパティにてGeneral＞Size XとSize Y をそれぞれ変更してあげます。今回はSize Xを「500」に、Size Yを「300」に設定します。

PAGE_0はスライダーを表示してあるメインの画面です。前回のプロジェクトとの違いは、スライダーの左右に「最小角度」と「最大角度」を表示するためのテキストオブジェクト「TEXT_2」「TEXT_3」が設置されました。また、角度を設定するセッティングページへ切り替えるボタンオブジェクト 「BUTTON_0」を下部に設置しました。

スライダーオブジェクトのイベントにも変更があり、DATA_TX_FIXにて「RAD」をプレフィックスとして送るように設定しました。

サーボモータの「最小角度」と「最大角度」を設定するためのページです。

数値で入力するためのエディットオブジェクトを二つ用意しています。エディットオブジェクトのプロパティにてStyle Keypad＞Pad Modeより「TENKEY」を設定します。これにより、デフォルトの英数字のキーボードから数字のみの入力パッドに変更できます。

また、「最小角度」と「最大角度」の初期値として、エディットオブジェクト「EDIT_0」のText 0 > Text 0には「0」を「EDIT_1」のText 0 > Text 0には「180」を入れます。

EDITオブジェクトのデザインについては、以下のように設定します。

今回は黒を基調としたデザインにするため画像のように設定しました。EDITオブジェクトのプロパティよりColor以下、Color KeyPad以下、Color DISABLWE以下の各種をそれぞれ設定します。

イベントの設定として「BUTTON_1」には、DATA_TX_FIXにて「RAD_SET」のプレフィックスを設置します。DATA_TXにてエディットオブジェクトに入力した数値（エディットオブジェクトのText 0＞Text 0に格納される）を送れるようにします。

PAGE_2は角度の範囲が0-180に収まっていなく、最小角度が最大角度を超えた場合にエラーを示すためのポップアップ用ページです。

Closeと書かれたボタンオブジェクト「BUTTON_3」のイベントとしてPOPUPを与えます。

Event EditのACTIONより「POPUP_SELECT」を選択します。NEW ACTIONより、ACTIONが追加されたら、「＜POPUP_CLOSE＞」を選択します。

今回用意したプログラムは、GT-SPのページを判断する要素があり、それによって処理を行えるようにようにしました。「PAGE_0」ではサーボモーターの動作を細かく制御し、「PAGE_1」ではスライダーの範囲指定など、ページごとに特化した操作が可能です。また、スライダーの範囲外の数値が設定された際に、エラーを示すための動作も行います。

具体的には下記のとおりです。

ページ管理：

現在のページを示す変数を新たに追加。

「PAGE」で始まる文字列を受信した際には、ページ移動と認識し、現在のページの変数を更新。

「PAGE」以外の文字列を受信した場合は、現在のページに応じた処理を実行。

関数の追加：

文字列を読み取るための関数を追加。

ページごとの処理：

「processPAGE_0」関数では、「PAGE_0」の操作を処理し、主にサーボモーターの動作に関連する処理を行う。スライダーの範囲は、RAD_min, RAD_maxによって指定。

「processPAGE_1」関数では、「PAGE_1」の操作を処理。ここでは、「RAD_SET」で始まる信号を受け取った際に、その後に送られるMINとMAXの値を変数に格納。

エラーチェックと表示：

MINとMAXが適切な範囲内にあるかどうかのエラーチェック。値が正しい場合は、PAGE_0のスライダーバー横に表示されるMINとMAXの値を更新。

値が不正な場合は、エラーダイアログのPOPUPウィンドウを表示。

ページ制御機能：

ページ制御のための関数を追加。

#include <Servo.h> //ピン接続 | Pin assign #define GT_DTR 4 //DTR #define GT_DSR 6 //DSR #define GT_TRDY 7 //TRDY <--未使用 | Disused #define RX_PIN 13 // GT-SPからのシリアルデータを受け取るピン Servo servoMotor; String currentPage; long RAD_min; long RAD_max; void setup() { //ピン初期設定 | Pin setting pinMode(GT_DTR, INPUT); pinMode(GT_DSR, OUTPUT); pinMode(GT_TRDY, INPUT); // Servoモータの初期化 servoMotor.attach(RX_PIN); // シリアル通信の開始 Serial.begin(38400); //38400bps Baud rate Serial.setTimeout(100); //シリアルタイムアウト | Serial timeout // 開始ページの初期化 currentPage = "PAGE_0"; //サーボモーター角度の初期化 RAD_min = 0; RAD_max = 180; } void loop() { //GT-SPデータ受信 | Receive one GT-SP response data if ( Serial.available() ) { String receivedData = gtsp_signal_read(); //Serial.println(receivedData); // 受け取ったデータをシリアルモニタに表示 if (receivedData.startsWith("PAGE")){ //ページ移動だった場合、現在ページ変数を更新 currentPage = receivedData; }else{ //ページ移動ではない場合、現在のページごとの処理に飛ぶ if (currentPage == "PAGE_0") { processPAGE_0(receivedData); }else if (currentPage == "PAGE_1") { processPAGE_1(receivedData); } } } } //////////////////////////////////////////////////// //PAGE_0の処理 | Process - PAGE_0 //////////////////////////////////////////////////// void processPAGE_0(String data){ //スライダー操作処理 if (data.startsWith("RAD")){ //スライダーの値を取得 unsigned long gtspValue = gtsp_signal_read_numeric(); //Serial.println(gtspValue); // 受け取ったデータをシリアルモニタに表示 // スライダーの値をRAD_min〜RAD_maxの範囲に変換 int servoAngle = map(gtspValue, 0, 1023, RAD_min, RAD_max); // サーボモータを指定した角度に動かす servoMotor.write(servoAngle); // GT-SPにサーボモータの角度を表示 gtsp_ObjPrpSet_string(2, 0x40, String(servoAngle)+ " deg"); } } //////////////////////////////////////////////////// //PAGE_1の処理 | Process - PAGE_1 //////////////////////////////////////////////////// void processPAGE_1(String data){ //設定値の取得 if (data.startsWith("RAD_SET")){ RAD_min = gtsp_signal_read().toInt();//最小値の取得 RAD_max = gtsp_signal_read().toInt();//最大値の取得 } //設定値のエラーチェックと更新 if (RAD_min >= 0 && RAD_max <=180 && RAD_min < RAD_max ){ // PAGTE_0 スライダー横のMIN MAX数値を更新 gtsp_ObjPrpSet_string(3, 0x40, String(RAD_min)); gtsp_ObjPrpSet_string(4, 0x40, String(RAD_max)); }else{ //値の設定値が正しくないときは、エラーダイアログをPOPUPで表示 gtsp_ObjPrpSet_string(13, 0x40, "RAD Value Error"); //エラーメッセージの変更 gtsp_PgControl(0x20, 2); //エラーダイアログPOPUP表示 } } /********************** 関数 | Function **********************/ //////////////////////////////////////////////////// // データ受信（文字列用） | Receive data from GT-SP (for String) //////////////////////////////////////////////////// String gtsp_signal_read(){ byte res_dl[4] = ""; unsigned long dl; char res_data_char[255]=""; if (Serial.find("RESb", 4)){ Serial.readBytes(res_dl, 4); //データ長抽出 | Read data length dl = (unsigned long)(res_dl[0] + (res_dl[1]<<8) + (res_dl[2]<<16) + (res_dl[3]<<24)); //データ長変換 | Data length Serial.readBytes(res_data_char, dl); //データ抽出 | Read data return String(res_data_char); //String型変換、リターン | Return as String } } //////////////////////////////////////////////////// // データ受信（数値用） | Receive data from GT-SP (for Numeric) //////////////////////////////////////////////////// unsigned long gtsp_signal_read_numeric() { byte res_dl[4] = ""; unsigned long dl; if (Serial.find("RESb", 4)) { Serial.readBytes(res_dl, 4); //データ長抽出 | Read data length dl = (unsigned long)(res_dl[0] + (res_dl[1] << 8) + (res_dl[2] << 16) + (res_dl[3] << 24)); //データ長変換 | Data length // 数値を受信するためのバッファ byte res_data_buffer[4]; // データを読み取り Serial.readBytes(res_data_buffer, dl); // 数値に変換してリターン return (unsigned long)(res_data_buffer[0] + (res_data_buffer[1] << 8) + (res_data_buffer[2] << 16) + (res_data_buffer[3] << 24)); } // エラー時は0を返す（適切なエラー処理が必要な場合は修正が必要） return 0; } //////////////////////////////////////////////////// // オブジェクト制御コマンド - プロパティ設定 (文字列用) | Object Control Command -Property Setting (for String) //////////////////////////////////////////////////// void gtsp_ObjPrpSet_string(int obj, int prp, String val ) { gt_print("CMD"); //コマンドヘッダ | Command header gt_put(0xd3); //オブジェクト-プロパティ設定コマンド | Object-Property Setting gt_put(obj >> 0); //オブジェクトNo. 下位バイト | Object No. Lower byte gt_put(obj >> 8); //オブジェクトNo. 上位バイト| Object No. Upper byte gt_put(prp >> 0); //プロパティNo. 下位バイト | Property No. Lower byte gt_put(prp >> 8); //プロパティNo. 上位バイト| Property No. Upper byte gt_put(val.length() >> 0); //データ長 最下位バイト | Data length Least significant byte gt_put(val.length() >> 8); //データ長 下位バイト | Data length second byte gt_put(val.length() >> 16); //データ長 上位バイト | Data length third byte gt_put(val.length() >> 24); //データ長 最上位バイト| Data length Most significant byte gt_print(val); //文字列送信 } //////////////////////////////////////////////////// // GUIページ制御/POPUP制御 | GUI PAGE/POPUP Control Command //////////////////////////////////////////////////// void gtsp_PgControl(int typ, int pg) { gt_print("CMD"); //コマンドヘッダ | Command header gt_put(0xfb); //UIページ制御/POPUP制御設定コマンド | Object-Property Setting gt_put(typ); //制御タイプ | Type (10h:PAGE Select, 20h:POPUP Open, 21h, POPUP Close) gt_put(pg >> 0); //PAGE No. 下位バイト | Page No. Lower byte gt_put(pg >> 8); //PAGE No. 上位バイト| Page No. Upper byte } //////////////////////////////////////////////////// // 1byte送信 | Send byte to GT-SP //////////////////////////////////////////////////// void gt_put(unsigned char onebyte) { while ( digitalRead(GT_DTR) == HIGH ) {} //busycheck Serial.write(onebyte); } //////////////////////////////////////////////////// // 文字列送信 | Send String to GT-SP //////////////////////////////////////////////////// void gt_print(String val) { int val_i; //文字列を1文字ずつ送信 | Send string per one byte for (val_i = 0; val_i < val.length(); val_i++) { while ( digitalRead(GT_DTR) == HIGH ) {} //busycheck Serial.print(val.substring(val_i, val_i+1)); } }

メインのloopでデータが「PAGE」で始まる場合はページ移動と認識し、それ以外の場合は現在のページに応じた処理を行います。

「processPAGE_0」では、サーボモーターの角度を調整します。具体的には、「RAD」で始まるデータを受け取り、その数値をサーボモーターの動作範囲にマッピングして角度を変更します。

「processPAGE_1」では、サーボモーターの動作範囲（最小角度と最大角度）を設定します。「RAD_SET」で始まるデータから最小値と最大値を読み取り、範囲内かチェックした上で変数を更新します。

このプロジェクトは、前回のプロジェクトから改良され、GT-SPディスプレイを用いてサーボモータの動作範囲をユーザーが直接調整できるよう改良されました。この改良により、ユーザーは特定のアプリケーションに必要な動作範囲を容易に設定できるようになり、これが大きな意義を持っています。

この柔軟な動作範囲設定機能は、多様なアプリケーションに応用可能であり、ArduinoとGT-SPを使用したプロジェクトの新たな可能性を開くものです。

またプレフィックスを利用し動作の区別は、今後のプログラム開発の可能性が広がりそうです。

次回はディスプレイからLEDの点灯状態を操作するプロジェクトを紹介します。