Making a Joystick With HTML (pure JavaScript)

Introduction: Making a Joystick With HTML (pure JavaScript)

HI!I'm planning to make a mousebot for quite sometime now. For the first step, I decided to make a joystick with pure javascript so it can be loaded to an Arduino. I'll be explaining the code through out this tutorial and will be uploading the whole source code at the end.

Software used:

Visual studio code

Step 1: Put Text on Your Html

For computers to know that its an html file and it should be loaded, the following codes are necessary:

<!DOCTYPE html>
<html>

To define the title and others information about the document we specifiy it insde the head tag as folows:

<head>
    <title>   Mousebot </title>
    <meta name="viewport" content="user-scalable=no">
</head><br>

To prevent the html body from scrolling when used on mobile we specify it with the following.

  • scroll="no - Doesnt add Scrollbars
  • style - Indicates that it is a CSS property
  • overflow: hidden - A CSS property to hide content that is outside the display
  • position: fixed; - To make elements stays in the same place
<body scroll="no" style="overflow: hidden;position: fixed;<br>

For the Font style, color and size we specify it with this code:

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
color:rgb(128, 128, 128);
font-size: xx-large;"<br>

For the text, I placed the title on a

which is a heading to be bigger and others to a

whici is for paragraph to make it smaller. Other i used style="text-align:center" To place the text a the center. the Span enables the text in it to be written on a same line. the "id" is used later to change the values between written in span element.

 <h1 style="text-align:center">
        MOUSEBOT </h1>
    <p style="text-align: center;">
        X: <span id="x_coordinate"> </span>
        Y: <span id="y_coordinate"> </span>
        Speed: <span id="speed"> </span> %
        Angle: <span id="angle"> </span>
    </p><br>

To have a "canvas" on which we will draw the joystick later use this piece of code and name it "canvas"

 <canvas id="canvas" ></canvas><br>

To ensure no error, we will close all tags as follows:

</body>
</html><br>

And thats it fir the static html side. Try to copy this to vscode and save as index.html. Open it on your browser and you should see the attached image. Here is the whole code:

<!DOCTYPE html>
<html>
<head>
    <title>   Mousebot </title>
    <meta name="viewport" content="user-scalable=no">
</head>
<body scroll="no" style="overflow: hidden;position: fixed;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
color:rgb(128, 128, 128);
font-size: xx-large;">
 <h1 style="text-align:center">
        MOUSEBOT </h1>
    <p style="text-align: center;">
        X: <span id="x_coordinate"> </span>
        Y: <span id="y_coordinate"> </span>
        Speed: <span id="speed"> </span> %
        Angle: <span id="angle"> </span>
    </p>
    <canvas id="canvas" ></canvas>
</body>
</html><br>

Step 2: Specify Steps to Do on Every Action

When the file is loaded, we want it to do some steps. we secify those steps inside this code

