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.
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!)
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);
}
