From 927105788b13193e24f35ce85d0b4ef0874c21aa Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Mon, 19 May 2025 22:25:12 -0700 Subject: [PATCH 01/10] Add files via upload --- content/tutorials/TEMPLATE.md | 107 ++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 content/tutorials/TEMPLATE.md diff --git a/content/tutorials/TEMPLATE.md b/content/tutorials/TEMPLATE.md new file mode 100644 index 00000000..298d19c3 --- /dev/null +++ b/content/tutorials/TEMPLATE.md @@ -0,0 +1,107 @@ +--- +title: My Super Awesome Tutorial +date: 1970-01-01 +authors: + - name: John Doe + - name: Mary Jane +--- + +![relevant graphic or workshop logo](image/path) + +## Introduction + +Write a short section on what the tutorial is aiming to accomplish. +What is the motivation behind the tutorial? +What do you want readers to gain from the tutorial? + +### Learning Objectives + +- Bullet list of skills/concepts to be covered + +Any additional notes from the developers can be included here. + +### Background Information + +Describe your topic here. What does it do? Why do you use it? +Are there other similar things to use? What are the pros and cons? +Explain important concepts that are necessary to understand. +Include (and cite if needed) any visuals that will help the audience understand. + +## Getting Started + +For any software prerequisites, write a simple excerpt on each +technology the participant will be expecting to download and install. +Aim to demystify the technologies being used and explain any design +decisions that were taken. Walk through the installation processes +in detail. Be aware of any operating system differences. +For hardware prerequisites, list all the necessary components that +the participant will receive. A table showing component names and +quantities should suffice. Link any reference sheets or guides that +the participant may need. +The following are stylistic examples of possible prerequisites, +customize these for each workshop. + +### Required Downloads and Installations + +List any required downloads and installations here. +Make sure to include tutorials on how to install them. +You can either make your own tutorials or include a link to them. + +### Required Components + +List your required hardware components and the quantities here. + +| Component Name | Quanitity | +| -------------- | --------- | +| | | +| | | + +### Required Tools and Equipment + +List any tools and equipment you need here. +(Ex, computer, soldering station, etc.) + +## Part 01: Name + +### Introduction + +Briefly introduce what you are teaching in this section. + +### Objective + +- List the learning objectives of this section + +### Background Information + +Give a brief explanation of the technical skills learned/needed +in this challenge. There is no need to go into detail as a +separation document should be prepared to explain more in depth +about the technical skills + +### Components + +- List the components needed in this challenge + +### Instructional + +Teach the contents of this section + +## Example + +### Introduction + +Introduce the example that you are showing here. + +### Example + +Present the example here. Include visuals to help better understanding + +### Analysis + +Explain how the example used your tutorial topic. Give in-depth analysis of each part and show your understanding of the tutorial topic + +## Additional Resources + +### Useful links + +List any sources you used, documentation, helpful examples, similar projects etc. From 42bbafe713a587d957fda52123bdb9509487a262 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Mon, 19 May 2025 22:45:57 -0700 Subject: [PATCH 02/10] Update TEMPLATE.md --- content/tutorials/TEMPLATE.md | 123 ++++++++++++++++++++-------------- 1 file changed, 71 insertions(+), 52 deletions(-) diff --git a/content/tutorials/TEMPLATE.md b/content/tutorials/TEMPLATE.md index 298d19c3..56082b87 100644 --- a/content/tutorials/TEMPLATE.md +++ b/content/tutorials/TEMPLATE.md @@ -1,107 +1,126 @@ --- -title: My Super Awesome Tutorial -date: 1970-01-01 +title: ESP32-S2 Wi-Fi LED Toggle Tutorial +date: 2025-05-19 authors: - - name: John Doe - - name: Mary Jane + - name: Genaro Salazar Ruiz --- -![relevant graphic or workshop logo](image/path) +![ESP32 DevKit Board](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/ESP32-DevKitC.jpg/800px-ESP32-DevKitC.jpg) ## Introduction -Write a short section on what the tutorial is aiming to accomplish. -What is the motivation behind the tutorial? -What do you want readers to gain from the tutorial? +This tutorial teaches you how to build a simple SoftAP-hosted webpage that lets you control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser—no internet required. ### Learning Objectives -- Bullet list of skills/concepts to be covered - -Any additional notes from the developers can be included here. +- Create a Soft Access Point with the ESP32 +- Serve an HTML page from the ESP32 itself +- Toggle GPIO outputs through basic web buttons ### Background Information -Describe your topic here. What does it do? Why do you use it? -Are there other similar things to use? What are the pros and cons? -Explain important concepts that are necessary to understand. -Include (and cite if needed) any visuals that will help the audience understand. +The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its own network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. ## Getting Started -For any software prerequisites, write a simple excerpt on each -technology the participant will be expecting to download and install. -Aim to demystify the technologies being used and explain any design -decisions that were taken. Walk through the installation processes -in detail. Be aware of any operating system differences. -For hardware prerequisites, list all the necessary components that -the participant will receive. A table showing component names and -quantities should suffice. Link any reference sheets or guides that -the participant may need. -The following are stylistic examples of possible prerequisites, -customize these for each workshop. - ### Required Downloads and Installations -List any required downloads and installations here. -Make sure to include tutorials on how to install them. -You can either make your own tutorials or include a link to them. +- [Arduino IDE](https://www.arduino.cc/en/software) +- ESP32 Board Definitions + Board Manager URL: -### Required Components -List your required hardware components and the quantities here. +### Required Components -| Component Name | Quanitity | -| -------------- | --------- | -| | | -| | | +| Component Name | Quantity | +|------------------|----------| +| ESP32-S2 DevKit | 1 | +| USB-C Cable | 1 | ### Required Tools and Equipment -List any tools and equipment you need here. -(Ex, computer, soldering station, etc.) +- Computer with Arduino IDE installed +- Web browser (Chrome, Firefox, etc.) -## Part 01: Name +## Part 01: Wi-Fi LED Control via Web Page ### Introduction -Briefly introduce what you are teaching in this section. +In this section, you'll configure the ESP32-S2 as a Wi-Fi access point and host an HTML page to control two GPIOs connected to LEDs. ### Objective -- List the learning objectives of this section +- Set up SoftAP mode +- Control GPIO 17 and GPIO 18 from a browser ### Background Information -Give a brief explanation of the technical skills learned/needed -in this challenge. There is no need to go into detail as a -separation document should be prepared to explain more in depth -about the technical skills +You'll use the ESP32 libraries `` and `` to set up a server. The client browser will connect to the ESP32's network and send GET requests to specific routes, triggering the LEDs. ### Components -- List the components needed in this challenge +- ESP32-S2 DevKit (LEDs on GPIO 17 and 18) ### Instructional -Teach the contents of this section - +```cpp +#include +#include + +#define LED1_PIN 17 +#define LED2_PIN 18 + +WebServer server(80); + +void handleRoot() { +server.send(200, "text/html", "\ +

