-->
Page 1 of 1

How to read Buttonevent from Browser (Webserver)

PostPosted: Thu Mar 24, 2016 10:19 am
by Nas
Hello,
first i wanna say, that I'm new with the Esp8266 and my english is not so well. Usually i program with C and the arduino, so i'm not very comfortable with html and css.

I want to automate my room so i notice the Esp8266. So far i really like it. So my problem is, i dont know how to get a request from the Webserver when i press a button. I try a lot of thinks but i dont get it. If a button is pushed i want to send to my Webserver "buttonname is pressed". I hope anyone can help me and here is my code ( some comments are german and some functions or commands are unnecessary):
Code: Select all/*
 *
 * Style umwandlen mit dem Link http://www.ladyada.net/library/arduino/copyforhtml.html von dort aus in die Funktion gibStyle()
 *
 *
 *
 */




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


bool is_authentified();
void handleLogin();
void handleNotFound();

String gibStyle();// Sendet das Layout zu dem Webserver

int sendeOberflaeche(); // Erstellt die Oberfläche, return ist die gedrückte Taste
//void sendeBefehl(int wahl); //sendet den Ausgewählten Befehl über I2C an Das Gerät Nr.1
//int login(WiFiClient client,const char* nutzer,const char* pw); // Sucht nach den Angegebenen Nutzerdaten in der Loginsendung
void lichtAn();

const char* ssid = "";
const char* password = "";
int wahl; // Gedrueckte Taste speichern
String content="";

//Zugangsdaten
const char* nutzer = "Nassim";
const char* pw = "Nodemcu";

//Geräteadressen
int licht = 1;
int motorRechts = 1;
int motorLinks = 1;


ESP8266WebServer server(80);



void setup(void){
 
  //I2c Bus beitreten als Master
  Wire.begin();
 
  // Serieller Monitor
  Serial.begin(115200);
  WiFi.begin(ssid, password);
 
  // Ins WIFI einwählen
  Serial.print("\n\nVerbinden mit dem Netzwerk: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);// mit angegebenen Daten einloggen
 
  while (WiFi.status() != WL_CONNECTED) { // während des Verbindens Punkte zum Warten anzeigen
    delay(500);
    Serial.print(".");
  }
   Serial.println("\nVerbunden"); // Zeichen für Einwahl

   
 // Signalstärke
  long rssi = WiFi.RSSI();
  Serial.print("Signalstaerke (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");
 
  // IP für Verbindung ausgeben
  Serial.print("Adresse zum Einwaehlen: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
 

  //Logging aufruf Über html beziehung
  server.on("/login", handleLogin);
  server.on("/datenAnzeigen", [](){
    String content;
    if (server.hasHeader("User-Agent")){
    content += "Userdaten: " + server.header("User-Agent");
  }
  server.send(200, "text/plain", content);});
 
  server.onNotFound(handleNotFound);//
  //here the list of headers to be recorded
  const char * headerkeys[] = {"User-Agent","Cookie"} ;
  size_t headerkeyssize = sizeof(headerkeys)/sizeof(char*);
  //ask server to track these headers
  server.collectHeaders(headerkeys, headerkeyssize );
  server.begin();
  Serial.println("Server Bereit");
  //Page Aufruf über ...
  server.on("/", sendeOberflaeche);
  server.on ("/Licht An",lichtAn);
  server.on("/",lichtAn);

}// Ende Setup



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


void lichtAn(){
 
  Serial.println("Licht An");}




int sendeOberflaeche(){
 Serial.println("Seite wird geladen");
  String header;
  if (!is_authentified()){
    String header = "HTTP/1.1 301 OK\r\nLocation: /login\r\nCache-Control: no-cache\r\n\r\n";
    server.sendContent(header);
    return -1;
  }
   int i=0;
   
             
      content ="<!DOCTYPE HTML>";     
      content += "<HEAD>";
      content += "<meta name='apple-mobile-web-app-capable' content='yes' />";
      content += "<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />";
      content += "<TITLE>Arduino Steuerung</TITLE>";   
      content +="<style type=\"text/css\">";   
      content += gibStyle();
      content += "</style>";
      content += "</HEAD> <body>";
     
      content += "<H1> Hausautomation </H1>";
      content += "<hr /><br />"; 
      content += "<H2> Nassims Zimmer</H2>";
           
      content += " <h3>Licht</h3>";
      content += "<form action=\"">;
      content += "<input value='einschalten' type = 'button'></form><a href= '?LichtAus'>Licht Aus</a><br />";   

       content += " <h3>Rollo Rechts</h3>";
       content += "<a href=\"?MotorRHoch\"\"> Hoch</a> <a href=\"/?MotorRRunter\"\">Runter</a><br />";
 
       content += " <h3>Rollo Links</h3>";
       content += "<a href=\"/?MotorLHoch\"\">Hoch</a> <a href=\"/?MotorLRunter\"\">Runter</a><br />";

       content += "<br /> <hr /> <br />"; 
       content += "<a href=\"/login?DISCONNECT=YES\">Ausloggen</a></body></html>";
       server.send(200, "text/html", content);
           
 
  return i;
} // End Oberfläche











//Check if header is present and correct
bool is_authentified(){
  Serial.println("Enter is_authentified");
  if (server.hasHeader("Cookie")){   
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
    if (cookie.indexOf("ESPSESSIONID=1") != -1) { //Wenn der Cookie nicht -1 ist ist man eingeloggt
      Serial.println("Authentification Successful");
      return true;
    }
  }
  Serial.println("Authentification Failed");
  return false;   
}

//login page, also called for disconnect
void handleLogin(){
  String msg;
  if (server.hasHeader("Cookie")){   // Wenn der Header ein Cookie hat wird es in der Variable cookie gespeichert
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
  }
  // Wenn vom Servergesendete Daten Disconnect enthalten Cookie =0 setzen-> ausgeloggt
  if (server.hasArg("DISCONNECT")){
    Serial.println("Disconnection");
    String header = "HTTP/1.1 301 OK\r\nSet-Cookie: ESPSESSIONID=0\r\nLocation: /login\r\nCache-Control: no-cache\r\n\r\n";
    server.sendContent(header);
    return;
  }
  if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")){
    if (server.arg("USERNAME") == nutzer &&  server.arg("PASSWORD") == pw ){ // Wenn übereinstimmen, dann Cookie = 1 loging
      String header = "HTTP/1.1 301 OK\r\nSet-Cookie: ESPSESSIONID=1\r\nLocation: /\r\nCache-Control: no-cache\r\n\r\n";
      server.sendContent(header);
      Serial.println("Log in Successful");
      return;
    }
  msg = "Wrong username/password! try again.";
  Serial.println("Log in Failed");
  }
  String content = "<html><body><form action='/login' method='POST'> Benutzerdaten eingeben <br>";
  content += "User:<input type='text' name='USERNAME' placeholder='Benutzername'><br>";
  content += "Password:<input type='password' name='PASSWORD' placeholder='Passwort'><br>";
  content += "<input type='submit' name='Bestaetigen' value='Submit'></form>" + msg + "<br>";
  content += "Userdaten <a href='/datenAnzeigen'>anzeigen</a></body></html>";
  server.send(200, "text/html", content);
}


//no need authentification
void handleNotFound(){
  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);
}

