Проблема с HTML-кодом в ESP8266 WebServer

Question

Проблема с HTML-кодом в ESP8266 WebServer

esp8266 web-server http ws2812

У меня есть небольшая проблема:

У меня есть ESP8266, к которому я подключил матрицу светодиодов для перемещения текста (матрица светодиодов сделана из ленты светодиодов с возможностью адресации ws2812); когда вы включаете компьютер, вы создаете точку доступа с Captive Portal, который переносит вас в небольшой (хотя все еще уродливый) веб-интерфейс, где я могу управлять как отображаемым текстом, так и его скоростью, интенсивностью и цветами. Хорошо, все работает... Я знаю, что мне еще нужно изменить несколько вещей в "коде" html, чтобы все работало правильно, но я ненавижу CSS, и прямо сейчас он работает.

Пример страницы

Проблема заключается в следующем:

У меня есть несколько html-форм, которые собирают значения переменных, упомянутых выше (текст для отображения, цвет, яркость и скорость, с которой отображается текст), но каждый раз, когда я нажимаю кнопку «Отправить», браузер (я пробовал только браузер, который идет в комплекте с моим телефоном (Xiaomi Redmi Note 4, приложение называется Browser) и браузер Google на том же телефоне) переносит меня на экран (я оставляю скриншот), где он показывает мне html-код страницы, которая находится в esp8266. И что меня беспокоит, так это почему!? Почему это происходит!? (Я также оставляю копию кода в конце!)

Браузер Браузер Google

Единственное, что приходит мне в голову, это то, что я сохраняю страницу в переменной типа String (объект String, а не массив символов)... кто-нибудь знает, что происходит?

Копия кода:

//++++++++++++++++++++++++++++++++++++++++++++++//
//                LIBRERIAS                     //
//++++++++++++++++++++++++++++++++++++++++++++++//
        /*WiFi*/
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

        /*SSID and Password of your WiFi router*/
const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 1, 1);
DNSServer dnsServer;
ESP8266WebServer server(80);
const char* ssid = "asd";
const char* password = "123456789";

String responseHTML = ""
  "<!DOCTYPE html><html><head><title>CaptivePortal</title></head><body>"
  "<h1>Hello World!</h1><p>This is a captive portal example. All requests will "
  "be redirected here.</p></body></html>";

//++++++++++++++++++++++++++++++++++++++++++++++//
//                  MATRIZ                      //
//++++++++++++++++++++++++++++++++++++++++++++++//  
        /*LedStrip*/
#include <FastLED.h>
#include <LEDMatrix.h>
#include <LEDText.h>
#include <FontMatrise.h>


#define LED_PIN        2
#define COLOR_ORDER    GRB
#define CHIPSET        WS2812B
#define MATRIX_WIDTH   -8
#define MATRIX_HEIGHT  7
#define MATRIX_TYPE    HORIZONTAL_ZIGZAG_MATRIX

  /*Creando instancias de la matriz y el objeto*/
cLEDMatrix<MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_TYPE> leds;
cLEDText ScrollingMsg;


    /*Texto a mostrar y colores*/
char buf[200] = "HOME";
byte red = 255;
byte green = 255;
byte blue = 0;
byte intensity = 25;
byte intensity_old = 25;
int fastness = 300;

