Using template node with if else condition

Dashboard
, ,
1

Hi All,

I am developing a dashboard, but I want to hide the image in dashboard that is why I need to come up with this program that can hide the image using template node. Shown below is my code inside template node.

But this code wont work! Please help to check my errors please!


<div id="parntCntr" class="AMS1Cntr">
    <a id="imgCNC1" href="#">
        <img src="data:image/png;base64,{{msg.payload.image1}}" class="ams1Image" style="width="400" height="145"">
    </a>
    <div id="overlay" class="AMS1Ovly">
        <img src="data:image/png;base64,{{msg.payload.image2}}" style="width="50" height="50"">
        <p id="test">Warning</p>
    </div>
</div>

<style>
    .AMS1Cntr {
        position: relative;
    }

    .AMS1Ovly {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

    .AMS1Hide {
        display: none;
    }

    img.ams1Image {
        display: block;
        margin: auto;
        padding: auto;
        width: 100%;
        border-radius: 10px;
    }

    img.ams1Image:hover {
        opacity: 0.3;
    }

</style>

<script>
    
    
    var alarmPL = {{msg.payload.alarmOn}};
    var divElement = document.getElementById("overlay");

    if (alarmPL==true){
        divElement.className="AMS1Hide";
    }

</script>
2

Hi. Welcome to the forum.

Is this a ui-template or template node?

Is this the old dashboard-1 (node-red-dashboard) or the newer dashboard-2 (@FlowFuse/node-red-dashboard)?

Can you show us the message that goes into the node?

3

Hi Steve,

This is the ui-template node sir.

message is the image sir converted to Base 64

4

And which dashboard?

And...

5

Hi Steve,

Got it working already, in using script. I need to use scope.$watch in order to read the following msg from the payload. Hope later someone will learn from this :slight_smile:

(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg.payload.alarmOn=="alarmActive") {
            $("#parntCntr1 > div").css("display", "block");
        }
        else {
            $("#parntCntr1 > div").css("display", "none");
        }
    });
    })(scope);

Best Regards,
Kenneth

1 Like
6

Hi Kenneth. Glad to hear you got a solution. Always good as a learning experience.

For the benefit of future readers, this is original Dashboard-1 which uses the now unsupported angularjs (not the new Dashboard-2 which is Vue based)

The solution above is certainly one approach however there is a much simpler way. In the built in help of the template node, it mentions you can set the class dynamically via msg.className. So, instead, one could have prepared a CSS class that hides the image and simply updated the template via the msg (no angularjs scooped script required)

Here is a post I did some time ago that has more detail: Dashboard Button Node - </>Class Field not working - #24 by Steve-Mcl

7

Hi Steve,

If my dashboard version is old then will the approach to the dashboard-2 be different?
Can you help me to translate it to vue based then?

Best regards,
Kenneth

8

Slightly, yes. That is why I asked two times which dashboard you were using.

Sorry Kenneth no, this is not something I would have time to do but I can of course point you in the right direction :point_right: Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0

1 Like
9

Hi Steve,

My dashboard version is 3, is it correct. Where can I find the dashboard version?

Best regards,
Kenneth

10

You can look in Manage Palette, or the node red startup log.

11

Hi @Colin and @Steve-Mcl ,

Thanks for your help. I have another question.
Do you know how to output msg in template node , the output will based from script.

Thanks,
Kenneth

12

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