window.addEventListener('load', () => {<br>

We then get the html elemenent named "canvas"

canvas = document.getElementById('canvas');

and specify that we will be drawing 2D diagrams on this with

ctx = canvas.getContext('2d');<br>

We will then call a function named resize for the display. We will be making this functions later.

 resize();<br>

We will also call for functions named startDrawing when the mouse is pressed ,stopDrawing when it isn't pressed and draw when there mouse is moved.The touchscreen displays counter parts are as follows touchstart touchend, touchcancel, touchmove are used. For the Window to listen to this action we used this code.

document.addEventListener('mousedown', startDrawing);
document.addEventListener('mouseup', stopDrawing);
document.addEventListener('mousemove', Draw);

document.addEventListener('touchstart', startDrawing);
document.addEventListener('touchend', stopDrawing);
document.addEventListener('touchcancel', stopDrawing);
document.addEventListener('touchmove', Draw);<br>

When the screen is resized,we call the resize funtion as follows:

  window.addEventListener('resize', resize);<br>

We also get the elements with id x_coordinate, x_coordinate , speed and angle withdocument.getElementById(id) and add.innerText to makethe valie inside this elemets to = 0

<p>document.getElementById("x_coordinate").innerText = 0;<br>            document.getElementById("x_coordinate").innerText = 0;
            document.getElementById("speed").innerText = 0;
            document.getElementById("angle").innerText = 0;</p>

Step 3: Draw Your Backround

We will now make our function named backgound. To place the center of the circle on the x-coordinates located on the width center, divide width/2. Then to put the center on the lower part of the circle, divide the height with 3.

function background() {
            x_orig = width / 2;
            y_orig = height / 3;

The following code then signifies that we will start to draw now

 ctx.beginPath();<br>

To draw a circle, we need to specify the center with respect to the x and y axis(as shown on the image attached), its radius, the start and end angle in radians and the rotation(true for clockwise) in this format arc(x, y, radius, startAngle, endAngle, anticlockwise).

  ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);<br>

We choose its color with its hex value which you can get here with this code:

ctx.fillStyle = '#ECE5E5';<br>

We then fill the circle with this color using this code:

 ctx.fill();<br>

Step 4: Draw Your Joystick

for the joystick funtion, we will be accepting to variable named "width" and "height" for the center of our circle's radius. we will also draw a smaller circle with this code

function joystick(width, height) {
	ctx.beginPath();
	ctx.arc(width, height, radius, 0, Math.PI * 2, true);

Fill it with your desired color:

	ctx.fillStyle = '#F08080';
	ctx.fill();<br>

Pick the color of its borders

	ctx.strokeStyle = '#F6ABAB';<br>

Specify the width of the borders

	 ctx.lineWidth = 8;

Draws the border

            ctx.stroke();<br>

Step 5: Resize Your Drawings

For the resize function, i specify the radius to 200

   function resize() {
            radius = 200; // specify the radius to 200
             width = window.innerWidth; //Sets the variable width to be equal to the windows width
            height = radius * 6.5; //Sets the variable height
            ctx.canvas.width = width; //sets the canvas width to be equal to variable width
            ctx.canvas.height = height; //sets the canvas height
            background();//draw the background
            joystick(width / 2, height / 3); //sends to the joystick function this variables
        }<br>

How it works:

After resizing the canvas, it will call the background function to draw the background. Then it will call the joystick function and send "width / 2, height / 3" to draw the joystick's circle at its center.

Step 6: Get Mouse Position

Get the absolute mouse position with or get the absolute touch position with:

  • event - returns the JSON data tied with the event mousedown, mouseup, mosemove, touchmove,touch starts etc.
  • .clientX - gets the absolute X position of the mouse or touch
  • .touches[0] - gets the data of the first touch
  • || - means or
function getPosition(event) {
	 var mouse_x = event.clientX || event.touches[0].clientX;
   	 var mouse_y = event.clientY || event.touches[0].clientY;<br>

Get the position relative with the canvas by subtracting the left and top as shown in the figure

  	 coord.x = mouse_x - canvas.offsetLeft;
         coord.y = mouse_y - canvas.offsetTop; }<br>

Step 7: Check Mouse Position

get the distance of the mouse position to the relative to the circle's center using the Pythagorean theorem.

  function is_it_in_the_circle() {
            var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) + Math.pow(coord.y - y_orig, 2));<br>

If its less than the joystick's circle radius, it returns true

 if (radius >= current_radius) return true<br>

else it return false

 else return false
}<br>

Step 8: Start Drawing

To start Drawing, we set paint as true. the variable "paint" is used for determining if the joystick should be drawn upon mouse movements

   function startDrawing(event) {
            paint = true;<br>

gets the position of the mouse

            getPosition(event);

Calls the function is_it_in_the_circle(). if it returns true, clear the canvas and draw the background, the joystick with the mouse position as its center and call the function draw

 if (is_it_in_the_circle()) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                background();
                joystick(coord.x, coord.y);
                Draw(); }}

Step 9: Draws

If paint is true, we will start drawing

  if (paint) {<br>

clears the canvas

  ctx.clearRect(0, 0, canvas.width, canvas.height);<br>

draw the background

 background();<br>

Computes for the angle in radians

var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));
                if (Math.sign(angle) == -1) {
                    angle_in_degrees = Math.round(-angle * 180 / Math.PI);
                }
                else {
                    angle_in_degrees =Math.round( 360 - angle * 180 / Math.PI);
                }<br>

Call the function is_it_in_the_circle() to check if its within the circle. if true, draw the joystick with the mouse as its center

 if (is_it_in_the_circle()) {
                    joystick(coord.x, coord.y);<br>

save the x and y coordinates for later use

   		    x = coord.x;
                    y = coord.y; }<br>

if its outside the circle, draw the joysticks circle at the same angle with the mouse position at its original radius

else {
                    x = radius * Math.cos(angle) + x_orig;
                    y = radius * Math.sin(angle) + y_orig;
                    joystick(x, y);}<br>

get mouse position

getPosition(event);<br>

Calculate the radius for its speed and rounds its value

var speed =  Math.round(100 * Math.sqrt(Math.pow(x - x_orig, 2) + Math.pow(y - y_orig, 2)) / radius);

Return the relative x and y value with respect to the axis of the joystick(original x and y coordinates)

 		var x_relative = Math.round(x - x_orig);
                var y_relative = Math.round(y - y_orig);<br>

