아두이노의 출력 장치로는 시리얼 모니터가 있으나 별도의 입력 장치 즉 키보드가 없다. 아두이노에 입력 작업을 위해서는 하드웨어적으로 많은 수의 스위치를 배선하여 어렵게 입력을 시도할 수 있겠지만 와이파이에 의해 사물인터넷 제어가 가능한 NodeMCU 모듈에서 는 소프트웨어적으로 HTML 버튼 버튼 그래픽 프로그램에 의해 키보드를 아주 쉽게 생성할 수 있다,
물론 버튼을 누르면 거꾸로 아두이노 NodeMCU로 와이파이에 의해 데이터가 전송되며 이 데이터를 인식하여 시리얼 모니터에 출력이 가능하다.
물론 HTML 버튼 프로그램에 의해 키보드 그래픽을 제공하고 해당하는 숫자를 터치하면
스마트폰 인터넷 주소창에 가상ip에 연이어 /KEY=숫자 형식으로 나타남과 동시에 웹 브라우저가 아두이노 NodeMCU로 request를 보내게 된다.
아두이노 프로그램에서는 버튼 키보드에서 터치 입력했던 숫자를 if 문에서 request.indexOf(“/KEY=숫자”)의 값을 찾아 숫자를 인식하는데 달려 있다. 하지만 이 버튼 키보드는 일련의 문자열을 만들어 보낼 수 없다는 점에서 우리가 알고 있는 키보드는 아니다.
윈도우즈 워드프로세서 수준의 키보드 입력을 위해서는 상당히 복잡한 소프트웨어가 필요하겠으나 아쉬운 데로 자신이 원하는 숫자나 캐릭터를 입력해서 인터액티브하게 아두이노 프로그램을 실행하는 데에 큰 도움이 되리라 본다.
//Webserver_nodemcu_IOT_keybd_01
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1234";//자신의 스마트폰의 ID 입력
const char* password = "00000000";//자신의 스마트 폰의 비밀번호 입력
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
// 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');
Serial.println(request);
// 14: 정식 request, 20: ㅣLED on request 21: LED OFF request 아니면 건너뛸 것.
if(request.length() == 14 || request.length() == 19 || request.length() == 20 || request.length() == 21) {
client.flush();
// Match the request
// Key board input processing
if (request.indexOf("/KEY=1") != -1) {
Serial.println("1");
}
if (request.indexOf("/KEY=2") != -1) {
Serial.println("2");
}
if (request.indexOf("/KEY=3") != -1) {
Serial.println("3");
}
if (request.indexOf("/KEY=4") != -1) {
Serial.println("4");
}
if (request.indexOf("/KEY=5") != -1) {
Serial.println("5");
}
if (request.indexOf("/KEY=6") != -1) {
Serial.println("6");
}
if (request.indexOf("/KEY=7") != -1) {
Serial.println("7");
}
if (request.indexOf("/KEY=8") != -1) {
Serial.println("8");
}
if (request.indexOf("/KEY=9") != -1) {
Serial.println("9");
}
if (request.indexOf("/KEY=0") != -1) {
Serial.println("0");
}
// Set ledPin according to the request
//digitalWrite(ledPin, value);
// 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("}");
//버튼 HTML CSS 설정
client.println(".button {");
client.println("background-color: white;");
client.println("border: solid;");
client.println("color: black;");
client.println("padding: 15px 32px;");
client.println("text-align: center;");
client.println("text-decoration: none;");
client.println("display: inline-block;");
client.println("font-size: 50px;");
client.println("margin: 2px 2px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("<title>Page Title</title>");
client.println("<h1> Arduino Key Board</h1>");
client.println("</head>");
client.println("<body>");
client.println("<p>");
// Key board input
client.println("<br>");
client.println("<a href=\"/KEY=1\"\" class='button'> 1 </button></a>");
client.println("<a href=\"/KEY=2\"\" class='button'> 2 </button></a>");
client.println("<a href=\"/KEY=3\"\" class='button'> 3 </button></a>");
client.println("<a href=\"/KEY=B\"\" class='button'> B </button></a>");
client.println("<br>");
client.println("<a href=\"/KEY=4\"\" class='button'> 4 </button></a>");
client.println("<a href=\"/KEY=5\"\" class='button'> 5 </button></a>");
client.println("<a href=\"/KEY=6\"\" class='button'> 6 </button></a>");
client.println("<a href=\"/KEY=E\"\" class='button'> E </button></a>");
client.println("<br>");
client.println("<a href=\"/KEY=7\"\" class='button'> 7 </button></a>");
client.println("<a href=\"/KEY=8\"\" class='button'> 8 </button></a>");
client.println("<a href=\"/KEY=9\"\" class='button'> 9 </button></a>");
client.println("<a href=\"/KEY=0\"\" class='button'> 0 </button></a>");
client.println("</p>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}// if문 괄호 닫기
}//프로그램 끝
스마트 폰 웹 화면에서 키보드 입력 후 주소창에서 확인이 가능하다. 이 데이터는 와이파이를 통해 아두이노 NodeMCU로 전달이 되고 시리얼 모니터에서 request 내용 출력과 연이은 숫자 출력에 의해 확인이 가능하다.
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| HTML 웹 프로그램에 의한 아두이노 NodeMCU 안드로이드 스마트폰 키보드:III (0) | 2017.02.25 |
|---|---|
| 아두이노 NodeMCU 웹서버 문자열 입력 스마트폰 HTML 웹 버튼 키보드:II (0) | 2017.02.23 |
| 아두이노 NodeMCU 웹서버에 의한 삼색 LED 스마트폰 제어 및 웹화면 출력 (0) | 2017.02.22 |
| 웹의 불필요한 favicon request에 따른 아두이노 NodeMCU 웹서버의 반응과 대책 (0) | 2017.02.22 |
| 아두이노 NodeMCU에서 그림파일 불러오는 HTML img 태그 사용법 (0) | 2017.02.20 |