UI-Template img tag not getting message in one flow, but works in another

Dashboard
1

flow
flow1628×448 62.2 KB

As you can see from this flow image, the preview node is displaying the base64 image. So, the data in the payload is good.

Here is the ui-template:

<script>
  (function($scope) {
        $scope.$watch('msg.payload', function (payload) {
            if (payload != undefined) {
                var camimg = document.getElementById("mycam");
                camimg.setAttribute("src", "data:image/jpg;base64,"+payload);
            }
        });
    })(scope);
</script>

<img id="mycam" class="center2" alt="No Stream" style="position: absolute; top: 0px; left: 0px" src="/black.jpg" draggable="false">

The thing is ... this code works fine in a different flow. It is only this flow where it is not working.

It looks like the msg is never arriving to the UI-Template with the payload.

I hacked around by displaying the black.jpg, and loading the data in the script.
When I put the data directly in the 'src' attribute, and look in the browser debugger, the 'src' is not even there.

Anyone ever see this before where one flow works but the other does not?

2

What is "this flow"? We cannot see your setup & you haven't provided an export of your flows.


I suspect you have duplicated the entire ui-template code and therefor have 2 templates with the same id set.

If you want to re-use the ui-template code, you need to differentiate things (id, position etc).

e.g...

ui-template 1

<script>
  (function($scope) {
        $scope.$watch('msg', function (msg) {
            if (msg.payload && msg.topic == "mycam") {
                var camimg = document.getElementById("mycam");
                camimg.setAttribute("src", "data:image/jpg;base64,"+payload);
            }
        });
    })(scope);
</script>

<img id="mycam" class="center2" alt="No Stream" style="position: absolute; top: 0px; left: 0px" src="/black.jpg" draggable="false">

ui-template 2

<script>
  (function($scope) {
        $scope.$watch('msg', function (msg) {
            if (msg.payload && msg.topic == "mycam2") {
                var camimg = document.getElementById("mycam2");
                camimg.setAttribute("src", "data:image/jpg;base64,"+payload);
            }
        });
    })(scope);
</script>

<img id="mycam2" class="center2" alt="No Stream" style="position: absolute; top: 20px; left: 20px" src="/black.jpg" draggable="false">
3

I duplicated some of the code, but the id's are unique.

These are part of much larger flows, so it is difficult to include the actual flows.

Here is the other flow that works

<script>
(function($scope) {
    $scope.$watch('msg.payload', function (payload) {
        if (payload != undefined) {
            var camimg = document.getElementById("thecam");
            camimg.setAttribute("src", "data:image/jpg;base64,"+payload);
        }
    
        $("p.nr-dashboard-cardtitle").each(function(){
            if (($(this).text().trim() == 'Cam') || (p.id  == 12321992123)){
                p = $(this);
                p.text($scope.msg.cam);
                p.id = 12321992123;
            }
        });
    });
})(scope);
</script>

<img id="thecam" class="center2" alt="No Stream" style="position: absolute; top: 0px; left: 0px" src="/black.jpg" draggable="false">
<md-button class="button send Neumorphism-box Neumorphism-shadow" style=" bottom: 0; position: absolute; margin-bottom: 36px; background-color: #0974796f" ng-click="send({topic:'clicked', payload:'back'})">BACK</md-button>
4

Sorry, I dont have enough information to help further.

I cant see you "other flow", I dont know if you are sending an image (or empty string or whatever), I cant see the relationships or do any testing.

If you want further help, try making a minimal flow that exhibits this problem & post it in a reply.

5

Sooo ... I created a test flow with the exact code I posted, and it worked.

The problem must be something to do with the larger flow. Problem is, I have dependencies on pentair hardware, relays, sensors. All of which will fail if I post the complete flow.

I guess I disable everything and start re-enabling nodes until it breaks to find the offender

6

Use debug nodes to check the messages being passed, working back up the flow till you find where it is failing.

7

Yep, in that case i was opening the dashboard in two different computers. The perceived problem was msg never arriving the ui template in one computer but was all right for the other one. I've spent three or four days trying to understand what was going on. Finally I posted the issue in the forum and @BartButenaers and @dceejay nailed the problem down to the lack of socketid. I can´t say this is the issue you are facing but if you may want to investigate further here is the link to the solution that took me out of the darkness.

8

So, I sort of found the problem and solution.

The problem was related to some sort of race condition. This part is vague. But, if I started the stream (multi-part-decoder) when the flow started ... always works. If I wait to start the stream until a UI Control msg, it would not start.

Once I started the stream and stopped it, I could not restart it.

The solution was to start the stream immediately, and then use the UI Control to pause/resume the stream to handle the tab going in and out of focus.

This might be a bandaid to a bigger issue, but it is working as desired now.

9

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