아두이노 NodeMCU에서 코딩했던 Login 화면이다. usename은 arduino, password는 nodemcu 이다. PC의 웹화면에서는 좌우 폭 방향으로 넓어서 버튼들이 수평적으로 배치되나 앱 인벤터의 웹뷰어로 불러 올 때에는 스마트 폰 화면 제약으로 인해 수직 방향으로 버튼이 배치되었다.
이 login 코드는 NodeMCU 보드의 붙박이 2번(GPIO2) LED를 ON 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 문 닫기 괄호
}//프로그램 끝
'앱 인벤터 appinventor' 카테고리의 다른 글
앱인벤터와 아두이노 HC-06 블루투스에 의한 DHT22 온습도 모니터링 (0) | 2018.02.12 |
---|---|
앱 인벤터와 아두이노 HC-06 블루투스에 의한 DHT11 온습도 모니터(Arduino HC-06 Bluetooth DHT11 Temp Humidty Monitoring) (0) | 2018.01.10 |
weMos 사물인터넷 코드를 웹뷰어로 불러오기위한 앱인벤터 코딩 (0) | 2017.11.22 |
NodeMCU 미세먼지 모니터링 HTML 그래픽 출력 앱 인벤터 웹뷰어 코딩 (0) | 2017.11.22 |
LED ON OFF & 아날로그 전압 읽기 weMos 앱 인벤터 와이파이 코딩 (0) | 2017.11.16 |