If you are a beginner, you can learn about Keypad in Arduino - Keypad Tutorial.
We can control everything with this project. In this article, I just display the pressed key on 8x8 LED matrix as an example.
- Stack PHPoC WiFi shield or PHPoC Shield on Arduino
Web browser ---> PHPoC WiFi Shield ---> Arduino
When user touches on a key, web app on web browser will send the character corresponding with the pressed key to PHPoC shield via WebSocket. When receiving the data, PHPoC shield automatically passes it to Arduino. Arduino takes action (displaying on LED matrix) according to the data received from PHPoC Shield.
Note that: PHPoC shield has a built-in program to pass data from web browser to Arduino. Therefore, we don't need to care about it.
- Set WiFi information for PHPoC shield (SSID and password)
- Upload new UI to PHPoC shield
- Write Arduino code
Setting Wifi Information for PHPoC Shield
Upload new Web UI to PHPoC Shield
- Download PHPoC source code remote_keypad.php (on code section).
- Upload it to PHPoC shield using PHPoC debugger according to this instruction.
Write Arduino Code
- Install library: PHPoC library, Adafruit_LEDBackpack library, Adafruit-GFX-library on Arduino IDE (see the instruction )
- See source code in code section.
- Click serial button on Arduino IDE to see the IP address.
- Open web browser, type
- Click connect button and test it.