Arduino Node

22/9/2016

Ar dui no Node.j s RC Car D r i ven wi th the H TM L5 Gam epad API

Back

Blog Resources

Arduino Node.js RC Car Driven with the HTML5 Gamepad API Published last year by Mate Marschalko

We constantly see developers developers pushing the limits of JavaScript; JavaScript; mobile and desktop desktop applications, 3D games and so much more … but it’s a di섣erent 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://w ww.w ebondevi ces.com /ar dui no- nodej s- r c- car - dr i ven- wi th- htm l 5- gam epad- api /

1/8

22/9/2016

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

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 var rawGamepads =

(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 doesn’t 䅆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/arduino-nodejs-rc-car-driven-with-html5-gamepad-api/

2/8

22/9/2016


myGamepad = gamepadSupport.gamepads[0]; Back Blog Resources // Steering: myGamepad.axes[0]; Download FREE Ebook: Introduction to JavaScript Electronics // Acceleration: myGamepad.axes[1]; // Breaking: myGamepad.axes[2]; // Buttons from 0 ‐ 12: 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 it’s ready to be sent to the car. In the background we are running a Node.js server which connects everything together. var app = require('express')(),

server = require('http').createServer(app).listen(8080); // respond to web GET requests with the index.html page: 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 node index.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: var io = require('socket.io').listen(server);

// listen for new socket.io connections // we don't start reading anyting until the browser has connected io.sockets.on('connection', function (socket) { socket.on('message', function (data) { http://www.webondevices.com/arduino-nodejs-rc-car-driven-with-html5-gamepad-api/

3/8

22/9/2016


// data sent from the browser console.log(data);

Blog Resources Back }); }); Download FREE Ebook: Introduction to JavaScript Electronics Node.js server code to start the web socket

// dataString is the JSON with the wheel and pedal control data 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. // open the USB serial port var myPort = new SerialPort("/dev/tty.usbmodem1421", { // look for return and newline at the end of each data packet 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/arduino-nodejs-rc-car-driven-with-html5-gamepad-api/

4/8

22/9/2016


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 di䄤cult to fully implement. So please let me know and leave a comment if you want me to create and extended tutorial on this project!


5/8

22/9/2016


Back

Blog Resources

Download FREE Ebook: Introduction to JavaScript Electronics

The radio controlled car

I’m 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

I’d 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/arduino-nodejs-rc-car-driven-with-html5-gamepad-api/

6/8

22/9/2016


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 I’m 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, it’s not that complicated once you understand the basics. By controller card, did you mean the Arduino? If yes, then I’m communicating with it through the USB port so just have to select it by it’s name in Node.js: var myPort = new SerialPort(“/dev/tty.usbmodem1421”, {}); after that it’s 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.


7/8

22/9/2016


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]


8/8

Arduino Node

Recommend Documents