0

Here I have a small problem:

I have an ESP8266, to which I have connected a matrix of LEDs to move text (the array of LEDs is made with the tape of LEDs addressable ws2812); when you turn on the computer you create an access point with a Captive Portal, which takes you to a small (though still ugly) web interface, where I can manage both the text I show and the speed, intensity and colors of it. All right, everything works ... I know I still have to change several things in the "code" html to work properly, but I hate CSS and right now it is functional.

Page example

The problem is the following:

I have several html forms that collect the values ​​of the variables mentioned above (text to be displayed, color, brightness and speed with which the text is displayed), but every time I hit the "Send" button the browser (I have only tried the browser that comes with my phone (a Xiaomi Redmi Note 4, the application is called Browser itself) and the Google browser, on the same phone) takes me to a screen (I leave screenshot) where it shows me the html code of the page that resides within the esp8266 . And what bothers me is why !? Why does this happen!? (I leave a copy of the code too at the end!)

Browser Google Browser

The only thing that occurs to me is that I am saving the page in a variable type String (String object, not an array of characters) ... will anyone know what is due?

Copy of the code:

//++++++++++++++++++++++++++++++++++++++++++++++//
//                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);
}
1

You have content type "text/plain" in handleSubmit(). Use "text/html".

  • Hi! Thanks!!! I review this so many times!!! Thanks!!! Feel free to use this (punny) code if you want :D – k.Cyborg Aug 17 '18 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.