Now JoyStick work in any position Close #4

bobboteck · Nov 12, 2019 · 42bb4e0 · 42bb4e0
1 parent b3ea08a
commit 42bb4e0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ A simple JoyStick for web application that use HTML5, Canvas and JavaScript. JQu
 You can simply add a JoyStick in your HTML5 page, base configuration is ready for use it.
 Developed for Web Remote Control of Robot, the JoyStick can be used for all other scope.
 
-**Actual release version is 1.1.0**
+**Actual release version is 1.1.1**
 
 Using appropriate methods that the object provides, you can know the position of the Stick is located.
 The methods available are:

diff --git a/joy.html b/joy.html
@@ -14,7 +14,8 @@
 	<script src="joy.js"></script>
   </head>
   <body>
-	<div id="joyDiv" style="width:200px;height:200px;margin-bottom:20px;"></div>
+    <div id="joyDiv" style="width:200px;height:200px;margin-bottom:20px;margin:50px"></div>
+
 	Posizione X:<input id="posizioneX" type="text" /></br>
 	Posizione Y:<input id="posizioneY" type="text" /></br>
 	Direzione:<input id="direzione" type="text" /></br>

diff --git a/joy.js b/joy.js
@@ -1,9 +1,13 @@
-/*!
+/*
  * Name          : joy.js
  * @author       : Roberto D'Amico (Bobboteck)
- * Last modified : 12.07.2015
- * Revision      : 1.1.0
+ * Last modified : 12.11.2019
+ * Revision      : 1.1.1
  *
+ * Modification History:
+ * Date         Version     Modified By		Description
+ * 2019-11-12   1.1.1       Roberto D'Amico Fixed Issue #4 - Now JoyStick work in any position in the page, not only at 0,0
+ * 
  * The MIT License (MIT)
  *
  * Copyright (c) 2015 Roberto D'Amico (Bobboteck)
@@ -140,13 +144,15 @@ var JoyStick = (function(container, parameters) {
 	{
 		pressed=1;
 	}
-	function onTouchMove(event) {
+	function onTouchMove(event)
+	{
 		// Prevent the browser from doing its default thing (scroll, zoom)
 		event.preventDefault();
 		if(pressed==1)
 		{
-			movedX=event.touches[0].pageX;
-			movedY=event.touches[0].pageY;
+			let rect = canvas.getBoundingClientRect();
+			movedX=event.touches[0].pageX - rect.left;
+			movedY=event.touches[0].pageY - rect.top;
 			// Manage offset
 			movedX-=canvas.offsetLeft;
 			movedY-=canvas.offsetTop;
@@ -181,8 +187,9 @@ var JoyStick = (function(container, parameters) {
 	{
 		if(pressed==1)
 		{
-			movedX=event.pageX;
-			movedY=event.pageY;
+			let rect = canvas.getBoundingClientRect();
+			movedX=event.pageX - rect.left;
+			movedY=event.pageY - rect.top;
 			// Manage offset
 			movedX-=canvas.offsetLeft;
 			movedY-=canvas.offsetTop;

diff --git a/joy.min.js b/joy.min.js