LED Control

\ + LED 1 ON
\ + LED 1 OFF
\ + LED 2 ON
\ + LED 2 OFF\ + "); +} + +void handleLED1On() { digitalWrite(LED1_PIN, HIGH); server.send(200, "text/plain", "LED1 ON"); } +void handleLED1Off() { digitalWrite(LED1_PIN, LOW); server.send(200, "text/plain", "LED1 OFF"); } +void handleLED2On() { digitalWrite(LED2_PIN, HIGH); server.send(200, "text/plain", "LED2 ON"); } +void handleLED2Off() { digitalWrite(LED2_PIN, LOW); server.send(200, "text/plain", "LED2 OFF"); } + +void setup() { +pinMode(LED1_PIN, OUTPUT); +pinMode(LED2_PIN, OUTPUT); +WiFi.softAP("ESP32_LED_AP", "genny123"); +server.on("/", handleRoot); +server.on("/led1/on", handleLED1On); +server.on("/led1/off", handleLED1Off); +server.on("/led2/on", handleLED2On); +server.on("/led2/off", handleLED2Off); +server.begin(); +} + +void loop() { +server.handleClient(); +} +``` ## Example ### Introduction -Introduce the example that you are showing here. +This example shows the complete code that creates an ESP32-based SoftAP, serves a webpage, and allows the user to control two LEDs. ### Example -Present the example here. Include visuals to help better understanding +Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. ### Analysis -Explain how the example used your tutorial topic. Give in-depth analysis of each part and show your understanding of the tutorial topic +This example uses HTML served directly from the microcontroller and leverages the WebServer library to handle URL routing. It’s a lightweight, no-backend-required method to control hardware in real time—perfect for rapid prototyping and IoT demos. ## Additional Resources ### Useful links -List any sources you used, documentation, helpful examples, similar projects etc. +- [ESP32 Arduino Docs](https://docs.espressif.com/projects/arduino-esp32/en/latest/) +- [ESP32 GitHub Repo](https://github.com/espressif/arduino-esp32) +- [WebServer Library](https://www.arduino.cc/reference/en/libraries/webserver/) From 528459255ac1d2dee582aceb96db3aac914bbbfa Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Mon, 19 May 2025 23:30:44 -0700 Subject: [PATCH 03/10] Update TEMPLATE.md --- content/tutorials/TEMPLATE.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/content/tutorials/TEMPLATE.md b/content/tutorials/TEMPLATE.md index 56082b87..f4ae3053 100644 --- a/content/tutorials/TEMPLATE.md +++ b/content/tutorials/TEMPLATE.md @@ -5,8 +5,6 @@ authors: - name: Genaro Salazar Ruiz --- -![ESP32 DevKit Board](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/ESP32-DevKitC.jpg/800px-ESP32-DevKitC.jpg) - ## Introduction This tutorial teaches you how to build a simple SoftAP-hosted webpage that lets you control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser—no internet required. @@ -111,7 +109,13 @@ This example shows the complete code that creates an ESP32-based SoftAP, serves ### Example -Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. +Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. + +### UI Example + +If connected and HTML is accessed, you will see this page! + +Screenshot 2025-05-19 at 11 03 18 PM ### Analysis From d9a1689aecce829063eb453d4ff8f335008490d5 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Thu, 5 Jun 2025 23:43:30 -0700 Subject: [PATCH 04/10] Add files via upload --- content/tutorials/ESP32_WIFI_GUI_Tutorial.md | 126 +++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 content/tutorials/ESP32_WIFI_GUI_Tutorial.md diff --git a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md new file mode 100644 index 00000000..3f9b7349 --- /dev/null +++ b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md @@ -0,0 +1,126 @@ +--- +title: ESP32-S2 Wi-Fi LED Toggle Tutorial +date: 2025-05-19 +authors: + - name: Genaro Salazar Ruiz +--- + +![ESP32 DevKit Board](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/ESP32-DevKitC.jpg/800px-ESP32-DevKitC.jpg) + +## Introduction + +This tutorial teaches you how to build a simple SoftAP-hosted webpage that lets you control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser—no internet required. + +### Learning Objectives + +- Create a Soft Access Point with the ESP32 +- Serve an HTML page from the ESP32 itself +- Toggle GPIO outputs through basic web buttons + +### Background Information + +The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its own network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. + +## Getting Started + +### Required Downloads and Installations + +- [Arduino IDE](https://www.arduino.cc/en/software) +- ESP32 Board Definitions + Board Manager URL: + +### Required Components + +| Component Name | Quantity | +|------------------|----------| +| ESP32-S2 DevKit | 1 | +| USB-C Cable | 1 | + +### Required Tools and Equipment + +- Computer with Arduino IDE installed +- Web browser (Chrome, Firefox, etc.) + +## Part 01: Wi-Fi LED Control via Web Page + +### Introduction + +In this section, you'll configure the ESP32-S2 as a Wi-Fi access point and host an HTML page to control two GPIOs connected to LEDs. + +### Objective + +- Set up SoftAP mode +- Control GPIO 17 and GPIO 18 from a browser + +### Background Information + +You'll use the ESP32 libraries `` and `` to set up a server. The client browser will connect to the ESP32's network and send GET requests to specific routes, triggering the LEDs. + +### Components + +- ESP32-S2 DevKit (LEDs on GPIO 17 and 18) + +### Instructional + +```cpp +#include +#include + +#define LED1_PIN 17 +#define LED2_PIN 18 + +WebServer server(80); + +void handleRoot() { +server.send(200, "text/html", "\ +

