B4R Question Captive Portal with ESP8266 ??

Discussion in 'B4R Questions' started by Alberto Iglesias, Dec 1, 2019 at 10:51 PM.

  1. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

  2. Erel

    Erel Administrator Staff Member Licensed User

    No need for this.

    What do you mean with captive portal?
    I wouldn't use ESP8266 to create a web server. There are better options.
     
  3. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    Last edited: Dec 2, 2019 at 7:50 AM
  4. Erel

    Erel Administrator Staff Member Licensed User

  5. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    @Erel, I understand this configurator is a good solution to configure inside the settings on ESP device, but also, we will need 2 devices to to that, 1 ESP and another one (B4J, B4i or B4A) app.

    The idea is just popup the webpage after the connection and in this page we can have the fields like your configurator.

    Is possible to make any webpage popup? or is impossible?
     
  6. thetahsk

    thetahsk Active Member Licensed User

  7. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    thanks man, I will check this advanced solution
     
  8. Cableguy

    Cableguy Expert Licensed User

    Alberto Iglesias likes this.
  9. Toley

    Toley Active Member Licensed User

    Hi Alberto,

    This library is probably what you need. It will try to connect to an access point and if it can't then it makes ESP as an access point with a captive portal to configure the network.

    https://github.com/tzapu/WiFiManager

    But I don't know how easy it can be to port it to B4R.
     
    f0raster0 and Alberto Iglesias like this.
  10. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    I already checked this library , probably this will help a lot with this. I don't know is @Erel can implement this.

    or maybe use the esp8266extra library

    https://www.b4x.com/android/forum/threads/esp8266extras-library.72186/
     
  11. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User


    this is exactly what we need, but need to port to B4R, @Erel , do you thing is too complicate to do that?

    And this can be super usefull for a lot of aplications, like paid Hotspot, like hotel hotspots, etc


    [​IMG]
     
    f0raster0 likes this.
  12. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    This is a relevant code of that library.

    Where I can have instructions to make to wrap this library to B4R?
     

    Attached Files:

  13. Cableguy

    Cableguy Expert Licensed User

    There's one thing bothering me…. You want that the connected device (laptop, tablet, phone, etc) AUTOMATICALLY opens the browser once the connection to the esp is established?
    I don't think that to be possible!
    What you can do is, once the connected device achieves a connection to the esp, WHEN it tries to navigate somewhere, to "catch" it and show your onw page… or the user needs to know that he must access the esp to be presented with the page you need to present!
     
  14. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    Is not a browser, is part of OS open a webview during the connection of wifi. Exactly public hotspots do, like hotel, starbucks, etc. check this library:

    https://github.com/tzapu/WiFiManager
     
  15. Cableguy

    Cableguy Expert Licensed User

    Actually, No! what they do is, once you have established a connection to the hotspot, it will filter all your destination browsing, and if you haven't yet connected your SESSION, then show you a page to do so.
    I've never seen an external device highjack a client browser, and am pretty sure it can't/shouldn't be done!
     
  16. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    This is a sample I made with my ESP8266, but in native code, not in B4R, the goal is create some library to do the same with B4R.




    and this is the code I used for this sample

    Code:
    #include <ESP8266WiFi.h>
    #include <DNSServer.h>
    #include <ESP8266WebServer.h>
    #include <ESP8266mDNS.h>
    #include <FS.h>
    #define DBG_OUTPUT_PORT Serial
    const byte DNS_PORT = 53;
    const char *ssid = "B4X - Captive Portal";
    IPAddress apIP(
    19216811);
    DNSServer dnsServer;
    ESP8266WebServer webServer(
    80);
    void setup() {
      WiFi.mode(WIFI_AP);
      WiFi.softAPConfig(apIP, apIP, IPAddress(
    2552552550));
      WiFi.softAP(ssid);
      // 
    if DNSServer is started with "*" for domain name, it will reply with
      // provided IP 
    to all DNS request
      dnsServer.start(DNS_PORT, 
    "*", apIP);
      //start debug port
      DBG_OUTPUT_PORT.begin(
    115200);
      DBG_OUTPUT_PORT.print(
    "\n");
      DBG_OUTPUT_PORT.setDebugOutput(
    true);
      SPIFFS.begin();
      //redirect all traffic 
    to index.html
      webServer.onNotFound([]() {
        
    if(!handleFileRead(webServer.uri()))
        {
       
          
    const char *metaRefreshStr = "<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" >\r\n<head>\r\n    <title><\/title>\r\n    <style type=\"text\/css\">\r\n        .style1\r\n        {\r\n            font-family: Arial, Helvetica, sans-serif;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <p class=\"style1\">\r\n        This page was created to demonstrate that it is possible to make a Captive \r\n        Portal with the ESP8266.<\/p>\r\n    <p class=\"style1\">\r\n        Created by Alberto Iglesias<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n";
          webServer.send(
    200"text/html", metaRefreshStr);
        
    }
      });
     
      webServer.begin();
    }
    void loop() {
      dnsServer.processNextRequest();
      webServer.handleClient();
    }
    String getContentType(String filename){
      if(webServer.hasArg("download")) return "application/octet-stream";
      else if(filename.endsWith(".htm")) return "text/html";
      else if(filename.endsWith(".html")) return "text/html";
      else if(filename.endsWith(".css")) return "text/css";
      else if(filename.endsWith(".js")) return "application/javascript";
      else if(filename.endsWith(".png")) return "image/png";
      else if(filename.endsWith(".gif")) return "image/gif";
      else if(filename.endsWith(".jpg")) return "image/jpeg";
      else if(filename.endsWith(".ico")) return "image/x-icon";
      else if(filename.endsWith(".xml")) return "text/xml";
      else if(filename.endsWith(".pdf")) return "application/x-pdf";
      else if(filename.endsWith(".zip")) return "application/x-zip";
      else if(filename.endsWith(".gz")) return "application/x-gzip";
      return "text/plain";
    }
    //Given a file path, look for it in the SPIFFS file storage. Returns true if found, returns false if not found.
    bool handleFileRead(String path){
      DBG_OUTPUT_PORT.println("handleFileRead: " + path);
      if(path.endsWith("/")) path += "index.html";
      String contentType = getContentType(path);
      String pathWithGz = path + ".gz";
      if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){
        if(SPIFFS.exists(pathWithGz))
          path += ".gz";
        File file = SPIFFS.open(path, "r");
        size_t sent = webServer.streamFile(file, contentType);
        file.close();
        return true;
      }
      return false;
    }
     
    f0raster0 likes this.
  17. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    The important part of this is this one:

    Code:
    #include <ESP8266WiFi.h>
    #include <DNSServer.h>
    #include <ESP8266WebServer.h>
    #include <ESP8266mDNS.h>
    #include <FS.h>
    #define DBG_OUTPUT_PORT Serial
    const byte DNS_PORT = 53;
    const char *ssid = "B4X - Captive Portal";
    IPAddress apIP(
    19216811);
    DNSServer dnsServer;
    ESP8266WebServer webServer(
    80);

    void setup() {
      WiFi.mode(WIFI_AP);
      WiFi.softAPConfig(apIP, apIP, IPAddress(
    2552552550));
      WiFi.softAP(ssid);
      dnsServer.start(DNS_PORT, 
    "*", apIP);
      DBG_OUTPUT_PORT.begin(
    115200);
      DBG_OUTPUT_PORT.print(
    "\n");
      DBG_OUTPUT_PORT.setDebugOutput(
    true);
      SPIFFS.begin();
      //redirect all traffic 
    to index.html
      webServer.onNotFound([]() {
          
    const char *metaRefreshStr = "<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" >\r\n<head>\r\n    <title><\/title>\r\n    <style type=\"text\/css\">\r\n        .style1\r\n        {\r\n            font-family: Arial, Helvetica, sans-serif;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <p class=\"style1\">\r\n        This page was created to demonstrate that it is possible to make a Captive \r\n        Portal with the ESP8266.<\/p>\r\n    <p class=\"style1\">\r\n        Created by Alberto Iglesias<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n";
          webServer.send(
    200"text/html", metaRefreshStr);
      
    });
     
      webServer.begin();
    }
    void loop() {
      dnsServer.processNextRequest();
      webServer.handleClient();
    }
    @Erel, how difficult is put this on inline code or make some library?

    Because I see some duplication on "loop" function when trying to compile
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice