A camera control stick in JavaScript

Looking to develop a camera control joystick that can move in four directions: left, right, up, and down with the ability to stop. After extensive research online, I stumbled upon something called nipplejs and attached the code below:

var radius = 100;

var sampleJoystick = {
    mode: 'static',
    position: {
      left: '50%',
      top: '50%'
    },
    size: radius*2,
    color: 'black'
};

var joystick;
var position;
joystick = nipplejs.create(sampleJoystick);
joystick.on('start end', function(evt, data) {
  position = data;
}).on('move', function(evt, data) {
  position = data;
}).on('dir:up plain:up dir:left plain:left dir:down' +
      'plain:down dir:right plain:right',
      function(evt, data) {
  //position=data;
}
     ).on('pressure', function(evt, data) {
  position=data;
});
<script src="//yoannmoinet.github.io/nipplejs/javascripts/nipplejs.js"></script>
<div id="zone_joystick">
</div>

While initially appearing as the perfect solution, it lacks direction indicators and does not support a stop feature on the joystick, leading to confusion for elderly users of the software.

I am seeking an alternative panel control solution that meets the mentioned functionalities:

Functionalities: - Joystick with directional movement capabilities (Left, Right, Up, Down). - Ability to stop joystick movement.

Answer №1

In order to access the information from the hardware, it is necessary to establish a connection with it beforehand. Have you explored the option of utilizing the GamePad API provided by web browsers? It is important to note that this feature may not be supported on all browsing platforms.

Check out more information about the GamePad API here!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting an array of numbers using Javascript

Does anyone know how to properly sort an array in JavaScript? By default, the sort method doesn't work efficiently with numbers. For example: a = [1, 23, 100, 3] a.sort() The sorted values of 'a' end up being: [1, 100, 23, 3] If you hav ...

Conceal the legend in Highcharts using Python script with Django

Need some assistance with a Django and Highcharts.js project I'm working on. Objective: hide the legend in a Highcharts chart from my views.py script. In my views.py file, I've successfully plotted various charts but struggling to hide the lege ...

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

exchanging a library for a different one

I'm faced with a relatively simple task here, but as I am just beginning to delve into object-oriented programming, it is proving to be quite perplexing for me. Currently, I am using the lon_lat_to_cartesian function from the following source: functi ...

Locate every item that has a value that is not defined

My data is stored in indexeddb, with an index on a text property of the objects. I am trying to retrieve all objects where this property's value is undefined. I have been experimenting with IDBKeyRange.only(key), but when I use null, undefined, or an ...

Does JavaScript automatically round large numbers?

I have a simple array: myArray = [{"egn":79090114464},{"egn":92122244001},{"egn":10005870397643185154},{"egn":10000330397652279629},{"egn":10000330397652279660},] However, when I append the values from thi ...

Retrieving data from API using Ionic2 to http.post

Here is the code snippet I used to make an HTTP POST call: var creds = encodeURI("name="+name+"&email="+email); var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); headers.append(&apos ...

Struggling to retrieve JSON information from the database using AJAX

I am facing a challenge when it comes to fetching data from my database using these technologies. Here is the current scenario: var username = $('#username').val(); var password = $('#password').val(); // This IP is just an example fo ...

Using node.js to send custom data over a websocket

I came across an excellent tutorial on websockets. In this tutorial, the server decodes and writes a message to the console whenever it receives a message from the client. After that, the server sends the message back to the client. var firstByte = data ...

Can the Kendo TreeList sort its columns based solely on the parent element?

Check out this kendo treeList example. I'm trying to figure out how to sort the data in the treeList based only on values of parent elements. In the current example, when sorting by column 'P names', even the child elements get sorted. How ...

What is the best way to include the rowId when utilizing ng-grid and AngularJS to send a DELETE Http Verb?

After setting up the resource, function, and cell template as shown below: var Exam = $resource('/api/Tests', {}, { saveData: { method: 'PUT' } }); $scope.delete = function (row) { row.entity.$delete(row.examId); } $scope.updat ...

What is the proper way to implement a $scope.$watch for a two-dimensional array in AngularJS?

Having trouble implementing an Angular watch on a multidimensional array I've got a screen where users can see two teams (outer array) with team sheets (inner array) for each team. They can drag and drop players to change the batting order. The batt ...

Updating a page in ReactJS after retrieving data: A step-by-step guide

Just starting out with ReactJS and attempting to create an interactive comments section based on a design from frontendmentor.io. However, my App component is not displaying the expected content. Here is the code for my App component: function App() { ...

Using jQuery to determine if the child element is a <ul> tag

HTML: <ul class="menu"> <li><a href="http://example.com">Text</a> <ul> <li><a href="http://example.com">Text</a> <li><a href="#">Text</a> <li><a href="# ...

Ways to retrieve all elements based on their class names?

What is the equivalent of using $('.class') in JQuery to get all elements by class name with pure JavaScript? ...

Sharing Data Across Multiple Windows in Angular 2 Using a Singleton List

My multiplayer game involves adding new players to a single game room lobby, which is essentially a list of current players. How can I update this list for all connected players when new ones join? I implemented a service and included it in the providers ...

Discover the HTML of a different website using Javascript

I'm currently developing a basic webcrawler that will display all the links found on a specified website. Here's what I envision my program doing: - enter a URL: http://www.example.com/ - the program retrieves the HTML source and locates all th ...

Preventing page refresh with Javascript when clicking on CAPTCHA

I have been exploring a CAPTCHA tutorial on TutsPlus.com and I am facing an issue where the 'Incorrect Captcha message' keeps appearing, indicating that my user input through $_POST does not match the stored $_SESSION string. Upon investigating ...

Error code 400 encountered during an HTTP POST request - issue stems from incorrect design of views and serializers

I keep encountering the following error: POST http://127.0.0.1:8000/api/creator_signup/ 400 (Bad Request) Every time I try to send data from my AngularJS application to my Django backend. When making a POST request, I used the following code (https://i. ...

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...