Отправка значений из ESP8266 на веб-страницу в режиме реального времени - PullRequest
Новая
       13

Отправка значений из ESP8266 на веб-страницу в режиме реального времени

0 голосов
/ 21 мая 2018 
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <SoftwareSerial.h>

#define MAX_SRV_CLIENTS 2

const char* ssid = "********";
const char* password = "**********";

SoftwareSerial mySerial (15, 13); //RX TX
byte message[] = {0X10, 0X03, 0X01, 0X27, 0X00, 0X01, 0X36, 0XBC};
int y = 543;

ESP8266WebServer server(80);
WiFiServer server1(80);
WiFiClient serverClients[MAX_SRV_CLIENTS];


const int led = 13;

const char index_html[] PROGMEM = {"<!DOCTYPE html>\n\n\n<html>\n<?php\n    $whole = $_GET['whole'];\n    $decimal = $_GET['decimal'];\n?>\n<body >\n<head><meta name=\"viewport\" content=\"width=device-width\"></head>\n<style media=\"screen\" type=\"text/css\">\n@import url(https://fonts.googleapis.com/css?family=Dosis:200,400,500,600);\nhtml, body { height: 100%; width:100%; overflow: hidden; }\nbody { background: #f2f2f2; background-color: lightblue; }\n\n.container { width: 300px; margin: 10px auto 0; text-align: center; padding-top: 30px; padding-left: 5%; }\n.de .den, .de .dene, .de .denem, .de .deneme { position: absolute;  left: 50%; top: 50%; }\n.de {\n    position: relative;\n    width: 240px;\n    height: 240px;\n    border-radius: 100%;\n    box-shadow: 0 0 10px rgba(0, 0, 0, .1);\n    background-color: transparent;\n}\n.den {\n    position: relative;\n    width: 210px;\n    height: 210px;\n    margin: -105px 0 0 -105px;\n    border-radius: 100%;\n    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);\n    background: #df3341;\n    background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);\n    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));\n    background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);\n    background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);\n    position:relative;\n}\n.dene {\n    width: 180px;\n    height: 180px;\n    margin: -90px 0 0 -90px;\n    border-radius: 100%;\n    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);\n    background: #f2f6f5;\n    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));\n    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);\n    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);\n}\n.denem {\n    width: 160px;\n    height: 160px;\n    margin: -80px 0 0 -80px;\n    border-radius: 100%;\n    background: #cbd5d6;\n    background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));\n    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);\n}\n\n.deneme {\n    padding: 3px 10px 0 10px;\n    width: 120px;\n    height: 137px;\n    display: inline-block;\n    margin: -70px 0 0 -70px;\n    color: #555;\n    text-shadow: 1px 1px 1px white;\n    font-family: 'Dosis';\n    font-size: 100px;\n    font-weight: 400;\n    text-align: center;\n}\n.deneme span { font-size: 30px; font-weight: 200; }\n.deneme strong { position: absolute; right: 10px; top: 25px; font-size: 34px; }\n\ninput[type=\"number\"] {\n  -webkit-appearance: textfield;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\ninput[type=number]::-webkit-inner-spin-button,\ninput[type=number]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n}\n.center {\n     \n    position: absolute;\n    margin: 20px 30px 20px;\n       \n}\n.number-input {\n \n  margin: auto;\n  border: 2px solid #ddd;\n  display: inline-flex;\n}\n\n.number-input,\n.number-input * {\n  box-sizing: border-box;\n}\n\n.number-input button {\n  outline:none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  border: none;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  cursor: pointer;\n  margin: 0;\n  position: relative;\n}\n\n.number-input button:before,\n.number-input button:after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1rem;\n  height: 2px;\n  background-color: #212121;\n  transform: translate(-50%, -50%);\n}\n.number-input button.plus:after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.number-input input[type=number] {\n  font-family: sans-serif;\n  max-width: 5rem;\n  padding: .5rem;\n  border: solid #ddd;\n  border-width: 0 2px;\n  font-size: 2rem;\n  height: 3rem;\n  font-weight: bold;\n  text-align: center;\n}\n\n\n\nh1 {\n    letter-spacing: 3px;\n    text-align: center;\n    text-transform: uppercase;\n    color: #4CAF50;\n}\n\np {\n    \n    text-align: center;\n    letter-spacing: 3px;\n}\n\na {\n    text-decoration: none;\n    color: #008CBA;\n}\n\n</style>\n\n<div>\n<h1>LWEB SERVER</h1>\n<p>ESP 8266 Test\n<a target=\"_blank\" href=\"google.com\">\"Web Stranica\"</a> </p>\n</div>\n\n<div class=\"container\">\n    <div class=\"de\">\n        <div class=\"den\">\n          <div class=\"dene\">\n            <div class=\"denem\">\n              <div class=\"deneme\">\n                <?php echo $whole; ?><span>.<?php echo $decimal; ?></span><strong>&deg;</strong>\n              </div>\n            </div>\n          </div>\n        </div>\n    \n</div>\n<div class=\"center\">\n<div class=\"number-input\">\n  <button onclick=\"this.parentNode.querySelector('input[type=number]').stepDown()\" ></button>\n  <input class=\"quantity\" min=\"0\" max=\"8\" name=\"quantity\" value=\"1\" type=\"number\">\n  <button onclick=\"this.parentNode.querySelector('input[type=number]').stepUp()\" class=\"plus\"></button>\n</div></div></div>\n</body>\n</html>\n"};

  int whole = y / 10;
  int decimal = y % 10;

