13. Car Control on Webpage

Share for us

Principle of controlling the PiSmart car connected to LAN on webpage: The PiSmart sets up a webpage server, and other client terminals like phones, computers, etc., access to the corresponding host and port via web browsers to send requests to the server.

When the server on PiSmart receives the request, then it will call the hardware control function according to the request, thus enabling the controlling of the car.

The entire web project is in the remote_control file:

Run the code:

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control $ ./start

Then the web server starts to run. In the web browser of a client terminal, enter the address and port of Raspberry Pi in a format of host: port, like192.168.0.101:8000 (the port number is 8000 by default).

Then you will see the welcome screen on the webpage. Click/Tap GET START!

Two functions can be realized by web controlling: remote message transmission and car controlling. 

You can input whatever you want the PiSmart car to convey in the blank above, and control the car’s movement by the stimulating joystick in the box below the blank. Then you can control the car to go to someone you want to speak to, click SUBMIT, and the PiSmart car will pass the message to him/her!

Since the code of the Django server is written based on Python, it’s easy to understand. However, a wide range of knowledge including Django, HTML, and JavaScript are involved, but the space is limited so we won’t further explain the specific code. Here we only look into the file structure of Django server and you can learn by yourselves based on the guide.

First, open the remote_control folder to check the files:

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples $ cd remote_control/

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control $ ls

db.sqlite3  manage.py  remote_control  start  static

db.sqlite3    A SQLite database file established by the Django server automatically; just ignore it.

manage.py    Main program established by Django, including the framework of the whole server; just leave it alone.

remote_control    A code folder as well as a python package which we’ll modify mainly.

start     A script for running the Django server more conveniently, just including the parameter to run one command of manage.py .

static    To store JavaScript, static images or other files on the web.

Still go to remote_control:

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control $ cd remote_control/

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control/remote_control $ ls

__init__.py  settings.py  templates  urls.py  views.py  wsgi.py

__init__.py    Required to make Python treat the directories as contained packages

settings.py    A configuration file. To modify it, you need to read some books about Django. Here we suggest you to search for the Django Book, a free online book.  

templates    A Django App established by SunFounder to store the contents of the html webpage

urls.py    A file Django uses to define URLs; you can open it to view the ports we have defined.

views.py    The main control part, including the movements of the car when the page or interface are called. After studying the first few chapters of the Django Book, you can try to modify the file to add more ports.

wsgi.py    Needless of attention for now.

Open templates:

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control/remote_control cd templates/

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control/remote_control/templates $ ls

admin.py  apps.py  __init__.py  migrations  models.py  templates  tests.py  views.py

This folder is a Django app established by Django to call the html files more conveniently. There is no need to modify other files since all html files are included in these templates.

Open templates again:

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control/remote_control/templates $ cd templates/

pi@raspberrypi:~/SunFounder_PiSmart_Car/examples/remote_control/remote_control/templates/templates $ ls

base.html  joystick.html  run.html  send_cmd.js

base.html    Homepage as well as the templates of the whole webpage; please refer to templates chapter in the Django book for details.

joystick.html    The html and JavaScript of the joystick page for car controlling .      

run.html    The html in the /run page, calling the framework of base.html and including the text input interface, and calling joystick.html to control.

send_cmd.js    A small function run in the back-end system, mainly for sending commands. Since it needs about 1 second to send a command, to improve the joystick performance, we set command-sending as an independent process to ensure the process of the joystick will not get stuck during the operation.