How to use Esp-idf to run Html code

[Thanyasit]

Can anyone direct me to a working example of a simple to use esp-idf to run Html code?

Code: Select all

<div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          </div>

Please guide me
Thank you

[ESP_Jan]

Hi Thanyasit,
Please take a look at http_server examples: GitHub: http_server examples

You may use the restful example to build a web API and a frontend (pretty advanced).

Or use the simple example which is probably the one for you.

[Thanyasit]

Hi Thanyasit,
Please take a look at http_server examples: GitHub: http_server examples

You may use the restful example to build a web API and a frontend (pretty advanced).

Or use the simple example which is probably the one for you.

Thank you

[Thanyasit]

I tried adding it but it still wrong.
Which API should I use?
Can you create an example?

Code: Select all

/* Simple HTTP Server Example

   This example code is in the Public Domain (or CC0 licensed, at your option.)

   Unless required by applicable law or agreed to in writing, this
   software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
   CONDITIONS OF ANY KIND, either express or implied.
*/

#include <esp_wifi.h>
#include <esp_event.h>
#include <esp_log.h>
#include <esp_system.h>
#include <nvs_flash.h>
#include <sys/param.h>
#include "nvs_flash.h"
#include "tcpip_adapter.h"
#include "esp_eth.h"
//#include "protocol_examples_common.h"

#include <esp_http_server.h>

#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_system.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "nvs_flash.h"

#include "lwip/err.h"
#include "lwip/sys.h"

#include <stdio.h>
#include <string.h>
#include "driver/gpio.h"
#include "lwip/netdb.h"
#include "lwip/api.h"
#include "mdns.h"
/* A simple example that demonstrates how to create GET and POST
 * handlers for the web server.
 */

#define EXAMPLE_ESP_WIFI_SSID      CONFIG_ESP_WIFI_SSID
#define EXAMPLE_ESP_WIFI_PASS      CONFIG_ESP_WIFI_PASSWORD
#define EXAMPLE_ESP_WIFI_CHANNEL   CONFIG_ESP_WIFI_CHANNEL
#define EXAMPLE_MAX_STA_CONN       CONFIG_ESP_MAX_STA_CONN

static const char *TAG = "wifi softAP Web";


//const char HTTPD_TYPE_TEXT[] = "<div class="slidecontainer">
 // <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
//</div>";

/* An HTTP GET handler */

