아두이노 NodeMCU 보드의 빌트인 LED 와 DHT 온도센서를 사용하는 IOT 코딩을 Java Script의 속성 변경 기능을 사용하여 개량하기로 하자. 기존의 IOT 웹서버 코딩에서는 on 과 OFF 두 개의 버튼 키를 제공한다. on 버튼을 누르면 빌트인 LED가 on 되고 동시에 DHT11 센서에 의해 측정된 데이터가 웹서버 코딩에 의해 와이파이에 의해 연결된 스마트폰이나 PC에 출력된다.
이와 같은 기능의 IOT 코딩에 on 버튼 클릭 시 다음과 같은 노란 색 Lamp on 그래픽을 띄우도록 한다. 반면에 OFF 버튼 클릭 시에는 회색 Lamp OFF 그래픽을 띄우도록 하자.
이 그래픽 이미지들은 WWW.3SCHOOLS.COM 의 Java Script Introduction 에 소개된 예제에서 복사하여 본 블로그에 사진으로 저장하였다.
ON OFF 버튼 클릭 시 클라이언트 화면에서 이 두 가지 그래픽을 비쥬얼하게 보기 위해서는 url 주소를 부여하여 불러 올 필요가 있으며 그림에서 볼 수 있듯이 url 주소를 아래의 블로그 주소에서 직접 확인해 보기 바란다.
자바스크립트램프ON/OFF그림파일
http://blog.daum.net/ejleep1/401
ON 또는 OFF 버튼 클릭 시에 
하늘색 박스 친 부분이 수정된 버튼 코딩이다. onClick 속성과 함께 그림 파일이 소스(src)로 저장되어 있는 url 주소를 수반한다. 아울러 붉은 색 밑 줄 그은 부분은 Turn on 버튼 다음 위치에 on 또는 OFF 그래픽을 불러내기 전에 OFF 상태의 그래픽을 위치시키도록 한다.
ON을 클릭하느냐 아니면 OFF를 클릭하느냐에 따라서 일종의 속성인 src 가 변하게 되는 것이다.
onClick 하면 그림과 같이 램프 on OFF 그래픽이 잠깐 나타나는데 그 시간을 늘리기 위해서는 후반에 적절한 시간 지연 요소를 넣으면 된다.
아울러 on 시 온습도 데이터가 갱신되는데 이때에는 그래픽이 결정되기 전이기 때문에 배꼽으로 그랙픽 됨에 주의하기 바란다. 이는 에러는 아니고 onClick 하게되면 그래픽이 나타나는 장소를 뜯한다.
Java Script 하면 웹브라우저 화면에서 뭔가를 클릭할 경우 잠깐 동안 주의나 경고를 발하는 용도로 흔히 사용되는데 이와 유사하게 클릭 시에 필요한 그래픽을 잠깐 불러다 줄 수 있도록 응용해 보는 사례이다.
Webserver_NodeMCU_IOT_JavaScript_01
#include <ESP8266WiFi.h>
#include <DHT11.h> //라이브러리 불러오기
const char* ssid = "android1234";
const char* password = "dddddddddd";
int pin = D5; //온습도 센서
int ledPin = 2; //
WiFiServer server(80);
DHT11 dht11(pin);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
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); //2초마다 측정
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
if( request.substring(5,16) != "favicon.ico") {
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("<head>");
//배경 색 문자 색 사이즈 HTML CSS 설정
client.println("<style>");
client.println("body {");
client.println("background-color: lightblue;");
client.println("}");
client.println("p {");
client.println("color:blue;");
client.println("font-size:250%;");
client.println("}");
//버튼 HTML CSS 설정
client.println(".button {");
client.println("background-color: green;");
client.println("border: none;");
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: 20px;");
client.println("margin: 14px 20px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println("<p>");
client.print("Built-in Led is now: ");
if(value == HIGH) {
client.print(on");
client.print("<br><br>");
client.print(" Temperature = ");
client.print((int)temp);
client.print(" deg C ");
client.print("<br>");
client.print(" Rel Humidity = ");
client.print((int)humi);
client.print(" % ");
} else {
client.print("OFF");
}
client.println("<br>");
client.println("<a href=\"/LED=ON\"\" class='button' onclick=\"document.getElementById('myImage').
src='https://t1.daumcdn.net/cfile/blog/214A383F5921314130?original'\">Turn on </button></a>");
client.println("<img id=\"myImage\" src=\"https://t1.daumcdn.net/cfile/blog/2240CA425921315627?originalh\"
style=\"width:100px\">");
client.println("<a href=\"/LED=OFF\"\" class='button' onclick=\"document.getElementById('myImage').
src='https://t1.daumcdn.net/cfile/blog/2240CA425921315627?original'\">Turn Off </button></a>");
client.println("</p>");
client.println("</body>");
client.println("</html>");
delay(3000);
Serial.println("Client disonnected");
Serial.println("");
}// if문 괄호 닫기
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| BCM 넘버링과 무한 반복 명령 while True:를 사용하는 라즈베리 파이3 파이선 LED ON OFF 코딩 (0) | 2017.05.24 |
|---|---|
| 초보자를 위한 아두이노 DigitalReadSerial, Button 과 DigitalInputPullup 예제 (0) | 2017.05.22 |
| 아두이노 NodeMCU 의 그래픽 7 세그먼트에 의한 DHT11 온습도 디스플레이 (0) | 2017.05.20 |
| 초보자를 위한 아두이노 NodeMCU 웹서버 그래픽 4 디지트 7 세그먼트 디스플레이 (0) | 2017.05.18 |
| 아두이노 온습도, 미세먼지 측정 및 ESP8266 NodeMCU WiFi 코딩 요약 (0) | 2017.05.16 |