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

RasbperryPi Car with FPV camera. Control by webbrowser

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:

img_5aa03d7e20b91.png
img_5a9074bf4a8af.png
img_5a9075011e349.png
img_5a907541cc829.png
img_5aa03d73e0cc6.png
  • 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

connections.png

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

img_5a9bee880a236.png
img_5a9bf02d28a93.png

You can download PCB eagle files from here Paths are fat so its easy to made it by thermal transfer method

PCB Outputs

img_5a9bf17b71969.png
img_5a9bf2760acca.png
  1. PWM input for drive motors Should be connected to PWM module 15’th and 16th pins (check green rectangle at PWM module image )
  2. Power input for drive motors (check what maximum voltage your motors can work with)
  3. Power for RasbperryPi and PWM module – have to be exactly
  4. Drive motor outputs (there are two outputs because we will pair drive motors )
  5. Servo Mechanisms power – also You have to check what voltage is good for them
  6. Jumper its present power from 5th input will power also drive motors so no need to connect anything to input 2
  7. 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
  8. 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

img_5a9c1a278cce2.png
img_5a9c1a9feacb2.png

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

batteries_bb.png
IMG_3186_resized.jpg.jpeg
IMG_3197_resized.jpg.jpeg
img_5aa024b047483.png

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

img_5aa025e162c21.png
img_5aa025d8543bb.png

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

parts_resized.jpg.jpeg
IMG_3177_resized.jpg.jpeg
IMG_3173_resized.jpg.jpeg
IMG_3174_resized.jpg.jpeg
IMG_3178_resized.jpg.jpeg
IMG_3179_resized.jpg.jpeg
IMG_3163_resized.jpg.jpeg

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

IMG_3180_resized.jpg.jpeg

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

IMG_3181_resized-1.jpg.jpeg
IMG_3202_resized.jpg.jpeg
IMG_3204_resized.jpg.jpeg
IMG_3199_resized.jpg.jpeg
IMG_3201_resized.jpg.jpeg
IMG_3198_resized.jpg.jpeg

For PCB I've made small plexiglass table

App.remoteme.org Configuration

img_5a9d78bc3ed6f.png

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

img_5a9d912522ffd.png

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

img_5a9d91732f503.png

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

img_5a9d91dba2abc.png
img_5a9d91b2e77fa.png

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

img_5a9d921e2fba7.png

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

img_5a9d925728247.png

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

img_5a9d9730105ae.png

Expand WebPage at device tab and click index.html then Open

Configure WebPage Device to Control Car 2/2

img_5a9d97841d76c.png

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

img_5a9d97acd3252.png
img_5a9d982563612.png

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

img_5a9d98a11d380.png

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

img_5a9d993f24b3e.png

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

img_5a9d9c4951be3.png

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

img_5a9d9ee413a78.png

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

img_5a9db338d9ffa.png

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

img_5a9db457555df.png
img_5a9db47ac9868.png

Instead of login to your account from mobile just scan QR anymous url.

details of QR here

If Your mobile control works when RPi and mobile is on the same wifi but doesn’t if You use mobile internet then You have to add turn server, how to do that I’ve written here

Adding Turn Server

xir.png
dataxirc.png
xirremo.png
xirremote2.png
restart.png
how works.png

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

img_5a9db4c72ee39.png

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