We can control everything with this project. In this article I just display the pressed key on 8x8 LED matrix as an example.

Demo





Wiring Diagram
  • Stack PHPoC WiFi shield or PHPoC Shield on Arduino
  • LED ----- Arduino
  • VCC ----- 5V
  • GND ----- GND
  • SDA ----- A4(SDA)
  • SCL ----- A5(SCL)
Click image for larger version

Name:	arduino_keypad_wiring.png
Views:	81
Size:	37.3 KB
ID:	734



Data Flow

Web browser ---> PHPoC WiFi Shield ---> Arduino

When user touch 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.



What We Need to Do
  • Set WiFi information for PHPoC shield (SSID and password)
  • Upload new UI to PHPoC shield
  • Write Arduino code

Setting Wifi Information for PHPoC Shield

See this instruction http://www.phpoc.com/support/manual/...rk_first_setup


Upload new Web UI to PHPoC Shield
Write Arduino Code

Try it
  • Click serial button on Arduino IDE to see the IP address.
  • Open web browser, type http:// replace_ip_address/remote_keypad.php
  • Click connect button and test it.