아두이노 NodeMCU 사물인터넷에서 클라이언트로부터의 request 가 올때마다 한번씩 DHT11 온습도 센서를 사용하여 업데이트 된 데이터를 준비하여 출력하도록 하자. NodeMCU 보드에서 측정한 온습도 데이터는 client.print(⚫⚫⚫) 명령을 사용하여 Java Script 아날로그 디지털 시계 코드 내부에 전달한다.
즉 Java Script 코드내에서 ⚫⚫⚫은 한번은 “var temperature =”을 출력하고 이어서 온도 값 변수 temp;를 출력해야 한다. 이 기법이 아두이노 NodeMCU에서 웹브라우저의 Java Script 에 온습도 데이터를 넘겨주는 기법이다.
온습도 데이터를 받아 들이는 Java Script 코드가 바늘 침을 애니메이션하는 아날로그 시계 이기 때문에 온습도 데이터도 각도로 환산하여 원형 게이지에 바늘 침 표현이 가능해짐을 참고하자.
DHT on 버튼을 클릭하면 온습도 데이터가 갱신된다. Logout 버튼도 클릭하면 한번씩 request 를 보내므로 업데이트가 되지만 이 버튼은 홈페이지 제작 시 if 문을 사용하여 Login 페이지로 넘길 수 있도록 코딩을 유보한다.
Webserver_nodemcu_landscape_calculator_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; //온습도센서
WiFiServer server(80);
DHT11 dht11(pin);
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
int value = LOW;
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>");
client.println("body{");
client.println("background-color:lightgrey;} ");
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></head>");
client.println("<body>");
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>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 캡스톤디자인을 위한 아두이노 Procesing 코딩 목차 PDF 파일 (0) | 2012.01.04 |
|---|---|
| 아두이노 ESP8266 NodeMCU IOT(사물인터넷 ) 온습도 모니터링 스테이션 홈페이지 Login 시스템 (0) | 2012.01.03 |
| 아두이노 와이어링 & 와이파이 코딩 목차 파일 (0) | 2012.01.03 |
| Landscape 형 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기:I (0) | 2012.01.01 |
| 웹서버 속의 클라이언트 (0) | 2012.01.01 |