We can control everything with this project, but I took the servo motors as an example.
- Stack PHPoC WiFi shield or PHPoC Shield on Arduino
- Connect pin GND and VCC of two servo motors to GND and 5V of Arduino, respectively. (pin IOREF of arduino can be used like 5V pin)
- Connect pin signals of two servo motors to pin 8 and pin 9 of Arduino, respectively.
Web browser ---> PHPoC WiFi Shield ---> Arduino
Web app on web browser will send the coordinate (after scaling) of touch or click event to PHPoC shield via WebSocket. When receiving the data, PHPoC shield automatically passes it to Arduino. Arduino controls two servo motors 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_joystick.php (on code section).
Write Arduino Code
- Install PHPoC library for Arduino 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.
This project does the same works but it used other hardware platform