LED Control

\ + LED 1 ON
\ + LED 1 OFF
\ + LED 2 ON
\ + LED 2 OFF\ + "); +} + +void handleLED1On() { digitalWrite(LED1_PIN, HIGH); server.send(200, "text/plain", "LED1 ON"); } +void handleLED1Off() { digitalWrite(LED1_PIN, LOW); server.send(200, "text/plain", "LED1 OFF"); } +void handleLED2On() { digitalWrite(LED2_PIN, HIGH); server.send(200, "text/plain", "LED2 ON"); } +void handleLED2Off() { digitalWrite(LED2_PIN, LOW); server.send(200, "text/plain", "LED2 OFF"); } + +void setup() { +pinMode(LED1_PIN, OUTPUT); +pinMode(LED2_PIN, OUTPUT); +WiFi.softAP("ESP32_LED_AP", "genny123"); +server.on("/", handleRoot); +server.on("/led1/on", handleLED1On); +server.on("/led1/off", handleLED1Off); +server.on("/led2/on", handleLED2On); +server.on("/led2/off", handleLED2Off); +server.begin(); +} + +void loop() { +server.handleClient(); +} + +``` +## Example + +### Introduction + +This example shows the complete code that creates an ESP32-based SoftAP, serves a webpage, and allows the user to control two LEDs. + +### Example + +Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. + +### Analysis + +This example uses HTML served directly from the microcontroller and leverages the WebServer library to handle URL routing. It’s a lightweight, no-backend-required method to control hardware in real time—perfect for rapid prototyping and IoT demos. + +## Additional Resources + +### Useful links + +- [ESP32 Arduino Docs](https://docs.espressif.com/projects/arduino-esp32/en/latest/) +- [ESP32 GitHub Repo](https://github.com/espressif/arduino-esp32) +- [WebServer Library](https://www.arduino.cc/reference/en/libraries/webserver/) From 4ab17ea275f2c2a880a54bcfe5c4533cefab9806 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Thu, 5 Jun 2025 23:56:24 -0700 Subject: [PATCH 05/10] Update ESP32_WIFI_GUI_Tutorial.md final sub --- content/tutorials/ESP32_WIFI_GUI_Tutorial.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md index 3f9b7349..fbdebb2b 100644 --- a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md +++ b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md @@ -5,11 +5,11 @@ authors: - name: Genaro Salazar Ruiz --- -![ESP32 DevKit Board](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/ESP32-DevKitC.jpg/800px-ESP32-DevKitC.jpg) +![ESP32 SoftAP Webserver Diagram](https://i0.wp.com/randomnerdtutorials.com/wp-content/uploads/2018/07/ESP32-access-point-1.jpg?w=1280&quality=100&strip=all&ssl=1) ## Introduction -This tutorial teaches you how to build a simple SoftAP-hosted webpage that lets you control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser—no internet required. +This tutorial teaches you how to build a simple web page hosted by a SoftAP that allows you to control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser, no internet required. ### Learning Objectives @@ -19,7 +19,7 @@ This tutorial teaches you how to build a simple SoftAP-hosted webpage that lets ### Background Information -The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its own network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. +The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. ## Getting Started @@ -111,11 +111,11 @@ This example shows the complete code that creates an ESP32-based SoftAP, serves ### Example -Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. +Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. Toggle them and watch as the LEDs turn on/off. Experiment with range and see how far the requests can be sent, and notice the delays in time concerning the access point on the ESP32. ### Analysis -This example uses HTML served directly from the microcontroller and leverages the WebServer library to handle URL routing. It’s a lightweight, no-backend-required method to control hardware in real time—perfect for rapid prototyping and IoT demos. +This example uses HTML served directly from the microcontroller and leverages the WebServer library to handle URL routing. It’s a lightweight, back-end-less method to control hardware in real time. Ideal for rapid prototyping and IoT applications... ## Additional Resources From 15ccdf0bc4876dadab7d39f19fb911ac253ef904 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Thu, 5 Jun 2025 23:58:46 -0700 Subject: [PATCH 06/10] Update ESP32_WIFI_GUI_Tutorial.md --- content/tutorials/ESP32_WIFI_GUI_Tutorial.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md index fbdebb2b..0fa38eed 100644 --- a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md +++ b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md @@ -1,5 +1,5 @@ --- -title: ESP32-S2 Wi-Fi LED Toggle Tutorial +title: ESP32-S3 Wi-Fi LED Toggle Tutorial date: 2025-05-19 authors: - name: Genaro Salazar Ruiz @@ -9,7 +9,7 @@ authors: ## Introduction -This tutorial teaches you how to build a simple web page hosted by a SoftAP that allows you to control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser, no internet required. +This tutorial teaches you how to build a simple web page hosted by a SoftAP that allows you to control two onboard LEDs on the ESP32-S3 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser, no internet required. ### Learning Objectives @@ -19,7 +19,7 @@ This tutorial teaches you how to build a simple web page hosted by a SoftAP that ### Background Information -The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. +The ESP32-S3 is a Wi-Fi-enabled microcontroller that supports hosting its own network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. ## Getting Started @@ -33,7 +33,7 @@ The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its networ | Component Name | Quantity | |------------------|----------| -| ESP32-S2 DevKit | 1 | +| ESP32-S3 DevKit | 1 | | USB-C Cable | 1 | ### Required Tools and Equipment @@ -45,7 +45,7 @@ The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its networ ### Introduction -In this section, you'll configure the ESP32-S2 as a Wi-Fi access point and host an HTML page to control two GPIOs connected to LEDs. +In this section, you'll configure the ESP32-S3 as a Wi-Fi access point and host an HTML page to control two GPIOs connected to LEDs. ### Objective @@ -58,7 +58,7 @@ You'll use the ESP32 libraries `` and `` to set up a server ### Components -- ESP32-S2 DevKit (LEDs on GPIO 17 and 18) +- ESP32-S3 DevKit (LEDs on GPIO 17 and 18) ### Instructional @@ -107,7 +107,7 @@ server.handleClient(); ### Introduction -This example shows the complete code that creates an ESP32-based SoftAP, serves a webpage, and allows the user to control two LEDs. +This example shows the complete code that creates an ESP32 SoftAP, serves a webpage, and allows the user to control two LEDs. ### Example From 7db995de03d0b988f5c79fa6bbf8f71771a305b3 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Thu, 5 Jun 2025 23:59:47 -0700 Subject: [PATCH 07/10] Update ESP32_WIFI_GUI_Tutorial.md --- content/tutorials/ESP32_WIFI_GUI_Tutorial.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md index 0fa38eed..b6e3d104 100644 --- a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md +++ b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md @@ -124,3 +124,4 @@ This example uses HTML served directly from the microcontroller and leverages th - [ESP32 Arduino Docs](https://docs.espressif.com/projects/arduino-esp32/en/latest/) - [ESP32 GitHub Repo](https://github.com/espressif/arduino-esp32) - [WebServer Library](https://www.arduino.cc/reference/en/libraries/webserver/) +- [ChatGPT reference](https://chatgpt.com/) From 628e5fe87fbf2481d614068f551a4666dd95de85 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Fri, 6 Jun 2025 00:00:26 -0700 Subject: [PATCH 08/10] Update ESP32_WIFI_GUI_Tutorial.md --- content/tutorials/ESP32_WIFI_GUI_Tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md index b6e3d104..ee26d458 100644 --- a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md +++ b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md @@ -111,7 +111,7 @@ This example shows the complete code that creates an ESP32 SoftAP, serves a webp ### Example -Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. Toggle them and watch as the LEDs turn on/off. Experiment with range and see how far the requests can be sent, and notice the delays in time concerning the access point on the ESP32. +Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`(you can change this access key yourself), then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. Toggle them and watch as the LEDs turn on/off. Experiment with range and see how far the requests can be sent, and notice the delays in time concerning the access point on the ESP32. ### Analysis From 5dba1d54257091dc1b6d5cf50293b6fd46e22310 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Fri, 6 Jun 2025 11:25:44 -0700 Subject: [PATCH 09/10] Delete content/tutorials/TEMPLATE.md --- content/tutorials/TEMPLATE.md | 130 ---------------------------------- 1 file changed, 130 deletions(-) delete mode 100644 content/tutorials/TEMPLATE.md diff --git a/content/tutorials/TEMPLATE.md b/content/tutorials/TEMPLATE.md deleted file mode 100644 index f4ae3053..00000000 --- a/content/tutorials/TEMPLATE.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: ESP32-S2 Wi-Fi LED Toggle Tutorial -date: 2025-05-19 -authors: - - name: Genaro Salazar Ruiz ---- - -## Introduction - -This tutorial teaches you how to build a simple SoftAP-hosted webpage that lets you control two onboard LEDs on the ESP32-S2 DevKit. The board creates its own Wi-Fi network, and you can control the hardware through your phone or browser—no internet required. - -### Learning Objectives - -- Create a Soft Access Point with the ESP32 -- Serve an HTML page from the ESP32 itself -- Toggle GPIO outputs through basic web buttons - -### Background Information - -The ESP32-S2 is a Wi-Fi-enabled microcontroller that supports hosting its own network using SoftAP mode. Using this, it can serve HTML pages and respond to URL requests. The project focuses on basic GPIO control through the web—a foundational use case for embedded web servers in IoT. - -## Getting Started - -### Required Downloads and Installations - -- [Arduino IDE](https://www.arduino.cc/en/software) -- ESP32 Board Definitions - Board Manager URL: - - -### Required Components - -| Component Name | Quantity | -|------------------|----------| -| ESP32-S2 DevKit | 1 | -| USB-C Cable | 1 | - -### Required Tools and Equipment - -- Computer with Arduino IDE installed -- Web browser (Chrome, Firefox, etc.) - -## Part 01: Wi-Fi LED Control via Web Page - -### Introduction - -In this section, you'll configure the ESP32-S2 as a Wi-Fi access point and host an HTML page to control two GPIOs connected to LEDs. - -### Objective - -- Set up SoftAP mode -- Control GPIO 17 and GPIO 18 from a browser - -### Background Information - -You'll use the ESP32 libraries `` and `` to set up a server. The client browser will connect to the ESP32's network and send GET requests to specific routes, triggering the LEDs. - -### Components - -- ESP32-S2 DevKit (LEDs on GPIO 17 and 18) - -### Instructional - -```cpp -#include -#include - -#define LED1_PIN 17 -#define LED2_PIN 18 - -WebServer server(80); - -void handleRoot() { -server.send(200, "text/html", "\ -

