Webserver_nodemcu_html_svg_analog_clock_smallclock_01
Webserver_nodemcu_html_svg_analog_clock_smallclock_01
#include <ESP8266WiFi.h>
const char* ssid = "android1234";//자신의 무선와이파이 공유기 id로 수정
const char* password = "dddddddddd";//자신의 무선와이파이 공유기 비빌번호로 수정
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() {
// 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);
client.flush();
// Match the request
int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, LOW);
value = HIGH;
}
// 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("<head>");
client.println("<title>Analog Clock</title>");
client.println("<script>");
client.println("function updateTime() { // Update the SVG clock");
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;");
// 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');");
// 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("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: 3px;}");
/* clock face outline */
client.println("#ticks { stroke-width: 2; }");
client.println("#smallticks { stroke:green; stroke-width: 2; }");
/* 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: black;");
client.println("}");
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'/> <!-- the smallclock face -->");
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='43'/>");
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='18'>12</text><text x='85' y='53'>3</text>");
client.println("<text x='50' y='88'>6</text><text x='15' 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("</g>");
client.println("</svg>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
'전기차 제작' 카테고리의 다른 글
| 온습도, 미세먼지 측정 및 ESP8266 NodeMCU WiFi 코딩 (0) | 2012.01.01 |
|---|---|
| 아날로그 시계+초시계+온도계 (0) | 2011.12.27 |
| 웹브라저 버튼 입력과 문자 입력 방식 혼용 (0) | 2011.12.22 |
| form 태그 이용 input 박스 입력 방식 LED 제어 (0) | 2011.12.21 |
| 웹서버 BLINKING 제어 (0) | 2011.12.07 |