Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail

Here’s a video of the car in action:

Gallery of all the pictures I took.

The most recent project I decided to work on was a line following robot. However, as I was testing it to make sure the direction code was working, I decided to develop something that I can control from my smartphone. It turned out much better than I was expecting, so I figured I should make a blog post about it.

As you can clearly see, I pieced together the parts for my car. It’s a block of wood, with a caster on the front, and a couple of brackets on the back to hold the motor/wheels. All of those parts cost about $7.50 total off of AliExpress. In hindsight, I see that I should have just bought a car kit, which would do the same thing, for a dollar more, and is much less of a headache to put together.

Part List:

I just used a portable charger to power the Wemos. You may want to use batteries with a battery holder(3 AA batteries in series, with positive on the 5v pin, and negative on Ground). Either way will work, the portable charger was just easier.

The first step is to put the car together. I don’t have the kit, but I don’t think people should waste their time rigging it together like I did, so I’m not going to go into any detail on putting it together. The kit seems pretty easy to assemble from some of the videos I have seen.

Next, you need to wire up the TB6612FNG motor controller to the Wemos and to the motor. To do that, refer to the schematic below. Keep in mind that if one or both motors get wired backwards, the code will cause them to go in reverse. You can either rewire them, or you can just edit the code appropriately. I have put in a comment in the code indicating what you would need to change:

WiFi Car Schematic

 

Once you have the everything connected, you need to upload the HTML and Javascript files for the web based joystick. The code for the Joystick came from HERE. I modified the code for those to send the joystick coordinates to the ESP.

These 2 files need to be uploaded to SPIFFS. I use the instructions located HERE. Download the zip file from the first step in that link. For the first step of the instructions, go to your preferences in Arduino IDE, and look at your sketchbook folder. Browse to that folder, and create a folder names ‘tools’ if it’s not already there. Unzip that file into this tools directory. For me, my sketchbook folder was C:\Users\<username>\Documents\Arduino , and after unzipping, I had a file located at C:\Users\<username>\Documents\Arduino\tools\ESP8266FS\tool\esp8266fs.jar . Restart Arduino IDE.

Now, go ahead and create the sketch/ino file you will be putting this project into and save it. Go to the folder you saved it in, and create a folder under there called ‘data’. DOWNLOAD THE MODIFIED HTML/JS FILES. Unzip the HTML/JS files into this ‘data’ folder. You may need to restart Arduino IDE, and then go to ‘Tools->ESP8266 Sketch Data Upload’. This will upload the files in the data folder to SPIFFS. If you are on mobile, and just want to view the code, click here.

Upload the code to the Wemos/ESP. Be sure to modify the SSID and Password. :

Once the code is uploaded, you can open up any recent web browser on your computer or mobile, and go to http://<ESP IP Address>/ and you should get a gray screen. Just touch or click on the screen and drag to move the joystick. The car should move accordingly. Again, if the direction of the car isn’t behaving as expected, then make the changes in the code by following the directions in the code comments around line 45.

As always, if you have any comments or feedback post in the comments. It should be fairly easy to leave a comment. Feel free to use a fake email. You just won’t get any notifications of a reply.

 

6 Replies to “WiFi Controlled Car with a Self Hosted HTML/JS Joystick Using a Wemos D1 Mini/ESP8266

  1. Hi! Thanks a lot,

    It works, was too much delay between issued command and car response, so I have changed to AP mode, and now seems to work really good,

    I have modified pinouts for nodemcu and also added html and js in code, so no need to use SPIFFS.

    Anyways, nice tutorial, thanks a million.

    1. Any chance you can share your AP code? I tried and could not get it to work in AP.

      I want to use without internet connection.

      Keith

Leave a Reply

Your email address will not be published. Required fields are marked *