To connect Arduino to internet, we need to use some kind of internet shield such as Ethernet shield, Wifi shield, PHPoC shield, or PHPoC Wifi shield.
The outstanding feature of PHPoC shield is that it not only provides Internet connection like Ethernet and Wifi shield, but also provides a web server which allows to control and monitor Arduino from a web browser. It also supports WebSocket, therefore we can control and monitor Arduino in real-time without reloading a webpage.
PHPoC Shield has some built-in web applications. Refer to this link for more detail.
In this project, I changed UI (User Interface) of Web Remote Control/Slide web application, and wrote Arduino code to rotate servo motor angle according to angle received from web browser.
- Stack PHPoC shield on Arduino
- Connect pin GND, VCC and signal of servo motor to GND, 5V and pin 9 of Arduino, respectively.
Web browser ---> PHPoC Shield ---> Arduino
Web app will calculate the angle based on touch or mouse event, send it to PHPoC shield via websocket. When receiving this data, PHPoC shield passes it to Arduino. Arduino rotates servo motor according to the angle.
- Set Wifi information for PHPoC shield (SSID and password)
- Upload new UI to PHPoC shield
- Write Arduino code
- Download PHPoC source code remote_rotate.php (on code section)
- Upload it to PHPoC shield using PHPoC debugger according to this instruction
- Install library for Arduino on Arduino IDE (see the instruction ) and restart Arduino IDE.
- On Arduino IDE, go to File -> Examples -> Phpoc -> WebRemoteSlide and File -> Examples ->Servo->sweep.
- Combine two examples into one, we have the code to control servo motor via webpage (see the source code in code section).
- Click serial button on Arduino IDE to see the IP address
- Open web browser, type http://replace_ip_address/remote_rotate.php
- Click connect button and test it