#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>°</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>°</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 на мою веб-страницу.Но по какой-то причине я не могу понять, как это сделать, или найти какой-то подобный пример.
Может кто-нибудь заполнить меня или отредактировать мой код, чтобы я мог вернуться в нужное русло.Я "новичок", но я как-то ладил.