void handleRoot() {
  digitalWrite(led, 1);
  server.send_P(200, "text/HTML", index_html);
  digitalWrite(led, 0);
}

void handleNotFound(){
  digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  digitalWrite(led, 0);
}

void setup(void){
  mySerial.begin(9600);
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.hostname("LCC");
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");


  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);

  server.on("/inline", [](){
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void){
 uint8_t i;
  //check if there are any new clients
  if (server1.hasClient()){
    for(i = 1; i < MAX_SRV_CLIENTS; i++){
      //find free/disconnected spot
      if (!serverClients[i] || !serverClients[i].connected()){
        if(serverClients[i]) serverClients[i].stop();
        serverClients[i] = server1.available();
        Serial.print("New client: "); Serial.print(i);
        break;
      }
    }
    //no free/disconnected spot so reject
    if ( i == MAX_SRV_CLIENTS) {
       WiFiClient serverClient = server1.available();
       serverClient.stop();
        Serial.println("Connection rejected ");
    }
  }
  //check clients for data

  if (i > 0) {
        mySerial.write(message, sizeof(message));
        delay (3000);
        }

        for(i = 0; i < MAX_SRV_CLIENTS; i++){
    if (serverClients[i] && serverClients[i].connected()){
      if(serverClients[i].available()){
        //get data from the telnet client and push it to the UART
        while(serverClients[i].available()) Serial.write(serverClients[i].read());  
      }
    }
  }
  //check UART for data
  if(mySerial.available()){
    size_t len = mySerial.available();
    uint8_t sbuf[len];
    mySerial.readBytes(sbuf, len);
    int16_t x = (sbuf[3] << 8) | sbuf[4];
    //y = (double)x;
    //push UART data to all connected telnet clients
    for(i = 0; i < MAX_SRV_CLIENTS; i++){
      if (serverClients[i] && serverClients[i].connected()){
        serverClients[i].println(x);
        //serverClients[i].write(sbuf, len);
        //Serial.println(x);
        delay(1);
      }
    }
  }


  server.handleClient();
}

И это HTML неформатированный: 

    <!DOCTYPE html>


<html>
<?php
    $whole = $_GET['whole'];
    $decimal = $_GET['decimal'];
?>
<body >
<head><meta name="viewport" content="width=device-width"></head>
<style media="screen" type="text/css">
@import url(https://fonts.googleapis.com/css?family=Dosis:200,400,500,600);
html, body { height: 100%; width:100%; overflow: hidden; }
body { background: #f2f2f2; background-color: lightblue; }

.container { width: 300px; margin: 10px auto 0; text-align: center; padding-top: 30px; padding-left: 5%; }
.de .den, .de .dene, .de .denem, .de .deneme { position: absolute;  left: 50%; top: 50%; }
.de {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    background-color: transparent;
}
.den {
    position: relative;
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    border-radius: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
    background: #df3341;
    background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
    background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    position:relative;
}
.dene {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}
.denem {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
    padding: 3px 10px 0 10px;
    width: 120px;
    height: 137px;
    display: inline-block;
    margin: -70px 0 0 -70px;
    color: #555;
    text-shadow: 1px 1px 1px white;
    font-family: 'Dosis';
    font-size: 100px;
    font-weight: 400;
    text-align: center;
}
.deneme span { font-size: 30px; font-weight: 200; }
.deneme strong { position: absolute; right: 10px; top: 25px; font-size: 34px; }

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.center {

    position: absolute;
    margin: 20px 30px 20px;

}
.number-input {

  margin: auto;
  border: 2px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
}



h1 {
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    color: #4CAF50;
}

p {

    text-align: center;
    letter-spacing: 3px;
}

a {
    text-decoration: none;
    color: #008CBA;
}

</style>

<div>
<h1>LWEB SERVER</h1>
<p>ESP 8266 Test
<a target="_blank" href="google.com">"Web Stranica"</a> </p>
</div>

<div class="container">
    <div class="de">
        <div class="den">
          <div class="dene">
            <div class="denem">
              <div class="deneme">
                <?php echo $whole; ?><span>.<?php echo $decimal; ?></span><strong>&deg;</strong>
              </div>
            </div>
          </div>
        </div>

</div>
<div class="center">
<div class="number-input">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
  <input class="quantity" min="0" max="8" name="quantity" value="1" type="number">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div></div></div>
</body>
</html>

Я пытаюсь опубликовать значения "целое" и "десятичное" на моей веб-странице из ESP8266 без обновления моей веб-страницы.
Используя AJAX или (?) PHP.

В настоящее время ничего не происходит, просто отображается пустое пространство, так как я полагаю, что не отправляю данные из ESP8266 на мою веб-страницу.Но по какой-то причине я не могу понять, как это сделать, или найти какой-то подобный пример.

Может кто-нибудь заполнить меня или отредактировать мой код, чтобы я мог вернуться в нужное русло.Я "новичок", но я как-то ладил.

...