Anyone have an example of a scrolling text box using the new dashboard 2.0?

General
1

Anyone have an example of a scrolling text box using the new dashboard 2.0?

If memory serves, I recall there was a discussion on using a ring-buffer to scroll a multiple line text box? Or was it a template? But that example was based on the old dashboard.

2

Hi Jibun,

I did this in dashboard 1 with some custom code

[
    {
        "id": "2e252ea2ae4b1869",
        "type": "ui_template",
        "z": "9c0feed7c0d72fbb",
        "group": "fb251dd8e77bab68",
        "name": "",
        "order": 1,
        "width": 13,
        "height": 3,
        "format": "<div id=\"scrolling-text\" style=\"width: 300px; overflow: hidden; white-space: nowrap;\"></div>\n\n<script>\n    (function(scope) {\n    scope.$watch('msg', function(msg) {\n      if (msg) {\n        var text = msg.payload;\n        var speed = 80;\n        var textLength = text.length;\n        var currentPosition = 0;\n        \n        var intervalId = setInterval(function() {\n          var scrolledText = \"\";\n          for (var i = 0; i < 20; i++) {\n            scrolledText += (currentPosition + i) < textLength ? text[currentPosition + i] : \" \";\n          }\n          currentPosition++;\n          if (currentPosition >= textLength) {\n            currentPosition = 0;\n          }\n          document.getElementById(\"scrolling-text\").innerHTML = scrolledText;\n        }, speed);\n        \n        scope.$on('$destroy', function() {\n          clearInterval(intervalId);\n        });\n      }\n    });\n  })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 900,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "e5c08e8a2c190019",
        "type": "function",
        "z": "9c0feed7c0d72fbb",
        "name": "function 1",
        "func": "msg.payload = \"A war of words has erupted between the media outlets and the Australian Bureau of Statistics (ABS), which has been accused of trying to “censor” the migration debate. The storm comes after the bureau corrected “misleading” reports that suggested the country was bringing in “1500 new people per day”.\";\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 720,
        "y": 300,
        "wires": [
            [
                "2e252ea2ae4b1869"
            ]
        ]
    },
    {
        "id": "f0e649d1d03dfdb6",
        "type": "inject",
        "z": "9c0feed7c0d72fbb",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 400,
        "y": 300,
        "wires": [
            [
                "e5c08e8a2c190019"
            ]
        ]
    },
    {
        "id": "fb251dd8e77bab68",
        "type": "ui_group",
        "name": "Default",
        "tab": "35a6c185cf163d99",
        "order": 1,
        "disp": true,
        "width": 13,
        "collapse": false,
        "className": ""
    },
    {
        "id": "35a6c185cf163d99",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
3

And given it is ui_template based... likely just work via the new dashboard 2.0?

4

Yes.. it should feel free to report back if it doesn't