CSS en esp8266

Buenas a todos, estos dias estuve probando el esp8266 12e con el arduino mega y pude ver que no es muy simple utilizarlo, al menos de la forma en que lo hago.
Lo que necesito hacer es que se conecte a mi red y mediante una ip me deje entrar a una pagina creada por mí. Esto ya lo logré exceptuando la parte de la página creada por mi.
Necesito saber como cargarle css para que tenga el diseño que quiero, y claro, saber si se puede hacer. Busque por varios lugares pero siempre encuentro o para el ethernet shield o utilizando el esp8266 con el usb a ftdi, el cual no tengo ni tengo pensado comprar.
El código con el que lo pude hacer andar es este:

int n1=0;
#define DEBUG true
String sendData(String command, const int timeout, boolean debug)
            {
                String response = "";
                Serial1.print(command);
                long int time = millis();
                while( (time+timeout) > millis())
                {
                   while(Serial1.available())
                      {
                         char c = Serial1.read(); // read the next character.
                         response+=c;
                      }  
                }
                
                if(debug)
                     {
                     Serial.print(response); //displays the esp response messages in arduino Serial monitor
                     }
                return response;
            }
void setup()
  {Serial.begin(9600);
   Serial1.begin(9600);
   pinMode(8,OUTPUT);
   pinMode(9,OUTPUT);
   sendData("AT+RST\r\n",2000,DEBUG); // reset module
   sendData("AT+CWMODE=3\r\n",1000,DEBUG); // configure as access point
   sendData("AT+CWJAP=”mired”,”contraseña”.",3000,DEBUG); // Conecta a la red
   sendData("AT+CIPMUX=1\r\n",1000,DEBUG); // configure for multiple connections
   sendData("“AT+CIPSERVER=1,80\r\n",1000,DEBUG); // turn on server on port 80
   }



void loop() 
{ while (Serial1.available() >0 )
  {char c = Serial1.read();
  if (c == 71) 
  {Serial.println("peticion web enviada");
   delay(500);
   servidor();
     }
 }
 
}



void escribir(String text)
{Serial1.print("AT+CIPSEND=0,");  
 Serial1.println(text.length());
 if (Serial1.find(">"))             // Si se recibe el mensaje
 {Serial.println(text);
  Serial1.println(text);            //mandamos el mensaje por el wifi 
  delay(10);
  while ( Serial1.available() > 0 ) 
  {if (  Serial1.find("SEND OK") )  //buscamos "ok" y luego salimos
   break; 
  }
 }
}

