https://github.com/nopnop2002/esp-idf-web-gpio
GPIO control using web browser
https://github.com/nopnop2002/esp-idf-web-gpio
browser esp-idf esp32 gpio gpio-pins gpio-port http http-server web-server
Last synced: 4 months ago
JSON representation
GPIO control using web browser
- Host: GitHub
- URL: https://github.com/nopnop2002/esp-idf-web-gpio
- Owner: nopnop2002
- License: mit
- Created: 2021-07-03T10:56:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-08T18:58:53.000Z (5 months ago)
- Last Synced: 2025-05-08T19:46:04.504Z (5 months ago)
- Topics: browser, esp-idf, esp32, gpio, gpio-pins, gpio-port, http, http-server, web-server
- Language: C
- Homepage:
- Size: 361 KB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esp-idf-web-gpio
GPIO control using web browser.
You can change gpio direction and gpio value using built-in web server.
# Software requirements
ESP-IDF V5.0 or later.
ESP-IDF V4.4 release branch reached EOL in July 2024.
ESP-IDF V5.1 is required when using ESP32-C6.
# Installation
```
git clone https://github.com/nopnop2002/esp-idf-web-gpio
cd esp-idf-web-gpio/
idf.py menuconfig
idf.py flash
```
# Configuration
You have to set this config value with menuconfig.
You can use static ip.
You can connect using mDNS host name.
# Definition GPIO
The GPIO pin number to control is defined in csv/gpio.csv.
The file gpio.csv has three columns.
In the first column you need to specify the GPIO number.
On the ESP32, GPIO up to 39.
On the ESP32-S2, GPIO up to 46.
On the ESP32-S3, GPIO up to 48.
On the ESP32-C2, GPIO up to 18.
On the ESP32-C3, GPIO up to 19.
This project don't care about the maximum number of GPIO.
This project don't care if the number is valid. You need to define it carefully.
In the second column you have to specify the GPIO Initial direction.
The GPIO direction is either I(for INPUT) or O(for OUTPUT).
On the ESP32, GPIOs 35-39 are input-only so cannot be used as outputs.
On the ESP32-S2, GPIO 46 is input-only so cannot be used as outputs.
This project don't care if GPIO is input-only. You need to define it carefully.
In the last column you have to specify the GPIO Initial value for OUTPUT.
INPUT pin don't care.
```
12,O,0
13,O,1
14,I,0
15,I,0
```
The simplest circuit connects GPIO12 and GPIO14, and GPIO13 and GPIO15.
If you change the value of GPIO12, the value of GPIO14 will change.
If you change the value of GPIO13, the value of GPIO15 will change.
# Using RESTful API
|API|Method|Resource Example|Description|
|:-:|:-:|:-:|:-:|
|/api/gpio/info|GET||Client can get gpio information|
|/api/gpio/mode|POST|{"gpio":12, "mode":"INPUT"}
{"gpio":12, "mode":"OUTPUT"}|Client can set gpio direction|
|/api/gpio/value|POST|{"gpio":12, "value":0}
{"gpio":12, "value":1}|Client can set gpio value|
# Using RESTful API with curl command
## /api/gpio/info
```
$ curl 'http://esp32-server.local:8080/api/gpio/info' | python -m json.tool
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 254 100 254 0 0 1881 0 --:--:-- --:--:-- --:--:-- 1881
[
{
"id": 0,
"gpio": 12,
"mode": "OUTPUT",
"value": 0
},
{
"id": 1,
"gpio": 13,
"mode": "OUTPUT",
"value": 1
},
{
"id": 2,
"gpio": 14,
"mode": "INPUT",
"value": 0
},
{
"id": 3,
"gpio": 15,
"mode": "INPUT",
"value": 1
}
]
```
## /api/gpio/mode
```
$ curl -X POST -H "Content-Type: application/json" -d '{"gpio":12, "mode":"INPUT"}' http://esp32-server.local:8080/api/gpio/mode
GPIO mode set successfully
$ curl -X POST -H "Content-Type: application/json" -d '{"gpio":12, "mode":"OUTPUT"}' http://esp32-server.local:8080/api/gpio/mode
GPIO mode set successfully
```
## /api/gpio/value
```
$ curl -X POST -H "Content-Type: application/json" -d '{"gpio":12, "value":1}' http://esp32-server.local:8080/api/gpio/value
GPIO value set successfully
$ curl -X POST -H "Content-Type: application/json" -d '{"gpio":12, "value":0}' http://esp32-server.local:8080/api/gpio/value
GPIO value set successfully
```
# How to browse image data using built-in http server
Even if there are files in SPIFFS, the esp-idf http server does not support this:
```
httpd_resp_sendstr_chunk(req, "
");
```
You need to convert the image file to base64 string.
```
httpd_resp_sendstr_chunk(req, ";)
");
```
Images in base64 format are stored in the icons folder.
I converted using the base64 command.
```
$ base64 png/box-in-icon.png > icons/box-in-icon.txt
```