RasbperryPi Car With FPV Camera. Control by Web Browser
by Maciej__ in Circuits > Robots
6790 Views, 68 Favorites, 0 Comments
RasbperryPi Car With FPV Camera. Control by Web Browser
We will build 4wd car - the steering will be similar like in a tank - to turn one side of wheels will rotate with different speed than other. At the car will be placed camera on special holder where we can change camera position. The robot will be controlled by web browser (chrome or firefox at desktop, or firefox at mobile phone), at the browser, We will get camera video ( with only 200ms latency), and from the browser, we can control the car movements and camera position. To make communication easier I've used app.remoteme.org system, there is also working out of the box controlling of this kind of car, So You don't have to write Your own code, but of course You can modify scripts add new possibilities etc.
Before connecting power to your PCB please double check all connections!
Some Information About App.remoteme.org
The system has three parts
- webapplication - when You host your control webpages and it links all communication
- rasbperryPi program - program which sends video, manage your python scripts
- libraries where You find class, functions definitions
Remoteme.org is system fast You link all your devices together, You can host there Your webPages, see your conencted devices. Remoteme.org system was made to helps You start making your projects, wihout worrry about protocol communications, main idea is to send binary messages beetwen various devices such a webPages,RasbeprryPI, arduino, and scripts.
From the other hand Remoteme.org gives You full control of your files, You can eas modify it writting your own functionality
At this tutorial I will shows You how to make some awesome project almoust without writitng any code.
At the end of this tutorial I've put usefull links which will helps You understand remoteme.org system.
What Is Needed:
- Raspberry PI Zero W
- Dedicated camera
- Adafruit 16-Channel 12-bit PWM/Servo Driver - I2C interface - PCA9685 or its clone
- Two servo mechanisms compatible with the camera holder
- Camera holder
- Batteries - In tutorial two possibilities of connection
- H bridge TB6612FNG, to control wheel speer
- PCB eagle files It is easy to make it thermal transfer methodDC-DC
- Step Down Converter Module DC
- Robot case
Connections
Raspberry pi control servo mechanism through PWM module and motor speed by H bridge which is connected to RasbperryPi pins, PWM input to H bridge is generated by the same module I used for servos (which parts I mention above no logic converters are needed )
PCB
You can download PCB eagle files from here Paths are fat so its easy to made it by thermal transfer method
PCB Outputs
- PWM input for drive motors Should be connected to PWM module 15’th and 16th pins (check green rectangle at PWM module image )
- Power input for drive motors (check what maximum voltage your motors can work with)
- Power for RasbperryPi and PWM module – have to be exactly
- Drive motor outputs (there are two outputs because we will pair drive motors )
- Servo Mechanisms power – also You have to check what voltage is good for them
- Jumper its present power from 5th input will power also drive motors so no need to connect anything to input 2
- Jumper if present RasbperryPi will be power from 3rd input – before put jumper here check if connections are OK – You don’t want to burn your RPi
- Lets solder here cables since we don’t need logic converters
How It’s Going to Work
At RasbperryPi there is python script which uses two libraries
- import RPi.GPIO as GPIO – for pins 25-AIN1, 8-AIN2, 24-BIN1, 23-BIN2 (BCM notation) which are connected to H bridge
- import Adafruit_PCA9685 for PWM module
Rpi pins are connected as follows 25-AIN1, 8-AIN2, 24-BIN1, 23-BIN2 (BCM) and control mode of H bridge( forward, backward, stop, short break). H bridge needs also two PWM signals so we can control speed or motor rotation. Because at the project we already have PWM controller (used for servo) we will use it also to generate PWM for H bridge.
PWM module uses I2C communication protocol. I’ve used working out of the box Adafruit_PCA9685 . library
Car Assembling - Wheels
We will start from connect drive motors to car case. Left/Side side motors connect together, and both pair, connect to some power cable which later will be connected to PCB. IMportant note while connecting motors wheels at each side have to rotate at the same direction.
Power (AA Recharge Batteries) Option 1/2
I will write two possibilities of power Car first one is from 10xAA recharge batteries At last image I've drawn by red colors jumpers which have to be put.
Power (Li-Po 7.2V Batteries) Option 2/2
And the second option is 7.2 LI-PO battery. In this case we got 3 voltages – 5v For Rpi and module, 6V for servos and directly from batteries 7.2 volts for drive motors. I had to use two step down modules
Option 2 with LI-PO is better:
- Batteries have bigger capacity – the car will drive longer
- Bigger voltage for drive motors – the car will drive faster
- Less probability that after drive motors start to locate we could have huge voltage drop and RPI restarts.
Soldering
I've put at PCB some spacers for PWM module. There is nothing to write just check out images how to solder everything together
Camera
we connect the camera, here Is written how to center servo Mechanisms before mounting into camera holder, but the shortest way is to gently manual check maximum rotation position and set servos at center position. This centered servo mechanisms we put into camera holder at the center position ( camera is pointing straight ahead like at the photo)
Putting Cars Parts Together
For PCB I've made small plexiglass table
App.remoteme.org Configuration
I've used free app.remoteme.org system it helps You to make connections, and it already has scripts which we need
At this instructable, I will just show step by step what should be done to make car driving ( here You will find more details)
- Sing up at https://app.remoteme.org after sign up You will be automatically signed in
- open Token tab at the left, then click “new token” provide some name and click OK, We just created new token (image at the screen)
- in this example, token value is: ~1_&p@+BNnZ@A+x8 ( yours will be different ;) )
RasbperryPi Configuration
at putty console (here how to set up our RPi turn on camera I2c communication)
git clone git://github.com/remoteme/remoteme.git
cd remoteme
python3.5 install.py
- Instalator will ask us some questions for all we response [Y]es and confirm by [enter]
- when installation will ask for token we paste (shift+insert) token copied from the application and Enter
- the name for example Rpi
- deviceId 1 Enter
- after installation – run program
./runme.sh
Checking Connections
Lets go back to https://app.remoteme.org
At devices tab we will see our connected RPi ( green link icon means RPi is connected right now)
Adding Python Script
Now we will add python script, its already at the templates so we dont have to program anything.
At devices tab open RasbperryPi menu and choose "Add external script".
When new window appears provide information as at image above
Don't forget to choose template "car4wd". After this steps, remoteme.org will add python script to our RasbperryPi and restarts it
Checking If Python Script Was Added Sucesfully
At devices tab new python script device should be added, and its deviceId is 2. Into this device Id webpage will send messages to control car
Adding Webpage to Control Car
at devices tab click "New" then "WebPage". We just add another device - webPage we will use it to control our car. And because we used the template "car4wdDesktop" at the webpage are already files almost ready to used
Configure WebPage Device to Control Car 1/2
Expand WebPage at device tab and click index.html then Open
Configure WebPage Device to Control Car 2/2
The window appears then we need to provide deviceId of our python script at our case deviceId is 2. Let's change the place shown in the image
Open Car Control Center
Now its time to open our page and see how it's working. At device tab click index.html and then "Open in new tab" To get video preview You have to use chrome or firefox browser others browser doesn't support webRTC fully
Camera Configuration 1/2
When we move mouse at video area camera should change position, and it should work exactly like in FPS games. It probably will not move correctly
Camera Configuration 2/2
Open script.js (devices tab expand webpage then click at script.js then open ) and find the place I showed at the screen
at my case center position is 560 and 430 and range of movements is for both axies 200
You have to experiment with this numbers so You get camera position center and smooth movements, If You used this tutorial just copy pasted given values
Driving 1/2
If u pressed up arrow at the keyboard, gauges should change positions and car should drive. If You press “up” arrow and car is turning then You have to add/remove minus at places at the screen.
After this operation after hit “up” arrow car should drive ahead and down arrow car should drive backward.
Driving 2/2
Now turning – hit left arrow if car is turning right You have to flip cables (check the image above)
If You solder this cables You can change it at script.js
just change order of sending motors speed,
before:
pos=putByte(ret, pos ,carController.getMotorMode(carController.getRightSideSpeed()) );
pos=putByte(ret, pos ,Math.abs(carController.getRightSideSpeed()*255 ));
pos=putByte(ret, pos ,carController.getMotorMode(-carController.getLeftSideSpeed()) );
pos=putByte(ret, pos ,Math.abs(carController.getLeftSideSpeed()*255) );
after:
pos=putByte(ret, pos ,carController.getMotorMode(-carController.getLeftSideSpeed()) );
pos=putByte(ret, pos ,Math.abs(carController.getLeftSideSpeed()*255) );
pos=putByte(ret, pos ,carController.getMotorMode(carController.getRightSideSpeed()) );
pos=putByte(ret, pos ,Math.abs(carController.getRightSideSpeed()*255 ));
and now You have to play with minuses like one step before to get it working correctly ;).
As You probably noticed after hit up arrow car is not driving with full speed to make car move faster just fast release up arrow when it's in maximum position and press and hold it again
How Is It Working
Web page is sending 9th-byte message messages to python script in format:
- 1 byte one byte integer value 1
- 2 bytes integer X camera position
- 2 bytes integer Y camera position
- 1 byte integer left motor mode (3= backward, 1= forward, 2=stop)
- 1 byte integer left motor speed
- 1 byte integer right motor mode (3= backward, 1= forward, 2=stop)
- 1 byte integer right motor speed
sending message is made at script.js file at function "sendNow()"
at RasbperryPi python.py is getting this message in function "onUserMessage"
You can check it out and play a little so You know what is going on.
class functions description here
Tablet, Mobile Steering
We add new webpage excatly as we did previous time but now we choose template "car4wdMobile"
Next, we configure everything in script.js as we did for desktop control webpage
The message format is exactly the same so we don’t have to change python.py script.
Open Page at Mobile Phone
Adding Turn Server
Sometimes (when You are behind NAT or some firewall settings) You cannot connect your robot from other network then Your robot is connected. Its not big issue and then You have to add turn server.
I’ve tested server from XIRSYS company (its free for developer use ) and I will show how to configure turn server using XIRSYS system
register:
https://global.xirsys.net/dashboard/signup
then click "plus" to add application
at the right under "static turn creditentials" You have all data You need. Copy it into file webrtc_streamer.conf to do that go to https://app.remoteme.org/en/#/app/devices
expand RaspberryPi deivces
click file webrtc_streamer.conf
click open
and add information
turn_server=
turn_username=
turn_credential=
after You end editing You should have something likeat the screen.
then click Save and restart You Rpi, by clicking menu at RasbperryPi device and choose restart
After RPi program is restarted You can see video preview at your mobile phone even If You are using mobile internet.
Mobile Steering
at circle 1 we place left thumb, at 2 right – don’t have to be exactly at this points – webpage will set zero position just after you touch screen, and by moving your thumbs (left driving, right camera position ) You can control your car
Summary
I hope You liked this tutorial, as I wrote before at this tutorial is more details about how it works under the hood.
some links:
remoteme.org - home page of remoteme.org there You find documentations and tutorials
FB fanpage - Facebook fanpage newest inforation about remoteme.org
Youtube - some videos of project, tutorials
Cheers,
Maciek