Changing Node red dashboard home page

Dashboard
,
1

Hi Everyone

Hope you are doing well!

I am new in node-red and still learning, you can say 0 level skills.

I am looking for your help with the following issue, before that I am developing an app for my Home Base SCADA application.

So I just wanted to change the Node-red icon and some text to specific text and icons, especially for a node-red dashboard.

So far I have updated \.node-red\node_modules\node-red-dashboard\dist\index.html, Also change Icone. but still not working.

I am using docker to run node-red.

image
image1891×1054 33.7 KB

2

Hi. Since you are just starting out, I'd probably recommend not using node-red-dashboard (aka dashboard 1) as it is depreciated. Instead, @flowfuse/node-red-dashboard (aka dashboard-2) which is in active development.

3

Hi Steve

I have to use some SVG so have to use dashboard not dashboard 2.

4

You can do SVG in dashboard 2 (in UI-template) but I understand why you might want to use old dashboard for the dedicated svg node.

5

How, is it possible?
can you please share me any example?

6

I recently start using uibuilder, there it is possible. My approach:

index.html

<!doctype html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Minimal modern ESM client example - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Minimal modern ESM client example">

    <!-- Your own CSS -->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- NOTE this MUST be loaded as a MODULE. Also, uib client loaded in index not here -->
    <script type="module" async src="./index.js">
        /* Your custom code + Imports uibuilder */
    </script>
<style>
    svg {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: auto;
    }
    
    text {
    font-size: 14px;
    font-weight: bold;
    text-anchor: middle;
    }
</style>
</head>

<body class="">
    <svg viewBox="0 0 400 400">
        <!-- Komponenten -->
        <rect id="pv" x="150" y="20" width="100" height="50" fill="gold" stroke="black" />
        <text x="200" y="45">PV-Power</text>
        <text id="pv_power" x="200" y="60">0 kW</text>
    </svg>
</body>

</html>

and in index.js i have this little function:


function updateFlows(pvPower) {
    document.getElementById('pv_power').textContent = pvPower.toFixed(2) + ' kW';
}

// Listen for incoming messages from Node-RED and action
uibuilder.onChange('msg', (msg) => {
    // do stuff with the incoming msg
    if (msg.topic == "updateFlow") {
        updateFlows(msg.payload)
    }
})

Bildschirmaufnahme-2025-03-20-071900