Wifi Joystick Controller For WeMos Project

When you get done coding a sketch, involving anything that moves, you are still left with the remaining task of creating the controls for your project. I have been there, so I created this blog for you. With this blog, you can get what you will need to create and control your own project controller and the code necessary to do so. This includes the WeMos sketch code as well.

(Spider robot being controlled by joystick controller)


Gadgets That Go Wifi Joystick Controller

(Gadgets That Go Joystick Controller)

How Does the Joystick Controller Work?

The Joystick Controls the movement of a bot that uses two motors by sending back input for the speed and direction of the motors. When you hover the mouse over the joystick image on a desktop computer the joystick ball will follow the mouse position. The inputs for both motors get determined by the location of joystick ball. The speed is determined by how far away the joystick is from center. The direction is gauged from the x,y position of the joystick ball.

The Joystick Controller Takes the input of the D1 Mini's given IP in the following format: ws://[IP]:[Port Number]

Example: ws://


How Do I Setup the Joystick Controller?

There are two portions of code we have used on our project, and we have shared both below. The first step is getting the html canvas file saved to your computer. Once saved you can simply drag the file over to an open browser, and it should open the html file up displaying the controls.

The html file and WeMos Motor Shield sketch can be found and downloaded from Github at:


The next step is uploading the motor control sketch to your WeMos. Before you can do this there are two lines you must update so the sketch will work with your home router. The following lines you need to change are as follows:

const char* ssid = "Enter Your Router SSID Here";
const char* password = "Enter Your Router Password Here";

The first line should be replaced with the name you see for your router when discovering available wifi locations. The second is the password for your router. Once you have updated both lines you can re-save your sketch and upload it to your D1 Mini.

Getting it Working with Your Project

Once you have the file uploaded and canvas html file opened you are almost ready to begin controlling your project or robot with the joystick controls. The last piece that you need is applying your D1 Mini's given IP in the "Input the IP of your Bot" field. This IP can be found when viewing the serial monitor (serial monitor button shown below) of the uploaded code on your D1 Mini. 

You will also need to make sure you enter the IP with the correct format. For example: ws:// 

Ensure you include the "ws://" portion of the IP or the code and connection will not work.




Leave a comment

Please note, comments must be approved before they are published