무선와이파이 코딩을 통해 스마트폰이나 무선 공유기가 설치된 PC 의 웹브라우저에서 아두이노 NodeMCU 보드의 DHT11 온습도 센서의 측정 결과를 웹서버 코딩에 의해 FND (Finite Numeric Display)로 그래픽 출력 처리해보자. 온습도 센서 DHT11의 디지털 데이터 선 배선은 이전 예제에서처럼 D5 로 하기로 한다.
온습도 측정 결과를 FND 로 출력할 경우 출력 자리 수가 4 디지트로 제한된다. 그러므로 프로그램에서 정수형 변수 d4에 해당하는 제일 왼쪽 디지트는 온도일 경우 섭씨를 의미하는 대문자 C를 출력하고 반면에 습도일 경우에는 H를 출력하기로 한다. 그 다음 정수형 변수 d3에 해당하는 세 번째 디지트는 온도든 습도든 다 두 자리 수 변수 이므로 아무것도 없는 블랭크로 처리해야 한다. 아래에 이 두 변수 P 와 H 그리고 블랭크에 대한 16진 표현을 위한 예제 설명을 참조하자.
그 첫 번째 데이터인 0X8C 예를 살펴보자. 0X는 단지 16진법 또는 Hexa를 뜻한다. 16진법에서 8은 십진법으로도 8에 해당하는데 2진법의 비트 단위로 풀어서 표현하면 8 = 1X2^3+0X2^2+0X2^1+0X2^0 이 된다. 앞 계수를 따내어 정리하면 1000이 된다. 아울러 16진법의 C는 십진법으로 12 이며 2진법으로 1100 이 된다. 즉 16진법의 8C는 2진법으로 1000 1100 이 된다. 이 이진 비트 정보를 7 세그먼트의 각 세그먼트와 대응시켜 보자.
0 0 1 1 0 0 0 1
---------------
H G F E D C B A
즉 AEF 세그먼트를 OFF로 그래픽 처리하고 BCDGH 세그먼트를 on 그래픽 처리하면 결과는 “P”를 보여주게 된다.
두 번째로 0X80 예를 살펴보자. 16진 89의 이진 비트 표현은 다음과 같다.
16진 8 = 10진 1X2^3+0X2^2+0X2^1+0X2^0 =2진 1000
16진 9 = 10진 1X2^3+0X2^2+0X2^1+1X2^0 =2진 1001
1 0 0 1 0 0 0 1
---------------
H G F E D C B A
즉 BCDFG 세그먼트를 on으로 그래픽 처리하고 AEH세그먼트를 OFF 그래픽 처리하면 결과는 “H”를 보여주게 된다.
세 번째로 0XFF 예를 살펴보자. 16진 FF의 이진 비트 표현은 다음과 같다.
16진 F = 10진 1X2^3+1X2^2+1X2^1+1X2^0 =2진 1111
16진 F = 10진 1X2^3+1X2^2+1X2^1+1X2^0 =2진 1111
1 1 1 1 1 1 1 1
---------------
H G F E D C B A
즉 ABCDEFGH 세그먼트 모두를 OFF 그래픽 처리하면 결과는 “ ”를 보여주게 된다.
이러한 결과를 FND_DATA[] 어레이에 빨간 박스친 내용과 같이 코드를 업데이트 해 둔다.
그 다음에 두 자리 수인 온습도 데이터를 디지트 별로 처리하여 정수형 변수 d2 와 d1 에 저장한다.
한 번에 온도면 온도 습도면 습도를 한 번씩 디스플레이 하도록 하자. 따라서 프로그램 시작 위치에 불리언 변수 T 를 true 로 설정한다.
무선 와이파이 코딩 부분 설명은 생략
불리언 변수 T 가 true 일때는 온도 데이터를 출력하고 2초간 시간을 지연한다.
다시 습도 데이터를 모니터링 하려면 웹서버 코딩의 Refresh 버튼 키를 누른 다음 프로그램의 끝 부분에서 T 의 값을 false 로 설정한 후 다시 loop를 돈다.
보다 연속적으로 되풀이 하여 온습도를 모니터링하려면 같은 위치에서 for loop 코딩 기법을 쓰면 된다, 예를 들어 1000 회 정도 온습도를 모니터링한 후 버튼 키로 계속할 것인지 request 하도록 코딩하면 된다.
Webserver_NodeMCU_IOT_key_7segment_DHT11_07
#include <ESP8266WiFi.h>
#include <DHT11.h>
const char* ssid = "android1234";
const char* password = "dddddddddd";
byte FND_DATA[] = {0XC0,0XF9,0XA4,0XB0,0X99,0X92,0X82,0XD8,0X80,0X90,0X88,0X83,
0XC6,0XA1,0X86,0X8E,0XF7,0X7F,0X8C,0X89,0XFF};//0X8C:P 0X89:H 0XFF:" "빈칸
int pin = D5; //온습도센서
WiFiServer server(80);
DHT11 dht11(pin);
int d,d1,d2,d3,d4;
boolean T = true;
void setup() {
Serial.begin(115200);
delay(10);
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');
Serial.println(request);
// favicon.ico request는 중복이므로 건너 뛰도록 프로그램 한다.
if(request.substring(5,16) != "favicon.ico") {
client.flush();
// 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:red;");
client.println("font-size:250%;");
client.println("}");
//버튼 HTML CSS 설정
client.println(".button {");
client.println("background-color: white;");
client.println("border: solid;");
client.println("color: black;");
client.println("padding: 15px 32px;");
client.println("text-align: center;");
client.println("text-decoration: none;");
client.println("display: inline-block;");
client.println("font-size: 50px;");
client.println("margin: 2px 2px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("<title>Page Title</title>");
client.println("<h1> Arduino NodeMCU WiFi </h1>");
client.println("<h1> Temp & Humidity </h1>");
client.println("</head>");
// Temperature & Humidity Sensing
int err;
float temp, humi;
if((err=dht11.read(humi, temp))==0) {//온도, 습도 읽기
if( T == true ) {
Serial.print("temperature:");
Serial.print(temp);
d4 = 12;// C:섭씨온도
d3 = 20; //3rd digit blank
d2 = temp/10;
d1 = temp-d2*10;
delay(2000);
}
else {
Serial.print(" humidity:");
Serial.print(humi);
d4 = 19; //H:상대습도
d3 = 20; //3rd digit blank
d2 = humi/10;
d1 = humi-d2*10;
delay(2000);
Serial.println();
}
}
else {
Serial.println();
Serial.print("Error No :");
Serial.print(err);
Serial.println();
}
client.println("<body>");
client.println("<p>");
// segment display on smartphone webbrowser
client.println("<svg viewbox=' 0 0 1200 300' height='100' width='400'>");
for(int z=0; z<8; z++) {
// First Digit
if( z == 0 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='50,50 60,40 190,40 200,50 190,60 60,60' style='fill:red;stroke:black;stroke-width:3' />");} //A
if( z == 1 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='200,55 210,65 210,135 200,145 190,135 190,65' style='fill:red;stroke:black;stroke-width:3' />");} //B
if( z == 2 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='200,155 210,165 210,235 200,245 190,235 190,165' style='fill:red;stroke:black;stroke-width:3' />");} //C
if( z == 3 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='50,250 60,240 190,240 200,250 190,260 60,260' style='fill:red;stroke:black;stroke-width:3' />");} //D
if( z == 4 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='50,155 60,165 60,235 50,245 40,235 40,165' style='fill:red;stroke:black;stroke-width:3' />");} //E
if( z == 5 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='50,55 60,65 60,135 50,145 40,135 40,65' style='fill:red;stroke:black;stroke-width:3' />");} //F
if( z == 6 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='50,150 60,140 190,140 200,150 190,160 60,160' style='fill:red;stroke:black;stroke-width:3' />");} //G
if( z == 7 && bitRead(FND_DATA[d4],z) == 0) {client.println("<polygon points='205,250 215,240 225,240 235,250 225,260 215,260' style='fill:red;stroke:black;stroke-width:3' />");} //H
// Third Digit
if( z == 0 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='350,50 360,40 490,40 500,50 490,60 360,60' style='fill:red;stroke:black;stroke-width:3' />");} //A
if( z == 1 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='500,55 510,65 510,135 500,145 490,135 490,65' style='fill:red;stroke:black;stroke-width:3' />");} //B
if( z == 2 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='500,155 510,165 510,235 500,245 490,235 490,165' style='fill:red;stroke:black;stroke-width:3' />");} //C
if( z == 3 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='350,250 360,240 490,240 500,250 490,260 360,260' style='fill:red;stroke:black;stroke-width:3' />");} //D
if( z == 4 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='350,155 360,165 360,235 350,245 340,235 340,165' style='fill:red;stroke:black;stroke-width:3' />");} //E
if( z == 5 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='350,55 360,65 360,135 350,145 340,135 340,65' style='fill:red;stroke:black;stroke-width:3' />");} //F
if( z == 6 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='350,150 360,140 490,140 500,150 490,160 360,160' style='fill:red;stroke:black;stroke-width:3' />");} //G
if( z == 7 && bitRead(FND_DATA[d3],z) == 0) {client.println("<polygon points='505,250 515,240 525,240 535,250 525,260 515,260' style='fill:red;stroke:black;stroke-width:3' />");} //H
// Second Digit
if( z == 0 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='650,50 660,40 790,40 800,50 790,60 660,60' style='fill:red;stroke:black;stroke-width:3' />");} //A
if( z == 1 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='800,55 810,65 810,135 800,145 790,135 790,65' style='fill:red;stroke:black;stroke-width:3' />");} //B
if( z == 2 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='800,155 810,165 810,235 800,245 790,235 790,165' style='fill:red;stroke:black;stroke-width:3' />");} //C
if( z == 3 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='650,250 660,240 790,240 800,250 790,260 660,260' style='fill:red;stroke:black;stroke-width:3' />");} //D
if( z == 4 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='650,155 660,165 660,235 650,245 640,235 640,165' style='fill:red;stroke:black;stroke-width:3' />");} //E
if( z == 5 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='650,55 660,65 660,135 650,145 640,135 640,65' style='fill:red;stroke:black;stroke-width:3' />");} //F
if( z == 6 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='650,150 660,140 790,140 800,150 790,160 660,160' style='fill:red;stroke:black;stroke-width:3' />");} //G
if( z == 7 && bitRead(FND_DATA[d2],z) == 0) {client.println("<polygon points='805,250 815,240 825,240 835,250 825,260 815,260' style='fill:red;stroke:black;stroke-width:3' />");} //H
// First Digit
if( z == 0 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='950,50 960,40 1090,40 1100,50 1090,60 960,60' style='fill:red;stroke:black;stroke-width:3' />");} //A
if( z == 1 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='1100,55 1110,65 1110,135 1100,145 1090,135 1090,65' style='fill:red;stroke:black;stroke-width:3' />");} //B
if( z == 2 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='1100,155 1110,165 1110,235 1100,245 1090,235 1090,165' style='fill:red;stroke:black;stroke-width:3' />");} //C
if( z == 3 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='950,250 960,240 1090,240 1100,250 1090,260 960,260' style='fill:red;stroke:black;stroke-width:3' />");} //D
if( z == 4 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='950,155 960,165 960,235 950,245 940,235 940,165' style='fill:red;stroke:black;stroke-width:3' />");} //E
if( z == 5 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='950,55 960,65 960,135 950,145 940,135 940,65' style='fill:red;stroke:black;stroke-width:3' />");} //F
if( z == 6 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='950,150 960,140 1090,140 1100,150 1090,160 960,160' style='fill:red;stroke:black;stroke-width:3' />");} //G
if( z == 7 && bitRead(FND_DATA[d1],z) == 0) {client.println("<polygon points='1105,250 1115,240 1125,240 1135,250 1125,260 1115,260' style='fill:red;stroke:black;stroke-width:3' />");} //H
}//for loop 끝
client.println("</svg>");
// Key board input
client.println("<br><br>");
client.println("<a href=\"/KEY=1\"\" class='button'> Renew </button></a>");
//
client.println("</p>");
client.println("</body>");
client.println("</html>");
if( T == true ) {
T = false;
}
else {
T = true;
}
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}// if(request.substring(5,16) 문 괄호 닫기
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 초보자를 위한 아두이노 DigitalReadSerial, Button 과 DigitalInputPullup 예제 (0) | 2017.05.22 |
|---|---|
| 아두이노 ESP8266 NodeMCU IOT(사물인터넷) Java Script 그래픽 와이파이 코딩 (0) | 2017.05.21 |
| 초보자를 위한 아두이노 NodeMCU 웹서버 그래픽 4 디지트 7 세그먼트 디스플레이 (0) | 2017.05.18 |
| 아두이노 온습도, 미세먼지 측정 및 ESP8266 NodeMCU WiFi 코딩 요약 (0) | 2017.05.16 |
| 초보자를 위한 라즈베리 파이3 파이선 LED ON OFF 코딩 (0) | 2017.05.13 |