How to pass msg.payload to <script></script> in template node of node-red-dashboard 3.6.5?

Dashboard
, ,
7

You would use the second example in the side bar help for ui-template. You can then watch for incoming msg.payload.
Example template. No html or body tags requiredd

<style>
        .rectangle {
            position: relative;
            width: 1200px;
            height: 600px;
            background-color: lightgray;
            border: 1px solid #000;
        }
    
        .dot {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
</style>

    <div class="rectangle">
        <div id="container"></div>
    </div>
    
<script>
    (function(scope) {
        scope.$watch('msg', function(msg) {
            if (msg.payload) {
                items = msg.payload// example [{"x":67,"y":12},{"x":12,"y":30}]
                // Get the container element
                let container = document.getElementById('container');

                // Loop through the array and create divs
                items.forEach(item => {
                    // Create a new div element
                    let div = document.createElement('div');
    
                    // Set the class of the div
                    div.className = 'dot';
    
                    // Set the position of the div
                    div.style.left = `${item.x}px`;
                    div.style.top = `${item.y}px`;
    
                    // Append the div to the container
                    container.appendChild(div);
                });
            }
        });
    })(scope);
</script>
1 Like