CODEWITHSUNDEEP
javascripthtmlnode-red
Eduardo
Eduardo

Reputation: 173

Node-Red: how can I send a message from a Javascript function inside an HTML template?

I am trying to send a message after the update of a round slider in an template node written in HTML. This is the code:

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

<script type="text/javascript">
    $("#slider").roundSlider({
    radius: 100,
    width: 14,
    value: 20,
    handleSize: 35,
    startAngle: "315",
    endAngle: "+270",
    //start: "traceEvent",
    //stop: "traceEvent",
    create: "traceEvent",
    drag: "traceEvent"
    });

    function traceEvent(e) {
        var vol = (e.value);
        document.getElementById('volume').value = vol;
        return vol;
    }
    </script>
<style>
    #slider {
     border-radius: 1000px;
     box-shadow: 0px 0px 10px 0px rgb(123, 123, 123);
    }
    .rs-border {
     border-width: 0px;
    }
</style>

Basically I was expecting that a message should be triggered by the command return vol in the function traceEvent, but this is not working.

Any ideas please?

Upvotes: 1

Views: 4246

Answers (2)

SteveR
SteveR

Reputation: 1121

If you read about half-way down the ui_template node's info (in the sidebar), you'll find this example:

Sending a message:

<script>
    var value = "hello world";
    // or overwrite value in your callback function ...
    this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
    Click me to send a hello world
</md-button>

Will display a button that when clicked will send a message with the payload 'Hello world'.

In my experience, it can be even simpler than that -- depending upon what data you are trying to send back to your node-red flow. The angular scope already contains a send(msg) function, so you can trigger that directly from any angular event (in this example, on the ng-click event of the button) -- using the plain html onclick event would not have the same access to the angular scope.

In your example, the inclusion of the <html> element is not necessary, since you are only building a portion of the existing dashboard page. If you define your traceEvent(e) function inside the angular scope, it should be available to be called from the slider library (something like this, untested):

<script>
(function($scope) {
    function traceEvent(e) {
        var vol = (e.value);
        var msg = { "volume": vol };
        $scope.send(msg);
    }
})(scope);
</script>

Assuming that the slider "drag" event will call traceEvent with an event object containing a value property, you should get a msg sent through the output port of your ui_template node, every time the slider changes position.

Incidentally, you should also move your external library links to a separate ui_template node, with its Template Type set to "Added to site <head> section" -- this helps to ensure that your external libs are loaded before you try to render them on the dashboard page.

Upvotes: 1

hardillb
hardillb

Reputation: 59648

Assuming this is the template node (core node) and not the template-ui node (part of the Dashboard-ui set of nodes) you can not natively trigger flows with a javascript function.

The traceEvent() function runs entirely within the page you've created in the template node on the remote browser, it knows nothing about Node-RED, it just happened to have been loaded from there.

If you want to trigger an action the simplest way to do it is to have another http-in/http-response node pair and to make a ajax style http request from within your traceEvent() function.

If on the other hand you are using the template-ui node as part of the node-red-dashboard then you need to look at using angular to build a component, not a full html page.

Upvotes: 0

Related Questions