ノリタケ伊勢株式会社

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

　前回は温湿度センサーモジュール DHT11 から温度と湿度を読み取り、ディスプレイに表示させるプロジェクトを作りました。今回は、文字色やバーなどを追加し装飾する流れを紹介していきます。

　なお、この記事は前回の記事（「Arduinoに接続した温湿度センサ モジュールの値を表示する」）の続きになります。

　今回はセンサの数値を装飾するために、GT Design Studioで少しデザインの調整を行います。具体的には、GT-SPに背景や画像の設定、フォント登録やフォントの文字の大きさなどを変更します。

　なお、今回は一定温度によって文字色が変わるようにもします。そちらはArduinoのプログラムで行います。

　初めにオブジェクトを配置します。最終的に以下の画像になるように、テキストオブジェクトとバーオブジェクトを置きます。

　オブジェクトの割り当ては以下のとおりです。

　　・オブジェクト0 … TEXT_0

　　・オブジェクト1 … TEXT_1

　　・オブジェクト2 … TEXT_2

　　・オブジェクト3 … TEXT_3

　　・オブジェクト4 … BAR_0

　　・オブジェクト5 … BAR_1

　TEXT_1とTEXT_3のそれぞれのテキストには「0.0 dec C」と「0 %」とデフォルトの数値を仮で入れてあります。

　ページの背景画像は、プロパティで登録を行います。

　ページオブジェクト「PAGE_0」を選択した後、プロパティの「Image」グループにある「Image」のIMG列（空白の部分）をクリックすると画像登録用の画面が出現します。

　IMAGE Select ウィンドウが開きますので、「Add」ボタンより画像の登録を行います。今回は下のような800×480サイズのPNGファイルを登録しました。

　登録した画像を選択し、IMAGE Select ウィンドウ右下にある「Select」ボタンを押すとページの背景画像として表示されます。

　今回、各種テキストオブジェクトはデフォルトフォントではなく、ユーザーフォントに、フリーのPCフォントを登録してみます。

　はじめに、今回登録するフォントを準備します。今回は以下のサイトから「Melete」フォントをダウンロードします。

　http://dotcolon.net/font/melete

　次に、GT Design Studioの画面上部にある「Font」より登録画面を表示します。

　続いて「User_0」を押して左上の「Edit」ボタンを押します。

　次の画面にて、Convert Setting欄より ①Font にあるプルダウンから、登録する フォントの選択を行います。

　次に下部に赤い逆三角の②「Convert」 ボタンを押すと、 フォントがコンバートされ、プレビューに表示されます。

　ここで、「Height」「Size」「Margin Right」を変更して、希望する大きさになるまで調整します。

　最後に右下にある③「Set Font Data」 ボタンでユーザーフォントの登録が行えます。

　今回はUSER_0にPCフォント「Melete Light」をセットし、Heightに「80」、Sizeに「40」、「Margin Right」に「10」を入れました。またUSER_1にはPCフォント「Melete Medium」をセットし、Heightに「24」、Sizeに「16」、「Margin Right」に「5」をそれぞれ設定しました。

　登録を終えたら右下にある「All Set」ボタンを押します。

　登録したフォントは、テキストオブジェクトのプロパティより選択して使用できます。 下記はTEXT_1のプロパティ画面です。

　プロパティの「Text0」＞「Text 0 Size」のValueを選択し、「USER0」に設定しました。これで、先ほど登録したユーザーフォントのUSER_0があてがわれます。今回は、テキストオブジェクトが4つありますので、それぞれ以下のように選択しました。

　TEXT_0  —– USER1 (Melete Medium)

　TEXT_2  —– USER1 (Melete Medium)

　TEXT_1  —– USER0  (Melete Light)

　TEXT_3  —– USER0  (Melete Light)

　次に、テキストの色を変更します。

　「Color」 >「 Text Color」にあるIMG列の四角（デフォルトでは黒色の四角になっている）をクリックして表れるCOLOR Selectウィンドウより設定可能です。

　変更したい色を選択し、右下のSetを押すことで設定可能です。今回は、TEXT_1とTEXT_3のText Colorには「緑色(0x0000FF00)」を設定しています。背景色は「Back Color」で同様に設定します。

　バーオブジェクトの色は、今回はデフォルトのままにします。ただし、デフォルトのバーの中に値が表示されてしまっているので、これを消します。

　バーオブジェクトを選択し、プロパティの「Style」＞「Text Format」の設定を「Blank」にします。すると、中の値が表示されなくなります。

　最終的に、上のようなプレビュー画面になりました。TEXT_1、TEXT_3、BAR_0とBAR_1それぞれのオブジェクトは、Arduinoから送信される値を表示するための受信側の役割を果たしますので、イベントアクションの設定は必要ありません。

　前回の記事に書かれたプログラムを参考にして、条件によってテキストオブジェクトの色が変わるようにします。またバーオブジェクトに対しても数値を送るようにします。条件として、温度が21度を越えたらテキストオブジェクトの色が赤色になるようにします。また、湿度が36%を下回ったら、テキストオブジェクトの色が赤色になるようにします。

　以下が今回のプログラムです。

