Angular Scope Watch - Setting Dynamic icon color variable

Dashboard
1

I am working on the dashboard 1 to help a friend. I have a button that I have created and I am trying to dynamically set the icon color based on the payload input value (0 or 1).

I also set the ngClick value and icon color and that is working but the dynamic change on msg.payload is not.

<script>
    (function(scope) {
        scope.newRelayValue = function() {
            if (scope.msg.payload === 0) {
                scope.iconColor = 'icon-on'
                scope.send({ payload:"/0001:RY1,1:XX\r\n" });
            } else {
                scope.iconColor = 'icon-off'
                scope.send({ payload:"/0001:RY1,0:XX\r\n" });
            }
        },
        scope.$watch('msg', function(newMsg) {
            if (newMsg) {
                scope.newRelayValue(msg.payload)                 
            }; 
        });
    })(scope);
        (function(scope) {
        scope.iconColor = function() {
            if (scope.msg.payload === 0) {
                scope.iconColor = 'icon-on'
            } else {
                scope.iconColor = 'icon-off'
            }
        },
        scope.$watch('msg', function(Msg) {
            if (Msg) {
                scope.iconColor(msg.payload)                 
            }; 
        });
    })(scope);

   

</script>

<md-button class="filled rounded smallfont" style="background-color: #6F6F6F; color:#333; justify-content: center"  title="Click to select"
     ng-click="newRelayValue()">
   <span class="material-symbols-outlined container {{iconColor}}">electric_bolt</span>
    Relay 1
</md-button>

In the above code I created a new msg watch scope and still no joy. Thanks for your help.

2

Is there a reason to use a template node to define the button, apart from the urge to write all that javascript?

If you use a button node you can style it quite easily with CSS, and dynamically change it by sending msg.class.

3

Thanks for your reply. Yes there is a reason. The buttons take up to much real estate and I have been using ui templates for a couple of years now. In the past I used a function node to set the variable but I wanted to get away from that and try the Angular watch method. Like I stated the button will change color on ngClick but it will not dynamically change. I assumed this is an easy fix I am just over looking what the answer is.

Regards

5

Sounds reasonable.

I have no doubt it's possible but I have not used a template in that way.

6

I figured it out. I had to back to some old code and I used jQuery. Here is the code.

<script>
    (function(scope) {
        scope.newRelayValue = function() {
            if (scope.msg.payload === 0) {
                scope.send({ payload:"/0001:RY1,1:XX\r\n" });
            } else {
                scope.send({ payload:"/0001:RY1,0:XX\r\n" });
            }
        },
        scope.$watch('msg', function(newMsg) {
            if (newMsg) {
                scope.newRelayValue(msg.payload)                 
            }; 
        });
    })(scope);
    
(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg) {
            var iconElement = $("#relayIcon");
            if (msg.payload === 0) {
                iconElement.css("color", '#FF0000');
            } else {
                iconElement.css("color", '#38C423');
            }
        }
    });
})(scope);
   

</script>

<md-button class="filled rounded smallfont" style="background-color: #6F6F6F; color:#333; justify-content: center"  title="Click to select"
     ng-click="newRelayValue()">
   <span id="relayIcon" class="material-symbols-outlined container ">electric_bolt</span>
    Relay 1
</md-button>
7

@jbudd

One last tweak... I wanted to also change the icon color based on ngClick as well. Here is the solution.

<script>
    (function(scope) {
        scope.newRelayValue = function() {
            var iconElement = $("#relayIcon");
            if (scope.msg.payload === 0) {
                scope.send({ payload:"/0001:RY1,1:XX\r\n" });
                iconElement.css("color", '#38C423');
            } else {
                scope.send({ payload:"/0001:RY1,0:XX\r\n" });
                iconElement.css("color", '#FF0000');
            }
        },
        scope.$watch('msg', function(newMsg) {
            if (newMsg) {
                scope.newRelayValue(msg.payload)                 
            }; 
        });
    })(scope);
    
(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg) {
            var iconElement = $("#relayIcon");
            if (msg.payload === 0) {
                iconElement.css("color", '#FF0000');
            } else {
                iconElement.css("color", '#38C423');
            }
        }
    });
})(scope);
   

</script>

<md-button class="filled rounded smallfont" style="background-color: #6F6F6F; color:#333; justify-content: center"
    title="Click to select" ng-click="newRelayValue()">
    <span id="relayIcon" class="material-symbols-outlined container ">electric_bolt</span>
    Relay 1
</md-button>