Raspberry Pi WIFI radio controlled rc vehicle – web-interface steering over the internet and smartphone

Sep 29th, 2014 | By | Category: RaPi Car - Junior, Top Story

Chapter 9 – developing a web-interface for the RaPi car:

This chapter is about the developing of a web-interface to control the car with a smartphone over the internet. The interface has as background the live video stream from the Raspberry Pi car camera to see where the car is moving to. I implemented the buttons left/right, forward/backward and stop as an overlay over the live video stream. The stop button in the middle of the control field stops the motors.

I searched for the best frameworks in the internet which uses Python and supports a HTML site to control the car. I decided to use WebIOPI 0.7. This frameworks works best for my idea and I was able to implement the web-interface very fast and easy.

I used the following components for the web-interface:

WebIOPi 0.7: Homepage

Video Stream mjpg-streamer: Video Stream HowTo

This is a picture of my Samsung Galaxy S5 with the active web-interface and the RaPi car in the background.

Raspberry PI - remote controlled car with a Raspberry Pi web interface

Raspberry PI – remote controlled car with a Raspberry Pi web interface

WebIOPi 0.7 – installation:

It is very easy to install WebIOPi on the Raspberry Pi. You have to download the WebIOPi file from the WebIOPi homepage and extract the file. After this you have to install WebIOPi and that is it. To do so you need a few commands I listed here:

The command to extract the WebIOPi tar file:

tar zxvf WebIOPi-0.7.0.tar.gz

Now you have to change the directory to the folder where the WebIOPi files are extracted to.

With the next command you will install WebIOPi on your Raspberry Pi:

sudo python setup.py install

Now WebIOPi is available and can be used.

If this was to short the homepage from WebIOPi has lots of HowTo papers and explanations.

Python Script – RaPi car control:

This is my Python script I use for the web-interface version of my RaPi car control script. It is the first version, not very nice but it works:

Rapi_Car_WebIO.py: rapi_car_webio

HTML site:

This is the little HTML site I developed as interface. This is the version shown in the picture above.

HTML site: rapi_car

Update 12.09.2014 – New web-interface

I updated the version with nice arrows pictures for the direction buttons. The picture is a screenshot from my Galaxy S5:

Raspberry PI - remote controlled car with a Raspberry Pi web interface Galaxy S5

Raspberry PI – remote controlled car with a Raspberry Pi web interface Galaxy S5

The Python script with the latest user inteface is available here for download: Python_Script_Web_Buttons

The Python script is located in the folder /rapi_car/python/ on my Raspberry Pi car.

The HTML files for the new user interface are available here for download: html_files_Web_Buttons

The HTML files are saved in the following folder: /usr/share/webiopi/htdocs/

Video:

I did a new video from my RaPi car with the latest version of the web-interface. In this video I tried for the second time to control the car with the Smartphone. Not everything works perfect but it works and this is very cool. I should increase the value for the acceleration as you see in the video I have to press the button very often.

Conclusion:

With the web-interface it makes much for fun to control the car as with the keyboard script version. Now I have the possibility to control the car over the internet over many miles. This opportunity opens room for new ideas what you can do with such car in combination with an easy to use web-interface. The range restriction known from radio controlled model cars no longer exist.

Contents:


Chapter 1: Raspberry Pi WIFI radio controlled rc vehicle – introduction
Chapter 2: Raspberry Pi WIFI radio controlled rc vehicle – component list
Chapter 3: Raspberry Pi WIFI radio controlled rc vehicle – chassis
Chapter 4: Raspberry Pi WIFI radio controlled rc vehicle – wiring
Chapter 5: Raspberry Pi WIFI radio controlled rc vehicle – software installation
Chapter 6: Raspberry Pi WIFI radio controlled rc vehicle – power supply
Chapter 7: Raspberry Pi WIFI radio controlled rc vehicle – programing
Chapter 8: Raspberry Pi WIFI radio controlled rc vehicle – live video streaming
Chapter 9: Raspberry Pi WIFI radio controlled rc vehicle – web-interface and smartphone
Chapter 10: Raspberry Pi WIFI radio controlled rc vehicle – cooling with passive heat sinks
Chapter 11: Raspberry Pi WIFI radio controlled rc vehicle – startup scripts
Chapter 12: Raspberry Pi WIFI radio controlled rc vehicle – cardboard car model
Chapter 13: Raspberry Pi WIFI radio controlled rc vehicle – power consumption
(Visited 2,833 times, 10 visits today)
Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

