Sending msg.payload after Countdown

Dashboard
1

Hi, I am not good at Angular JS.
I am trying to send an msg.payload after an countdown, see the code below.

 <script>  
    var myTimer;
    function clock() 
    {
       var myTimer = setInterval(myClock, 1000);
        var c = 20;

        function myClock() 
        {
            document.getElementById("demo").innerHTML = --c;

            if (c == 0) 
            {
                
                    (function(scope)
                    {
                        scope.send({payload: "something"});
                    })
                
                (scope); 
              

            }
        }
    }

</script>

<p id="demo" align="center">{{msg}}</p>
<br><br>
<button onclick="clock();">>Start counter</button>


[{"id":"1af6dff0.69f998","type":"debug","z":"eb0da159.829678","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":910,"y":60,"wires":[]},{"id":"c659cd6c.0564c","type":"ui_template","z":"eb0da159.829678","group":"d8ee9c1c.4e4748","name":"","order":3,"width":"12","height":"8","format":" <script>  \n    var myTimer;\n    function clock() \n    {\n       var myTimer = setInterval(myClock, 1000);\n        var c = 20;\n\n        function myClock() \n        {\n            document.getElementById(\"demo\").innerHTML = --c;\n\n            if (c == 0) \n            {\n                \n                    (function(scope)\n                    {\n                        scope.send({payload: \"something\"});\n                    })\n                \n                (scope); \n              \n\n            }\n        }\n    }\n\n</script>\n\n<p id=\"demo\" align=\"center\">{{msg}}</p>\n<br><br>\n<button onclick=\"clock();\">>Start counter</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":120,"y":60,"wires":[["9d6cd887.ff10a8","1af6dff0.69f998"]]},{"id":"d8ee9c1c.4e4748","type":"ui_group","z":"","name":"FRAMATECH Fight Light","tab":"421e8764.5d6f7","order":1,"disp":true,"width":"12","collapse":false},{"id":"421e8764.5d6f7","type":"ui_tab","z":"","name":"FRAMATECH Fight Light","icon":"dashboard","disabled":false,"hidden":false}]

But it doesnt work because "19:17:36.597 Uncaught ReferenceError: scope is not defined
myClock line 20 > scriptElement:20
ui:20:1
"

Could you help me please?

Thx :slight_smile:

2

Have you tried using a javascript console in your browser to see what might be happening?

3

From the message scope is not defined we both know its obvious whats wrong but should we point out the elephant in the room?

This will only work if a browser is open (i.e. this will be client side) - do we think the OP wants this to run when the browser is closed (server/no-red side)? :thinking:

4

Hi Steve, yes it only should run if the Browser is open.

@zenofmud I saw the error in the javascript console :wink:
The error is because of the line with "(scope);"

5

Look at the examples in the built in help on the sidebar. If I remember right, you need to access scope via this (however since you will be inside a timer callback, you will likely need to bind this or store this in that before you setup the timer & access that.scope)

6

Hi @Steve-Mcl,

I dont get it. I dont know where to set this and that. Could you help me pls?

7

Off the top of my head (untested)...

<script>  
    var that = this; //save a ref to this in that
    var c = 20;
    var myTimer = setInterval(myClock, 1000);

    function myClock() {
        document.getElementById("demo").innerHTML = --c;
        if (c <= 0) {
            that.scope.send({payload: "something"}); // this is not that :) (this is the timers instance, that is original scope)
            clearInterval(myTimer);
        }
    }

</script>
8

thx, but same Issue again :"Uncaught TypeError: that.scope is undefined"

9

You havent posted enough of the ui_template for me to see where you have integrated it

10

oh sry


 <script>
 
 var that = this; //save a ref to this in that
 var myTimer;
function Clock()
{
    var myTimer = setInterval(myClock, 1000);
    var c = 20;
    function myClock() {
        
        document.getElementById("demo").innerHTML = --c;
        if (c <= 0) {
            that.scope.send({payload: "something"}); // this is not that :) (this is the timers instance, that is original scope)
            clearInterval(myTimer);
        }
    }
}
</script>

<p id="demo" align="center">20</p>
<br><br>
<button onclick="Clock();">>Start counter</button>
11

Try this...

image

image

<script>  
(function(scope) {
    
    window.$scope = scope; //save a ref in window/global
    
    //create startClock function
    $scope.startClock = function() {
        $scope.countDown = 20;
        if($scope.myTimer) clearInterval($scope.myTimer);
        $scope.myTimer = setInterval($scope.clockTick, 1000);
    }
    
    //create clockTick function
    $scope.clockTick = function() {
        document.getElementById("demo").innerHTML = --$scope.countDown;
        if ($scope.countDown <= 0) {
            clearInterval($scope.myTimer);
            $scope.myTimer = null;
            $scope.send({payload: "something"}); 
        }
    }    
})(scope);
</script>


<p id="demo" align="center">-</p>
<br><br>
<button onclick="$scope.startClock();">>Start counter</button>
12

Thx it works great, and know I try to understand this script xD

13

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.