writes the value for thecorresponding "x_coordinate", "y_coordinate",speed and angle values

		document.getElementById("x_coordinate").innerText =  x_relative;
                document.getElementById("y_coordinate").innerText =y_relative ;
                document.getElementById("speed").innerText = speed;
                document.getElementById("angle").innerText = angle_in_degrees;

Calls the function send and send the values of x_relative,y_relative,speed and angle_in_degrees

  send( x_relative,y_relative,speed,angle_in_degrees);<br>

Step 10: Stop Drawing

Sets the variable paint as false to ensure that it doesn't draw the joystick even if the mouse is moved

 function stopDrawing() {
            paint = false;<br>

Clears the canvas

    ctx.clearRect(0, 0, canvas.width, canvas.height);<br>

draws the background

   background();<br>

draw the joystick at its original coordinates

   joystick(width / 2, height / 3);<br>

writes the value for the "x_coordinate", "y_coordinate",speed and angle as 0

document.getElementById("x_coordinate").innerText = 0;
            document.getElementById("y_coordinate").innerText = 0;
            document.getElementById("speed").innerText = 0;
            document.getElementById("angle").innerText = 0; }

Step 11: Add Websocket

Connects with the arduino websocket at port 81

 var connection = new WebSocket('ws://' + "192.168.4.1" + ':81/', ['arduino']);<br>

On connection with the sends the date to the arduino

connection.onopen = function () {
            connection.send('Connect ' + new Date()); };<br>

On error, Send an alert with the error

connection.onerror = function (error) {
            alert('WebSocket Error ', error); };<br>

Upon receiving a message form the arduino, print it on the console

connection.onmessage = function (e) {
            console.log('Server: ', e.data); };<br>

A function named send saves the x,y,speed and angle values to a JSON format

