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

Question

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)
})

Please update the question with an example of the data you are passing into this template... — SteveR, May 06 '18 at 22:00

score 1 · Accepted Answer · answered May 06 '18 at 23:12

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:

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.

thanks a lot.but I want to have my boxes in different positions.is it possible in ng-repeat? — shahrzad, May 07 '18 at 06:39
Well, the "boxes" of data have been built by the Angular `ng-repeat` logic -- now it's just a matter of styling them (using css to set widths, heights, positions, display type, color). — SteveR, May 07 '18 at 12:10
Not without a LOT more information about (and maybe pictures of) what you want it to look like... — SteveR, May 07 '18 at 15:13
http://skymics.com/Energy/sampleschematic.jpg see this picture.i want my 6 boxes go on the 6 vertical lines above the picture. — shahrzad, May 07 '18 at 15:52
https://stackoverflow.com/questions/50218885/how-to-give-different-padding-styles-to-ng-repeat-elements @SteveR this is my code. — shahrzad, May 07 '18 at 16:44

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

1 Answers1