Webcam Remote Servo for Raspberry on HTML5

servoAfter lot of research on different sites I finally managed to make a webcam remote servo for Raspberry controlled via HTML5 web interface. I will repeat here step by step the different points. I performed this that on a Raspberry PI2 but it should also work fine on the model B + see A.

Menu :

  • Equipment
  • Step 1: Assembling the servos
  • Step 2: Connecting the servoes to the Raspberry board
  • Step 3: Apache Web Server installation
  • Step 4: ServoBlaster installation
  • Step 5 : Web HTML5 interface
  • Final result
  • Improvements and Enhancement

 

Equipment :

  • favorite Raspberry and webcam
  • two servomotors eg SG90 9G Micro Servo Motor
  • 3 x AAA 1.5v battery pack
  • a 90 ° angle 4cm x 4cm (in all DIY stores)

 

Step 1: Assembling the servos

To assemble the support just stick the two servos with glue like in this photo:

20160125_184606

Stick the two servos by ensuring that their axes are perpendicular

Then the servo fix the bracket as with two screws (usually supplied with the servo):

20160125_185021

servo fix the bracket using screws

Finally fix the “foot” on the battery box with glue:

20160125_184859

Fix the “foot” on the battery case with glue

I know it’s not the most detailed how-to I provided but the pictures speak for themselves … In the end it looks like this:

20160125_184747

Final view

servo with 5PM Cam

With the 5PM Cam

Step 2: Connecting the servoes to the Raspberry board

GPIO-Raspberry-B-

  • Red wire (+ Vcc) of the servos must be connected to the + of the battery pack.
  • Brown wire (GND) must be connected to the – terminal of the battery pack which itself is connected to the GND on the Raspberry (pin  39).
  • Finally, yellow wire of servo 1 to  pin 11 (GPIO 17) and yellow wire of servo 2 to pin 13 (GPIO 27).

Step 3: Apache Web Server installation

This step is optional if your apache server is already installed. If not to install it:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install apache2

You will find on the raspipress.com full details about installation and advanced Raspberry apache configuration.

To execute the command from the html page you need to add the www-data user in the sudoer. For this type:

visudo

and add the following lines

# User privilege for Servo CMD from apache
www-data ALL=(ALL:ALL) NOPASSWD:ALL

This is not the best ion term of security and shoudl be improved if you plan to use this interface outside of you privite network.

 

Step 4: ServoBlaster installation

ServoBlaster (see doc here) is an interface that will allow you to easily control multiple servo motor from a Raspberry.

To install it:

sudo apt-get install git
git clone git://github.com/richardghirst/PiBits.git
cd PiBits/ServoBlaster
sudo make

After setup you shoudl have a new interface in /dev/ :

ls -l /dev/servoblaster
prw-rw-rw- 1 root root 0 Jan 25 19:23 /dev/servoblaster

Then to test teh setup and ServoBlaster you can issue the follwoing command :

echo P1-11=120 > /dev/servoblaster
echo P1-13=120 > /dev/servoblaster

You can then try agin changing the value 120 …

 

Step 5 : Web HTML5 interface

The interface is really minimalist, you are free to modify it and adapt it to your needs and projects.

The php code is available here: https://github.com/Sirus10/servo/blob/master/index.php

But to get it on your raspberry simply do :

cd /var/www/
git clone git://github.com/Sirus10/servo.git
servo

Page HTML5

Open the IP of your raspberry with a web brother and have fun!

Ex : http://192.168.1.21/servo/ :

 

 

 

Final result :

 

 

 

Enhancement and developments:

This are really the basis, there is plenty of opportunity to integrate it into a webcam for example, or any other interface. This is just a beginning …

  • use jQuery instead of having to reload each time the php page
  • canva to be use with HTML5 ?
  • Reverse the vertical servo

Leave a Reply

Your email address will not be published. Required fields are marked *