Webserver_nodemcu_html_form_onclick_03
Webserver_nodemcu_html_form_onclick_03
#include <ESP8266WiFi.h>
const char* ssid = "android1234";//자신의 스마트폰 핫스팟 ID 입력
const char* password = "dddddddddd";//자신의 스마트폰 핫스팟 비밀번호 입력
int ledPin = 2; //
WiFiServer server(80);
String m;
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);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
if( request.substring(5,16) != "favicon.ico") {//favicon.ico request 배제
Serial.println(request);
int l = request.length();
Serial.print("String.length(request)=");
Serial.println(l);
m = request.substring(10,l-9);
Serial.println(m);
client.flush();
}
if( request.substring(5,16) != "favicon.ico") {//favicon.ico request 배제
// Match the request
// on OFF BLINK 확인
if (request.indexOf(on") != -1) {
digitalWrite(ledPin, LOW);
}
if (request.indexOf("OFF") != -1) {
digitalWrite(ledPin, HIGH);
}
if (request.indexOf("BLINK") != -1) {
for( int i = 0; i<19; i++) {
digitalWrite(ledPin, LOW);
delay(50);
digitalWrite(ledPin, HIGH);
delay(50);
}
}
// 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("input[type=text] {font-size:200%;border:7px solid black; border-radius:9dx;}");
client.println("input[type=text]:hover{background:aliceblue;}");
client.println("input[type=text]:focus{color:red; font-size:250%;}");
//버튼 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: 30px;");
client.println("margin: 14px 20px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("<title>Page Title</title>");
client.println("<h2> Type an input command among on OFF BLINK</h2>");
client.println("</head>");
client.println("<body>");
client.print("<form method='get'>");
client.print("<input type='text' name='lastname'>");
client.print("<br><br>");
client.print("<input type='button' value='Click me' onclick='msg()'>");
client.print("</form>");
client.println("<p>");
client.println("Confirm Input Data!");
client.println("<br>");
client.println(m);
client.println("</p>");
client.print("<script>");
client.print("function msg() {");
client.print("alert('Please type just numbers 0-9 & alphabets within 20 characters!');");
client.print("}");
client.print("</script>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
} //favicon.ico배제 if 문 닫기 괄호
}//프로그램 끝
'전기차 제작' 카테고리의 다른 글
| 온습도, 미세먼지 측정 및 ESP8266 NodeMCU WiFi 코딩 (0) | 2012.01.01 |
|---|---|
| 아날로그 시계+초시계+온도계 (0) | 2011.12.27 |
| 아날로그 시계 내부 작은 초시계 HTML+SVG (0) | 2011.12.27 |
| 웹브라저 버튼 입력과 문자 입력 방식 혼용 (0) | 2011.12.22 |
| 웹서버 BLINKING 제어 (0) | 2011.12.07 |