7 Comments to “Raspberry Pi WIFI radio controlled rc vehicle – web-interface steering over the internet and smartphone”

  1. damien says:

    hello,
    thank you very much for your work, thanks to you I could make my lego-robot 🙂

    a possible improvement for your HTML interface : using html5 . The OnTouch and touchEnd functions are really practices. Here’s an example where I put speedstep=50 in the phyton script:

    Rapi-Car

    function init() {
    }

    webiopi().ready(init);

    window.addEventListener(‘load’, function(){

    var fwd = document.getElementById(‘forward’)
    var rev = document.getElementById(‘reverse’)
    var right = document.getElementById(‘right’)
    var left = document.getElementById(‘left’)

    fwd.addEventListener(‘touchstart’, function(e){
    webiopi().callMacro(“ButtonForward”);
    }, false)

    fwd.addEventListener(‘touchend’, function(e){
    webiopi().callMacro(“ButtonStop1”);
    }, false)

    fwd.addEventListener(‘touchmove’, function(e){
    webiopi().callMacro(“ButtonForward”);
    }, false)

    rev.addEventListener(‘touchstart’, function(e){
    webiopi().callMacro(“ButtonReverse”);
    }, false)

    rev.addEventListener(‘touchmove’, function(e){
    webiopi().callMacro(“ButtonReverse”);
    }, false)

    rev.addEventListener(‘touchend’, function(e){
    webiopi().callMacro(“ButtonStop1”);
    }, false)

    right.addEventListener(‘touchstart’, function(e){
    webiopi().callMacro(“ButtonTurnRight”);
    }, false)

    right.addEventListener(‘touchend’, function(e){
    webiopi().callMacro(“ButtonStop2”);
    }, false)

    left.addEventListener(‘touchstart’, function(e){
    webiopi().callMacro(“ButtonTurnLeft”);
    }, false)

    left.addEventListener(‘touchend’, function(e){
    webiopi().callMacro(“ButtonStop2”);
    }, false)

    speed.addEventListener(‘touchstart’, function(e){
    webiopi().callMacro(“ButtonSpeed”);
    }, false)

    }, false)

    button.small {
    margin: 1px 1px 1px 1px;
    width: 24px;
    height: 24px;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    }
    button {
    margin: 1px 1px 1px 1px;
    width: 90px;
    height: 24px;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    }

    .trPic{
    width:640px;
    height:480px;
    position:absolute;
    top:0px;
    left:0px;
    width:640px;
    height:480px;
    background: url(http://192.168.1.70:8080/?action=stream) no-repeat;
    border:0px solid #000000;
    }
    .trPic .forward{
    position:absolute;
    top:0px;
    left:270px;
    width:320px;
    height:300px;
    opacity:0.3;
    z-index: 20;
    background: url(arrow_forward.png) no-repeat;
    background-position: center center;
    border:0px solid #000000;
    }
    .trPic .backward{
    position:absolute;
    top:340px;
    left:270px;
    width:320px;
    height:300px;
    opacity:0.3;
    z-index: 20;
    background: url(arrow_reverse.png) no-repeat;
    background-position: center center;
    border:0px solid #000000;
    }

    .trPic .left{
    position:absolute;
    top:0px;
    left:50px;
    width:300px;
    height:620px;
    opacity:0.3;
    z-index: 20;
    background: url(arrow_left.png) no-repeat;
    background-position: center center;
    border:0px solid #000000;
    }

    .trPic .right{
    position:absolute;
    top:0px;
    left:530px;
    width:300px;
    height:620px;
    opacity:0.3;
    z-index: 20;
    background: url(arrow_right.png) no-repeat;
    background-position: center center;
    border:0px solid #000000;
    }

    .forward:hover {
    opacity:0.7;
    }

    .backward:hover {
    opacity:0.7;
    }

    .left:hover {
    opacity:0.7;
    }

    .right:hover {
    opacity:0.7;
    }

  2. damien says:

    Sorry, here is a link to my html :
    http://damcomp.free.fr/Screen/lego4x4.zip

  3. Josh says:

    What does it mean on the rapi_car_webiop on the port=8000, login=robot, password=robot?? Can u explain to me??

  4. Manuel says:

    Hi i tried to put on the webiopi server but the html index does not work only i get the webiopi main menu.

    • VLAD says:

      Did you put it on the right folder??? are you trying to get the index.html, rename the file to index.html and try again.. I hope this works

  5. Daniel Gretzke says:

    When I want to run my script I am getting AttributeError: ‘module’ object has no attribute ‘GPIO’
    Can anyone help me? I’m using a Raspberry Pi 3

  6. Marvin says:

    What do you mean with “Now I have the possibility to control the car over the internet over many miles.” in the conclusion? As I know the car and the phone have to be connected? Can you explain to me, please?

Leave a Comment

*