Can we make a running text on node red?

General
1

how to make a running text on node red?

2

You mean something like this?:

[
    {
        "id": "8bd4909af00760b3",
        "type": "ui_template",
        "z": "bd54c6a8.5d776",
        "group": "f139e62.e7f4a18",
        "name": "",
        "order": 3,
        "width": "5",
        "height": "1",
        "format": "<style>\n.scroll-left {\n height: 50px;\t\n overflow: hidden;\n position: relative;\n background: yellow;\n color: orange;\n border: 1px solid orange;\n}\n.scroll-left p {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0;\n line-height: 50px;\n text-align: center;\n /* Starting position */\n transform:translateX(100%);\n /* Apply animation to this element */\n animation: scroll-left 15s linear infinite;\n}\n/* Move it (define the animation) */\n@keyframes scroll-left {\n 0%   {\n transform: translateX(100%); \t\t\n }\n 100% {\n transform: translateX(-100%); \n }\n}\n</style>\n\n<div class=\"scroll-left\">\n<p>Scroll left... </p>\n</div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 840,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "f139e62.e7f4a18",
        "type": "ui_group",
        "name": "Wohnzimmer",
        "tab": "5aa95dc.23f2224",
        "order": 1,
        "disp": false,
        "width": "7",
        "collapse": false,
        "className": ""
    },
    {
        "id": "5aa95dc.23f2224",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
2 Likes
3

where should i put it on, sorry im newbie at node red

4

That would be basic HTML. Just pass a Marquee tag into a dashboard text node.

HTML - marquee Tag (tutorialspoint.com)

5

thanks! OriolFM its solved i forgot we can put html too in node red :sweat_smile:.

6

It's fine, sometimes people tend to overthink simple stuff.

In the beginning I had a lot of problems scaling my dashboard because I had to display many fields from several machines, and I was placing a lot of text nodes for each machine, assigning them to a tab and then to a group, adding spacers, and so on... it was painful.

In the end, I realised I could just prepare a single HTML string per machine, dimensioned like a table, and use a single text node per machine to display all the parameters. Much easier and simpler, and I could replicate the same setup by just using the same function node or subflow to prepare the HTML.

I thought about the Marquee tag because I already came up with that HTML thing earlier in my workflow, but I have to admit, it took me a while to figure it out.

2 Likes
7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.