Help Needed: Modifying Dashboard Title and Adding Logo in Node-RED

General
,
1

I am currently working on customizing my Node-RED dashboard, and I have a couple of issues I need help with.

  1. Changing the Dashboard Title:
  • I attempted to change the title by modifying the index.html file in the Node-RED installation directory. However, the changes are not reflecting when I access the dashboard at http://localhost:1880/dashboard/. Is there a specific way to change the dashboard title that I should be using?
  1. Setting a Logo:
  • Additionally, I want to add a logo to the title section of the dashboard. I’ve included an <img> tag in my HTML but haven’t been able to get it to display properly. Can someone guide me on how to do this?

  1. method i tried to set a title
    in setting.js file,modified the editortheme as

     page: {
     title: "Vnetpops"
 },

but this will edit in the node-red editor but it is not modifying in the node-red dashboard flows.

2

When you say "Title", do you mean the name of your application as it appears in the browser tab? This uses the active Page's name.

I think this documentation may help you here

3

yes I'm working with the Node-RED dashboard and I want to modify the title that appears in the browser tab. Specifically, I'm using the UI page node with the Name field left empty (intentionally), so that it doesn't display on the dashboard page itself. However, when the Name is empty, the browser tab defaults to "Node-RED Dashboard."

Even though I want the UI page name to remain blank, I would like to change the title that appears in the browser tab. It seems to be getting this default from the index.html file, but modifying that file isn't having any effect.

4

In which case, currently, the only way to control that is by modifying the Page's name. You can do that in the sidebar:

Screenshot 2024-10-15 at 13.47.42
Screenshot 2024-10-15 at 13.47.42878×426 19.4 KB

Click the "Edit" button of the page, and you can change it's name.

5

I'm currently working on a Node-RED dashboard and I would like to replace the default page title icon (favicon) with a custom icon for my project. Specifically, I want to set the icon to my company's logo (*.png).

I've already tried modifying the index.html file to change the title and add the icon, but the changes are not being reflected when I access http://localhost:1880/dashboard.

Here are the steps I've taken so far:

  • Updated the title and link tag for the favicon in index.html.
  • Set the page title using the ui_page node, but I want the browser tab title to reflect "some title" along with the custom icon.

However, the default "Node-RED Dashboard" title and icon are still showing up. How can I properly replace the page title icon with my custom *.png icon in the Node-RED dashboard?

6

You do not need to modify the index.html, we support this in the Editor as of the latest version (you may need to update): Config: UI Base ui-base | Node-RED Dashboard 2.0

On that same configuration page you can turn off the rendering of the page name (but still keep the underlying names on the relevant pages to show in the broswer tab) by toggling off "Show Page Name"

To get to this configuration, you click "Edit Settings" at the top of the Dashboard 2.0 sidebar in the Node-RED Editor

7

i followed the steps

image
image812×444 33.4 KB

yes i tried the way what your suggested, but the title and icon is not modified in the node red dashboard.
instead i m getting these type of errors.
:1880/home/nandhini/home-dev/node-red/packages/node_modules/node-red/home-ui/home-login/public/home.png:1

Failed to load resource: the server responded with a status of 404 (Not Found)

8

image

You should either serve your icon or use a known working URL

Try using https://i.sstatic.net/OLca0.png

9

This file changes fixed the Dashboard Title
node_modules/@flowfuse/node-red-dashboard/dist/assets/index-TznpjNEy.js (Works)
createBaseVNode("h1",null,"Node-RED Dashboard 2.0",-1)
document.title="Node-RED Dashboard 2.0"

10

Right, but you don't need to, nor should you need to, make source code changes on Dashboard to correct this.

The method I have shared above, by changing the Page Name, will update the Title in the browser.