Scribd
Upload
103 views

Arduino Node

1) The document describes a project where a radio controlled toy car is driven through a browser using a USB racing wheel connected to the browser. The wheel's movement data is read using the HTML5 Gamepad API and sent over WebSockets to a Node.js server. 2) The Node.js server communicates with an Arduino microcontroller connected via USB to the computer. The Arduino controls the motors of the toy car and receives commands wirelessly. 3) Future plans include adding a wireless camera and sensors to the car to improve the remote driving experience.

Uploaded by

Kiko Yunvic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
103 views

Arduino Node

1) The document describes a project where a radio controlled toy car is driven through a browser using a USB racing wheel connected to the browser. The wheel's movement data is read using the HTML5 Gamepad API and sent over WebSockets to a Node.js server. 2) The Node.js server communicates with an Arduino microcontroller connected via USB to the computer. The Arduino controls the motors of the toy car and receives commands wirelessly. 3) Future plans include adding a wireless camera and sensors to the car to improve the remote driving experience.

Uploaded by

Kiko Yunvic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

Back

Blog Resources

Arduino Node.js RC Car Driven with the


HTML5 Gamepad API
Published last year by Mate Marschalko
We constantly see developers pushing the limits of JavaScript; mobile and desktop
applications, 3D games and so much more but its a dierent story to connect a
USB racing wheel to the browser and read it with the HTML5 Gamepad API and drive
a Radio Controlled toy car through WebSockets and a Node.js server.

Arduino Node.js RC Car Driven with the HTML5 Gamepad API

The JavaScript code

http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

1/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

I started the project o by experimenting with reading raw data from USB joysticks,

Back and racing wheels from the browser. This is a relatively easy
Blog
gamepads
taskResources
in
browsers supporting the HTML5 Gamepad API:
Download FREE Ebook: Introduction to JavaScript Electronics
varrawGamepads=
(navigator.getGamepads&&navigator.getGamepads())||
(navigator.webkitGetGamepads&&navigator.webkitGetGamepads());

USB gamepad data retrieved from the navigator object


I got the original code from Marcin Wichary who built it for the London Olympics
Google doodle hurdles game. Yes, this doodle game supports any USB gamepad.
You might wonder why we need so much code in that gamepad.js le if all the
joystick raw sensor data is available in navigator.getGamepads . Well, it handles
feature detection, event listening for connection/disconnection and a x for Chrome
which doesnt re gamepad events.

Steering wheel and pedals connected to Chrome


After gamepad.js is loaded and initialised the gamepad object is lled with the sensor
data:

http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

2/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

myGamepad=gamepadSupport.gamepads[0];
Back
//Steering:

Blog Resources

myGamepad.axes[0];
Download FREE Ebook: Introduction to JavaScript Electronics
//Acceleration:
myGamepad.axes[1];
//Breaking:
myGamepad.axes[2];
//Buttonsfrom012:
myGamepad.buttons[0]

USB gamepad data retrieved from the navigator object


Once the steering wheel and pedal control data is ltered and compiled into a JSON
object its ready to be sent to the car. In the background we are running a Node.js
server which connects everything together.

varapp=require('express')(),
server=require('http').createServer(app).listen(8080);
//respondtowebGETrequestswiththeindex.htmlpage:
app.get('/',function(request,response){
response.sendfile(__dirname+'/index.html');
});

USB gamepad data retrieved from the navigator object


Running this javascript le from the terminal with nodeindex.js will start the
server up and serve index.html at the localhost:8080 url. After that we initialise the
Web Socket which creates a real-time connection between the browser and the
server. With web sockets you could actually connect multiple users and browsers
together to create multiplayer games for example.
Setting up the web socket and sending a message from the browser and receiving it
from the server is really easy:

vario=require('socket.io').listen(server);
//listenfornewsocket.ioconnections
//wedon'tstartreadinganytinguntilthebrowserhasconnected
io.sockets.on('connection',function(socket){
socket.on('message',function(data){
http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

3/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

//datasentfromthebrowser
Back
console.log(data);
});
});

Blog Resources

Download FREE Ebook: Introduction to JavaScript Electronics

Node.js server code to start the web socket

//dataStringistheJSONwiththewheelandpedalcontroldata
socket.emit('message',dataString);

Front-end code to send web socket message


After this magic happens in Node.js. We establish connection with the Arduino
microcontroller board that is connected to the USB port. This is something you would
never be able to do from the browser without a third-party plugin due to security
reasons.

//opentheUSBserialport
varmyPort=newSerialPort("/dev/tty.usbmodem1421",{
//lookforreturnandnewlineattheendofeachdatapacket
parser:serialport.parsers.readline("\r\n")
});
myPort.write(messageReceivedFromTheBrowser);