LED Control

\ - LED 1 ON
\ - LED 1 OFF
\ - LED 2 ON
\ - LED 2 OFF\ - "); -} - -void handleLED1On() { digitalWrite(LED1_PIN, HIGH); server.send(200, "text/plain", "LED1 ON"); } -void handleLED1Off() { digitalWrite(LED1_PIN, LOW); server.send(200, "text/plain", "LED1 OFF"); } -void handleLED2On() { digitalWrite(LED2_PIN, HIGH); server.send(200, "text/plain", "LED2 ON"); } -void handleLED2Off() { digitalWrite(LED2_PIN, LOW); server.send(200, "text/plain", "LED2 OFF"); } - -void setup() { -pinMode(LED1_PIN, OUTPUT); -pinMode(LED2_PIN, OUTPUT); -WiFi.softAP("ESP32_LED_AP", "genny123"); -server.on("/", handleRoot); -server.on("/led1/on", handleLED1On); -server.on("/led1/off", handleLED1Off); -server.on("/led2/on", handleLED2On); -server.on("/led2/off", handleLED2Off); -server.begin(); -} - -void loop() { -server.handleClient(); -} -``` -## Example - -### Introduction - -This example shows the complete code that creates an ESP32-based SoftAP, serves a webpage, and allows the user to control two LEDs. - -### Example - -Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`, then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. - -### UI Example - -If connected and HTML is accessed, you will see this page! - -Screenshot 2025-05-19 at 11 03 18 PM - -### Analysis - -This example uses HTML served directly from the microcontroller and leverages the WebServer library to handle URL routing. It’s a lightweight, no-backend-required method to control hardware in real time—perfect for rapid prototyping and IoT demos. - -## Additional Resources - -### Useful links - -- [ESP32 Arduino Docs](https://docs.espressif.com/projects/arduino-esp32/en/latest/) -- [ESP32 GitHub Repo](https://github.com/espressif/arduino-esp32) -- [WebServer Library](https://www.arduino.cc/reference/en/libraries/webserver/) From b6879692ba21f56580c336b0cfb8fe07527e5043 Mon Sep 17 00:00:00 2001 From: Genaro Salazar Ruiz Date: Fri, 6 Jun 2025 11:54:41 -0700 Subject: [PATCH 10/10] Update ESP32_WIFI_GUI_Tutorial.md --- content/tutorials/ESP32_WIFI_GUI_Tutorial.md | 105 +++++++++++-------- 1 file changed, 61 insertions(+), 44 deletions(-) diff --git a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md index ee26d458..7f08158b 100644 --- a/content/tutorials/ESP32_WIFI_GUI_Tutorial.md +++ b/content/tutorials/ESP32_WIFI_GUI_Tutorial.md @@ -26,8 +26,8 @@ The ESP32-S3 is a Wi-Fi-enabled microcontroller that supports hosting its own ne ### Required Downloads and Installations - [Arduino IDE](https://www.arduino.cc/en/software) -- ESP32 Board Definitions - Board Manager URL: +- In Board Manager: + [esp32 by Espressif](https://github.com/espressif/arduino-esp32) ### Required Components @@ -43,25 +43,11 @@ The ESP32-S3 is a Wi-Fi-enabled microcontroller that supports hosting its own ne ## Part 01: Wi-Fi LED Control via Web Page -### Introduction - -In this section, you'll configure the ESP32-S3 as a Wi-Fi access point and host an HTML page to control two GPIOs connected to LEDs. - ### Objective +- Configure ESP32-S3 as Wi-Fi AP +- Host HTML to control LEDs on GPIO 17 & 18 -- Set up SoftAP mode -- Control GPIO 17 and GPIO 18 from a browser - -### Background Information - -You'll use the ESP32 libraries `` and `` to set up a server. The client browser will connect to the ESP32's network and send GET requests to specific routes, triggering the LEDs. - -### Components - -- ESP32-S3 DevKit (LEDs on GPIO 17 and 18) - -### Instructional - +### Setup ```cpp #include #include @@ -72,13 +58,13 @@ You'll use the ESP32 libraries `` and `` to set up a server WebServer server(80); void handleRoot() { -server.send(200, "text/html", "\ -

