Progressbar in notification-node

Dashboard
1

Hello everyone,

I noticed that the notification node supports JavaScript/HTML input.
I am trying to use this feature to show a progressbar while updating counters.

[
    {
        "id": "25496b66b90b1aee",
        "type": "ui_toast",
        "z": "ec5b1b9dc43f9289",
        "position": "dialog",
        "displayTime": "4",
        "highlight": "green",
        "sendall": true,
        "outputs": 1,
        "ok": "OK",
        "cancel": "",
        "raw": true,
        "className": "",
        "topic": "",
        "name": "",
        "x": 1410,
        "y": 3200,
        "wires": [
            []
        ]
    },
    {
        "id": "161de35d7f36c033",
        "type": "template",
        "z": "ec5b1b9dc43f9289",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "\n<head>\n<title>Ladebalken mit Fortschrittsanzeige</title>\n<style type=\"text/css\">\nbody {background-color:#ccc}\nh1   {text-align:center}\ndiv#ladebalken  {height:22px; width:380px; border:1px solid red; margin:auto}\ndiv#fortschritt {height:22px; width:1px; background-color:#dd0; border:none}\n</style>\n</head>\n\n<body>\n<h1>Updatevorgang</h1>\n<div id=\"ladebalken\">\n    <div id=\"fortschritt\"></div>\n</div>\n\n<p style=\"text-align: center\">\n    <input type=\"button\" onclick=\"ladenStoppen()\" value=\" Stoppen \">\n    <input type=\"button\" onclick=\"weiterLaden()\"  value=\" Weiter Laden \">\n</p> \n\n\n<script type=\"text/javascript\">\n\"use strict\";\nvar erhoehe_pixel = 1;\nvar ladevorgang;\n\nif (window.addEventListener) {\n    window.addEventListener(\"load\", ladeBalken, false); // für alle anderen Browser\n}\nelse if (window.attachEvent) {\n    window.attachEvent(\"onload\", ladeBalken);           // für ältere IE\n}\n\n/*--- Funktion für die Fortschrittsanzeige ----------------------------*/\n\nfunction ladeBalken() {\n    erhoehe_pixel++;\n\n    var schritt = document.getElementById(\"fortschritt\");\n\n    if (erhoehe_pixel <= 380) {\n        ladevorgang = window.setTimeout(\"ladeBalken()\", 90);\n        schritt.style.width = erhoehe_pixel + \"px\";\n    }\n}\n\n/*--- Funktionen zum Stoppen und zum Fortsetzen des Ladevorgangs ------*/\n\nfunction ladenStoppen() {\n    window.clearTimeout(ladevorgang);\n}\nfunction weiterLaden() {\n    ladeBalken();\n}\n</script>\n</body>\n</html>",
        "output": "str",
        "x": 1160,
        "y": 3200,
        "wires": [
            [
                "25496b66b90b1aee"
            ]
        ]
    },
    {
        "id": "cc433f276145acf6",
        "type": "inject",
        "z": "ec5b1b9dc43f9289",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "load",
        "payloadType": "str",
        "x": 940,
        "y": 3200,
        "wires": [
            [
                "161de35d7f36c033"
            ]
        ]
    }
]

I found an example of a progress bar on the internet, but I have no clue, how to make it move using messages or variables.

Anyone done this before?

Kind regards

2

May be this can help you: Node Dashboard: How to access the msg object in a Template script (flow) - Node-RED

3

I think this is going the right way, anyway I tried to reproduce the cosole messages that the author mentions, but they don´t show up in my console.

4

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