카테고리 없음

아두이노 nodemcu HTML/JavaScript 계산기

coding art 2011. 12. 27. 18:50
728x90

Webserver_nodemcu_calculator_01



Webserver_nodemcu_calculator_01

 #include <ESP8266WiFi.h>

 const char* ssid = "android1234";
 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;
   }
   if (request.indexOf("/LED=OFF") != -1)  {
     digitalWrite(ledPin, HIGH);
     value = LOW;
   }

 // Set ledPin according to the request
 //digitalWrite(ledPin, value);

   // 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("<style>");
client.print("body{");
client.print("background-color:tan;} ");
client.print(".box{");
client.print("background-color:#3d4543;");
client.print("height:350px;");
client.print("width:250px;");
client.print("border-radius:10px;");
client.print("position:relative;");
client.print("top:50px;");
client.print("left:5%;} ");
client.print(".display{");
client.print("background-color:#222;");
client.print("width:220px;");
client.print("position:relative;");
client.print("left:15px;");
client.print("top:20px;");
client.print("height:40px;}");
client.print(".display input{");
client.print("position:relative;");
client.print("left:2px;");
client.print("top:2px;");
client.print("height:35px;");
client.print("color:black;");
client.print("background-color:#bccd95;");
client.print("font-size:21px;");
client.print("text-align:right;}");
client.print(".keys{");
client.print("position:relative;");
client.print("top:15px;}");
client.print(".button{");
client.print("width:40px;");
client.print("height:30px;");
client.print("border:none;");
client.print("border-radius:8px;");
client.print("margin-left:17px;");
client.print("cursor:pointer;");
client.print("border-top:2px solid transparent;}");
client.print(".button.gray{");
client.print("color:white;");
client.print("background-color:#6f6f6f;");
client.print("border-bottom:black 2px solid;");
client.print("border-top:2px #6f6f6f solid;}");
client.print(".button.pink{");
client.print("color:black;");
client.print("background-color:#ff4561;");
client.print("border-bottom:black 2px solid;}");
client.print(".button.blue{");
client.print("color:white;");
client.print("background-color:303030;");
client.print("border-bottom:black 2px solid;");
client.print("border-top:2px 303030 solid;}");
client.print(".button.orange{");
client.print("color:black;");
client.print("background-color:FF9933;");
client.print("border-bottom:black 2px solid;");
client.print("border-top:2px FF9933 solid;}");
client.print(".gray:active{");
client.print("border-top:black 2px solid;");
client.print("border-bottom:2px #6f6f6f solid;}");
client.print(".pink:active{");
client.print("border-top:black 2px solid;");
client.print("border-bottom:#ff4561 2px solid;}");
client.print(".black:active{");
client.print("border-top:black 2px solid;");
client.print("border-bottom:#303030 2px solid;}");
client.print(".orange:active{");
client.print("border-top:black 2px solid;");
client.print("border-bottom:FF9933 2px solid;}");
client.print("p{");
client.print("line-height:10px;}");
client.print("</style>");
client.print("</head>");
client.print("<body>");

client.print("<div class='box'>");
client.print("<div class='display'><input type='text' readonly size='18' id='d'></div>");
client.print("<div class='keys'>");


  client.print("<p><input type='button' class='button gray' value='Pi' onClick='v(\"3.14\")'>");
  client.print("<input type='button' class='button gray' value='(' onClick='v(\"(\")'>");
  client.print("<input type='button' class='button gray' value=')' onClick='v(\")\")'>");
  client.print("<input type='button' class='button pink' value='/' onClick='v(\"/\")'></p>");
  client.print("<p><input type='button' class='button gray' value='7' onClick='v(\"7\")'>");
  client.print("<input type='button' class='button gray' value='8' onClick='v(\"8\")'>");
  client.print("<input type='button' class='button gray' value='9' onClick='v(\"9\")'>");
  client.print("<input type='button' class='button pink' value='*' onClick='v(\"*\")'></p>");
  client.print("<p><input type='button' class='button gray' value='4' onClick='v(\"4\")'>");
  client.print("<input type='button' class='button gray' value='5' onClick='v(\"5\")'>");
  client.print("<input type='button' class='button gray' value='6' onClick='v(\"6\")'>");
  client.print("<input type='button' class='button pink' value='-' onClick='v(\"-\")'></p>");
  client.print("<p><input type='button' class='button gray'value='1' onClick='v(\"1\")'>");
  client.print("<input type='button' class='button gray' value='2' onclick='v(\"2\")'>");
  client.print("<input type='button' class='button gray' value='3' onclick='v(\"3\")'>");

  client.print("<input type='button' class='button pink' value='+' onclick='v(\"+\")'></p>");
  client.print("<p><input type='button' class='button gray' value='0' onclick='v(\"0\")'>");
  client.print("<input type='button' class='button gray' value='.' onclick='v(\".\")'>");
  client.print("<input type='button' class='button gray' value='C' onclick='c(\"\")'>");
  client.print("<input type='button' class='button orange' value='=' onclick='e()'></p>");
  client.print("<p><input type='button' class='button gray' value='sin' onclick='v(\"Math.sin\")'>");
  client.print("<input type='button' class='button gray' value='cos' onclick='v(\"Math.cos\")'>");
  client.print("<input type='button' class='button gray' value='tan' onclick='v(\"Math.tan\")'>");
  client.print("<input type='button' class='button gray' value='log' onclick='v(\"Math.log\")'></p>");

client.print("</div>");
client.print("</div>");

client.print("<script type='text/javascript'>");
client.println("function c(val){");
client.println("document.getElementById('d').value=val;}");
client.println("function v(val){");
client.println("document.getElementById('d').value+=val;}");
client.println("function e() { ");
client.println("try { ");
  client.println("c(eval(document.getElementById('d').value)) } ");
client.println("catch(e) {");
 client.println(" c('Error') } }  ");
client.println("</script>");
client.println("</body>");

   client.println("</html>");
   delay(1);
   Serial.println("Client disonnected");
   Serial.println("");

 }//프로그램 끝