Node.js code to send serial message to the USB port


The write function needs to go inside the socket on connect and socket on message
functions so our message to the Arduino is the JSON object we received from the
browser through the web socket.

The RC car
The work has started o by taking out the original radio and motor drive modules
and the antenna from the car. I was left with two motors, one for steering and one
for acceleration, and the plan was to rebuild the whole architecture using Arduinos. I
succeeded and the motors are now driven with a powerful H-bridge module (L298n)
and the wireless connection is handled by two nRF24l01 antennas. The Arduino and
the motors are both powered from the original 6V battery pack (4xAA).

http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

4/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

Back

Blog Resources

Download FREE Ebook: Introduction to JavaScript Electronics

The guts of the car: Arduino Nano, antenna, motor control unit
The onboard Arduino Nano receives wireless messages from the Arduino UNO
connected to the my Macbook Pro which is the one communicating with the Node.js
server and the browser.

Future plans
There are so many parts of this projects that are really exciting and interesting and
parts that are a little bit more dicult to fully implement. So please let me know and
leave a comment if you want me to create and extended tutorial on this project!

http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

5/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

Back

Blog Resources

Download FREE Ebook: Introduction to JavaScript Electronics

The radio controlled car


Im also planning to improve the car by installing an onboard wireless camera, a
more powerful RC battery pack and maybe a few more sensors or lights.
Back to all

16 thoughts on Arduino Node.js RC Car Driven with the HTML5


Gamepad API
Pingback: Node.js: The New Swiss Army Chainsaw | Unknotted
Pingback: Arduino Node.js RC Car Driven with HTML5 Gamepa...
Pingback: Arduino NodeJS RC Car Driven with the HTML5 Gamepad API |
Dinesh Ram Kali.
Pingback: Arduino Node.js RC Car Driven with the HTML5 Ga...
Martin says:
July 23, 2015 at 6:00 pm
Id love to see a complete tutorial of how to make that work. I am an
absolute beginner and to be honest I have no idea which components are
really needed to achive this amazing result.

Steve says:
July 23, 2015 at 9:13 pm
Please give us more information on how you did this project. For instance,
how was the controller card determined? It looks extremely complicated
a multi-part tutorial.
http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

6/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

Mate Marschalko says:

Back
July 24, 2015 at 4:19 am

Blog Resources

Martin,
Download
Ebook: Introduction
JavaScript
Electronics
thanks forFREE
the comment
and interest.toThe
Ebook Im
currently writing is
going to be a lot of help for complete beginners. It will get you started
with all the basics in a couple of hours and you will straight away
understand all the projects on my website. The same time a complete
tutorial would also help, just to see every single line of code, with a lot
more photos, so I will work on that too!

Mate Marschalko says:


July 24, 2015 at 4:26 am
Steve,
Believe me, its not that complicated once you understand the basics. By
controller card, did you mean the Arduino? If yes, then Im
communicating with it through the USB port so just have to select it by
its name in Node.js: var myPort = new
SerialPort(/dev/tty.usbmodem1421, {}); after that its just a question of
sending messages through the port.
Pingback: RealTimeWeekly | RealTimeWeekly #90
Pingback: Driving an RC Car with Arduino and a USB Racing Wheel | Make: DIY
Projects, How-Tos, Electronics, Crafts and Ideas for Makers
Pingback: Driving an RC Car with Arduino and a USB Racing Wheel MyFeedly.info
Pingback: Driving an Arduino-powered RC car with a USB racing wheel | Atmel
| Bits & Pieces
Pingback: Conduce un coche de radio control con mando de volante USB con
Arduino
Pingback: Node Weekly No.96 | ENUE Blog
Pingback: Fly an AR Drone with an Xbox controller and JavaScript | Des Holmes
- Creative Technical Director
Pingback: Driving an Arduino-powered RC car with a USB racing wheel | Atmel
Bits & Pieces

Leave a Reply
You must be logged in to post a comment.

http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

7/8

22/9/2016

ArduinoNode.jsRCCarDrivenwiththeHTML5GamepadAPI

Back

Blog Resources

FreeDownload
Ebook
FREE Ebook: Introduction to JavaScript Electronics
Step up your web developer career and learn hardware prototyping.
This ebook will get you started with JavaScript Arduino electronics development in a
couple of hours.
Email address

Send me the PDF

Web on Devices
Electronics Hacking with JavaScript and other Web Technologies
Twitter

Facebook

Mate Marschalko
Front-end Web Developer, Creative Technologist and Maker. Builds Internet connected devices for the Internet of
Things.

All rights reserved | Contact at [email protected]


http://www.webondevices.com/arduinonodejsrccardrivenwithhtml5gamepadapi/

8/8

You might also like