“When drawing on web, the drawing will be sent to XY plotter to re-draw it on bigger screen.
How It Works
When a finger touches to the drawing area in webpage, the XY coordinate of touching point is sent to Arduino. After scaling the coordinate, Arduino will move two step motors to locate the pen to that coordinate. During moving period, Arduino continuously send trajectory of the pen to web app, the web app draw the trajectory on the canvas.
Source Code
Source code includes two parts: Arduino code and Web User Interface code.
Arduino Code
This is arduino code, which run in infinite loop to:
- Receiving the command from web-page and do task according to the command.
- CMD_MOVE: move pen to a position by controlling two step motor
- CMD_PEN_UP: raise the pen by changing the angle of servo motor
- CMD_PEN_DOWN: lower the pen by changing the angle of servo motor
- Continuously read the current position of pen and send to web-page
Web User Interface
See code in Code section
- Providing the user interface
- Handling the user event and send command with coordinate to Arduino
- Receiving the trajectory from Arduino and draw it on webpage
remote_draw.php is a file that contains Web User Interface. It needs to be stored on PHPoC [WiFi] Shield. In order to upload the file to PHPoC [WiFi] Shield, please do the following steps:
- Copy the below code and save it into remote_draw.php file.
- Install PHPoC Debugger
- Connect PHPoC to PHPoC [WiFi] Shield via micro-USB cable according to this instruction.Note that Arduino must be powered.
- Upload remote_draw.php file to PHPoC [WiFi] Shield according to this instruction
How To
- Config network information for PHPoC shield or PHPoC WiFi shield
- Install PHPoC Library
- Install PHPoC Expansion Library
- Compile and upload code to Arduino
- Upload web user interface to PHPoC [WiFi] shield
- Open Serial Monitor and copy IP address of PHPoC Shield
- Access Web User Interface via Web Browser: http://ip_address_of_shield/remote_draw.php
- Draw via Web”