Close #6 added new parameter for enable or disable autoreturn of stick

README.md

@@ -2,48 +2,55 @@
 
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/a8b6ea1475c54ae9896e849e356dfe1d)](https://www.codacy.com/app/bobboteck/JoyStick?utm_source=github.com&utm_medium=referral&utm_content=bobboteck/JoyStick&utm_campaign=badger)
 [![Join the chat at https://gitter.im/bobboteck/JoyStick](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/bobboteck/JoyStick?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-===============================================================================================================================================================================================================================
 
-About
---------
+## About
+
 **Autor: [Roberto D'Amico](http://bobboteck.github.io)**
 
-A simple JoyStick for web application that use HTML5, Canvas and JavaScript. JQuery is not required.
+A simple **JoyStick** for web application that use HTML5, Canvas and JavaScript.
 You can simply add a JoyStick in your HTML5 page, base configuration is ready for use it.
+The joystick can be used either on touch devices, or on devices that use mouse, touchpads or similar pointing systems.
 Developed for Web Remote Control of Robot, the JoyStick can be used for all other scope.
 
-**Actual release version is 1.1.3**
+> Note that code not use JQuery but only pure JavaScript.
+
+**Actual release version is 1.1.4**. The complete history of project is avaliable in the [Releases page](https://github.com/bobboteck/JoyStick/releases).
 
 Using appropriate methods that the object provides, you can know the position of the Stick is located.
 The methods available are:
+
 * **GetPosX()** and **GetPosY()**: which return the position of the cursor relative to the Canvas that contains it and to its dimensions
 * **GetDir()**: which returns the direction of the cursor as a string that indicates the cardinal points where this is oriented (N, NE, E, SE, S, SW, W, NW and C when it is placed in the center)
 * **GetX()** and **GetY()**: which return a value between -100 to +100 ***independently*** of size of the Canvas.
 
-How to use it
-----------------
-You can simply look the ***joy.html*** file for un example of use the library.
+## How to use it
+
+You can simply look the ***[joy.html](http://bobboteck.github.io/joy/joy.html)*** file for un example of use the library.
 
 First add the JS library in your page, follow the example code to use, if necessary you need to change te path of joy.js file.
-```
+
+```html
 <script src="joy.js"></script>
 ```
 
 Next define the HTML object that will contain the control, in the following example it shows a ***div***, whose dimensions are defined by in line CSS.
-```
+
+```html
 <div id="joyDiv" style="width:200px;height:200px;margin-bottom:20px;"></div>
 ```
 
 At the end of page add the initialization of JoyStick object, the only configuration that must be done is to suggest as a parameter for the name of the object that will contain the JoyStick control, in this case the name of ***div*** defined in the previous step.
-```
+
+```html
 <script type="text/javascript">
 // Create JoyStick object into the DIV 'joyDiv'
 var joy = new JoyStick('joyDiv');
 </script>
 ```
 
-Now you can call one of method, explained before, that return status of Stick, for example in the ***joy.html*** file every 50 millisecond was called the method **GetX()** and showed the value in a textbox:
-```
+Now you can call one of method, explained before, that return status of Stick, for example in the ***[joy.html](http://bobboteck.github.io/joy/joy.html)*** file every 50 millisecond was called the method **GetX()** and showed the value in a textbox:
+
+```javascript
 setInterval(function(){ x.value=joy.GetX(); }, 50);
 ```
 
@@ -53,24 +60,35 @@ You can see an example of result in this picture
 
 But if you want see the JoyStick in action go to this [link](http://bobboteck.github.io/joy/joy.html).
 
-Advanced Options
-----------------
+## Advanced Options
+
 All configuration parameters are optional, must be passed in JSON format, then it is sufficient to indicate only the parameters whose volede give a different configuration from the value of Default.
 
-*	**title {String} (optional)** - The ID of canvas (Default value is 'joystick')
-* 	**width {Int} (optional)** - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object)
-* 	**height {Int} (optional)** - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object)
-* 	**internalFillColor {String} (optional)** - Internal color of Stick (Default value is '#00AA00')
-* 	**internalLineWidth {Int} (optional)** - Border width of Stick (Default value is 2)
-* 	**internalStrokeColor {String}(optional)** - Border color of Stick (Default value is '#003300')
-* 	**externalLineWidth {Int} (optional)** - External reference circonference width (Default value is 2)
-* 	**externalStrokeColor {String} (optional)** - External reference circonference color (Default value is '#008000')
-
-Tips & Tricks
---------------
-The ***title*** parameter, that have as default value 'joystick', is used to set the ID of Canvas elemente that contains the JoyStick, you can use this to define custom CSS style for the canvas. For example in the ***joy.html*** file the CSS style is used to set the border of Canvas with this row of code:
-```
+* **title {String} (optional)** - The ID of canvas (Default value is 'joystick')
+* **width {Int} (optional)** - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object)
+* **height {Int} (optional)** - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object)
+* **internalFillColor {String} (optional)** - Internal color of Stick (Default value is '#00AA00')
+* **internalLineWidth {Int} (optional)** - Border width of Stick (Default value is 2)
+* **internalStrokeColor {String}(optional)** - Border color of Stick (Default value is '#003300')
+* **externalLineWidth {Int} (optional)** - External reference circonference width (Default value is 2)
+* **externalStrokeColor {String} (optional)** - External reference circonference color (Default value is '#008000')
+* **autoReturnToCenter {Bool} (optional)** - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero)
+
+## Tips & Tricks
+
+The ***title*** parameter, that have as default value 'joystick', is used to set the ID of Canvas elemente that contains the JoyStick, you can use this to define custom CSS style for the canvas. For example in the ***[joy.html](http://bobboteck.github.io/joy/joy.html)*** file the CSS style is used to set the border of Canvas with this row of code:
+
+```css
 #joystick {
-	border: 1px solid #9C9898;
+ border: 1px solid #9C9898;
 }
 ```
+
+## Share your experience
+
+If you have integrated **JoyStick** into your project, and you want to share your user experience, I will be happy to create a "Use cases" page to put in the project Wiki.
+If you want, send me an email with some information about the project.
+
+## Contribute
+
+To report BUG or request new Features, you can use GitHub's [ISSUE](https://github.com/bobboteck/JoyStick/issues) system related to this project.

joy.js

@@ -1,11 +1,12 @@
 /*
  * Name          : joy.js
  * @author       : Roberto D'Amico (Bobboteck)
- * Last modified : 18.11.2019
- * Revision      : 1.1.3
+ * Last modified : 07.01.2020
+ * Revision      : 1.1.4
  *
  * Modification History:
  * Date         Version     Modified By		Description
+ * 2020-01-07	1.1.4		Roberto D'Amico Close #6 by implementing a new parameter to set the functionality of auto-return to 0 position
  * 2019-11-18	1.1.3		Roberto D'Amico	Close #5 correct indication of East direction
  * 2019-11-12   1.1.2       Roberto D'Amico Removed Fix #4 incorrectly introduced and restored operation with touch devices
  * 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
@@ -46,6 +47,7 @@
  * 	internalStrokeColor {String}(optional) - Border color of Stick (Default value is '#003300')
  * 	externalLineWidth {Int} (optional) - External reference circonference width (Default value is 2)
  * 	externalStrokeColor {String} (optional) - External reference circonference color (Default value is '#008000')
+ * 	autoReturnToCenter {Bool} (optional) - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero)
  */
 var JoyStick = (function(container, parameters) {
 	parameters = parameters || {};
@@ -56,7 +58,8 @@ var JoyStick = (function(container, parameters) {
 		internalLineWidth = (undefined === parameters.internalLineWidth ? 2 : parameters.internalLineWidth),
 		internalStrokeColor = (undefined === parameters.internalStrokeColor ? '#003300' : parameters.internalStrokeColor),
 		externalLineWidth = (undefined === parameters.externalLineWidth ? 2 : parameters.externalLineWidth),
-		externalStrokeColor = (undefined === parameters.externalStrokeColor ? '#008000' : parameters.externalStrokeColor);
+		externalStrokeColor = (undefined === parameters.externalStrokeColor ? '#008000' : parameters.externalStrokeColor),
+		autoReturnToCenter = (undefined === parameters.autoReturnToCenter ? true : parameters.autoReturnToCenter);
 
 	// Create Canvas element and add it in the Container object
 	var objContainer = document.getElementById(container);
@@ -166,9 +169,12 @@ var JoyStick = (function(container, parameters) {
 	function onTouchEnd(event) 
 	{
 		pressed=0;
-		// Reset position store variable
-		movedX=centerX;
-		movedY=centerY;
+		// If required reset position store variable
+		if(autoReturnToCenter)
+		{
+			movedX=centerX;
+			movedY=centerY;
+		}
 		// Delete canvas
 		context.clearRect(0, 0, canvas.width, canvas.height);
 		// Redraw object
@@ -202,9 +208,12 @@ var JoyStick = (function(container, parameters) {
 	function onMouseUp(event) 
 	{
 		pressed=0;
-		// Reset position store variable
-		movedX=centerX;
-		movedY=centerY;
+		// If required reset position store variable
+		if(autoReturnToCenter)
+		{
+			movedX=centerX;
+			movedY=centerY;
+		}
 		// Delete canvas
 		context.clearRect(0, 0, canvas.width, canvas.height);
 		// Redraw object