//++++++++++++++++++++++++++++++++++++++++++//
//                 Index                    //
//++++++++++++++++++++++++++++++++++++++++++//
String getPage(){
  String page = "<!DOCTYPE HTML>";
  page += "<html>";
  page += "<head>";
  page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0 maximum-scale = 1.0, user-scalable=0\">";
  page += "<title>Cartel Led</title>";
  page += "<style>";
  page += "\"body { background-color: #808080; font-family: Arial, Helvetica, Sans-Serif; Color: #000000; }\"";
  page += "</style>";
  page += "</head>";
  page += "<body>";
  page += "<h1>Página de configuración del Cartel Led </h1>";

  //Formulario para cartel
  page += "<FORM action=\"/\" method=\"post\">";
  page += "Introduzca texto a mostrar:<br>";
  page += "<input type=\"text\" name=\"texto\" id=\"texto\" value=\"Mickey\">";
  page += "<br>";
  page += "<input type=\"submit\" value=\"Enviar\">";
  page += "</form>";
  page += "<br>";
  page += "<br>";
  page += "<br>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "Elija el color:<br>";
  page += "<input type=\"range\" min=\"0\" max=\"255\" id=\"red\" name=\"red\" value=\"";
  page += red;
  page +="\" class=\"slider\"> <br>";
  page += "<input type=\"range\" min=\"0\" max=\"255\" id=\"green\" name=\"green\" value=\"";
  page += green;
  page +="\" class=\"slider\"> <br>";
  page += "<input type=\"range\" min=\"0\" max=\"255\" id=\"blue\" name=\"blue\" value=\"";
  page += blue;
  page +="\" class=\"slider\"> <br>";
  page += "<input type=\"submit\" value=\"Enviar\">";
  page += "</form>";
  page += "<br>";
  page += "<br>";
  page += "<br>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "Elija la intensidad :<br>";
  page += "<input type=\"range\" min=\"10\" max=\"255\" id=\"intensity\" name=\"intensity\" value=\"";
  page += intensity;
  page +="\" class=\"slider\"> <br>";
  page += "<input type=\"submit\" value=\"Enviar\">";
  page += "<br>";
  page += "<br>";
  page += "<br>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "Elija la rapidez: <br>";
  page += "<input type=\"range\" min=\"50\" max=\"1000\" id=\"fastness\" name=\"fastness\" value=\"";
  page += fastness;
  page +="\" class=\"slider\"> <br>";
  page += "<input type=\"submit\" value=\"Enviar\">";
  page += "<br>";
  page += "<br>";
  page += "<br>";


  page += "</body>";
  page += "</html>";
  return page;
  }




//++++++++++++++++++++++++++++++++++++++++++//
//          REDIRECCIONAMIENTO             //
//++++++++++++++++++++++++++++++++++++++++++//
void handleNotFound(){
  server.send(200, "text/html", getPage());
}


//++++++++++++++++++++++++++++++++++++++++++//
//      handleSubmit                        //
//++++++++++++++++++++++++++++++++++++++++++//
void handleSubmit(){
  //Text to show
  if (server.hasArg("texto")){
      String texto_string = server.arg("texto");
      int texto_string_size = (texto_string.length()+1);
      texto_string.toCharArray(buf, texto_string_size);
      Serial.print("El texto a mostrar sera:");
      Serial.println(buf);
      }
  //Colors
  if (server.hasArg("red")){
      String red_h = server.arg("red");
      red = red_h.toInt();
      Serial.print("El color rojo cambio a:");
      Serial.println(red);
      }
   if (server.hasArg("green")){
      String green_h = server.arg("green");
      green = green_h.toInt();
      Serial.print("El color verde cambio a:");
      Serial.println(green);
      }
   if (server.hasArg("blue")){
      String blue_h = server.arg("blue");
      blue = blue_h.toInt();
      Serial.print("El color azul cambio a:");
      Serial.println(blue);
      }

  //Intensity
  if (server.hasArg("intensity")){
      String intensity_h = server.arg("intensity");
      intensity = intensity_h.toInt();
      Serial.print("La intensidad cambio a:");
      Serial.println(intensity);
      }

  //Fastness
  if (server.hasArg("fastness")){
      String fastness_h = server.arg("fastness");
      fastness = fastness_h.toInt();
      Serial.print("La intensidad cambio a:");
      Serial.println(fastness);
      }

  server.send(200, "text/plain", getPage());       //Response to the HTTP request
}  


