embedded client server

[bmartin0]

Hello,
I am trying to create a web page using an esp32 as an AP. I want my ESP32 board to be an AP that the user can log onto and then go to a webpage address and read and set values for the board. Set text values to name signals, update sensor readings from the board, etc. I can do this in Arduino but am having a difficult time in Eclipse with the ESP32 IDF.
Can anyone provide sample code on how to create a client server and do the above? I'm new to ESP32 IDF so I'm really at a loss as to how to proceed. I've got all the example projects such as softAP and simple server running, it's the code to implement the client server to respond to a user logging onto the AP/webpage that I am having trouble with.
Any help/direction would be greatly appreciated.
Thanks

[matthias122]

Hello bmartin0,
I did a implementation as you described. It is not stable at the moment so it is not Public.
I used the example Restful Server example from IDF as starting point https://github.com/espressif/esp-idf/tr ... ful_server
I'm also using Vue as framework for the Web Application and it is stored on a SPIFFS Partition.
You can send a PM to get some code snippets.

[bmartin0]

Hello matthias122,
I've got the restful server running, just need a little extra help to get started. I'm new to this forum, can you tell me how to PM you? Not precisely sure how to do that but would really appreciate any code you have to get me started.
Thanks

[matthias122]

Hello bmartin0,
I'm not allowed send and get PMs at the moment.
For which kind do you need specific help?

[bmartin0]

Hello m,atthias122,
I cannot post PM's either at the moment. Below is the Arduino code to implement the web page. This is what I'm trying to port to Eclipse and the ESP32 IDF. Maybe this will give you and idea of what I'm trying to achieve. The web page is shown. I copied a picture of the web page to this post. Basically it is 3 button controls that turn on/off 3 LED's on my target board.
Thanks

Arduino Code:
#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "Data Logger 0001"; // Enter SSID here
const char* password = "12345678"; //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
//IPAddress gateway(192,168,1,1);
//IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 32;
bool LED1status = LOW;

uint8_t LED2pin = 33;
bool LED2status = LOW;

uint8_t LED3pin = 25;
bool LED3status = LOW;

void setup() {
Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);
pinMode(LED3pin, OUTPUT);

WiFi.softAP(ssid, password);
//bm added the next line and commented out the line WiFi.softAPConfig(local_ip, gateway, subnet);
IPAddress myIP = WiFi.softAPIP();
//Original code next line
//WiFi.softAPConfig(local_ip, gateway, subnet);
//bm added the next 2 lines
Serial.print("AP IP address: ");
Serial.println(myIP);
server.begin();

delay(100);

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);
server.on("/led3on", handle_led3on);
server.on("/led3off", handle_led3off);
server.onNotFound(handle_NotFound);

server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}

if(LED2status)
{digitalWrite(LED2pin, HIGH);}
else
{digitalWrite(LED2pin, LOW);}

if(LED3status)
{digitalWrite(LED3pin, HIGH);}
else
{digitalWrite(LED3pin, LOW);}

}

void handle_OnConnect() {
LED1status = LOW;
LED2status = LOW;
LED3status = LOW;
Serial.println("GPIO32 Status: OFF | GPIO33 Status: OFF| GPIO25 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}

void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO32 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}

void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO32 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}

void handle_led2on() {
LED2status = HIGH;
Serial.println("GPIO33 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}

void handle_led2off() {
LED2status = LOW;
Serial.println("GPIO33 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}


//bm add
void handle_led3on() {
LED3status = HIGH;
Serial.println("GPIO25 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}

void handle_led3off() {
LED3status = LOW;
Serial.println("GPIO25 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status));
}


void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat,uint8_t led3stat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";
//ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: left;}\n";
//ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 10px;} h3 {color: #444444;margin-bottom: 50px;}\n";
//ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin-left: 10px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #2980b9;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>GST Data Logger Web Server</h1>\n";
ptr +="<h3>Data Logger 0001</h3>\n";

if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

if(led3stat)
{ptr +="<p>LED3 Status: ON</p><a class=\"button button-off\" href=\"/led3off\">OFF</a>\n";}
else
{ptr +="<p>LED3 Status: OFF</p><a class=\"button button-on\" href=\"/led3on\">ON</a>\n";}

ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

[matthias122]

Hello bmartin0,
I think you are using Async Webserver or something similar with your Arduino Code.
This more comfortable Webserver is not available in IDF.
So you can use the simple way to transfer Data via the URL like here https://github.com/espressif/esp-idf/bl ... e_server.c
or you can use JSON Objects to transfer datas like in the restful_server example.
I chose the way to use Vue framework with JSON Objects. The over way is more simple and has a smaller overhead.

[bmartin0]

Hellow matthias122,
I will take a look at this code. Thank you for following up on this.

[kraxor]

Hi, I'm currently working on a framework that includes a HTTP server that you can use like so:

Code: Select all

using namespace kbf;

http::Response handleHello(const http::Request &request, void *) {
    return http::Response("<html><body>hello!</body></html>", 200);
}

int main() {
    wifi::ap::start(SSID, PASS);
    
    auto server = http::Server();
    server.route({http::GET, "/hello", handleHello, nullptr});
    server.start(80);
    
    while (true) kbf::sleep(1000);
}

It's nowhere near complete and currently I'm the only human using it for anything but it might be worth checking out: https://git.kraxor.net/kraxor/kbf

There is also a controller-based version that I call "WebService", here's an example controller that handles the endpoint "/settings". It returns current wifi settings on GET requests, and updates settings on POST: https://git.kraxor.net/kraxor/doorkeepe ... roller.cpp

[bmartin0]

Thanks for sharing this, I will definitely take a look.

[Vikram]

Hello bmartin0,
I think you are using Async Webserver or something similar with your Arduino Code.
This more comfortable Webserver is not available in IDF.
So you can use the simple way to transfer Data via the URL like here https://github.com/espressif/esp-idf/bl ... e_server.c
or you can use JSON Objects to transfer datas like in the restful_server example.
I chose the way to use Vue framework with JSON Objects. The over way is more simple and has a smaller overhead.

Hey Matthias

What is the pros if we do use https webserver on ESP32 and why can't we use ESP32 as MQTT Client?
It seems to be light weight and easy to code it and easy to understand as its just strings and json payloads.