Code: Select all
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
Thank you
Code: Select all
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
ESP_Jan wrote: ↑Tue Dec 08, 2020 1:52 pmHi 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.
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();
}
Code: Select all
.user_ctx = "<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>"
}
Code: Select all
char *a = "this is a very \"long\" string that contains some some embedded HTML: <div class=\"slidecontainer\">\n<input type=\"range\"...";
davidzuhn wrote: ↑Fri Dec 11, 2020 6:07 pmWhat 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:
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.Code: Select all
.user_ctx = "<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> </div>" }
If you're going to use a large string constant like this, you need to quote your embedded quote delimiters.
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.Code: Select all
char *a = "this is a very \"long\" string that contains some some embedded HTML: <div class=\"slidecontainer\">\n<input type=\"range\"...";
davidzuhn wrote: ↑Fri Dec 11, 2020 6:07 pmWhat 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:
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.Code: Select all
.user_ctx = "<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> </div>" }
If you're going to use a large string constant like this, you need to quote your embedded quote delimiters.
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.Code: Select all
char *a = "this is a very \"long\" string that contains some some embedded HTML: <div class=\"slidecontainer\">\n<input type=\"range\"...";
Users browsing this forum: Google [Bot] and 55 guests