//++++++++++++++++++++++++++++++++++++++++++//
//            handleRoot                    //
//++++++++++++++++++++++++++++++++++++++++++//
void handleRoot() {   
  if (server.args() ) {
    handleSubmit();
    } else {
      server.send(200, "text/html", getPage());  
      }
}


//++++++++++++++++++++++++++++++++++++++++++++++//
//        Recoger del puerto serial             //
//++++++++++++++++++++++++++++++++++++++++++++++//
//int readline(int readch, char *buffer, int len) {
//    static int pos = 0;
//    int rpos;
//
//    if (readch > 0) {
//        switch (readch) {
//            case '\r': // Ignore CR
//                break;
//            case '\n': // Return on new-line
//                rpos = pos;
//                pos = 0;  // Reset position index ready for next time
//                return rpos;
//            default:
//                if (pos < len-2) {
//                    buffer[pos++] = readch;
//                    buffer[pos] = 0;
//                }
//        }
//    }
//    return 0;
//}



//++++++++++++++++++++++++++++++++++++++++++++++//
//            SETUP()                           //
//++++++++++++++++++++++++++++++++++++++++++++++//
void setup(){
  delay(1000);
  Serial.begin(115200);

  //WiFi initilization part
  Serial.print("Creating AP...");
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("DNSServer CaptivePortal example");

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  server.begin();


  //LedStrip initialization part
  FastLED.addLeds<CHIPSET, LED_PIN, COLOR_ORDER>(leds[0], leds.Size());
  FastLED.setBrightness(intensity_old);
  FastLED.clear(true);
  delay(500);

  FastLED.showColor(CRGB::White);
  delay(500);
  FastLED.show();

  //Se declara la fuente que se utiliza
  ScrollingMsg.SetFont(MatriseFontData);
  //Se inicializa la matriz
  ScrollingMsg.Init(&leds, leds.Width(), ScrollingMsg.FontHeight() + 1, 0, 0);
//  ScrollingMsg.SetBackgroundMode(BACKGND_DIMMING, 50);
  //Se introduce el textoque se va a mostrar y su tamanho
//  ScrollingMsg.SetText((unsigned char *)TxtDemo, sizeof(TxtDemo) - 1);
  //Se declara los colores/efectos con los que se van a mostrar los mensajes
  ScrollingMsg.SetTextColrOptions(COLR_RGB | COLR_SINGLE, red, green, blue);

  //Para organizar el sentido del mensaje como mas convenga
  //Setear la direccion del mensaje
//  ScrollingMsg.SetScrollDirection(SCROLL_UP);
  //Setear la direccion de las letas
//  ScrollingMsg.SetTextDirection(CHAR_DOWN);



}


//++++++++++++++++++++++++++++++++++++++++++++++//
//              LOOP                            //
//++++++++++++++++++++++++++++++++++++++++++++++//
void loop(){  
  dnsServer.processNextRequest();
  server.handleClient();         //Handling of incoming requests

  ScrollingMsg.SetTextColrOptions(COLR_RGB | COLR_SINGLE, red, green, blue);
  FastLED.setBrightness(intensity);

  if (ScrollingMsg.UpdateText() == -1) {
    ScrollingMsg.SetText((unsigned char *)buf, strlen(buf));}
  else {
    FastLED.show();
  delay(fastness);
        }

//  if (readline(Serial.read(), buf, 200) > 0) {
//        Serial.print("You entered: >");
//        Serial.print(buf);
//        Serial.println("<");
//    }

  delay(50);
}

@k.Cyborg, 👍0

1 ответ

Лучший ответ:

@*Juraj* · Accepted Answer · 2018-08-17 21:11-00:00

▲ 1

У вас есть тип контента "text/plain" в handleSubmit(). Используйте "text/html".

17 авг 18, @Juraj

Привет! Спасибо!!! Я пересматривал это так много раз!!! Спасибо!!! Не стесняйтесь использовать этот (каламбурный) код, если хотите :D, @k.Cyborg