Go Down

Topic: Esp 8266 Webserver (Read 8615 times) previous topic - next topic

juergen01

Hallo Zusammen

Habe da mal ein parr fragen

Ich moechte gern einen Mega mit einen ESP8266 verbinden
nun weiss Ich nicht wie und wo Ich die Htlm befehle eintragen kann


  client.println("</table>");
          client.println("</html>");
     
     
          client.println("<table border=\"5\" frame=\"void\" width=\"390\" >");
          client.println("<colgroup  span=\"6\"><colgroup>");
          client.println("<th width=\"300\" align=\"left\" >");
          client.println("<div style=\"font-size:100%;   color:#0000FF; font-family:Verdana\">");
          client.write("8  Zirkulation");
          client.println("</div>");
          client.println("</th>");

          client.println("<th width=\"90\" >");
          client.println("<div style=\"font-size:100%;   color:#0000FF; font-family:Verdana\">");
          client.println(zirkulationtmp,1);


                   
          client.println("</table>");
          client.println("</html>");
     


Da stehen zwar die Befehle aber wie werden sie aufgerufen

gibt es da eine Anleitung



#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

const char *ssid = "YourSSIDHere";
const char *password = "YourPSKHere";
MDNSResponder mdns;

ESP8266WebServer server ( 80 );

const int led = 13;

void handleRoot() {
   digitalWrite ( led, 1 );
   char temp[400];
   int sec = millis() / 1000;
   int min = sec / 60;
   int hr = min / 60;

   snprintf ( temp, 400,

"<html>\
  <head>\
    <meta http-equiv='refresh' content='5'/>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>Uptime: %02d:%02d:%02d</p>\
    <img src=\"/test.svg\" />\
  </body>\
</html>",

      hr, min % 60, sec % 60
   );
   server.send ( 200, "text/html", temp );
   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 ) {
   pinMode ( led, OUTPUT );
   digitalWrite ( led, 0 );
   Serial.begin ( 115200 );
   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", WiFi.localIP() ) ) {
      Serial.println ( "MDNS responder started" );
   }

   server.on ( "/", handleRoot );
   server.on ( "/test.svg", drawGraph );
   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 ) {
   mdns.update();
   server.handleClient();
}

void drawGraph() {
   String out = "";
   char temp[100];
   out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
    out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
    out += "<g stroke=\"black\">\n";
    int y = rand() % 130;
    for (int x = 10; x < 390; x+= 10) {
       int y2 = rand() % 130;
       sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
       out += temp;
       y = y2;
    }
   out += "</g>\n</svg>\n";

   server.send ( 200, "image/svg+xml", out);
}



bye juergen





thefreak

Bin unterwegs, deswegen sehr kurz ein Tipp, wenn man sich mit HTML noch nicht besonders auskennt:

Programm zum Webseiten erstellen downloaden (das simpelste was man finden kann),  dann in den Texteditiermodus gehen, nachdem man erstellt hat was man möchte.

Dann sieht man die Struktur was / wo von HTML.

Alternative: Auf einer simplen/schrottigen Website Rechtsklick und Debugger bzw. Code betrachten klicken (je nach Browser unterschiedlich).

Wenn man das dann nicht versteht, sollte man sich das Tutorial bei w3c.org durchlesen (www Consortium).

Gruß,
Stefan
iotrobots.wordpress.com

juergen01

Hallo zusammen

Hallo thefreak

Fuer den Arduino habe Ich schon einen Webserver erstellt
aber das war ja mit client.println
jetzt moechte Ich wissen wie das beim ESP8266 geht

wo Ich die Webbefehle eintragen muss

Ich habe mal diesen getestet
Ich moechte gern den Ablauf vertehen
und wo Ich mit

 sResponse += "<font color=\"#000000\"><body bgcolor=\"#d0d0f0\">";

die HTLM befehle eintragen muss




/*--------------------------------------------------
HTTP 1.1 Webserver for ESP8266
for ESP8266 adapted Arduino IDE

Stefan Thesen 04/2015

Running stable for days
(in difference to all samples I tried)

Does HTTP 1.1 with defined connection closing.
Reconnects in case of lost WiFi.
Handles empty requests in a defined manner.
Handle requests for non-exisiting pages correctly.

This demo allows to switch two functions:
Function 1 creates serial output and toggels GPIO2
Function 2 just creates serial output.

Serial output can e.g. be used to steer an attached
Arduino, Raspberry etc.
--------------------------------------------------*/

#include <ESP8266WiFi.h>

const char* ssid = "ALICE-WLAN56";
const char* password = "8086091123162777";

unsigned long ulReqcount;
unsigned long ulReconncount;


