Search code examples
jqueryhtmlangularjsnode-red

how to make script recognize scope in template node-red?

i have this code in node-red.i want to add template node to it. i think the script does not know what the scope is.when i log a value by jquery it returns null.and i get this error:can not read property innerhtml of null.and i log the scope and all the id s are null.i do not know how to fix it.it is necessary .please help.

the data i am sending to it is something like this: msg.payload = "{"power":[12,14,13,14],"switch":["ON"]}"

<div class="bg">
<div id="container" class="row">
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage1"><span class="status1">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage2"><span class="status2">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage3"><span class="status3">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage4"><span class="status4">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage5"><span class="status5">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage6"><span class="status6">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>


</div>


<script>
$(document).ready(function (scope) {
    (function (scope) {
        function blinker() {
            $('span').fadeOut(500);
            $('span').fadeIn(500);
        }

        setInterval(blinker, 1000);
        scope.$watch('msg', function (msg) {
            var data = JSON.parse(msg.payload)
            console.log(scope)
            for (var i = 1; i < 7; i++) {
                document.getElementById('#voltage' + i).innerHTML = "Voltage :" + data.power[i]
                if (data.switch[i] == 'ON') {
                    $('.status' + i).css("color", "green");
                    document.getElementsByClassName('.status' + i).innerHTML = 'ON'
                }
            }
        })
    })(scope)
})

Solution

  • The Dashboard already uses Angular widgets, models, and logic to render msg.payload information into the browser's DOM. Instead of trying to also manipulate HTML elements using JQuery, it's much simpler to pass an array of switch data objects into a single container, using ng-repeat to create as many divs as necessary to show all the switches.

    For instance, if you have these 3 sets of data in one msg.payload array:

    [
  {
    "Switch": "ON",
    "Voltage": 117.5,
    "P1": 2.34,
    "P2": 3.45,
    "P3": 1.23,
    "N": 0.12
  },
  {
    "Switch": "OFF",
    "Voltage": 0,
    "P1": 0.02,
    "P2": 0.03,
    "P3": 0.12,
    "N": 0
  },
  {
    "Switch": "ON",
    "Voltage": 125,
    "P1": 0.34,
    "P2": 0.45,
    "P3": 0.23,
    "N": 0.25
  }
]

    you can just pass it directly to a ui_template node, with this Angular code:

    <style>
    span.ON { color: green; }
    span.OFF { color: red; }
</style>

<div class="bg">
<div id="container" class="row">
    <div class="col-md-6" ng-repeat="row in msg.payload">
        <div class="plan col-md-4">
            <h3>
                {{$index+1}}.
                <span ng-class="row.Switch">{{row.Switch}}</span>
                <span ng-if="row.Switch == 'ON'">
                    Voltage : {{row.Voltage}}
                </span>
            </h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1: </b>{{row.P1}}</li>
                <li><b>P2: </b>{{row.P2}}</li>
                <li><b>P3: </b>{{row.P3}}</li>
                <li><b>N: </b>{{row.N}}</li>
            </ul>
        </div>
    </div>
</div>
</div>

    to render this:

    angular template output

    No need to mess with scope.$watch() or create 7 nearly identical sections of html elements that need to be manipulated using JQuery...

    Any time the state of one of the switches is updated, just resend the entire array of data -- Angular does the heavy lifting of updating the DOM to match your data, and will even reuse existing elements, or insert/update/delete them as necessary.