function send(x,y,speed,angle){
            var data = {"x":x,"y":y,"speed":speed,"angle":angle};<br>

Turn the JSON object to stringify

  data = JSON.stringify(data);<br>

prints the data to the console

 console.log(data);<br>

sends the data to the arduino (the server)

        connection.send(data);

Step 12: Final Code

To view the code copy this to VSCode, save it as html and open it with google chrome. Open the developer tools by Pressing Command + Option + J (Mac) or Control + Shift + J (Windows, Linux, Chrome OS). The error on the console log remains since its not connected to the esp8266 server.

<!DOCTYPE html>
<html>
<head>
    <title>
        Mousebot
    </title>
    <meta name="viewport" content="user-scalable=no">
</head>
<body  style="position: fixed; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
color:rgb(128, 128, 128);
font-size: xx-large;">
    <h1 style="text-align:center">
        MOUSEBOT </h1>
    <p style="text-align: center;">
        X: <span id="x_coordinate"> </span>
        Y: <span id="y_coordinate"> </span>
        Speed: <span id="speed"> </span> %
        Angle: <span id="angle"> </span>
    </p>
    <canvas id="canvas" name="game"></canvas>
    <script>
        var connection = new WebSocket('ws://' + "192.168.4.1" + ':81/', ['arduino']);
        connection.onopen = function () {
            connection.send('Connect ' + new Date());
        };
        connection.onerror = function (error) {
            console.log('WebSocket Error ', error);
            alert('WebSocket Error ', error);
        };
        connection.onmessage = function (e) {
            console.log('Server: ', e.data);
        };

        function send(x,y,speed,angle){
            var data = {"x":x,"y":y,"speed":speed,"angle":angle};
            data = JSON.stringify(data);
            console.log(data);
            connection.send(data);
        }


    </script>
    <script>
        var canvas, ctx;

        window.addEventListener('load', () => {

            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');          
            resize(); 

            document.addEventListener('mousedown', startDrawing);
            document.addEventListener('mouseup', stopDrawing);
            document.addEventListener('mousemove', Draw);

            document.addEventListener('touchstart', startDrawing);
            document.addEventListener('touchend', stopDrawing);
            document.addEventListener('touchcancel', stopDrawing);
            document.addEventListener('touchmove', Draw);
            window.addEventListener('resize', resize);

            document.getElementById("x_coordinate").innerText = 0;
            document.getElementById("y_coordinate").innerText = 0;
            document.getElementById("speed").innerText = 0;
            document.getElementById("angle").innerText = 0;
        });

      


        var width, height, radius, x_orig, y_orig;
        function resize() {
            width = window.innerWidth;
            radius = 200;
            height = radius * 6.5;
            ctx.canvas.width = width;
            ctx.canvas.height = height;
            background();
            joystick(width / 2, height / 3);
        }

        function background() {
            x_orig = width / 2;
            y_orig = height / 3;

            ctx.beginPath();
            ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);
            ctx.fillStyle = '#ECE5E5';
            ctx.fill();
        }

        function joystick(width, height) {
            ctx.beginPath();
            ctx.arc(width, height, radius, 0, Math.PI * 2, true);
            ctx.fillStyle = '#F08080';
            ctx.fill();
            ctx.strokeStyle = '#F6ABAB';
            ctx.lineWidth = 8;
            ctx.stroke();
        }

        let coord = { x: 0, y: 0 };
        let paint = false;

        function getPosition(event) {
            var mouse_x = event.clientX || event.touches[0].clientX;
            var mouse_y = event.clientY || event.touches[0].clientY;
            coord.x = mouse_x - canvas.offsetLeft;
            coord.y = mouse_y - canvas.offsetTop;
        }

        function is_it_in_the_circle() {
            var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) + Math.pow(coord.y - y_orig, 2));
            if (radius >= current_radius) return true
            else return false
        }


        function startDrawing(event) {
            paint = true;
            getPosition(event);
            if (is_it_in_the_circle()) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                background();
                joystick(coord.x, coord.y);
                Draw();
            }
        }


        function stopDrawing() {
            paint = false;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            background();
            joystick(width / 2, height / 3);
            document.getElementById("x_coordinate").innerText = 0;
            document.getElementById("y_coordinate").innerText = 0;
            document.getElementById("speed").innerText = 0;
            document.getElementById("angle").innerText = 0;

        }

        function Draw(event) {

            if (paint) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                background();
                var angle_in_degrees,x, y, speed;
                var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));

                if (Math.sign(angle) == -1) {
                    angle_in_degrees = Math.round(-angle * 180 / Math.PI);
                }
                else {
                    angle_in_degrees =Math.round( 360 - angle * 180 / Math.PI);
                }


                if (is_it_in_the_circle()) {
                    joystick(coord.x, coord.y);
                    x = coord.x;
                    y = coord.y;
                }
                else {
                    x = radius * Math.cos(angle) + x_orig;
                    y = radius * Math.sin(angle) + y_orig;
                    joystick(x, y);
                }

            
                getPosition(event);

                var speed =  Math.round(100 * Math.sqrt(Math.pow(x - x_orig, 2) + Math.pow(y - y_orig, 2)) / radius);

                var x_relative = Math.round(x - x_orig);
                var y_relative = Math.round(y - y_orig);
                

                document.getElementById("x_coordinate").innerText =  x_relative;
                document.getElementById("y_coordinate").innerText =y_relative ;
                document.getElementById("speed").innerText = speed;
                document.getElementById("angle").innerText = angle_in_degrees;

                send( x_relative,y_relative,speed,angle_in_degrees);
            }
        } 
    </script>
</body>
</html><br>

Be the First to Share

    Recommendations

    • Summer Fun: Student Design Challenge

      Summer Fun: Student Design Challenge
    • Fandom Contest

      Fandom Contest
    • Metal Contest

      Metal Contest

    2 Comments

    0
    redge9987
    redge9987

    8 months ago

    Thank you @iamrachelle! This really helped me on my capstone final.

    I was getting errors using this code in Chrome. I fixed it by making the following changes to your getPosition() function:

    function getPosition(event) {
    e = window.event || e;
    var mouse_x = e.clientX || e.touches[0].clientX;
    var mouse_y = e.clientY || e.touches[0].clientY;
    coord.x = mouse_x - canvas.offsetLeft;
    coord.y = mouse_y - canvas.offsetTop;
    }

    Hope this helps!
    0
    buckstucky
    buckstucky

    Question 8 months ago on Introduction

    Thank you for the elagent mousejoystick Here is my server code , its very simple. Its seems I only get the date do you know what Im doing wrong ? Thanks so much.#!/usr/bin/env python3

    import asyncio
    import websockets

    async def server(websocket, path):
    # Get received data from websocket
    data = await websocket.recv()
    print ("data = ",data)
    # Send response back to client to acknowledge receiving message
    await websocket.send("Thanks for your message: " + data)

    # Create websocket server
    start_server = websockets.serve(server, "192.168.1.106", 5000)

    # Start and run websocket server forever
    asyncio.get_event_loop().run_until_complete(start_server)
    asyncio.get_event_loop().run_forever()

    This is all I get:
    "Connect Mon Nov 09 2020 16:06:48 GMT-0800 (Pacific Standard Time)"

    I dont get any of the mouse data I see it sending