static esp_err_t hello_get_handler(httpd_req_t *req)
{
    char*  buf;
    size_t buf_len;

    /* Get header value string length and allocate memory for length + 1,
     * extra byte for null termination */
    buf_len = httpd_req_get_hdr_value_len(req, "Host") + 1;
    if (buf_len > 1) {
        buf = malloc(buf_len);
        /* Copy null terminated value string into buffer */
        if (httpd_req_get_hdr_value_str(req, "Host", buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found header => Host: %s", buf);
        }
        free(buf);
    }
    /* Read URL query string length and allocate memory for length + 1,
     * extra byte for null termination */
    /* Set some custom headers */
    /* Send response with custom headers and body set as the
     * string passed in user context*/
    const char* resp_str = (const char*) req->user_ctx;
    httpd_resp_send(req, resp_str, strlen(resp_str));

    /* After sending the HTTP response the old HTTP request
     * headers are lost. Check if HTTP request headers can be read now. */
    if (httpd_req_get_hdr_value_len(req, "Host") == 0) {
        ESP_LOGI(TAG, "Request headers lost");
    }
    return ESP_OK;
}

static const httpd_uri_t hello = {
    .uri       = "/hello",
    .method    = HTTP_GET,
    .handler   = hello_get_handler,
    /* Let's pass response string in user
     * context to demonstrate it's usage */
    .user_ctx  = "<div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          </div>"
};

/* This handler allows the custom error handling functionality to be
 * tested from client side. For that, when a PUT request 0 is sent to
 * URI /ctrl, the /hello and /echo URIs are unregistered and following
 * custom error handler http_404_error_handler() is registered.
 * Afterwards, when /hello or /echo is requested, this custom error
 * handler is invoked which, after sending an error message to client,
 * either closes the underlying socket (when requested URI is /echo)
 * or keeps it open (when requested URI is /hello). This allows the
 * client to infer if the custom error handler is functioning as expected
 * by observing the socket state.
 */
//esp_err_t http_404_error_handler(httpd_req_t *req, httpd_err_code_t err)
//{
  //  if (strcmp("/hello", req->uri) == 0) {
    //    httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "/hello URI is not available");
      //  /* Return ESP_OK to keep underlying socket open */
    //    return ESP_OK;
    //} else if (strcmp("/echo", req->uri) == 0) {
     //   httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "/echo URI is not available");
        /* Return ESP_FAIL to close underlying socket */
     //   return ESP_FAIL;
   // }
    /* For any other URI send 404 and close socket */
   // httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Some 404 error message");
   // return ESP_FAIL;
//}

static httpd_handle_t start_webserver(void)
{
    httpd_handle_t server = NULL;
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();

    // Start the httpd server
    ESP_LOGI(TAG, "Starting server on port: '%d'", config.server_port);
    if (httpd_start(&server, &config) == ESP_OK) {
        // Set URI handlers
        ESP_LOGI(TAG, "Registering URI handlers");
        httpd_register_uri_handler(server, &hello);
        //httpd_register_uri_handler(server, &echo);
       // httpd_register_uri_handler(server, &ctrl);
        return server;
    }

    ESP_LOGI(TAG, "Error starting server!");
    return NULL;
}

static void stop_webserver(httpd_handle_t server)
{
    // Stop the httpd server
    httpd_stop(server);
}

/*
static void disconnect_handler(void* arg, esp_event_base_t event_base, 
                               int32_t event_id, void* event_data)
{
    httpd_handle_t* server = (httpd_handle_t*) arg;
    if (*server) {
        ESP_LOGI(TAG, "Stopping webserver");
        stop_webserver(*server);
        *server = NULL;
    }
}

static void connect_handler(void* arg, esp_event_base_t event_base, 
                            int32_t event_id, void* event_data)
{
    httpd_handle_t* server = (httpd_handle_t*) arg;
    if (*server == NULL) {
        ESP_LOGI(TAG, "Starting webserver");
        *server = start_webserver();
    }
}
*/

static void wifi_event_handler(void* arg, esp_event_base_t event_base,int32_t event_id, void* event_data)
{
    if (event_id == WIFI_EVENT_AP_STACONNECTED) {
        wifi_event_ap_staconnected_t* event = (wifi_event_ap_staconnected_t*) event_data;
        ESP_LOGI(TAG, "station "MACSTR" join, AID=%d",
                 MAC2STR(event->mac), event->aid);
    } else if (event_id == WIFI_EVENT_AP_STADISCONNECTED) {
        wifi_event_ap_stadisconnected_t* event = (wifi_event_ap_stadisconnected_t*) event_data;
        ESP_LOGI(TAG, "station "MACSTR" leave, AID=%d",
                 MAC2STR(event->mac), event->aid);
    }
}

void wifi_init_softap()
{
    //tcpip_adapter_init();
   // ESP_ERROR_CHECK(esp_event_loop_create_default());

    wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
    ESP_ERROR_CHECK(esp_wifi_init(&cfg));

    ESP_ERROR_CHECK(esp_event_handler_register(WIFI_EVENT, ESP_EVENT_ANY_ID, &wifi_event_handler, NULL));

    wifi_config_t wifi_config = {
        .ap = {
            .ssid = EXAMPLE_ESP_WIFI_SSID,
            .ssid_len = strlen(EXAMPLE_ESP_WIFI_SSID),
            .channel = EXAMPLE_ESP_WIFI_CHANNEL,
            .password = EXAMPLE_ESP_WIFI_PASS,
            .max_connection = EXAMPLE_MAX_STA_CONN,
            .authmode = WIFI_AUTH_WPA_WPA2_PSK
        },
    };
    if (strlen(EXAMPLE_ESP_WIFI_PASS) == 0) {
        wifi_config.ap.authmode = WIFI_AUTH_OPEN;
    }

    ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_AP));
    ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_AP, &wifi_config));
    ESP_ERROR_CHECK(esp_wifi_start());

    ESP_LOGI(TAG, "wifi_init_softap finished. SSID:%s password:%s channel:%d",
             EXAMPLE_ESP_WIFI_SSID, EXAMPLE_ESP_WIFI_PASS, EXAMPLE_ESP_WIFI_CHANNEL);
}

void app_main()
{
    static httpd_handle_t server = NULL;

    ESP_ERROR_CHECK(nvs_flash_init());
    tcpip_adapter_init();
    ESP_ERROR_CHECK(esp_event_loop_create_default());

    /* This helper function configures Wi-Fi or Ethernet, as selected in menuconfig.
     * Read "Establishing Wi-Fi or Ethernet Connection" section in
     * examples/protocols/README.md for more information about this function.
     */
    //ESP_ERROR_CHECK(example_connect());

    /* Register event handlers to stop the server when Wi-Fi or Ethernet is disconnected,
     * and re-start it upon connection.
     */
//#ifdef 
    ESP_LOGI(TAG, "ESP_WIFI_MODE_AP");
    wifi_init_softap();
   // ESP_ERROR_CHECK(esp_event_handler_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &connect_handler, &server));
  //  ESP_ERROR_CHECK(esp_event_handler_register(WIFI_EVENT, WIFI_EVENT_AP_STOP, &disconnect_handler, &server));
//#endif // CONFIG_EXAMPLE_CONNECT_WIFI
/*
#ifdef CONFIG_EXAMPLE_CONNECT_ETHERNET
    ESP_ERROR_CHECK(esp_event_handler_register(IP_EVENT, IP_EVENT_ETH_GOT_IP, &connect_handler, &server));
    ESP_ERROR_CHECK(esp_event_handler_register(ETH_EVENT, ETHERNET_EVENT_DISCONNECTED, &disconnect_handler, &server));
#endif // CONFIG_EXAMPLE_CONNECT_ETHERNET
*/
    /* Start the server for the first time */
    server = start_webserver();
}

