# Send data from joystick script

**URL:** <https://discourse.nodered.org/t/send-data-from-joystick-script/11281>\
**Category:** Dashboard\
**Created:** [18 May 2019 20:52 UTC](https://discourse.nodered.org/t/send-data-from-joystick-script/11281 "2019-05-18T20:52:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kwach](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@kwach](https://discourse.nodered.org/u/kwach)\
**Post date:** [18 May 2019 20:52 UTC](https://discourse.nodered.org/t/send-data-from-joystick-script/11281/1 "2019-05-18T20:52:50Z")

</div>

HI. I'm using in UI template node and code form github:

> <https://github.com/slobdell/joystick/blob/master/index.html>

How can I send data form x and y value to payload

Here is a code:

```auto
<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/underscore-min.js"></script>
        <script type="text/javascript" src="js/backbone-min.js"></script>
        <script type="text/javascript" src="js/joystick_view.js"></script>
    </head>
    <body>

    <script type="text/html" id="joystick-view">
    <canvas id="joystickCanvas" width="<%= squareSize %>" height="<%= squareSize %>" style="width: <%= squareSize %>px; height: <%= squareSize %>px;">
        </canvas>
    </script>

    <div id="joystickContent">
    </div>
    <div>
        x: <span id="xVal"></span><br/>
        y: <span id="yVal"></span><br/>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            var joystickView = new JoystickView(150, function(callbackView){
                $("#joystickContent").append(callbackView.render().el);
                setTimeout(function(){
                    callbackView.renderSprite();
                }, 0);
            });
            joystickView.bind("verticalMove", function(y){
                $("#yVal").html(y);
            });
            joystickView.bind("horizontalMove", function(x){
                $("#xVal").html(x);
            });
        });
    </script>
    </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [19 May 2019 05:27 UTC](https://discourse.nodered.org/t/send-data-from-joystick-script/11281/2 "2019-05-19T05:27:37Z")

</div>

Here's something similar you could probably 'adjust/hack' to meet your needs.  
Some jQuery and Ajax to send values of 'soft buttons' to Node-RED to control something.

> [@'Soft' buttons on a web page to control something via Node-RED](https://discourse.nodered.org/t/soft-buttons-on-a-web-page-to-control-something-via-node-red/6289):
>
> I bought myself a book on jQuery and Ajax for Christmas. Here's a write-up on my first attempt at writing some jQuery that interfaces to Node-RED. The index.txt file must be renamed as index.html (as Discourse does not allow this type of file to be uploaded). It's a simple piece of html that links in jquery and sketch.js. The eight 'soft' buttons have unique 'id's. e.g. "turnREDon", "turnREDoff", etc... The index.html and sketch.js files can reside on any webpage on your local network. Th…

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 May 2019 07:44 UTC](https://discourse.nodered.org/t/send-data-from-joystick-script/11281/3 "2019-05-19T07:44:55Z")

</div>

Do you mean you want to know how to send a message to node-red from a ui template node? If so then this may help.  
[https://flows.nodered.org/flow/a3485bb4b8065c782e210cced7f21f45](https://flows.nodered.org/flow/a3485bb4b8065c782e210cced7f21f45)

---

<div class="post-metadata">

**Author:** ![kwach](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@kwach](https://discourse.nodered.org/u/kwach)\
**Post date:** [24 May 2019 11:21 UTC](https://discourse.nodered.org/t/send-data-from-joystick-script/11281/4 "2019-05-24T11:21:06Z")

</div>

Thanks. But how can i add this to my example ?