LED Control

\ - LED 1 ON
\ - LED 1 OFF
\ - LED 2 ON
\ - LED 2 OFF\ - "); + server.send(200, "text/html", " +

LED Control

+ LED 1 ON
+ LED 1 OFF
+ LED 2 ON
+ LED 2 OFF + "); } void handleLED1On() { digitalWrite(LED1_PIN, HIGH); server.send(200, "text/plain", "LED1 ON"); } @@ -87,35 +73,66 @@ void handleLED2On() { digitalWrite(LED2_PIN, HIGH); server.send(200, "text/plai void handleLED2Off() { digitalWrite(LED2_PIN, LOW); server.send(200, "text/plain", "LED2 OFF"); } void setup() { -pinMode(LED1_PIN, OUTPUT); -pinMode(LED2_PIN, OUTPUT); -WiFi.softAP("ESP32_LED_AP", "genny123"); -server.on("/", handleRoot); -server.on("/led1/on", handleLED1On); -server.on("/led1/off", handleLED1Off); -server.on("/led2/on", handleLED2On); -server.on("/led2/off", handleLED2Off); -server.begin(); + pinMode(LED1_PIN, OUTPUT); + pinMode(LED2_PIN, OUTPUT); + WiFi.softAP("ESP32_LED_AP", "genny123"); + server.on("/", handleRoot); + server.on("/led1/on", handleLED1On); + server.on("/led1/off", handleLED1Off); + server.on("/led2/on", handleLED2On); + server.on("/led2/off", handleLED2Off); + server.begin(); } void loop() { -server.handleClient(); + server.handleClient(); } - ``` -## Example -### Introduction +## Part 02: Flashing the Code to ESP32-S3 + +### Tools You’ll Need +- Arduino IDE or VSCode with PlatformIO +- USB-C cable +- ESP32 board support package installed via Board Manager + +### Flashing Instructions +1. Open Arduino IDE +2. Go to **Tools > Board > ESP32S3 Dev Module** +3. Connect your ESP32-S3 board via USB +4. Select the correct COM port under **Tools > Port** (usually `esp32` and/or `101`) +5. Paste the Part 01 code into the sketch +6. Press the **Upload** button +7. Open **Serial Monitor** (Ctrl+Shift+M) and check for `HTTP server started` and the IP address! + +> ✅ Tip: If upload fails, press and hold the BOOT button while uploading. +> 🛠 Debug Tip: If you see `WiFi.softAP` succeed but can't access the page, check your device's firewall or captive portal settings. + +### What You Should See +- A message like `HTTP server started` +- Wi-Fi network name (e.g., `ESP32_LED_AP`) appears in your available networks list +- Serial Monitor should show the AP IP, usually `192.168.4.1`(not all IPs are the same! ) + +> 🔐 You can customize the access point name and password by changing `ssid` and `password` in your code. Each ESP32 may use a different IP. + +## Part 03: Accessing the Web Server + +1. Connect to the `ESP32_LED_AP` Wi-Fi using password `genny123`(access keys can be changed to your preference!) +2. Open a browser and visit `http://192.168.4.1` +3. Tap the buttons to toggle LEDs ON/OFF in real time -This example shows the complete code that creates an ESP32 SoftAP, serves a webpage, and allows the user to control two LEDs. +You can bookmark this page or add it to your phone's home screen for quick access. -### Example -Connect to the ESP32 Wi-Fi network (`ESP32_LED_AP`) using the password `genny123`(you can change this access key yourself), then visit `http://192.168.4.1` in your browser. You’ll see LED toggle buttons. Toggle them and watch as the LEDs turn on/off. Experiment with range and see how far the requests can be sent, and notice the delays in time concerning the access point on the ESP32. +## What You Should Have Learned -### Analysis +- How to configure ESP32 as a SoftAP +- How to host a basic HTML control page from the board +- How to flash and debug code using Arduino IDE +- How browser requests map to GPIO state changes +- How to use the Serial Monitor for IP and debug info +- How to build simple, interactive IoT projects with HTTP -This example uses HTML served directly from the microcontroller and leverages the WebServer library to handle URL routing. It’s a lightweight, back-end-less method to control hardware in real time. Ideal for rapid prototyping and IoT applications... ## Additional Resources