Webserver_nodemcu_html_svg_analog_clock_smallclcock_therm_01
Webserver_nodemcu_html_svg_analog_clock_smallclcock_therm_01
#include <ESP8266WiFi.h>
#include <DHT11.h>
const char* ssid = "android1234";//자신의 무선와이파이 공유기 id로 수정
const char* password = "dddddddddd";//자신의 무선와이파이 공유기 비빌번호로 수정
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); //2초마다 측정
// 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
// 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("<p>");
client.print("Led pin is now: ");
if(value == HIGH) {
client.print(on");
client.println("<br><br>");
client.print(" Temperature = ");
client.print(temp);
client.print(" Humidity = ");
client.print(humi);
} else {
client.print("OFF");
}
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>");
client.println("</p>");
client.println("</body>");
client.println("<head>");
client.println("<title>Analog Clock</title>");
client.println("<script>");
client.println("function updateTime() { // Update the SVG clock");
client.print("var temperature =");
Serial.print(temp);
client.print(temp);
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 tempangle = temperature*9;");
// 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');");
client.println("var temphand = document.getElementById('temphand');");
// 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("temphand.setAttribute('transform', 'rotate(' + tempangle + ',32,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;}");
client.println("#smallface { stroke:green; stroke-width: 1px;}");
/* clock face outline */
client.println("#ticks { stroke-width: 2; }");
client.println("#smallticks { stroke:green; stroke-width: 1; }");
/* lines that mark each hour */
client.println("#hourhand {stroke-width: 5px;}");
/* wide hour hand */
client.println("#minutehand {stroke:deepskyblue; stroke-width: 3px;} /* narrow minute hand */");
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("#thermometer { stroke: black; stroke-linecap: round; fill: #eef; } ");
client.println("#thermometerface { stroke:purple stroke-width: 1px;}");
client.println("#thermometerticks_thick { stroke:red; stroke-width: 1px; }");
client.println("#temphand {stroke:blue; stroke-width: 1px;}");
client.println("#smallnumbers { font-family: sans-serif; font-size: 3pt; font-weight: bold; ");
client.println("text-anchor: middle; stroke: none; fill: red; }");
client.println("</style>");
client.println("</head>");
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='500' height='500'>");
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'/>");
client.println("<circle id='thermometerface' cx='32' cy='50' r='10'/>");
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("<!-- 160second tick marks -->");
client.println("<line x1='50' y1='24' x2='50.00' 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='16'>12</text><text x='87' y='53'>3</text>");
client.println("<text x='50' y='90'>6</text><text x='13' 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("<line id='temphand' x1='32' y1='50' x2='32' y2='42'/>");
client.println("</g>");
client.println("<g id='thermometerticks_thick'>");
client.println(" <!-- 30 degree tick marks --> ");
client.println("<line x1='32' y1='42' x2='32' y2='40'/>");
client.println(" <line x1='40' y1='50' x2='42' y2='50'/>");
client.println("<line x1='32' y1='58' x2='32' y2='60'/>");
client.println("<line x1='24' y1='50' x2='22' y2='50'/>");
client.println(" </g>");
client.println("<g id='smallnumbers'>");
client.println("<!-- Number the cardinal directions-->");
client.println("<text x='32' y='38'>0</text><text x='45' y='51'>10</text>");
client.println("<text x='32' y='65'>20</text><text x='19' y='51'>30</text>");
client.println("</g>");
client.println("</svg>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝
'전기차 제작' 카테고리의 다른 글
| Landscape 형 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기:II (0) | 2012.01.02 |
|---|---|
| 온습도, 미세먼지 측정 및 ESP8266 NodeMCU WiFi 코딩 (0) | 2012.01.01 |
| 아날로그 시계 내부 작은 초시계 HTML+SVG (0) | 2011.12.27 |
| 웹브라저 버튼 입력과 문자 입력 방식 혼용 (0) | 2011.12.22 |
| form 태그 이용 input 박스 입력 방식 LED 제어 (0) | 2011.12.21 |