# Node red multi-line status

**URL:** <https://discourse.nodered.org/t/node-red-multi-line-status/8775>\
**Category:** General\
**Created:** [9 March 2019 13:45 UTC](https://discourse.nodered.org/t/node-red-multi-line-status/8775 "2019-03-09T13:45:45Z")\
**Posts on this page:** 1\
**Showing post:** 28

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 March 2019 16:01 UTC](https://discourse.nodered.org/t/node-red-multi-line-status/8775/28 "2019-03-10T16:01:49Z")

</div>

> [@TotallyInformation](#):
>
> Maybe I should take some time out from uibuilder v2 and create a debug output example for uibuilder?

So, I have a quick and dirty example using uibuilder and the (current) default jQuery template. Not terribly pretty but hopefully you can see the basics:

### index.js

```auto
/*global document,$,window,uibuilder */
/*
  Copyright (c) 2017 Julian Knight (Totally Information)

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/
'use strict'

function syntaxHighlight(json) {
    json = JSON.stringify(json, undefined, 4)
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number'
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key'
            } else {
                cls = 'string'
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean'
        } else if (/null/.test(match)) {
            cls = 'null'
        }
        return '<span class="' + cls + '">' + match + '</span>'
    })
}

$( document ).ready(function() {
    // Keeping track of received topics
    var topics = {}

    // Turn on debugging for uibuilderfe (default is off)
    uibuilder.debug(true)

    uibuilder.onChange('msg', function(newVal){
        //console.info('indexjs:msg: property msg has changed! ', newVal)

        // keep track of inbound topics
        if ( (newVal.topic !=='') && (newVal.topic !== undefined) ) {
            var encodedTopic = encodeURIComponent(newVal.topic).replace(/\%/g,'')
            // Existing topic?
            if ( newVal.topic in topics ) {
                // update count
                topics[newVal.topic].count++
                // update display
                $('#t' + encodedTopic).html(syntaxHighlight(newVal))
            } else { // new topic
                // add to obj
                topics[newVal.topic] = {'count': 0, 'data': newVal}
                // add to list
                $('#topicList').append('<li><a href="#t' + encodedTopic + '">' + newVal.topic + '</a></li>')
                // add to display
                $('#debug').append('<a href="#t' + encodedTopic + '"></a><h2>' + newVal.topic + '</h2><pre id="t' + encodedTopic + '">' + syntaxHighlight(newVal) + '</pre>')
            }
        }

    })
}) // --- End of JQuery Ready --- //

// EOF

```

### index.html

```auto
<!doctype html><html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <title>uibuilder - Debug (jQuery version)</title>
    <meta name="description" content="uibuilder - Debug (jQuery version)">
    <link rel="icon" href="./images/node-blue.ico">
    <link rel="stylesheet" href="./vendor/normalize.css/normalize.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app">
        <div id="topicList"><ul></ul></div>
        <div id="debug"></div>
    </div>

    <script src="/uibuilder/socket.io/socket.io.js"></script>
    <script src="./vendor/jquery/dist/jquery.min.js"></script>
    <script src="./uibuilderfe.min.js"></script>
    <script src="./index.js"></script>
</body></html>

```

### index.css

```auto
body {font-family: sans-serif;}
div, p, code { margin:0.3em; padding: 0.3em;}

pre .string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

```

### Example flow

```auto
[{"id":"df2a6744.0f2088","type":"uibuilder","z":"18cb249f.38bafb","name":"jDebug","topic":"","url":"jdebug","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"debugFE":false,"copyIndex":true,"x":410,"y":760,"wires":[[],[]]},{"id":"889953a1.0152e","type":"inject","z":"18cb249f.38bafb","name":"","topic":"devices/01/ab/02","payload":"{\"Oregon\":{\"location\":\"Patio\",\"source\":\"RFX\",\"sensors\":\"TH\",\"type\":\"Sensor\",\"description\":\"Oregon Scientific Temperature/Humidity Sensor\"},\"TH1/0x7D01\":{\"location\":\"Patio\",\"source\":\"RFX\",\"sensors\":\"TH\",\"type\":\"Sensor\",\"description\":\"Oregon Scientific Temperature/Humidity Sensor\"},\"SRF/UNO1\":{\"location\":\"Loft\",\"source\":\"SRF\",\"sensors\":\"THPL\",\"type\":\"Sensor\",\"description\":\"Arduino with Temperature, Humidity, Pressure and Light Sensors\"},\"ARD/UNO1\":{\"location\":\"Loft\",\"source\":\"SER\",\"sensors\":\"THPL\",\"type\":\"Sensor\",\"description\":\"Arduino with Temperature, Humidity, Pressure and Light Sensors\"},\"ARD/NANO1\":{\"location\":\"Loft\",\"source\":\"SER\",\"sensors\":\"THL\",\"type\":\"Sensor\",\"description\":\"Arduino with Temperature, Humidity and Light Sensors\"},\"HOMEEASY_EU/0x000081C0\":{\"location\":\"Landing\",\"source\":\"RFX\",\"sensors\":\"M\",\"type\":\"PIR\",\"description\":\"Home Easy PIR\",\"AKA\":\"AC/0x0000A9F8\"},\"LIGHTWAVERF/0xF4C95B\":{\"location\":\"Cellar Head\",\"source\":\"RFX\",\"sensors\":\"M\",\"type\":\"Mag\",\"description\":\"Siemens Magnetic Door Sensor\",\"AKA\":\"Freezer\"},\"LIGHTWAVERF/0xF4C36F\":{\"location\":\"Front Hall\",\"source\":\"RFX\",\"sensors\":\"M\",\"type\":\"Mag\",\"description\":\"Siemens Magnetic Door Sensor\"},\"LIGHTWAVERF/0xF2D8D7\":{\"location\":\"Landing\",\"source\":\"RFX\",\"sensors\":\"S\",\"type\":\"Remote\",\"description\":\"Siemens White 4 Channel Remote Control\"},\"LIGHTWAVERF/0xF30F69\":{\"location\":\"Loft\",\"source\":\"RFX\",\"sensors\":\"S\",\"type\":\"Remote\",\"description\":\"Siemens White 4 Channel Remote Control\"},\"LIGHTWAVERF/0xF55E26\":{\"location\":\"Loft\",\"source\":\"RFX\",\"sensors\":\"S\",\"type\":\"Remote\",\"description\":\"Siemens Black 4 Channel Remote Control\"},\"HOMEEASY_EU/0x00024404\":{\"location\":\"Front Hall\",\"source\":\"RFX\",\"sensors\":\"S\",\"type\":\"Remote\",\"description\":\"Home Easy dual remote control\",\"AKA\":\"AC/0x000247C4\"},\"AC/0x00C77BAA\":{\"location\":\"Front Hall\",\"source\":\"RFX\",\"sensors\":\"S\",\"type\":\"Bell\",\"description\":\"Nexa Doorbell, not in use\"},\"SELECT_PLUS/0x005AE0\":{\"location\":\"Front Hall\",\"source\":\"RFX\",\"sensors\":\"S\",\"type\":\"Bell\",\"description\":\"1ByOne Doorbell\"},\"SP01\":{\"location\":\"Loft Main\",\"source\":\"LAN\",\"sensors\":\"ES\",\"type\":\"Sensor, Smart Switch\",\"description\":\"Edimax SP2101W Smartswitch with energy monitor\"},\"D1M01\":{\"location\":\"NA\",\"source\":\"LAN\",\"sensors\":\"\",\"type\":\"Sensor\",\"description\":\"Wemos D1-mini\"},\"D1M02\":{\"location\":\"Rear Hall\",\"source\":\"LAN\",\"sensors\":\"THL\",\"type\":\"Sensor\",\"ipAddress\":\"192.168.1.152\",\"description\":\"Wemos D1-mini with Temperature, Humidity and Light\"},\"D1M03\":{\"location\":\"NA\",\"source\":\"LAN\",\"sensors\":\"\",\"type\":\"Sensor\",\"description\":\"Wemos D1-mini\"},\"D1M04\":{\"location\":\"Landing\",\"source\":\"LAN\",\"sensors\":\"TH\",\"type\":\"Sensor\",\"ipAddress\":\"192.168.1.187\",\"description\":\"Wemos D1-mini with Temperature, Humidity\"},\"D1M05\":{\"location\":\"Living Room\",\"source\":\"LAN\",\"sensors\":\"THL\",\"type\":\"Sensor\",\"ipAddress\":\"192.168.1.188\",\"description\":\"Wemos D1-mini with Temperature, Humidity and Light\"},\"Sonoff_073412\":{\"location\":\"Loft Main\",\"source\":\"LAN\",\"sensors\":\"S\",\"type\":\"Smart Switch\",\"description\":\"Sonoff Wi-Fi smart switch\"},\"POW1\":{\"location\":\"Patio\",\"source\":\"LAN\",\"sensors\":\"ES\",\"type\":\"Sensor, Smart Switch\",\"ipAddress\":\"192.168.1.159\",\"mac\":\"5c:cf:7f:20:dc:4d\",\"description\":\"Sonoff POW Wi-Fi smart switch\"},\"Pi2NR-LIVE\":{\"location\":\"Loft Main\",\"source\":\"LAN\",\"type\":\"Node-RED on Pi2\",\"ipAddress\":\"192.168.1.167\",\"description\":\"Node-RED on Pi2\"},\"Pi3NR-LIVE\":{\"location\":\"Loft Main\",\"source\":\"LAN\",\"type\":\"Node-RED on Pi3\",\"ipAddress\":\"192.168.1.169\",\"description\":\"Node-RED on Pi3\"}}","payloadType":"json","repeat":"5","crontab":"","once":true,"onceDelay":0.1,"x":250,"y":680,"wires":[["8c7b3d33.6e8aa"]]},{"id":"9d9fe6c2.35d2e8","type":"link in","z":"18cb249f.38bafb","name":"jDebug","links":["8c7b3d33.6e8aa"],"x":260,"y":760,"wires":[["df2a6744.0f2088"]]},{"id":"8c7b3d33.6e8aa","type":"link out","z":"18cb249f.38bafb","name":"To-jDebug","links":["9d9fe6c2.35d2e8"],"x":440,"y":680,"wires":[]},{"id":"d6b034cb.7ef188","type":"inject","z":"18cb249f.38bafb","name":"","topic":"devices.switches","payload":"{\"SWITCH09\":{\"id\":\"SWITCH09\",\"status\":\"Off\",\"lastUpdate\":\"2019-01-13T23:00:08.720Z\",\"room\":\"Loft Main\"},\"SWITCH02\":{\"id\":\"SWITCH02\",\"status\":\"On\",\"lastUpdate\":\"2019-01-13T13:01:22.383Z\",\"room\":\"Rear Hall\"},\"SWITCH03\":{\"id\":\"SWITCH03\",\"status\":\"On\",\"lastUpdate\":\"2019-01-13T23:37:57.831Z\",\"room\":\"Front Hall\"},\"SWITCH04\":{\"id\":\"SWITCH04\",\"status\":\"On\",\"lastUpdate\":\"2019-01-13T13:01:22.386Z\",\"room\":\"Landing\"},\"SWITCH05\":{\"id\":\"SWITCH05\",\"status\":\"On\",\"lastUpdate\":\"2019-01-13T23:37:57.833Z\",\"room\":\"NA\"},\"SWITCH06\":{\"id\":\"SWITCH06\",\"status\":\"On\",\"lastUpdate\":\"2019-01-13T13:01:22.386Z\",\"room\":\"NA\"},\"SWITCH01\":{\"id\":\"SWITCH01\",\"status\":\"On\",\"lastUpdate\":\"2019-01-13T23:37:57.834Z\",\"room\":\"Living Room\"},\"SWITCH07\":{\"id\":\"SWITCH07\",\"status\":\"Off\",\"lastUpdate\":\"2019-01-13T13:01:22.387Z\",\"room\":\"NA\"},\"SWITCH08\":{\"id\":\"SWITCH08\",\"status\":\"Off\",\"lastUpdate\":\"2019-01-13T13:01:22.388Z\",\"room\":\"NA\"},\"SWITCH10\":{\"id\":\"SWITCH10\",\"status\":\"OFF\",\"lastUpdate\":\"2019-01-13T23:30:01.176Z\",\"room\":\"Patio\"},\"SWITCH11\":{\"id\":\"SWITCH11\",\"status\":\"Off\",\"lastUpdate\":\"2019-01-13T13:01:22.390Z\",\"room\":\"Loft Main\"}}","payloadType":"json","repeat":"6","crontab":"","once":true,"onceDelay":"0.4","x":250,"y":640,"wires":[["8c7b3d33.6e8aa"]]}]

```

UPDATE: If anyone is interested, I also have another example using VueJS which is a bit nicer.

---

_[View the full topic](https://discourse.nodered.org/t/node-red-multi-line-status/8775)._