https://www.youtube.com/shorts/v4Cm6Hwj308
Welcome to this exciting tutorial where we will be building a gesture-controlled LED system. This project allows you to control the number of LEDs glowing on an LED ring by showing counts using your fingers to a camera. The project is based on ML5 & Mediapipe and uses Javascript for the interface. The hardware we will be using is an ESP32 dev board.
Prerequisites
Before we get started, make sure you have the following:
- Basic knowledge of JavaScript and React.
- An ESP32 development board.
- An LED ring.
- A camera module compatible with the ESP32 board.
- Node.js and npm installed on your system.
Getting Started
The code for this project is hosted on GitHub. You can clone the repository using the following command:
git clone https://github.com/randomstuffwemake/gesture_led_control-ai.git
Once you have cloned the repository, navigate into the project directory:
cd gesture_led_control-ai
Setting Up the Project
This project was bootstrapped with Create React App. In the project directory, you can run several commands:
`npm start`
This command runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. The page will reload when you make changes. You may also see any lint errors in the console.
`npm test`
This command launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
`npm run build`
This command builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!
`npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single-build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
Building the Hardware
The hardware part of this project is simple. You need to connect only one component to the controller board - The LED ring. Connections:
Connect Vcc of LED to 3.3v/Vin of the dev board.
Connect the GND of LED to the GND of the dev board.
Connect Data IN of LED to pin 6 of the dev board.
Upload the Arduino IDE code to the dev board.
Running the Project
Once you have the hardware set up and the software installed, you can run the project. Start the React app with `npm start`, and point your camera at your hand. As you change the number of fingers you are holding up, the number of LEDs lit on the ring should change accordingly.
Conclusion
This project is a great example of how AI can be used in electronics to create interactive and intuitive interfaces. By using ML5 and Mediapipe, we can recognize hand gestures and use them to control physical devices. The possibilities are endless, so feel free to expand on this project and create your own gesture-controlled devices!
Comments