Send data from joystick script

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

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

Here is a code:

<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>

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.

1 Like

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

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