void servidor(void) 
    { escribir("<!DOCTYPE HTML>");
      escribir("<html>");                                                  //una pagina web necesita esto <HTML> y </HTML> es el inicio y fin del documento
      escribir("<head><title>Prueba arduino esp8266 html :)</title>");    //nombre de la pestaña que llevara la pagina
      escribir("<meta http-equiv=\"refresh\" content=\"10\"></head>");    //tiempo para refrescar la pagina web
      escribir("<body><h1> <FONT SIZE=\"5\" COLOR=\"red\"> ejemplos </h1>");                              //titulo del inicio de la pagina
      escribir(" <BODY BGCOLOR=\"black\"> ");  
      escribir("<a href=\"http://subefotos.com/ver/?bb0d6a271131b84b3a62d6229bcdbd16o.png\" target=\"_blank\"><img src=\"http://thumbs.subefotos.com/bb0d6a271131b84b3a62d6229bcdbd16o.jpg\"  WIDTH=500 HEIGHT=500 BORDER=0  /></a>

");
      //Cargamos una imagen 
                              
         for (int n1 = 0; n1 < 3; n1++) 
         { int lectura = analogRead(n1);
            escribir("<FONT FACE=\"Arial\" SIZE=\"5\" COLOR=\"blue\"> entrada del sensor </FONT>"); //escribimos y cambiamos el tamaño, letra y color
            escribir("(a");
            escribir( String(n1));  
            escribir(")");
            escribir(" es ");
            escribir(String(lectura));  //imprimimos la variable
            escribir("
");
            escribir("
");
          }

           for (int n2 = 8; n2 < 10; n2++) 
         { int estado = digitalRead(n2) ;
            escribir("<FONT FACE=\"Arial\" SIZE=\"5\" COLOR=\"green\"> entrada digital </FONT>"); //escribimos y cambiamos el tamaño, letra y color
            escribir("(pin");
            escribir( String(n2));  
            escribir(")");
            escribir(" es ");
            escribir(String(estado));  //imprimimos la variable
            escribir("
");
            escribir("
");
          }
            
            escribir("<DIV align=\"center\"><A HREF=\"http://www.hetpro.com\" target=\"_blank\">hetpro.com</a>
</DIV>");

       delay(1);
       Serial1.println("AT+CIPCLOSE=0");
       //delay(500);
    }

El código es una recopilación de diferentes tutoriales los cuales me ayudaron a poder hacerlo funcionar.

Lo que probé fue reemplazar esa pagina del código por la mía, y colocar también el css, pero lo único que logre fue obtener errores de compilación por todos lados.
Resumiendo necesitaría saber si esto se puede realizar (colocarle .css a la pagina) y como hacerlo. De momento uso un arduino mega 2560 con el modulo wifi esp8266 12e únicamente, después de esto tengo que conectarle varios sensores y que muestre los datos en la pagina, pero eso es otra cosa aparte.
Disculpen si me falto alguna información.

Bueno pude compilar escapando las comillas que estaban dentro del css y compiló, pero no aparece en la página. Alguna idea?

Trabaja directo sin MEGA o arduino.
Sigue este tutorial GitHub - esp8266/Arduino: ESP8266 core for Arduino

Installing with Boards Manager

Starting with 1.6.4, Arduino allows installation of third-party platform packages using Boards Manager. We have packages available for Windows, Mac OS, and Linux (32 and 64 bit).

Install Arduino 1.8.2 from the Arduino website.
Start Arduino and open Preferences window.
Enter http://arduino.esp8266.com/stable/package_esp8266com_index.json into Additional Board Manager URLs field. You can add multiple URLs, separating them with commas.
Open Boards Manager from Tools > Board menu and install esp8266 platform (and don't forget to select your ESP8266 board from Tools > Board menu after installation).
Latest release Latest release

Boards manager link: http://arduino.esp8266.com/stable/package_esp8266com_index.json

Documentation: · ESP8266 Arduino Core

surbyte:
Trabaja directo sin MEGA o arduino.
Sigue este tutorial GitHub - esp8266/Arduino: ESP8266 core for Arduino

Gracias por la respuesta, empecé a leer algo pero no me quedan claras algunas cosas, le puedo subir el codigo utilizando como intermediario el arduino mega? Como se cuales opciones tocar y cuales no? (de cpu frequency y esas opciones).
Y el código quedaría subido al esp8266 y funcionaría desde ahí sin necesidad de tenerlo conectado al arduino? Porque yo necesitaría que reciba datos de algunos sensores y también mandar alguna acción como por ejemplo apagar un relé (que estarían conectados al arduino).

SebasEC:
Gracias por la respuesta, empecé a leer algo pero no me quedan claras algunas cosas, le puedo subir el codigo utilizando como intermediario el arduino mega? Como se cuales opciones tocar y cuales no? (de cpu frequency y esas opciones).
Y el código quedaría subido al esp8266 y funcionaría desde ahí sin necesidad de tenerlo conectado al arduino? Porque yo necesitaría que reciba datos de algunos sensores y también mandar alguna acción como por ejemplo apagar un relé (que estarían conectados al arduino).

Bueno encontré que puedo usar el arduino como usb a ttl conectando el reset del arduino con gnd. Hasta ahí llegue, no logré hacer funcionar mas nada :confused:

Noooo. No necesitas nada de todo eso. Olvida los arduinos para comunicarte con el ESP8266.
Tienes un ESP12e, lo conectas directo al USB y lo programas con eltutorial que te he indicado. En cuando agreges la línea que lo reconoce en el IDE luego es solo programar como estas acostumbrado con las ventajas que tiene hacerlo directo.

surbyte:
Noooo. No necesitas nada de todo eso. Olvida los arduinos para comunicarte con el ESP8266.
Tienes un ESP12e, lo conectas directo al USB y lo programas con eltutorial que te he indicado. En cuando agreges la línea que lo reconoce en el IDE luego es solo programar como estas acostumbrado con las ventajas que tiene hacerlo directo.

Esa es mi duda, como lo conecto directo a un usb, pelo los cables y los conecto o que? jaja
El modulo es este:

Ahhhhhhhhhhhhhh no sabia que lo tenias asi
Sorry..

Para esto necesitas un conversor USB to TTL o como lo estas haciendo pero respetando niveles 3.3V
MIra este tutorial Web Server Data Logger

surbyte:
Ahhhhhhhhhhhhhh no sabia que lo tenias asi
Sorry..

No hay drama jaja. Lo único que me queda intentar es o usar el arduino como intermediario que no se si se puede, vi que poniendo el reset en gnd debería funcionar pero programa de arduino no lo toma, o seguir con los comandos AT y dejar una pagina mucho mas simple sin css
Edito: Otra consulta, haciéndolo por separado puedo recibir datos del arduino? Porque en el arduino voy a tener conectada una pantalla al menos 8 sensores y 8 relés.
Y otra consulta, las resistencias de 1k son si o si necesarias? estoy alimentando desde una fuente atx y las únicas resistencias que tengo a mano son de 10k o de 220ohms

Lee mi respuesta editada.

surbyte:
Lee mi respuesta editada.

Leí la parte de las conexiones y debe ser por eso que no me lo toma el programa de arduino, que debe estar en otro modo, las resistencias de 1k utilizadas en el diagrama son si o si necesarias? estoy alimentando desde una fuente atx y las únicas resistencias que tengo a mano son de 10k o de 220ohms u.u
Otra consulta, haciéndo lo del esp8266 por separado puedo recibir datos del arduino? Porque en el arduino voy a tener conectado una pantalla (sin i2c), al menos 8 sensores y 8 relés.
Como verás soy demasiado nuevo en esto jaja

Pero porque lo compraste asi? Asi es para avanzados e incluso siempre dan dolor de cabezas..

Compra el nodemcu y listo!!

Con las R si solo tienes esta tienes tres caminos:

  1. 5 R en serie de 220 ohms totalizan algo mas de 1K

  2. 10 R en paralelo de 10k son 1K

  3. no tienes tantas y vas y las compras en la tienda.

surbyte:
Pero porque lo compraste asi? Asi es para avanzados e incluso siempre dan dolor de cabezas..

Compra el nodemcu y listo!!

Con las R si solo tienes esta tienes tres caminos:

  1. 5 R en serie de 220 ohms totalizan algo mas de 1K

  2. 10 R en paralelo de 10k son 1K

  3. no tienes tantas y vas y las compras en la tienda.

Bueno voy a ver si puedo comprar el nodemcu. Sería este?: https://articulo.mercadolibre.com.ar/MLA-658980917-esp8266-nodemcu-cp2102-arduino-pwm-i2c-_JM
Comprar el adaptador de usb a uart serviría? Sale más barato jaja
Y sigo porfiando con esta duda, puedo recibir datos del arduino aunque esten configurados por separado? (dht22, relés, etc)

Compra el adaptador pero si vas a comprar luego los ESP8266-01... compra el nodemcu y no pierdas mas tiempo y luego si quieres retomas con el adaptador USB y los ESP01.
Se lo que te digo porque hacen falta modulos chicos que solo prendan/apaguen reles, o vean lecturas de sensores I2C y el ESP01 es ideal. Pero requiere adaptador USB

surbyte:
Compra el adaptador pero si vas a comprar luego los ESP8266-01... compra el nodemcu y no pierdas mas tiempo y luego si quieres retomas con el adaptador USB y los ESP01.
Se lo que te digo porque hacen falta modulos chicos que solo prendan/apaguen reles, o vean lecturas de sensores I2C y el ESP01 es ideal. Pero requiere adaptador USB

Bueno gracias por la ayuda, de momento voy a seguir como estoy por que no me sirve hacer andar por separado el esp8266 ya que necesito conectar una pantalla, 8 relés, 6 sensores, etc. No dan los pines para todo eso del esp, por eso uso el arduino mega