X or Y single axis movement options with optional direction arrows

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -9,7 +9,7 @@
 
 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.
+The JoyStick can be used either on touch devices, or on devices that use a mouse, touchpad or similar pointing systems.
 Developed for Web Remote Control of Robot, the JoyStick can be used for all other scope.
 
 > **Note:** the code not use JQuery, or other framework, but only pure Vanilla JavaScript.
@@ -90,24 +90,30 @@ But if you want see the JoyStick in action go to this [link](http://bobboteck.gi
 All configuration parameters are optional, must be passed in JSON format, therefore it is sufficient to indicate only the parameters for which you want to provide a configuration other than the Default value.
 
 * **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)
+* **width {Int} (optional)** - The width of canvas, if not specified is set to width of container object (Default value is the width of container object)
+* **height {Int} (optional)** - The height of canvas, if not specified is set to width 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')
+* **internalDrawArrows  {Bool}   (optional)** - Draws X and Y arrows on the centre of the Stick (if axisOnlyX=true only X arrow is draw, if axisOnlyY=true only Y is arrow draw)
+* **externalLineWidth {Int} (optional)** - External reference circumference width (Default value is 2)
+* **externalStrokeColor {String} (optional)** - External reference circumference 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)
+*  **axisOnlyX {Bool} (optional)** - Stick only moves in the X direction, y is set to 0 (ignored if both axisOnlyX and axisOnlyY are set to true)
+* **axisOnlyY {Bool} (optional)** - Stick only moves in the Y direction, x is set to 0 (ignored if both axisOnlyX and axisOnlyY are set to true)
 
 ## 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:
+The ***title*** parameter, that have as default value 'joystick', is used to set the ID of Canvas element 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;
 }
 ```
+The ***axisOnlyX*** and ***axisOnlyY*** parameters can be used to make the stick only move in the X or Y directions.  If using either of these, it is also useful to use the ***internalDrawArrows*** parameter as this will draw an arrow on the stick showing the direction of the allowed (X or Y) movement.  See example ***[joy-axis.html](https://kenloveday.github.io/JoyStick/joy-axis.html)***.
+
+[<img width="780" height="167" alt="joystick-axis" src="https://github.com/user-attachments/assets/91f95516-ed13-4e1a-95b2-1cd71ee8ddb4" />](https://kenloveday.github.io/JoyStick/joy-axis.html)
 
 ## Share your experience
 

joy-axis.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <title>JoyStick Axis</title>
+   <script src="joy.js"></script>
+
+   <style>
+      .parent {
+         display: grid;
+         grid-template-columns: repeat(2, 1fr);
+         grid-template-rows: 0fr repeat(2, 1fr);
+         grid-column-gap: 0px;
+         grid-row-gap: 0px;
+      }
+
+      .div1 { grid-area: 2 / 1 / 3 / 2; }
+      .div2 { grid-area: 2 / 2 / 3 / 3; }
+      .div3 { grid-area: 3 / 1 / 4 / 2; }
+      .div4 { grid-area: 3 / 2 / 4 / 3; }
+
+      .joystick-size {
+         width:250px;
+         height:250px;
+      }
+   </style>
+</head>
+
+<body style="font-family:'verdana'">
+   <h3>JoyStick XY Axis Options</h3>
+
+   <div class="parent">
+      <div class="div1">
+         <div>Parameters:<br>{'<b>internalDrawArrows</b>': true, '<b>axisOnlyX</b>': true}</div>
+         <div id="joystick1_XY"></div>
+         <div class="joystick-size" id="joystick1"></div>
+      </div>
+      <div class="div2">
+         <div>Parameters:<br>{'<b>internalDrawArrows</b>': true, '<b>axisOnlyY</b>': true}</div>
+         <div id="joystick2_XY"></div>
+         <div class="joystick-size" id="joystick2"></div>
+      </div>
+      <div class="div3">
+         <div>Parameters:<br>{'<b>internalDrawArrows</b>': true}</div>
+         <div id="joystick3_XY"></div>
+         <div class="joystick-size" id="joystick3"></div>
+      </div>
+      <div class="div4">
+         <div>Parameters:<br>{}</div>
+         <div id="joystick4_XY"></div>
+         <div class="joystick-size" id="joystick4"></div>
+      </div>
+   </div>
+
+   <script>
+      var joystick1_options = {'internalDrawArrows': true, 'axisOnlyX': true}
+      var joystick1 = new JoyStick('joystick1', joystick1_options, joystick1_Func);
+
+      var joystick2_options = {'internalDrawArrows': true, 'axisOnlyY': true}
+      var joystick2 = new JoyStick('joystick2', joystick2_options, joystick2_Func);
+
+      var joystick3_options = {'internalDrawArrows': true}
+      var joystick3 = new JoyStick('joystick3', joystick3_options, joystick3_Func);
+
+      var joystick4_options = {}
+      var joystick4 = new JoyStick('joystick4', joystick4_options, joystick4_Func);
+
+      function joystick1_Func(stickData){
+         var posXY = 'X,Y = ' + stickData.x + ',' + stickData.y;
+         document.getElementById("joystick1_XY").innerHTML = posXY;
+      }
+      function joystick2_Func(stickData){
+         var posXY = 'X,Y = ' + stickData.x + ',' + stickData.y;
+         document.getElementById("joystick2_XY").innerHTML = posXY;
+      }
+      function joystick3_Func(stickData){
+         var posXY = 'X,Y = ' + stickData.x + ',' + stickData.y;
+         document.getElementById("joystick3_XY").innerHTML = posXY;
+      }
+      function joystick4_Func(stickData){
+         var posXY = 'X,Y = ' + stickData.x + ',' + stickData.y;
+         document.getElementById("joystick4_XY").innerHTML = posXY;         
+      }
+
+      joystick1_Func({x:0,y:0});
+      joystick2_Func({x:0,y:0});
+      joystick3_Func({x:0,y:0});
+      joystick4_Func({x:0,y:0});      
+   </script>
+
+</body>
+</html>