// Create an instance of the server on Port 80
WiFiServer server(80);

void setup()
{
  // setup globals
  ulReqcount=0;
  ulReconncount=0;
 
  // prepare GPIO2
  pinMode(2, OUTPUT);
  digitalWrite(2, 0);
 
  // start serial
  Serial.begin(115200);
  delay(1);
 
  // inital connect
  WiFi.mode(WIFI_STA);
  WiFiStart();
}

void WiFiStart()
{
  ulReconncount++;
 
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
 
  // Start the server
  server.begin();
  Serial.println("Server started");

  // Print the IP address
  Serial.println(WiFi.localIP());
}

void loop()
{
  // check if WLAN is connected
  if (WiFi.status() != WL_CONNECTED)
  {
    WiFiStart();
  }
 
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client)
  {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  unsigned long ultimeout = millis()+250;
  while(!client.available() && (millis()<ultimeout) )
  {
    delay(1);
  }
  if(millis()>ultimeout)
  {
    Serial.println("client connection time-out!");
    return;
  }
 
  // Read the first line of the request
  String sRequest = client.readStringUntil('\r');
  //Serial.println(sRequest);
  client.flush();
 
  // stop client, if request is empty
  if(sRequest=="")
  {
    Serial.println("empty request! - stopping client");
    client.stop();
    return;
  }
 
  // get path; end of path is either space or ?
  // Syntax is e.g. GET /?pin=MOTOR1STOP HTTP/1.1
  String sPath="",sParam="", sCmd="";
  String sGetstart="GET ";
  int iStart,iEndSpace,iEndQuest;
  iStart = sRequest.indexOf(sGetstart);
  if (iStart>=0)
  {
    iStart+=+sGetstart.length();
    iEndSpace = sRequest.indexOf(" ",iStart);
    iEndQuest = sRequest.indexOf("?",iStart);
   
    // are there parameters?
    if(iEndSpace>0)
    {
      if(iEndQuest>0)
      {
        // there are parameters
        sPath  = sRequest.substring(iStart,iEndQuest);
        sParam = sRequest.substring(iEndQuest,iEndSpace);
      }
      else
      {
        // NO parameters
        sPath  = sRequest.substring(iStart,iEndSpace);
      }
    }
  }
 
  ///////////////////////////////////////////////////////////////////////////////
  // output parameters to serial, you may connect e.g. an Arduino and react on it
  ///////////////////////////////////////////////////////////////////////////////
  if(sParam.length()>0)
  {
    int iEqu=sParam.indexOf("=");
    if(iEqu>=0)
    {
      sCmd = sParam.substring(iEqu+1,sParam.length());
      Serial.println(sCmd);
    }
  }
 
 
  ///////////////////////////
  // format the html response
  ///////////////////////////
  String sResponse,sHeader;
 
  ////////////////////////////
  // 404 for non-matching path
  ////////////////////////////
  if(sPath!="/")
  {
    sResponse="<html><head><title>404 Not Found</title></head><body><h1>Not Found</h1><p>The requested URL was not found on this server.</p></body></html>";
   
    sHeader  = "HTTP/1.1 404 Not found\r\n";
    sHeader += "Content-Length: ";
    sHeader += sResponse.length();
    sHeader += "\r\n";
    sHeader += "Content-Type: text/html\r\n";
    sHeader += "Connection: close\r\n";
    sHeader += "\r\n";
  }
  ///////////////////////
  // format the html page
  ///////////////////////
  else
  {
    ulReqcount++;
    sResponse  = "<html><head><title>Demo f&uumlr ESP8266 Steuerung</title></head><body>";
    sResponse += "<font color=\"#000000\"><body bgcolor=\"#d0d0f0\">";
    sResponse += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">";
    sResponse += "<h1>Demo f&uumlr ESP8266 Steuerung</h1>";
    sResponse += "Funktion 1 schaltet GPIO2 und erzeugt eine serielle Ausgabe.<BR>";
    sResponse += "Funktion 2 erzeugt nur eine serielle Ausgabe.<BR>";
    sResponse += "<FONT SIZE=+1>";
    sResponse += "<p>Funktion 1 <a href=\"?pin=FUNCTION1ON\"><button>einschalten</button></a>&nbsp;<a href=\"?pin=FUNCTION1OFF\"><button>ausschalten</button></a></p>";
    sResponse += "<p>Funktion 2 <a href=\"?pin=FUNCTION2ON\"><button>einschalten</button></a>&nbsp;<a href=\"?pin=FUNCTION2OFF\"><button>ausschalten</button></a></p>";
   
    //////////////////////
    // react on parameters
    //////////////////////
    if (sCmd.length()>0)
    {
      // write received command to html page
      sResponse += "Kommando:" + sCmd + "<BR>";
     
      // switch GPIO
      if(sCmd.indexOf("FUNCTION1ON")>=0)
      {
        digitalWrite(2, 1);
      }
      else if(sCmd.indexOf("FUNCTION1OFF")>=0)
      {
        digitalWrite(2, 0);
      }
    }
   
    sResponse += "<FONT SIZE=-2>";
    sResponse += "<BR>Aufrufz&auml;hler=";
    sResponse += ulReqcount;
    sResponse += " - Verbindungsz&auml;hler=";
    sResponse += ulReconncount;
    sResponse += "<BR>";
    sResponse += "Stefan Thesen 04/2015<BR>";
    sResponse += "</body></html>";
   
    sHeader  = "HTTP/1.1 200 OK\r\n";
    sHeader += "Content-Length: ";
    sHeader += sResponse.length();
    sHeader += "\r\n";
    sHeader += "Content-Type: text/html\r\n";
    sHeader += "Connection: close\r\n";
    sHeader += "\r\n";
  }
 
  // Send the response to the client
  client.print(sHeader);
  client.print(sResponse);
 
  // and stop the client
  client.stop();
  Serial.println("Client disonnected");
}



