Series: Tried Using Touch Panel TFT Display GT-SP with Arduino
Controlling an LED Connected to Arduino Using Form Controls
Table of Contents
Hello everyone, I’m @kissaten, a beginner in electronics. In this series, I’m explaining the process of connecting a 7-inch touch display (GT-SP series “GTWV070S3A00P”) to an Arduino and working on various projects.
Last time, we built a system to control the range of motion of a slider equipped on the GT-SP. This time, we will use form controls such as radio buttons and checkboxes that can be mounted on the GT-SP to control an LED.
To read this article, you should first review the previous contents (“Controlling a Servo Motor Connected to Arduino from a Touch Screen“, “Display values obtained from Arduino in a highly visible design“). We will be applying object decoration techniques introduced there, so please check the previous articles if you haven’t yet.
Connecting LEDs
For this project, we will use three LEDs of different colors, each with a resistor ranging from 300Ω to 1kΩ. Follow these pin connections:
- Connect the red LED to pin 9
- Connect the green LED to pin 10
- Connect the blue LED to pin 11
Additionally, connect each LED to GND. When connecting the LEDs, make sure to pay attention to their polarity. Connect the longer pin to the designated Arduino pins (9, 10, 11) and the shorter pin to GND.
Picture by [Fritzing (CC BY-SA)]
Creating Screens in GT Design Studio
This time, we will use checkboxes, radio buttons, and dropdowns on one page. By sending the state of these controls to Arduino via the provided SET buttons, it is possible to control LEDs.
- First SET Button (the left button): Sends the state (ON/OFF) of the checkboxes selecting the prepared colors to Arduino (CHK is sent).
- Second SET Button (the middle button): Sends the state of the radio buttons, which select the LED state (solid, blinking), to Arduino (RAD is sent).
- Third SET Button (the right button): Sends a preset LED behavior selected from the dropdown menu to Arduino and executes it (DROP is sent).
Refer to the previous article for design details around titles and buttons.
Checkboxes
Each checkbox needs to be placed individually. This time, three checkboxes are prepared.
The settings for the design of checkboxes are as follows:
- Check Size: Set to 32 (default size is 20).
Radio Buttons
Radio buttons increase in items according to the “row” placed in “Text0”.
This time, two items, “Solid on” and “Blinking”, are required. Each checked item is assigned a “VAL”. In this example, “Solid on” is assigned a VAL of “0”, and “Blinking” is assigned a VAL of “1”.
Dropdowns
This time, “DEMO 1” and “DEMO 2” are added to the dropdown. Each is assigned a VAL of “0” and “1”, respectively.
Similar to radio buttons, dropdown items increase according to the rows placed in “Text 0”.
If the rows increase, the items are hidden, and a scrollbar appears. You can change the display area by modifying the Style > Dropdown Size property of the dropdown. If you plan to increase the rows and do not need a scrollbar, you should change the size (default value is 100).
First SET Button Event Setting
The first SET button (the left button) includes the following Event.
Second SET Button Event Setting
The second SET button (the middle button) includes the following Event.
Third SET Button Event Setting
The third SET button (the right button) includes the following Event.
Project Creation to Write on the Touch Screen
This program receives commands from an external device via serial communication and controls the LED lighting state and demo mode.
Specifically, it controls the turning on and off of LEDs according to the received commands. The “CHK” command updates the check state of the specified LEDs, the “RAD” command sets the LED blinking mode, and the “DROP” command switches the demo mode. In demo mode, LEDs light up in sequence according to the settings, providing visual feedback to the user.
Through data transmission and reception via serial communication, this project achieves flexible and efficient LED control.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 |
// ピン接続 | Pin assign #define GT_DTR 4 // DTR #define GT_DSR 6 // DSR #define GT_TRDY 7 // TRDY <--未使用 | Disused #define LED1 9 // RED LED #define LED2 10 // Green LED #define LED3 11 // Blue LED // LEDチェック状態の保管変数 bool LED1Check = false; // LED1のチェック状態 bool LED2Check = false; // LED1のチェック状態 bool LED3Check = false; // LED1のチェック状態 // 点滅モードの保管変数 unsigned long BlinkingMode = 0; // 0: Solid on, 1: Blinking // 点滅状態フラグ bool BlinkingStatus = false; // DEMOモードの状態を示す変数 int demoMode = -1; // -1: OFF, 0: DEMO1, 1: DEMO2 // 時間管理 unsigned long lastBlinkTime; unsigned long lastDemoUpdateTime; const unsigned long blinkInterval = 500; // 点滅間隔（ミリ秒） const unsigned long demoInterval = 1000; // DEMO更新間隔（ミリ秒） // 初期設定 void setup() { Serial.begin(38400); pinMode(LED1, OUTPUT); pinMode(LED2, OUTPUT); pinMode(LED3, OUTPUT); Serial.println("Setup completed. Waiting for data..."); lastBlinkTime = millis(); lastDemoUpdateTime = millis(); } // メインループ void loop() { // ボタンタッチ時の処理 if (Serial.available() > 0) { //データの取得 String commandData = gtsp_signal_read(); Serial.println("Received command: " + commandData); // 押されたボタンの判別 if (commandData.startsWith("CHK")) { updateLED(); } else if (commandData.startsWith("RAD")) { // ラジオボタンの状態を確認 updateBlinkingMode(); } else if (commandData.startsWith("DROP")) { // DEMOモードの状態を確認 updateDemo(); } } //LEDの点灯処理 if (demoMode == -1) { handleLED(); // 通常のLED点灯制御 } else { runDemo(); // DEMOモードの実行 } } //LEDチェックボックス状態の確認関数 void updateLED(){ LED1Check = gtsp_ObjPrpRead_val(3, 0x10, 4); //チェックボックスRedのVAL値読み出し LED2Check = gtsp_ObjPrpRead_val(4, 0x10, 4); //チェックボックスGreenのVAL値読み出し LED3Check = gtsp_ObjPrpRead_val(5, 0x10, 4); //チェックボックスBlueのVAL値読み出し demoMode = -1; // DEMOモードを停止 } //LED点滅モードラジオボタン選択状態の確認関数 void updateBlinkingMode(){ BlinkingMode = gtsp_ObjPrpRead_val(1, 0x10, 4); //ラジオボタンのVAL値読み出し demoMode = -1; // DEMOモードを停止 } //デモモードドロップダウン選択状態の確認関数 void updateDemo(){ demoMode = gtsp_ObjPrpRead_val(7, 0x10, 4); //ドロップダウンのVAL値読み出し } // LED点灯制御を行う関数 void handleLED() { //点滅状態フラグの制御 unsigned long currentTime = millis(); if (BlinkingMode == 1 && currentTime - lastBlinkTime >= blinkInterval) { //LED点滅モード かつ 消灯時間となるとき if (BlinkingStatus == true) {BlinkingStatus = false;} else {BlinkingStatus = true;} //点滅状態フラグ入れ替え lastBlinkTime = currentTime; } //LED点滅の制御 if (BlinkingMode == 1 && BlinkingStatus == false) { //LED点滅モード かつ 点滅状態フラグOFFのとき digitalWrite(LED1, LOW); digitalWrite(LED2, LOW); digitalWrite(LED3, LOW); } else{ //LED常時点灯モード まはた 点滅状態フラグONのとき if (LED1Check == 1){digitalWrite(LED1, HIGH);} else {digitalWrite(LED1, LOW);} if (LED2Check == 1){digitalWrite(LED2, HIGH);} else {digitalWrite(LED2, LOW);} if (LED3Check == 1){digitalWrite(LED3, HIGH);} else {digitalWrite(LED3, LOW);} } } // DEMOモードの実行を行う関数 void runDemo() { unsigned long currentTime = millis(); if (currentTime - lastDemoUpdateTime >= demoInterval) { lastDemoUpdateTime = currentTime; if (demoMode == 0) { // DEMO1 static int currentLED = LED1; digitalWrite(LED1, LOW); digitalWrite(LED2, LOW); digitalWrite(LED3, LOW); digitalWrite(currentLED, HIGH); if (currentLED == LED1) currentLED = LED2; else if (currentLED == LED2) currentLED = LED3; else if (currentLED == LED3) currentLED = LED1; } else if (demoMode == 1) { // DEMO2 static int currentLED = LED3; digitalWrite(LED1, LOW); digitalWrite(LED2, LOW); digitalWrite(LED3, LOW); digitalWrite(currentLED, HIGH); if (currentLED == LED3) currentLED = LED2; else if (currentLED == LED2) currentLED = LED1; else if (currentLED == LED1) currentLED = LED3; } } } /********************** GT-SP関数 | Function for GT-SP **********************/ //////////////////////////////////////////////////// // オブジェクト制御コマンド-プロパティ読み出し（数値用）~ Read property value (for Value) //////////////////////////////////////////////////// unsigned long gtsp_ObjPrpRead_val(int obj, int prp, int ln) { unsigned long val; gt_print("CMD"); // コマンドヘッダ gt_put(0xd4); // オブジェクト-プロパティ設定コマンド gt_put(obj >> 0); // オブジェクトNo. 下位バイト gt_put(obj >> 8); // オブジェクトNo. 上位バイト gt_put(prp >> 0); // プロパティNo. 下位バイト gt_put(prp >> 8); // プロパティNo. 上位バイト gt_put(ln >> 0); // データ長 最下位バイト gt_put(ln >> 8); // データ長 下位バイト gt_put(ln >> 16); // データ長 上位バイト gt_put(ln >> 24); // データ長 最上位バイト // プロパティデータ受信 while (Serial.available() == 0) {} val = gtsp_signal_read_val(); return val; } //////////////////////////////////////////////////// // データ受信（文字列用） | 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); // データ長抽出 dl = (unsigned long)(res_dl[0] + (res_dl[1] << 8) + (res_dl[2] << 16) + (res_dl[3] << 24)); // データ長変換 Serial.readBytes(res_data_char, dl); // データ抽出 Serial.print("Received data: "); for (unsigned int i = 0; i < dl; i++) { Serial.print(res_data_char[i], HEX); Serial.print(" "); } Serial.println(); return String(res_data_char); // String型変換、リターン } return ""; } //////////////////////////////////////////////////// // 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)); } } //////////////////////////////////////////////////// // データ受信(数値用) | Receive data from GT-SP (for Value) // (バイト長4バイトまで | Byte length is up to 4 byte) //////////////////////////////////////////////////// unsigned long gtsp_signal_read_val(){ byte res_dl[4] = ""; unsigned long dl; byte res_val[4] = ""; unsigned long val; 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_val, dl); //データ抽出 | Read data val = (unsigned long)(res_val[0] + (res_val[1]<<8) + (res_val[2]<<16) + (res_val[3]<<24)); //データ抽出 | Read data return val; //リターン | Return } } |
Program Analysis
This program manages the LED lighting state and demo mode based on commands sent from an external device via serial communication. When data is received within the loop function, different processes are executed according to the content of the data.
Pre-Knowledge: Explanation of the gtsp_ObjPrpRead_val Function
The newly added gtsp_ObjPrpRead_val function sends the specified object number, property number, and data length, and receives the property data. For example, the code LED1Check = gtsp_ObjPrpRead_val(3, 0x10, 4); reads the value of property number 0x10 of object number 3 and stores the value in the LED1Check variable. This determines whether LED1 is on or off.
Controlling LED States
When the “CHK” command is received, the check state of a specific LED is updated. The check state of each LED is obtained using the gtsp_ObjPrpRead_val function, and based on the result, the LED is turned on or off.
Global Blinking Control
When the “RAD” command is received, the blinking state of all LEDs is set. By updating the BlinkingMode< variable, the LED blinking mode is switched on or off. This determines whether all LEDs blink simultaneously.
Managing Demo Mode
When the “DROP” command is received, the demo mode is switched. In this mode, LEDs light up in a specific pattern, providing a visual effect. When another command is received, the demo mode is automatically deactivated.
This program has the flexibility to appropriately control various functions based on the received commands. Each function is independent and designed to respond quickly and accurately.
Execution Result
This project involved controlling LEDs by integrating form controls and Arduino. Using such a system, it can be useful for remotely controlling home electrical switches or for smart home automation.
Next time, we will take on a project using outline fonts and the Draw Shape tool to decorate the screen.