[davidzuhn]

What do you expect to happen with this bit of HTML? I'm not sure what you mean, since I don't normally think of "running HTML". You can parse it and display something on a user interface (such as within a web browser). So if you're asking how to present a slider to a user from your ESP32 code, there's so much missing (what interface does your user see, how are you driving it, etc) that makes your question hard to answer.

If you're trying to send this to a web browser, presumably as the response to an HTTP request (which may or may not have been made over a TLS connection), then this is just a chunk of text that requires no special processing on the ESP32. You do, however, have to place it in a larger content, and a standalone <div> block isn't likely to be very meaningful to that web browser (HTML documents have a larger structure, of which <div> is but one possible component).

As for the immediate errors you showed, you're trying to initialize a C string that's part of a structure:

Code: Select all

   .user_ctx  = "<div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          </div>"
}

This sets .user_ctx to "<div class=", followed by a keyword slidecontainer (which C does not recognize), followed by another string constant ">\n<input type=", and so forth.

If you're going to use a large string constant like this, you need to quote your embedded quote delimiters.

Code: Select all

char *a = "this is a very \"long\" string that contains some some embedded HTML: <div class=\"slidecontainer\">\n<input type=\"range\"...";

But I think you need to address the original question: what do you mean by "run HTML code"? And what do you expect to happen? That's not clear from your question, and will help with followup answers.

[Thanyasit]

What do you expect to happen with this bit of HTML? I'm not sure what you mean, since I don't normally think of "running HTML". You can parse it and display something on a user interface (such as within a web browser). So if you're asking how to present a slider to a user from your ESP32 code, there's so much missing (what interface does your user see, how are you driving it, etc) that makes your question hard to answer.

If you're trying to send this to a web browser, presumably as the response to an HTTP request (which may or may not have been made over a TLS connection), then this is just a chunk of text that requires no special processing on the ESP32. You do, however, have to place it in a larger content, and a standalone <div> block isn't likely to be very meaningful to that web browser (HTML documents have a larger structure, of which <div> is but one possible component).

As for the immediate errors you showed, you're trying to initialize a C string that's part of a structure:

Code: Select all

   .user_ctx  = "<div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          </div>"
}

This sets .user_ctx to "<div class=", followed by a keyword slidecontainer (which C does not recognize), followed by another string constant ">\n<input type=", and so forth.

If you're going to use a large string constant like this, you need to quote your embedded quote delimiters.

Code: Select all

char *a = "this is a very \"long\" string that contains some some embedded HTML: <div class=\"slidecontainer\">\n<input type=\"range\"...";

But I think you need to address the original question: what do you mean by "run HTML code"? And what do you expect to happen? That's not clear from your question, and will help with followup answers.

I am a beginner
I want to do a PWM Slider HTTP Web Server using Esp-idf.
Like the video below
https://www.youtube.com/watch?v=s-NFdMXA0H4&t=167s

But I have no knowledge of web server and html at all.
What more should I study?
Please guide me
Thank you

[Thanyasit]

What do you expect to happen with this bit of HTML? I'm not sure what you mean, since I don't normally think of "running HTML". You can parse it and display something on a user interface (such as within a web browser). So if you're asking how to present a slider to a user from your ESP32 code, there's so much missing (what interface does your user see, how are you driving it, etc) that makes your question hard to answer.

If you're trying to send this to a web browser, presumably as the response to an HTTP request (which may or may not have been made over a TLS connection), then this is just a chunk of text that requires no special processing on the ESP32. You do, however, have to place it in a larger content, and a standalone <div> block isn't likely to be very meaningful to that web browser (HTML documents have a larger structure, of which <div> is but one possible component).

As for the immediate errors you showed, you're trying to initialize a C string that's part of a structure:

Code: Select all

   .user_ctx  = "<div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          </div>"
}

This sets .user_ctx to "<div class=", followed by a keyword slidecontainer (which C does not recognize), followed by another string constant ">\n<input type=", and so forth.

If you're going to use a large string constant like this, you need to quote your embedded quote delimiters.

Code: Select all

char *a = "this is a very \"long\" string that contains some some embedded HTML: <div class=\"slidecontainer\">\n<input type=\"range\"...";

But I think you need to address the original question: what do you mean by "run HTML code"? And what do you expect to happen? That's not clear from your question, and will help with followup answers.

Thanks you a lot.
I can do it.

[nopnop2002]

I ported from Arduino environment to ESP-IDF.

https://github.com/nopnop2002/esp-idf-pwm-slider