삼색 LED 인터럽트 배선을 대상으로 아두이노 NodeMCU 웹서버 프로그램을 개량하여
스마트폰에서 주소창에 가상ip를 입력하여 request가 발생되어 아두이노 NodeMCU에 송출되면 삼색 LED가 천천히 Blue, Green, Red 순으로 on OFF 됨과 동시에 스마트폰 화면에서 BGR 순으로 HTML SVG언어를 사용하여 교통 신호등처럼 컬러풀하게 켜지는 프로그램을 제시하도록 한다. 그 하단에 on OFF 스위치가 있어 NodeMCU의 built-in LED 2번을 on OFF 할 수 있음과 아울러 LED 2번 on OFF 시 삼색 LED도 한번씩 주기적으로 on OFF 시키는 프로그램이다.
지난번 삼색 LED 배선에서 인터럽트를 발생시키는 스위치를 사용하지 않으며 setup()에서도 att
스마트폰에서 원치 않는 favicon request가 송출되므로 request에 담긴 문자열의 수를 체크하여 건너 뛰어 favicon request를 배제하도록 프로그램 하였다.
이 예제의 수준을 가늠해 본다면 현재 제대로 된 입출력 디바이스가 없는 아두이노 NodeMCU에서 출력을 시리얼 모니터 말고도 스마트폰 웹브라우저로 충분히 대체할 수 도 있으며 더 나아가 스마트폰 웹브라우저에 키보드를 그래픽 터치하여 입력할 수 있는 가능성을 엿볼 수 있을 것이다.
!!!지난번에 잘못된 프로그램을 올려 다시 찾아서 제대로 된 프로그램을 올렸습니다.
Webserver_nodemcu_html_svg_3color_LED_request_01
#include <ESP8266WiFi.h>
byte LED[3] {16,5,4}; //D0,D1,D2
const char* ssid = "AndroidHotspot1234";//자신의 스마트폰 핫스팟 ID 입력
const char* password = "00000000";//자신의 스마트폰 핫스팟 비밀번호 입력
int ledPin = 2; //
WiFiServer server(80);
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() {
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.print("new client: ");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
Serial.print("String.length(request)=");
Serial.println(request.length());
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;
}
// favicon.ico request 가 들어오면 배제
if( request.substring(5,16) != "favicon.ico") {
// 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>");
byte i;
for(i=0; i<3;i++){
client.println("<svg width='100' height='100'>");
client.println("<circle cx='50' cy='50' r='40' stroke='black' stroke-width='4' fill='");
pinMode(LED[i],OUTPUT);
digitalWrite(LED[i],HIGH);
if( i == 0 ) {
client.println("blue");
}
if( i == 1 ) {
client.println("green");
}
if( i == 2 ) {
client.println("red");
}
delay(1000);
digitalWrite(LED[i],LOW);
Serial.println(i);
client.println("'/></svg>");
}
client.println("<br><br>");
client.println("<a href=\"/LED=ON\"\"><button> Turn on </button></a>");
client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a><br />");
// client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
}//끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 NodeMCU 웹서버 문자열 입력 스마트폰 HTML 웹 버튼 키보드:II (0) | 2017.02.23 |
|---|---|
| 아두이노 NodeMCU 웹서버용 스마트폰 HTML 웹 버튼 키보드:I (0) | 2017.02.22 |
| 웹의 불필요한 favicon request에 따른 아두이노 NodeMCU 웹서버의 반응과 대책 (0) | 2017.02.22 |
| 아두이노 NodeMCU에서 그림파일 불러오는 HTML img 태그 사용법 (0) | 2017.02.20 |
| 삼색 LED에 의한 아두이노 NodeMCU에서 인터럽트 가능한 핀 확인 실험 (0) | 2017.02.18 |