Skip to content

Latest commit

 

History

History
199 lines (139 loc) · 5.15 KB

README.md

File metadata and controls

199 lines (139 loc) · 5.15 KB

WORKSHOP_WIFI_ESP32

Setup:

Step 01 - Turn on an LED

🛠️ Required Hardware:
  • ESP32
  • USB cable
  • BreadBoard
  • Jumpers
  • LED
  • Resistor

Instruction: Your first objective is to light an LED with your ESP32 without code.

Constraints: You don't have to produce any code for this exercise. You may not use the 3.3V pin of your board.

📚 Documentation:

Step 02 - LED flash

🛠️ Required Hardware:
  • ESP32
  • USB cable
  • BreadBoard
  • Jumpers
  • LED
  • Button
  • Resistor

Now it's time to make your LED flash with a button.
To do this, implement some code in your ESP32.

Instruction: When you press the button, your LED will turn off or on.

Step 03 - Connect to WI-FI

🛠️ Required Hardware:
  • ESP32
  • USB cable

Connecting to Wi-Fi is good but creating your own local network is better.

Create your local network and set Wi-Fi ESP32 - [YourName] as the network name.

To verify that your network is created, take your phone and look at the Wi-FI networks. If you manage to connect to yours, go to the next step!

Step 04 - Create an HTML page

🛠️ Required Hardware:
  • ESP32
  • USB cable

Now that you have your local network, you will add some style to your page.

Display Hello World ! on your local network using HTML.

If you open your web browser on your phone and write the IP address of your ESP32 followed by the port. You should get Hello World !.

Step 05 - Define a client

🛠️ Required Hardware:
  • ESP32
  • USB cable

Now it's time to know when a user joins your HTML page.

Define a client and display Connection when a user connects and Disconnection when he disconnects.

If you see Connection and Disconnection in your monitor, you can go to the next step!

Step 06 - Create Button

🛠️ Required Hardware:
  • ESP32
  • USB cable

You will now create three buttons and define a message in your monitor as follows:

  • 🟥 Red: Print This color is Red.
  • 🟦 Blue: Print This color is Blue.
  • 🟪 Purple: Print This color is Purple.

If the messages appear in your monitor when you click on the buttons you have successfully completed this step!

Let's continue to the next step!

Step 07 - Set the colors of your LED RGB

🛠️ Required Hardware:
  • ESP32
  • USB cable
  • BreadBoard
  • Jumpers
  • LED RGB
  • 3x Resistor
  • 3x Button

We will create a circuit that will change the color of the RGB LED with three buttons. Register your code to define your local server and your three buttons.

Each button will define a color on your RGB LED:

  • Red color 🟥
  • Blue color 🟦
  • Purple color 🟪

Step 08 - Change colors using your local server

🛠️ Required Hardware:
  • ESP32
  • USB cable
  • BreadBoard
  • Jumpers
  • LED RGB
  • 3x Resistor

We will change the color of our RGB LED directly by pressing the buttons of our local server.

Take your three buttons on your HTML page. The color will be defined according to the button:

  • Red color 🟥
  • Blue color 🟦
  • Purple color 🟪

When you press the buttons the color of your RGB LED should change.

🎉 Congratulation!

You now know the basics of WI-FI ESP32. Feel free to use your imagination to create circuits. Or combine the previous exercises for new results.

Authors


Albert VALENTIN

Organization


LinkedIn logo Instagram logo Twitter logo Discord logo

Website logo

🚀 Don't hesitate to follow us on our different networks, and put a star 🌟 on PoC's repositories.