Determine if browser is minimized and halt udp node until browser is active

[Mick]

I have a flow where I ingest data from the udp node. If the browser is minimized that data gets buffered until the browser is opened and then a flood of data streams to the browser. I would like to determine if the browser is minimized and write a function to halt the flow until the browser is opened. Any data that came in while the browser is minimized should be ignored. I found this java function

window.onfocus = function () { 
  isTabActive = true; 
}; 

window.onblur = function () { 
  isTabActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isTabActive ? 'active' : 'inactive'); 
}, 1000);

and just tried it to if I could see the active / inactive in the console log. I got an error
function : (error)

"ReferenceError: window is not defined (line 3, col 1)"

which correlates to the windows.onfocus function. Has anyone done anything like this.?

Regards

[Mick]

So doing some online research on this. I think the issue is that I am trying to use this code on the server side, not the browser. Assuming I can get it to run on the browser side then I am thinking I still need to pass a message to a function to halt the udp messages..

[Colin]

What if you have two browsers open at the same time, on different machines?

[Mick]

That's a good question. I thought about that. It comes down to what is more of a problem, being bombarded by old streamed data when you bring up the minimized browser or run only one instance. In this case I don't see any way around running one instance for this to work. I was able to stop the error I posted above, but the functions seems to not do anything.

Any suggestions appreciated.

Regards,

[Colin]

@Mick

I have a flow where I ingest data from the udp node. If the browser is minimized that data gets buffered until the browser is opened and then a flood of data streams to the browser.

I don't understand what you mean by that. What has a flow ingesting data from a udp node got to do with anything going on in the browser? What is the data that is flooding the browser?

[Mick]

Here is part of the flow.... What we are doing is processing udp messages from another program. We take the data, classify it, count sequences, prepare messages that we pass to the browser.

In the picture below,, there is no data but this shows where the output is..

The issue is that udp messages are streaming in from the program via the udp node and are being decoded. If the ui browser is minimized the messages get buffered until the browser is opened and the a flood of old messages get displayed on the ui.

What I am hoping to do is determine if the browser is minimzed, halt the message processing and when the browser is opened again, restart the processing. Old messages would be abandoned / discarded...

I was thinking if I had a function that could detect the browser state (active / inactive) then I could filter out those messages while the browser is inactive...

[marcus-j-davies]

Ok, I am not that experienced with dashboard - so this is just a guess
But I think you can do this using the dashboard template node (placed in the head element)

within a script tag:

document.addEventListener("visibilitychange", function() {
    if (document.visibilityState === 'visible'){
        scope.send({payload:{browserActive:true}});
    }
    else{
        scope.send({payload:{browserActive:false}});
    }
}

You can then consume this payload to bypass (or enable) sending updates to the dashboard based on browserActive

Disclaimer: this may not be correct.

[Mick]

Thanks,

I will give that a shot...

[marcus-j-davies]

If this is the correct route - you can probably improve it, by subscribing to...

window.addEventListener('blur', ...);  // lost focus
window.addEventListener('focus', ...); // focused

[Mick]

So I have the code in , however I am not seeing any payload messages.

<script id="isOpen" type="text/javascript">>
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible'){
scope.send({payload:{browserActive:true}});
    }
else{
scope.send({payload:{browserActive:false}});
    }
}
</script>

I have the template node wired as such..

Minimize / Maximize has no effect. I tried using an inject node on it but all I get is the timestamp passing through..

I am not sure where I should be picking up the msg.payload. I assumed from the template node.

[marcus-j-davies]

Try this in a template node - in the head section.

<script type="text/javascript">
     window.addEventListener('blur', () => {scope.send({payload:{browserActive:false}})});  // lost focus
     window.addEventListener('focus', () => {scope.send({payload:{browserActive:true}})});  // focused
</script>

Check browser console/logs - to see if something is going wrong.

[Mick]

I found this example and will pick it up tomorrow.

