버튼 키보드를 HTML로 직접 프로그램하여 사용하는 대신에 HTML의 “input” 태그를 사용하여 안드로이드 폰의 자판을 그대로 불러 내어서 쓰는 방법을 알아보기로 한다. 물론 이 방법은 HTML 명령이 적용된다면 iOS를 사용하는 아이폰에서도 비슷하게 사용할 수 있으리라 본다.
데이터 입력을 위한 “input”태그는 인터넷 웹에서 사용자 ID와 비밀번호 PASSWORD 입력 창에서 사용되는 명령이다. 이 블로그에서는 아래의 프로그램 사례에서처럼 예제로 하나의 입력 박스만을 사용하기로 하자.
client.print("<form>");
client.print("<input type='text' name='/'>");
client.println("<br><br>");
client.println("<a href=name><button> Send </button></a>");
client.print("</form>");
input 태그의 type 유형은 text를 비롯하여 email, submit 등이 있는데 문자 입력 목적을 위해 text를 사용하기로 하자. 아울러 버튼 설정에서는 Send가 적절한 용어로 보인다. 이 짧은 HTML 프로그램을 삽입하여 실행하면 아래와 같이 스마트 폰 화면에 비어 있는 입력 창과 Send 버튼이 나타나게 된다.
프로그램 실행 결과 HTML input 태그에 의해 출력된 결과다. 입력 박스는 통상 20개 이내의 문자로 제한된다.
안드로이드 폰의 자판을 불러내기 위해서는 단지 입력 창을 터치하기만 하면 된다.
한글 자판뿐 아니라 한/영, 대소문자 및 시프트를 포함한 모든 자판 호출이 가능하다. 이 블로그에서는 영문자판만을 고려한다.
박스에 “Arduino input/20 chars”로 입력 후 Send 버튼을 누르고 주소창에 나타나는 request 내용을 관찰해 보자.
안드로이폰 의 웹화면 주소창에 나타난 결과에 의하면 가상 ip 이후에 “/?=” 가 첨부된다.
공란 즉 blank는 “+”로 처리한다.
“%2F“는 의도적으로 넣어 본 에스케이프 문자로 ”/“에 해당한다.
와이파이를 통해 넘어온 결과를 시리얼 모니터에서 출력해보자.
통상의 request에 추가하여 안드로이드 자판에 의해 생성된 입력 내용이 고스란히 들어 있음을 알 수 있다.
만약 안드로이드 스마트폰 입력 박스에서 작성되어 전송된 내용을 아두이노에서 사용하려면 일차로 “Arduino+%2Finput+%2F+20+chars”문자열을 String c = substring(i,j) 명령을 사용하여 추출해야 한다. “i“는 문자열 시작 부분인 G를 1로 설정하면 ”Arduino“ 의 바로 앞부분인 ”=“ 즉 10이 된다. ”j“는 ”chars“의 마지막 글자인 ”s“ 즉 36이 된다.
둘 째로 추출된 문자열에서 다시 “+”는 공란 “ ”으로 에스케이프 문자 “02F”는 “/”는 바꾸어 주어야 한다.
이러한 부분은 프로그래머가 아두이노에 입력된 문자열을 어떻게 사용할 것인지에 대한 응용 목적 하에 안드로이드 폰의 문법 규칙을 잘 관찰하여 프로그램 해야 할 것으로 본다.
Webserver_nodemcu_html_form_request_01
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1234";//자신의 스마트폰 핫스팟 ID 입력
const char* password = "00000000";//자신의 스마트폰 핫스팟 비밀번호 입력
int ledPin = 2; //
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
// Set WiFi to station mode and disconnect from an AP if it was previously connected
WiFi.mode(WIFI_STA);
WiFi.disconnect();
delay(100);
Serial.println("Setup done");
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
if( request.substring(5,16) != "favicon.ico") {//favicon.ico request 배제
Serial.println(request);
client.flush();
}
if( request.substring(5,16) != "favicon.ico") {//favicon.ico request 배제
// Match the request
int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, LOW);
value = HIGH;
}
if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(ledPin, HIGH);
value = LOW;
}
// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
//배경 색 문자 색 사이즈 HTML CSS 설정
client.println("<style>");
client.println("body {");
client.println("background-color: lightblue;");
client.println("}");
client.println("p {");
client.println("color:red;");
client.println("font-size:250%;");
client.println("}");
client.println("</style>");
client.println("<title>Page Title</title>");
client.println("<h3> Arduino Input words within 20 characters</h3>");
client.println("</head>");
client.println("<body>");
client.print("<form>");
client.print("<input type='text' name='/'>");
client.println("<br><br>");
client.println("<a href=name><button> Send </button></a>");
client.print("</form>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
} //favicon.ico배제 if 문 닫기 괄호
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| HTML SVG와 버튼 키보드로 스마트폰 웹에 7세그먼트 LED를 그려보자!:II (0) | 2017.02.28 |
|---|---|
| 구글 맵 HTML 프로그램에 의한 아두이노 NodeMCU GPS 데이터 확인 (0) | 2017.02.26 |
| 아두이노 NodeMCU 웹서버 문자열 입력 스마트폰 HTML 웹 버튼 키보드:II (0) | 2017.02.23 |
| 아두이노 NodeMCU 웹서버용 스마트폰 HTML 웹 버튼 키보드:I (0) | 2017.02.22 |
| 아두이노 NodeMCU 웹서버에 의한 삼색 LED 스마트폰 제어 및 웹화면 출력 (0) | 2017.02.22 |