Ich danke dir schon mal

bye juergen

Serenifly

Der Code ist auch ein Musterbeispiel für irrsinnige und völlig unnötige Verwendung der String Klasse.

ElEspanol

Das ist doch Code für den ESP8266, da ist es doch nicht ganz so eng  :)

Serenifly

Trotzdem irgendwie Unsinn :) Wieso den String erst mal als ganzes in den Speicher schreiben wenn man ihn auch direkt Stück für Stück ausgeben kann?

ElEspanol

#6
Nov 11, 2015, 08:01 pm Last Edit: Nov 11, 2015, 08:01 pm by ElEspanol
Wenn man die ganzen Jahre mit dem RAM geizen musste, tut das doch bestimmt mal richtig gut.

Oder der Autor hat es nie anders gelernt

juergen01

Hallo Zusammen

Hallo ElEspanol


Hallo Serenifly

Habe leider kein Beispiel mit Charstring gefunden
wuerde gerne ein Beispiel mit Charstrings nehmen

bye juergen



ElEspanol

Bring es erstmal so zum Laufen.

Später kannst du zur Übung den Sketch umschreiben und die Stringobjekte nach und nach rausprogrammieren.

Ist ne sehr gute Übung. Danach weißt du wesentlich mehr über das Thema char array

juergen01

Hallo Zusammen

Hallo ElEspanol

Habe ja schon was mit char geamacht

Das beispiel laeuft so wie es ist macht auch die serielle uebertragung zum Mega
wenn Ich die Buttons druecke
Ich weiss nur nicht wo und wie Ich meine HTLM-Befehle eingebe

Eine erklaerung was die einzelne Teile des Demo-Programm machen waere gut

bye juergen

juergen01

Hallo zusammen

Habe da noch eine Frage

Was bedeuted der Aufruf

server.handleClient();

und was passiert dann

 


void loop(void)
{
server.handleClient();
}



bye juergen

ElEspanol

Hallo zusammen

Habe da noch eine Frage

Was bedeuted der Aufruf

server.handleClient();

und was passiert dann
Das kann ich dir jetzt auch nicht sagen, ich heb den Code jetzt nicht bis ins Detail analysiert.

Aber in dem von dir gepsoteten Beispiel in Post #2 wird ab
Code: [Select]
///////////////////////
  // format the html page
  ///////////////////////

in dem String sResponse die HTML Seite zusammengebaut und dann weiter unten mit
Code: [Select]
// Send the response to the client
  client.print(sHeader);
  client.print(sResponse);

als Antwort verschickt.

juergen01

Hallo Zusammen

Hallo ElEspanol

Mit deiner letzten Antwort hast Du mir sehr Geholfen

Ich hatte die

client.print(sHeader);
client.print(sResponse);

nicht gesehen jetzt kann Ich schon mal den String
sResponse aus den sketch werfen

der sHeader muss erst eimal bleiben

Ich Danke Dir

bye juergen


juergen01

Hallo Zusammen

Habe noch eine Frage
gibt es bei den Strings Nicht Chararry eine Laengenbegrenzung
Ich habe mal etwas rumgespielt bei der Laenge von 3000 Byte war Ende

Bye Juergen

ElEspanol

Kann sein. Beim Arduino sicherlich abhängig vom RAM, aber beim ESP8266 sollte es nicht deswegen sein.

Wie äussert sich das bei dir?

Und für was brauchst du so lange Texte am Stück?

Go Up