앱 인벤터 appinventor

NodeMCU 웹서버 Login 웹뷰어 앱인벤터 코딩

coding art 2017. 11. 23. 10:32
728x90

                                  




아두이노 NodeMCU에서 코딩했던 Login 화면이다. usename은 arduino, password는 nodemcu 이다. PC의 웹화면에서는 좌우 폭 방향으로 넓어서 버튼들이 수평적으로 배치되나 앱 인벤터의 웹뷰어로 불러 올 때에는 스마트 폰 화면 제약으로 인해 수직 방향으로 버튼이 배치되었다.


login 코드는 NodeMCU 보드의 붙박이 2(GPIO2) LEDON OFF BLINKING 시키는 간단한 코드이다.

앱인벤터의 컴포넌트 구성은 대단히 단순하다. 아울러 아래의 블록 퍼즐 코딩을 참조하기 바란다.



Webserver_NodeMCU_login_01


#include <ESP8266WiFi.h>

 const char* ssid = "android1234";//자신의 스마트폰 핫스팟 ID
 const char* password = "dddddddddd";//핫스팟 비밀번호 입력

 int ledPin = 2; //붙박이 LED
 
 WiFiServer server(80);
 boolean Login = true;
 
 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

   if( request.substring(5,16) != "favicon.ico") {//favicon.ico request 배제
// Match the request
// on OFF BLINK 확인
if ( (request.indexOf("arduino") != -1)&& (request.indexOf("nodemcu") != -1) )  {
Login = false; 
}
else  {
     if (request.indexOf(on H") != -1)  {
     digitalWrite(ledPin, LOW);
   }
     if (request.indexOf("OFF H") != -1)  {
     digitalWrite(ledPin, HIGH);
   }
     if (request.indexOf("BLINK H") != -1)  {
      for( int i = 0; i<19; i++) {
        digitalWrite(ledPin, LOW);
        delay(50);
        digitalWrite(ledPin, HIGH);
        delay(50);
      }
   }
   if (request.indexOf("Logout") != -1)  {
     Login = true;
   }
}
 // 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>");
   //Login 버튼 배경 CSS
   client.println("* {box-sizing: border-box;}");
   client.println("*:focus { outline: none;}");
   if( Login == true ) {
   client.println("body {font-family: Arial;background-color: #3498DB;padding: 50px;}");
   }
   else  {
   client.println("body {font-family: Arial;background-color: white;padding: 50px;}"); 
   }
   client.println(".login {margin: 20px auto;width: 300px;}");
   client.println(".login-screen {background-color: #FFF;padding: 20px;border-radius: 5px}");
   client.println(".app-title {text-align: center;color: #777;} ");
   client.println(".login-form {text-align: center;}");
   client.println(".control-group {margin-bottom: 10px;}");
   client.println("input {text-align: center;background-color: #ECF0F1;");
   client.println("border: 2px solid transparent;border-radius: 3px;");
   client.println("font-size: 16px;font-weight: 200;padding: 10px 0;");
   client.println("width: 250px;transition: border .5s;}");
   client.println("input:focus {border: 2px solid #3498DB;box-shadow: none;}");
   client.println(".btn {  border: 2px solid transparent;  background: #3498DB;");
   client.println("  color: #ffffff;  font-size: 16px;  line-height: 25px;  padding: 10px 0;");
   client.println("  text-decoration: none;  text-shadow: none;  border-radius: 3px;");
   client.println("  box-shadow: none;  transition: 0.25s;  display: block;  width: 250px;");
   client.println("  margin: 0 auto;} ");
   client.println(".btn:hover {  background-color: #2980B9;} ");
   client.println(".login-link {font-size: 12px;color: #444;display: block;margin-top: 12px;}");

   //버튼 HTML CSS 설정
    client.println(".button {");
    client.println("background-color: green;");
    client.println("border: 3px solid red;border-radius: 10px;");
    client.println("color: white;");
    client.println("padding: 15px 32px;");
    client.println("text-align: center;");
    client.println("text-decoration: none;");
    client.println("display: inline-block;");
    client.println("font-size: 30px;");
    client.println("margin: 10px 15px;");
    client.println("cursor: pointer;");
    client.println("}");
   client.println("</style>");
  
if( Login == true ) {  
client.println("<form method='GET'>");
client.println("<div class='login'><div class='login-screen'><div class='app-title'>");
client.println("<h1>Arduino IOT Login</h1></div> <div class='login-form'><div class='control-group'>");
client.println("<input type='text' class='login-field' value='' placeholder='username' name='ID'>");
client.println("<label class='login-field-icon fui-user' for='login-name'></label>");
client.println("</div> <div class='control-group'>");
client.println("<input type='password' class='login-field' value='' placeholder='password' name='PW'>");
client.println("<label class='login-field-icon fui-lock' for='login-pass'></label></div> ");
client.println("<input type='submit' value='Log in' class='btn btn-primary btn-large btn-block' >");
client.println(" <br></div></div></div>");
client.println("</form>");
}
   client.println("</head>");
   client.println("<body>");
if( Login == true ) {
}
else  {
   client.println("<center>");
   client.println("<div class='app-title'><h1>LED Control</h1></div>");
   client.println("<br>");
   client.println("<a href=\"/on\"\" class='button'> on </button></a>");
   client.println("<a href=\"/OFF\"\" class='button'> OFF </button></a>");
    client.println("<a href=\"/BLINK\"\" class='button'>BLINK</button></a>");
   client.println("<a href=\"/Logout\"\" class='button'>Logout</button></a>");
   client.println("</center>");
   client.println("</body>");
   client.println("</html>");
}
   delay(1);
   Serial.println("Client disonnected");
   Serial.println("");
  
   } //favicon.ico배제 if 문 닫기 괄호
 }//프로그램 끝