#include // 必要なヘッダーファイルをインクルード | Include necessary header files #include "DHT.h" // DHTセンサー用のライブラリをインクルード | Include library for DHT sensor // ピン設定 | Pin assignments #define GT_DTR 4 //DTR #define GT_DSR 6 //DSR #define GT_TRDY 7 //TRDY <--未使用 | Disused #define DHT_SENSOR_PIN 10 // DHTセンサーのデータピン | Data pin for DHT sensor #define DHT_SENSOR_TYPE DHT11 // 使用するDHTセンサーの型 | Type of DHT sensor being used //変数 | Variable float temperature; //温度 | Temperature float humidity; //湿度 | Humidity DHT dht(DHT_SENSOR_PIN, DHT_SENSOR_TYPE); // DHTセンサーオブジェクトを作成 | Create DHT sensor object //////////////////////////////////////////////////// // setup //////////////////////////////////////////////////// void setup() { // ピン初期設定 | Pin settings pinMode(GT_DTR, INPUT); pinMode(GT_DSR, OUTPUT); pinMode(GT_TRDY, INPUT); digitalWrite(GT_TRDY, LOW); // シリアル通信設定 | Serial communication settings Serial.begin(38400); // 38400bps Baud rate Serial.setTimeout(100); // シリアルタイムアウト | Serial timeout dht.begin(); // DHTセンサーの初期化 | Initialize DHT sensor } //////////////////////////////////////////////////// // loop //////////////////////////////////////////////////// void loop() { //温度と湿度の取得 | Get temperature and humidity temperature = dht.readTemperature(false); // trueならば華氏 それ以外は摂氏 | Fahrenheit if true, Celsius otherwise humidity = dht.readHumidity(); if (isnan(humidity) || isnan(temperature)) { // センサーからの読み取りエラー時のメッセージ出力 | Output error message for sensor read failure gtsp_ObjPrpSet_string(1, 0x40, "Error"); //Object No.1 / 0x40 = Text0 gtsp_ObjPrpSet_string(3, 0x40, "Error"); //Object No.3 / 0x40 = Text0 } else{ //温度と湿度の出力 | Output temperature and humidity gtsp_ObjPrpSet_string(1, 0x40, String(temperature,1) + " deg C"); //Object No.1 / 0x40 = Text0 gtsp_ObjPrpSet_string(3, 0x40, String(humidity,0) + " %"); //Object No.3 / 0x40 = Text0 if (temperature >= 21.0) { // オブジェクト3の色を赤に設定 (例: RGBAで 0xFF0000FF = 赤) // 温度が21度以上の場合、オブジェクト1の色を赤に設定 gtsp_ObjPrpSet_val(1, 0x50, 4, 0x00FF0000); } else { // 温度が21度未満の場合、オブジェクト1の色を緑に設定 gtsp_ObjPrpSet_val(1, 0x50, 4, 0x0000FF00); // デフォルトの色 (緑) を設定 } if (humidity < 36) { // 湿度が36を未満場合、オブジェクト3の色を赤に設定 gtsp_ObjPrpSet_val(3, 0x50, 4, 0x00FF0000); // 赤い色を設定 } else { // 湿度が36より↑の場合、オブジェクト3の色を緑に設定 gtsp_ObjPrpSet_val(3, 0x50, 4, 0x0000FF00); // 緑の色を設定 } int tempbar = map(temperature, 0, 30, 0, 100); // 温度を0から30度を0から100の範囲にマッピング gtsp_ObjPrpSet_val(4, 0x10, 4, tempbar); // Object No.4 / 0x10 = Bar0 int humbar = map(humidity, 0, 100, 0, 100); // 湿度を0から100%を0から100の範囲にマッピング gtsp_ObjPrpSet_val(5, 0x10, 4, humbar); // Object No.5 / 0x10 = Bar1 } delay(2000); } /********************** 関数 | Function **********************/ //////////////////////////////////////////////////// // オブジェクト制御コマンド-プロパティ設定（数値用） | Object Control Command -Property Setting (for Value) // (バイト長4バイトまで | Byte length is up to 4 byte) //////////////////////////////////////////////////// void gtsp_ObjPrpSet_val(int obj, int prp, int ln, unsigned long 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(ln >> 0); //データ長 最下位バイト | Data length Least significant byte gt_put(ln >> 8); //データ長 下位バイト | Data length second byte gt_put(ln >> 16); //データ長 上位バイト | Data length third byte gt_put(ln >> 24); //データ長 最上位バイト| Data length Most significant byte if (ln >=1){ gt_put(val >> 0); } //データ 最下位バイト | Data Least significant byte if (ln >=2){ gt_put(val >> 8); } //データ 下位バイト | Data second byte if (ln >=3){ gt_put(val >> 16); } //データ 上位バイト | Data third byte if (ln >=4){ gt_put(val >> 24); } //データ 最上位バイト| Data Most significant byte } //////////////////////////////////////////////////// // オブジェクト制御コマンド - プロパティ設定 (文字列用) | 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); //文字列送信 } //////////////////////////////////////////////////// // 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)); } }

　前回のプログラムから、温度と湿度の値による文字色の変更と、バーオブジェクトに数値を送る箇所を追加しました。 「if (temperature >= 21.0) {」と「if (humidity < 36) {」で始まる箇所、と「int tempbar」「int humbar」のところです。

　また、今回は「gtsp_ObjPrpSet_val」関数を追加してあります。例えば、「gtsp_ObjPrpSet_val(1, 0x50, 4, 0x00FF0000);」は、テキストオブジェクト1の、文字の色変更用プロパティNo.である「0x50」に「0x00FF0000」（FF0000、つまり赤色）にするように送っています。

　「int tempbar = map(temperature, 0, 30, 0, 100);」については、Arduinoのmap関数を用いて、温度の0～30度を0～100の範囲にマッピングしています。これにより、バーの位置が決まります。

　この例では、下は0度、上は30度までしか測れません。必要な測定範囲があれば0と30の値を調整してあげれば良いでしょう。

　前回の記事と表示される値は同じですが、今回は色の変更や文字の大きさの変更を行うことで、視認性が増しました。また、バーによってアクティブに数値の増減を確認できるようになりました。