String gibStyle(){
String style = R"=====(a,body,h1,h2{text-align:center}body{margin:60px 0;padding:0}h1,h2{font-family:Arial,\"Trebuchet MS\",Helvetica,sans-serif}a{text-decoration:none;width:75px;height:50px;border-color:#000;border-top:2px solid;border-bottom:2px solid;border-right:2px solid;border-left:2px solid;border-radius:10px;-o-border-radius:10px;-webkit-border-radius:10px;font-family:\"Trebuchet MS\",Arial,Helvetica,sans-serif;-moz-border-radius:10px;background-color:#293F5E;padding:8px}a:active,a:hover,a:link,a:visited{color:#fff})=====";
return style;
}// Ende des Styles



greeting Nassim

Re: How to read Buttonevent from Browser (Webserver)

PostPosted: Fri Mar 25, 2016 5:58 am
by bbx10node
Here is an example of using Web sockets to send button click events from browser to ESP8266 web server.

https://gist.github.com/bbx10/667e3d4f5f2c0831d00b

HTML, CSS, and Javascript are kept to a minimum to make it easy to see the client-server communication mechanism. JSON and XML are not used to keep the server side as small and simple as possible.

Remove the NeoPixelBus code if it is not needed or something else is connected to GPIO2. The example works when nothing is connected to GPIO2.

Re: How to read Buttonevent from Browser (Webserver)

PostPosted: Mon Jan 23, 2017 10:37 am
by mega-hz
Hello Nassim,

did you get any further with your switching over esp webserver?
i am trying to do the same, would be nice to hear news about it.

Wolfram

Re: How to read Buttonevent from Browser (Webserver)

PostPosted: Mon Jan 23, 2017 4:28 pm
by gdsports
This thread might help.

viewtopic.php?f=6&t=13412