아두이노 NodeMCU 웹서버 문자열 입력 스마트폰 HTML 웹 버튼 키보드:II

스마트 폰에서 HTML 그래픽으로 4X4 버튼 키보드를 생성해 보자. 4X4에 포함되어야 할 가장 기본적인 문자는 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,*,#,“.”,@,Space Bar 및 ENTER키 들이다.
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E 까지는  아두이노에서 16진법(HEX)을 구사함에 있어서 필수적인 문자들이다. *과 #는 통신에서 비밀번호 확인 작업 후 흔히 누르는 문자이다. “.”는 소수점 이하 숫자 표현에 필수적이다. @는 이메일 주소 형성에, Space Bar는 말할 필요도 없다.

일단 엔터키를 제외한 나머지를 버튼형 키보드로 그래픽 출력하였다. 스페이스 바는 이상하게도 버튼 모양이 작으면서 납작하게 ,골뱅이는 남다르게 폰트 사이즈가 큰 듯, 소숫점 버튼은 홀쭉하게 나타났다. 특수문자 #는 와이파이 통신 여부를 체크해 보기 위해 인위적으로 삽입하였다.

우선 웹 주소창에 가상 ip를 입력 후 엔터 키를 누른 다음 아두이노 NodeMCU와 통신 연결이 되어 키보드가 나타나면 특수문자 #를 누른 후 “/KEY=문자”가 뜨는지 확인해 보도록 하자.

 확인 결과 주소창 입력 인식은 되었으나 와이파이 통신이 두절된다. 즉 문자 “#”는 직접 보낼 수 없는 문자이며 버튼 키보드에서 제외하기로 한다.
Space Bar 또한 와이파이 통신 두절이 되기 때문에 직접 보낼 수 없다.

@도 지금의 액면으로 처리하는 GET request 방식에는 문제가 없으나 POST를 위시한 url 통신에서 문제가 될 수 있는 Escape 문자로 분류된다.

따라서 #, Space Bar 와 @ 에 대해서는 와이 통신전달에 이상이 없는 다른 문자 즉 Escape 문자로 아래와 같이 대체하기로 하며 프로그램을 참고하기 바란다.

Space Bar : %20
#          : %23
@         : %40

    if (request.indexOf("/KEY=%23") != -1)  {
      c +="#";
     Serial.println(c);}
     if (request.indexOf("/KEY=%40") != -1)  {
      c +="@";
     Serial.println(c);}
     if (request.indexOf("/KEY=%20") != -1)  {
      c +=" ";
     Serial.println(c);}
⚫⚫⚫
   client.println("<a href=\"/KEY=%40\"\" class='button'> @ </button></a>");
   client.println("<a href=\"/KEY=.\"\" class='button'> . </button></a>");
⚫⚫⚫

한 가지 지적해 두어야 할 사항은 Enter 가 따로 없는데 이는 웹 화면 버튼을 터치하는 자체가 Enter라는는 점이다.

문자를 하나씩 보내 시리얼 모니터로 출력할 수 도 있으며 이번 블로그에서의 관심 사항은 여러 개의 문자로 이루어진 문자열을 출력해 보는 일이다.
예제 즉 123.45 @678을 시리얼 모니터에서 출력해 보기로 하자.

더 나아가 해당 문자열 입력이 완료되었을 경우에는 프로그램 초반에 설정된 전역 변수 String c를 다시 초기화 하여 재 입력할 수 있도록 프로그램을 수정하여야 한다.

상당히 많은 수의 배선 작업을 요하는 키패드에 비해서 배선 걱정이 전혀 없으며 아울러 마땅한 입력 장치가 없는 아두이노의 입력 디바이스를 마련함으로 인해 다양한 응용이 가능하리라 본다.

//Webserver_NodeMCU_WeMos_IOT_keybd_02

 #include <ESP8266WiFi.h>
 
 const char* ssid = "AndroidHotspot1234";//자신의 스마트폰 핫스팟ID입력
 const char* password = "00000000";//자신의 스마트폰 핫스팟 비밀번호 입력

 WiFiServer server(80);
  String c;
 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');
   
   // 14: 정식 request, 20: ㅣLED on request  21: LED OFF request 아니면 건너뛸 것.

 if(request.length() == 14 || request.length() == 19 || request.length() == 21) {

  Serial.println(request);
   client.flush();

 // Key board input processing
 
  
   if (request.indexOf("/KEY=1") != -1)  {
     c +="1";
     Serial.println(c);}
      if (request.indexOf("/KEY=2") != -1)  {
     c +="2";
     Serial.println(c);}
      if (request.indexOf("/KEY=3") != -1)  {
      c +="3";
     Serial.println(c);}
      if (request.indexOf("/KEY=4") != -1)  {
      c +="4";
     Serial.println(c);}
   if (request.indexOf("/KEY=5") != -1)  {
    c +="5";
     Serial.println(c);}
   if (request.indexOf("/KEY=6") != -1)  {
    c +="6";
     Serial.println(c);}
   if (request.indexOf("/KEY=7") != -1)  {
    c +="7";
     Serial.println(c);}
   if (request.indexOf("/KEY=8") != -1)  {
    c +="8";
     Serial.println(c);}
   if (request.indexOf("/KEY=9") != -1)  {
    c +="9";
     Serial.println(c);}
   if (request.indexOf("/KEY=0") != -1)  {
    c +="0";
     Serial.println(c);}
   if (request.indexOf("/KEY=A") != -1)  {
    c +="A";
     Serial.println(c);}
   if (request.indexOf("/KEY=B") != -1)  {
    c +="B";
     Serial.println(c);}
   if (request.indexOf("/KEY=C") != -1)  {
    c +="C";
     Serial.println(c);}
   if (request.indexOf("/KEY=D") != -1)  {
    c +="D";
     Serial.println(c);}
   if (request.indexOf("/KEY=E") != -1)  {
     Serial.println("E");}
   if (request.indexOf("/KEY=*") != -1)  {
    c +="*";
     Serial.println(c);}
    if (request.indexOf("/KEY=%23") != -1)  {
      c +="#";
     Serial.println(c);}
     if (request.indexOf("/KEY=%40") != -1)  {
      c +="@";
     Serial.println(c);}
     if (request.indexOf("/KEY=%20") != -1)  {
      c +=" ";
     Serial.println(c);}
     if (request.indexOf("/KEY=.") != -1)  {
      c +=".";
     Serial.println(c);}
    
//     Serial.println(c);
    
   // 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=A\"\" class='button'> A </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=B\"\" class='button'> B </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=C\"\" class='button'> C </button></a>");
   client.println("<br>");
   client.println("<a href=\"/KEY=*\"\" class='button'> * </button></a>");
   client.println("<a href=\"/KEY=0\"\" class='button'> 0 </button></a>");
   client.println("<a href=\"/KEY=D\"\" class='button'> D </button></a>");
   client.println("<a href=\"/KEY=E\"\" class='button'> E </button></a>");
   client.println("<br>");
   client.println("<a href=\"/KEY=%20\"\" class='button'> S </button></a>");//Space Bar
   client.println("<a href=\"/KEY=%40\"\" class='button'> @ </button></a>");
   client.println("<a href=\"/KEY=.\"\" class='button'> . </button></a>");
   client.println("<a href=\"/KEY=%23\"\" class='button'> # </button></a>");
//  
  
   client.println("</p>");
   client.println("</body>");
   client.println("</html>");

   delay(1);
   Serial.println("Client disonnected");
   Serial.println("");
 }// if문 괄호 닫기
 }//프로그램 끝