Webserver_html_svg_realtime_PM_01
#include <ESP8266WiFi.h>
#include <DHT11.h>
const char* ssid = "android1234";//무선 공유기 id로 수정
const char* password = "dddddddddd";//무선 공유기 비빌번호
int ledPin = 2; //빌트인
int pin = D5; //온습도센서 GPIO 14번
int measurePin = 0; //Connect PM sensor to Arduino A0 pin
int ledPower = 16; //GPIO 16번 ㅇ0
int samplingTime = 280;
int deltaTime = 40;
int sleepTime = 9680;
float voMeasured = 0;
float calcVoltage = 0;
float dustDensity = 0;
WiFiServer server(80);
DHT11 dht11(pin);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
pinMode(ledPower,OUTPUT);// 미세먼지 센서 내부 LED
// Set WiFi to station mode and disconnect from an AP
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);
}
//미세먼지 루틴
dustDensity = particleSensing();
Serial.print("P ");
Serial.println((int)dustDensity);
// Temperature & Humidity Sensing
int err;
float temp, humi;
if((err=dht11.read(humi, temp))==0)
{
// Serial.print("temperature:");
Serial.print("C ");
Serial.println((int)temp);
// Serial.print(" humidity:");
Serial.print("H ");
Serial.print((int)humi);
Serial.println();
}
else
{
Serial.println();
Serial.print("Error No :");
Serial.print(err);
Serial.println();
}
// 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;
}
// 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>");
//배경 색 문자 색 사이즈 HTML CSS 설정
client.println("<head>");
client.println("<style>");
client.println("body {");
client.println("background-color: yellow;");
client.println("}");
client.println("p {");
client.println("color:red;");
client.println("font-size:150%;");
client.println("}");
client.println("</style>");
client.println("<title>Page Title</title>");
client.println("<h2> Arduino WiFi PM Scope</h2>");
client.println("</head>");
client.println("<body>");
client.println("<p>");
client.print(" Temperature = ");
client.print((int)temp);
client.print(" C ");
client.println("<br>");
client.print(" Humidity = ");
client.print((int)humi);
client.println(" % ");
client.println("</p>");
client.println("</body>");
client.println("<body>");
client.println("<svg height='300' width='500'>");
client.println("<rect height='300' width='500' style='fill:rgb(120,250,40);stroke-width:8;stroke:rgb(0,0,0)' />");
client.println("<rect height='250' width='500' style='fill:rgb(0,220,230);stroke-width:8;stroke:rgb(0,0,0)' />");
int val = dustDensity;
int y1 = 300-val;
for(int i=1;i<500;i++){
// 아나로그입력 생성(0-1023):1023=3.3V
int x1 = (i-1);
int x2 = i;
dustDensity = particleSensing();
if( dustDensity > 270.0 ) {
dustDensity = 270.0;
}
int val = dustDensity;
int y2 = 300-val;
client.println("<line x1='");
client.println(x1);
client.println("' y1='");
client.println(y1);
client.println("' x2='");
client.println(x2);
client.println("' y2='");
client.println(y2);
client.println("'");
client.println("' style='stroke:rgb(255,0,0);stroke-width:2' />");
client.println("Sorry, your browser does not support inline SVG.");
y1 = y2;
client.println("<rect height='40' width='70' style='fill:rgb(0,220,230);stroke-width:2;stroke:rgb(255,255,255)' />");
client.print("<text x='15' y='29' font-size='150%' fill='black' > ");
client.print(val);
client.print("</text>");
}
client.println("</svg>");
client.flush();
client.println("<br><br>");
//버튼 HTML CSS 설정
client.println("<head>");
client.println("<style>");
client.println(".button {");
// client.println("background-color: #4CAF50;");
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: 10px;");
client.println("margin: 14px 20px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("</head>");
// client.println("<a href=\"/on\"\"><button>Data Refresh </button></a><br />");
client.println("<a href=\"/on\"\" class='button'>Data Refresh </button></a>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}//loop문 끝
float particleSensing() {
digitalWrite(ledPower,LOW); // power on the LED
delayMicroseconds(samplingTime);
voMeasured = analogRead(measurePin);
delayMicroseconds(deltaTime);
digitalWrite(ledPower,HIGH); // turn the LED off
delayMicroseconds(sleepTime);
// 0 - 5V mapped to 0 - 1023 integer values
calcVoltage = voMeasured * (5.0 / 1024.0);
if( calcVoltage > 0.6 ) {
dustDensity =1000.0*( 0.172 * calcVoltage - 0.1);
// Serial.print("Digital Value(0-1023): ");
// Serial.print(voMeasured);
// Serial.print(" - V: ");
// Serial.print(calcVoltage);
Serial.print(" - Density: ");
Serial.println(dustDensity); // unit: ug/m3
// delay(1000);
delay(190);
}
return dustDensity;
}//프로그램 끝
'전기차 제작' 카테고리의 다른 글
| EV ART 클릭 전기차 제작 재돌입 (0) | 2012.07.11 |
|---|---|
| Landscape 형 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기:II (0) | 2012.01.02 |
| 아날로그 시계+초시계+온도계 (0) | 2011.12.27 |
| 아날로그 시계 내부 작은 초시계 HTML+SVG (0) | 2011.12.27 |
| 웹브라저 버튼 입력과 문자 입력 방식 혼용 (0) | 2011.12.22 |