온습도 모니터링 시스템으로 홈페이지 Login 시스템을 코딩해 보자. 사용자 ID 와 비밀번호 PW 는 arduino 와 nodemcu 로 두기로 한다.
주의할 점은 DHT on 버튼과 Logout 2개의 버튼이 추가되어 있는데 각각의 역할을 알아보도록 하자.
DHT on 버튼을 클릭하면 GET 방식에 의해 ASCII 문자가 NodeMCU 에 전달이 되지만 웹 서버 코딩 내용 중에 DHT on을 별도로 체크하는 명령이 전혀 없으므로 클릭에 따라 단순 request를 한번 보내고 루프를 한번 돌면 온습도 측정이 이루어져 자연히 업데이트가 이루어진다.
Logout 버튼을 클릭하게 되면 if 문에서 체크하여 Login 상태를 참(true) 로 바꾸어 주므로 사용자 ID 와 비밀번호 PW 가 제대로 입력될때까지 Login 화면을 보여준다. 한편 url 주소창에 Logout?⚫⚫⚫ 으로 나타나는데 아무런 문제가 없다.
Webserver_nodemcu_landscape_calculator_login_01
#include <ESP8266WiFi.h>
#include <DHT11.h>
const char* ssid = "android1234";
const char* password = "dddddddddd";
//const char* ssid = "AndroidHotspot1994";//const char* password = "00000000";
int ledPin = 2; //
int pin = D5; //온습도센서
int value = LOW;
WiFiServer server(80);
DHT11 dht11(pin);
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);
}
// Temperature & Humidity Sensing
int err;
float temp, humi;
if((err=dht11.read(humi, temp))==0) {
Serial.print("temperature:");
Serial.print(temp);
Serial.print(" humidity:");
Serial.print(humi);
Serial.println();
}
else {
Serial.println();
Serial.print("Error No :");
Serial.print(err);
Serial.println();
}
delay(2000);
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
if ( request.indexOf("Logout") != -1 ) {
Login = true;
}
if ( (request.indexOf("arduino") != -1) && (request.indexOf("nodemcu") != -1) ) {
Login = false;
}
// LED on OFF 는 현재 빼버렸음
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, LOW);
value = HIGH;
}
if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(ledPin, HIGH);
value = LOW;
}
// 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("<body>");
//client.println("<a href=\"/LED=ON\"\" ><button>Turn on </button></a>");
//client.println("<a href=\"/LED=OFF\"\" ><button>Turn Off </button></a>");
client.println("<center><h1>Weather Station</h1>");
client.println("</body>");
client.println("<head>");
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;}");
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;}");
}
else {
// client.println("body {font-family: Arial;background-color: white;padding: 50px;}");
client.println("body{background-color:lightgrey;}");
//계산기 CSS
client.println(".box{background-color:#3d4543;height:400px;width:520px; border-style:solid; border-color:lightblue;");
client.println("border-radius:10px;position:relative;top:20px;left:1%;} ");
client.println(".display{background-color:#222;width:440px; position:relative;left:2px;top:20px;height:35px;}");
client.println(".display input{width:415px;position:relative;left:2px;top:2px;height:30px;");
client.println("color:black;background-color:#bccd95;font-size:21px;text-align:right;}");
client.println(".keys{position:relative;top:15px;}");
client.println(".button{width:40px;height:30px;border-radius:8px; border-style:solid; border-color:green;");
client.println("margin-left:12px;cursor:pointer;border-top:2px solid transparent;}");
client.println(".button.gray{color:white;background-color:#6f6f6f;");
client.println("border-bottom:black 2px solid;border-top:2px #6f6f6f solid;}");
client.println(".button.pink{color:black;background-color:#ff4561;border-bottom:black 2px solid;}");
client.println(".button.black{color:white;background-color:#303030;");
client.println("border-bottom:black 2px solid;border-top:2px #303030 solid;}");
client.println(".button.orange{color:black;background-color:FF9933;");
client.println("border-bottom:black 2px solid;border-top:2px FF9933 solid;}");
client.println(".gray:active{border-top:black 2px solid;border-bottom:2px #6f6f6f solid;}");
client.println(".pink:active{border-top:black 2px solid;border-bottom:#ff4561 2px solid;}");
client.println(".black:active{border-top:black 2px solid;border-bottom:#303030 2px solid;}");
client.println(".orange:active{border-top:black 2px solid;border-bottom:FF9933 2px solid;}");
client.println(".buttondigiclock{width:125px;height:40px;border:none;border-radius:8px;margin-left:15px;");
client.println("cursor:pointer;border-top:2px solid transparent;}");
client.println(".buttondigiclock.black{color:white;background-color:;");
client.println("border-bottom:lightblue 2px solid;border-top:2px 303030 solid;}");
client.println(".buttondigidht.black{color:red;background-color:;");
client.println("border-bottom:blue 2px solid;border-top:2px 303030 solid;}");
client.println("p{line-height:10px;}");
}
client.println("</style>");
//Login 입력
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>");
//Weather Station 코드
client.println("<body>");
if( Login == true ) {
}
else {
client.println("<div class='box'>");
client.println("<div class='display'>");
client.println("<input type='text' readonly size='18' id='d'></div>");
client.println("<div class='displayx'>");
client.println("<input type='text' readonly size='18' id='dx'></div>");
client.println("<div class='keys'>");
client.println("<table> <tbody> <tr>");
//client.print("<input type='button' class='button gray' value='(' onClick='v(\"(\")'>");
client.println("<td><input type='button' class='button gray' value='Pi' onclick='v(\"3.14159\")'></td>");
client.println("<td><input type='button' class='button gray' value='(' onclick='v(\"(\")'></td>");
client.println("<td><input type='button' class='button gray' value=')' onclick='v(\")\")'></td>");
client.println("<td><input type='button' class='button black' value='7' onclick='v(\"7\")'></td>");
client.println("<td><input type='button' class='button black' value='8' onclick='v(\"8\")'></td>");
client.println("<td><input type='button' class='button black' value='9' onclick='v(\"9\")'></td>");
client.println("<td><input type='button' class='button pink' value='/' onclick='v(\"/\")'></td>");
client.println("<td><input type='button' class='button pink' value='*' onclick='v(\"*\")'></td>");
client.println("</tr> </tbody>");
client.println("<tr>");
client.println("<td><input type='button' class='button black' value='4' onclick='v(\"4\")'></td>");
client.println("<td><input type='button' class='button black' value='5' onclick='v(\"5\")'></td>");
client.println("<td><input type='button' class='button black' value='6' onclick='v(\"6\")'></td>");
client.println("<td><input type='button' class='button black'value='1' onclick='v(\"1\")'></td>");
client.println("<td><input type='button' class='button black' value='2' onclick='v(\"2\")'></td>");
client.println("<td><input type='button' class='button black' value='3' onclick='v(\"3\")'></td>");
client.println("<td><input type='button' class='button pink' value='-' onclick='v(\"-\")'></td>");
client.println("<td><input type='button' class='button pink' value='+' onclick='v(\"+\")'></td>");
client.println("</tr>");
client.println("<tr>");
client.println("<td><input type='button' class='button black' value='0' onclick='v(\"0\")'></td>");
client.println("<td><input type='button' class='button black' value='.' onclick='v(\".\")'></td>");
client.println("<td><input type='button' class='button black' value='sin' onclick='v(\"Math.sin\")'></td>");
client.println("<td><input type='button' class='button black' value='cos' onclick='v(\"Math.cos\")'></td>");
client.println("<td><input type='button' class='button black' value='tan' onclick='v(\"Math.tan\")'></td>");
client.println("<td><input type='button' class='button black' value='log' onclick='v(\"Math.log\")'></td>");
client.println("<td><input type='button' class='button black' value='C' onclick='c(\"\")'></td>");
client.println("<td><input type='button' class='button orange' value='=' onclick='e()'></td>");
client.println("</tr> </tbody> </table>");
client.println("<table> <tbody> <tr> <td> ");
client.println("<body onload='updateTime()'> ");
client.println("<!-- viewBox is coordinate system, width and height are on-screen size --> ");
client.println("<svg id='clock' viewBox='0 0 100 100' width='120' height='120'> ");
client.println("<circle id='face' cx='50' cy='50' r='45'/> <!-- the clock face --> ");
client.println("<circle id='smallface' cx='50' cy='32' r='10'/> <!-- the small clock face --> ");
client.println("<g id='ticks'> ");
client.println("<!-- 12 hour tick marks --> ");
client.println("<line x1='50' y1='5.000' x2='50.00' y2='10.00'/> ");
client.println("<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/> ");
client.println("<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/> ");
client.println("<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/> ");
client.println("<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/> ");
client.println("<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/> ");
client.println("<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/> ");
client.println("<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/> ");
client.println("<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/> ");
client.println("<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/> ");
client.println("<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/> ");
client.println("<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/> ");
client.println("</g> ");
client.println("<g id='smallticks'> ");
client.println("<!-- 12 hour tick marks --> ");
client.println("<line x1='50' y1='24' x2='50' y2='22'/> ");
client.println("<line x1='58' y1='32' x2='60' y2='32'/> ");
client.println("<line x1='50' y1='40' x2='50' y2='42'/> ");
client.println("<line x1='42' y1='32' x2='40' y2='32'/> ");
client.println("</g> ");
client.println("<g id='numbers'> ");
client.println("<!-- Number the cardinal directions--> ");
client.println("<text x='50' y='18'>12</text><text x='85' y='53'>3</text> ");
client.println("<text x='50' y='88'>6</text><text x='15' y='53'>9</text> ");
client.println("</g> ");
client.println("<!-- Draw hands pointing straight up. We rotate them in the code. --> ");
client.println("<g id='hands'> <!-- Add shadows to the hands --> ");
client.println("<line id='hourhand' x1='50' y1='50' x2='50' y2='24'/> ");
client.println("<line id='minutehand' x1='50' y1='50' x2='50' y2='20'/> ");
client.println("<line id='secondhand' x1='50' y1='32' x2='50' y2='24'/> ");
client.println("</g> ");
client.println("</svg> ");
client.println("</body> </td>");
client.println("<td>");
client.println("<form name='theClock'>");
client.println("<input type=text class='button buttondigiclock black' name='theDate' style='font-size:20px;text-align: center;'>");
client.println("</td>");
client.println("<td>");
client.println("<input type=text class='button buttondigiclock black' name='theTime' style='font-size:20px;text-align: center;'>");
client.println("</form>");
client.println("</td> </tr> </tbody> </table> ");
client.println("<table> ");
client.println("<tbody> <tr>");
client.println("<td>");
client.println("<form name='theWeather'>");
client.println("<input type=text class='button buttondigiclock black' name='theTemp' style='font-size:20px;text-align: center;'> ");
client.println("</td>");
client.println("<td>");
client.println("<input type=text class='button buttondigiclock black' name='theHumi' style='font-size:20px;text-align: center;'> ");
client.println("</td>");
client.println("<td>");
client.println("<p>");
client.println("<a href=\"/DHT on\" class='button buttondigidht black' style='font-size:20px;text-align: center;'>DHT on</a>");
client.println("</p>");
client.println("</td>");
client.println("<td>");
client.println("<a href='/Logout' class='button buttondigidht black' style='font-size:20px;text-align: center;'>Logout</a>");
client.println("</td>");
client.println("</form>");
client.println("</tr>");
client.println("</tbody></table> </div></div>");
client.println("<script type='text/javascript'>");
client.println("function c(val){");
client.println("document.getElementById('d').value=val;}");
client.println("function v(val){");
client.println("document.getElementById('d').value+=val;}");
client.println("function e() { ");
client.println("try { ");
client.println("c(eval(document.getElementById('d').value)) } ");
client.println("catch(e) {");
client.println("c('Error') } } ");
client.println("</script></body>");
client.println("<head> ");
client.println("<script> ");
client.println("function updateTime() { ");
client.print("var temperature =");
client.print(temp);
client.println(";");
client.print("var humidity =");
client.print(humi);
client.println(";");
client.println("var now = new Date();");
client.println(" var sec = now.getSeconds(); ");
client.println(" var min = now.getMinutes(); ");
client.println("var hour = (now.getHours() % 12) + min/60; ");
client.println("var secangle = sec*6; ");
client.println("var minangle = min*6; ");
client.println("var hourangle = hour*30;");
client.println("var actualMonth = now.getMonth() + 1; ");
client.println("var tempangle = temperature*9;");
client.println("var humiangle = humidity*4.5;");
//Prepare time output!
client.println("document.theClock.theTime.value = '' ");
client.println("+ now.getHours() + ':' ");
client.println("+ now.getMinutes() + ':' ");
client.println("+ now.getSeconds();");
client.println("document.theClock.theDate.value = '' ");
client.println("+ now.getFullYear() + ':' ");
client.println("+ actualMonth + ':' ");
client.println("+ now.getDate(); ");
client.println("document.theWeather.theTemp.value = '' ");
client.println("+ temperature + ' degree C'; ");
client.println("document.theWeather.theHumi.value = '' ");
client.println("+ humidity + '%'; ");//........modification 4
// Get SVG elements for the hands of the clock
client.println("var sechand = document.getElementById('secondhand'); ");
client.println("var minhand = document.getElementById('minutehand'); ");
client.println("var hourhand = document.getElementById('hourhand'); ");
// Set an SVG attribute on them to move them around the clock face
client.println("sechand.setAttribute('transform', 'rotate(' + secangle + ',50,32)'); ");
client.println("minhand.setAttribute('transform', 'rotate(' + minangle + ',50,50)'); ");
client.println("hourhand.setAttribute('transform', 'rotate(' + hourangle + ',50,50)'); ");
client.println("setTimeout(updateTime, 1000); ");
client.println(" } ");
client.println("</script> ");
client.println("<style> ");
/* These CSS styles all apply to the SVG elements defined below */
client.println("#clock { ");
/* styles for everything in the clock */
client.println(" stroke: black; ");
/* black lines */
client.println("stroke-linecap: round; ");
/* with rounded ends */
client.println("fill: #eef; ");
/* on a light blue gray background */
client.println("} ");
client.println("#face { stroke-width: 3px;} ");
/* clock face outline */
client.println("#smallface { stroke:green; stroke-width: 1px;} ");
/* clock face outline */
client.println("#ticks { stroke-width: 2; } ");
/* lines that mark each hour */
client.println("#smallticks { stroke:green; stroke-width: 1; } ");
client.println("#hourhand {stroke-width: 5px;} ");
/* wide hour hand */
client.println("#minutehand {stroke: deepskyblue; stroke-width: 3px;}");
client.println("#secondhand {stroke:red; stroke-width: 1px;} ");
client.println("#numbers { ");
/* how to draw the numbers */
client.println("font-family: sans-serif; font-size: 7pt; font-weight: bold; ");
client.println("text-anchor: middle; stroke: none; fill: blue; ");
client.println("} ");
client.println("</style> ");
client.println("</head>");
client.println("</html>");
}//Weather Station 코드 else 끝
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 프로세싱 프로그램에 의한 아두이노 보드의 LED 제어 (0) | 2016.12.27 |
|---|---|
| 캡스톤디자인을 위한 아두이노 Procesing 코딩 목차 PDF 파일 (0) | 2012.01.04 |
| 아두이노 ESP8266 NodeMCU IOT(사물인터넷 ) 온습도 모니터링 스테이션 (0) | 2012.01.03 |
| 아두이노 와이어링 & 와이파이 코딩 목차 파일 (0) | 2012.01.03 |
| Landscape 형 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기:I (0) | 2012.01.01 |