[{"id":"a3ad21bb.8e08a8","type":"ui_template","z":"ef05418d.df1618","group":"ada4e0c8.ca2d58","name":"","order":0,"width":0,"height":0,"format":"<h3>Testing template</h3>\n<p>{{msg.payload}}</p>\n<script>\n(function() {\n    var count = 0\n    function testit(msg,scope) {\n        count = count+1;\n        console.log(\"In testit \" + msg.payload + \"  count = \" + count);\n        scope.send({payload: \"from testit \" + msg.payload + \"  count = \" + count});\n    }\n    \n    (function(scope) {\n        scope.send({payload: \"preload\"});   // this gets sent when the view is opened in the browser\n        scope.$watch('msg', function(msg) {\n            if (msg) {\n                testit(msg, scope);\n            }\n        });\n    })(scope);\n})();\n</script>","storeOutMessages":false,"fwdInMessages":false,"x":353.5,"y":145,"wires":[["89d9b60a.9b44e8"]]},{"id":"9d387518.22ba48","type":"inject","z":"ef05418d.df1618","name":"","topic":"","payload":"One","payloadType":"str","repeat":"","crontab":"","once":false,"x":136.5,"y":145,"wires":[["a3ad21bb.8e08a8"]]},{"id":"88c9b5ce.ba0f08","type":"ui_template","z":"ef05418d.df1618","group":"ada4e0c8.ca2d58","name":"","order":0,"width":0,"height":0,"format":"<h3>Testing template</h3>\n<p>{{msg.payload}}</p>\n<script>\n(function() {\n    var count = 0\n    function testit(msg,scope) {\n        count = count+1;\n        console.log(\"In testit \" + msg.payload + \"  count = \" + count);\n        scope.send({payload: \"from testit \" + msg.payload + \"  count = \" + count});\n    }\n    \n    (function(scope) {\n        scope.send({payload: \"preload\"});   // this gets sent when the view is opened in the browser\n        scope.$watch('msg', function(msg) {\n            if (msg) {\n                testit(msg, scope);\n            }\n        });\n    })(scope);\n})();\n</script>","storeOutMessages":false,"fwdInMessages":false,"x":354,"y":257,"wires":[["aece47ab.d4951"]]},{"id":"3f711b15.d883c4","type":"inject","z":"ef05418d.df1618","name":"","topic":"","payload":"Two","payloadType":"str","repeat":"","crontab":"","once":false,"x":135,"y":258,"wires":[["88c9b5ce.ba0f08"]]},{"id":"89d9b60a.9b44e8","type":"debug","z":"ef05418d.df1618","name":"","active":true,"console":"false","complete":"false","x":562.5,"y":145,"wires":[]},{"id":"aece47ab.d4951","type":"debug","z":"ef05418d.df1618","name":"","active":true,"console":"false","complete":"false","x":566.5,"y":257,"wires":[]},{"id":"ada4e0c8.ca2d58","type":"ui_group","z":"ef05418d.df1618","name":"Default","tab":"e4c8df5a.bc9048","disp":true,"width":"6"},{"id":"e4c8df5a.bc9048","type":"ui_tab","z":"ef05418d.df1618","name":"tab2","icon":"dashboard"}]

[marcus-j-davies]

I did try that example - but couldn't get it to work. - I don't use dashboard (I installed it tonight, to test).
So I might be missing something obvious - sorry.

plenty of more qualified folk here.

[Mick]

I got it working...Still need to do more tests to ensure it's stable but so far seems to work... Your code was close... Here is what I ended up with..

<script>
(function(scope) {
window.addEventListener('blur', function() {scope.send({payload: {browserActive: false}})}); // lost focus
window.addEventListener('focus', function() {scope.send({payload: {browserActive: true}})}); //  focus
})(scope);
</script>

I found a website to let me test the java script on line. jsfiddle

It passes the msg to my debug node.

Also I did not need to put it in the header. See node below:

[
    {
        "id": "b7dadc2d6f61e656",
        "type": "ui_template",
        "z": "601d137130d1ff68",
        "group": "e357ef02.ef3cb",
        "name": "",
        "order": 12,
        "width": 0,
        "height": 0,
        "format": "<script>\n(function(scope) {\nwindow.addEventListener('blur', function() {scope.send({payload: {browserActive: false}})}); // lost focus\nwindow.addEventListener('focus', function() {scope.send({payload: {browserActive: true}})}); //  focus\n})(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 740,
        "y": 240,
        "wires": [
            [
                "e4a3002f8bd80434"
            ]
        ]
    },
    {
        "id": "e357ef02.ef3cb",
        "type": "ui_group",
        "name": "Flex - Control",
        "tab": "4bc17c6e.b74934",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "4bc17c6e.b74934",
        "type": "ui_tab",
        "name": "W8BE",
        "icon": "dashboard",
        "order": 5,
        "disabled": false,
        "hidden": false
    }
]

Thank you for your help
Regards