Full node appearance

General
1

image

Hi,

Is there any way to edit more deeply the nodes instead of background color. For example, I would like to change ports position even port style, like the image above...

Is this possible with Node-RED?

2

All things are possible - it's "just" software and the source is freely available. But no we don't support that within the core project per se - so you would need to fork it and do the rework yourself.

3

Okey. I'm gonna try. Let me ask another question about this, I realised that the UI uses the editor/templates/index.mst file so changing it I can edit the UI. Which is the file for edit nodes globally?

4

Well that is the main page template - most of the layout heavy lifting is done in ./packages/node_modules/@node-red/editor-client/src/js/ui/view.js

5

That's the path to the file in the dev branch on git which will be the 0.20 release.

If you're looking at the master branch, you'd want:

editor/js/ui/view.js

In the npm installed version of Node-RED, all of the editor source has already been combined and minified into red.min.js - you cant easily edit that directly.

2 Likes
6

Sorry if my question is a little dummy. But I can't find the file that you have mentioned. When I installed Node-RED I got this files:

/usr/local/lib/node_modules/node-red
    ├── bin
    ├── editor
    │   └── templates
    ├── node_modules [282 entries exceeds filelimit, not opening dir]
    ├── nodes
    │   └── core
    │       ├── analysis
    │       ├── core
    │       │   └── lib
    │       │       └── debug
    │       ├── hardware
    │       ├── io
    │       │   └── lib
    │       ├── locales
    │       │   ├── en-US
    │       │   ├── ja
    │       │   │   ├── analysis
    │       │   │   ├── core
    │       │   │   ├── hardware
    │       │   │   ├── io
    │       │   │   ├── logic
    │       │   │   ├── parsers
    │       │   │   └── storage
    │       │   └── zh-CN
    │       ├── logic
    │       ├── parsers
    │       └── storage
    ├── public
    │   ├── icons
    │   ├── red
    │   │   └── images
    │   │       └── typedInput
    │   └── vendor
    │       ├── ace
    │       │   └── snippets
    │       ├── bootstrap
    │       │   ├── css
    │       │   └── img
    │       ├── font-awesome
    │       │   ├── css
    │       │   └── fonts
    │       ├── jquery
    │       │   └── css
    │       │       └── smoothness
    │       │           └── images
    │       └── jsonata
    └── red
        ├── api
        │   ├── admin
        │   ├── auth
        │   └── editor
        │       ├── locales
        │       │   ├── en-US
        │       │   ├── ja
        │       │   └── zh-CN
        │       └── projects
        └── runtime
            ├── locales
            │   ├── en-US
            │   └── ja
            ├── nodes
            │   ├── context
            │   ├── flows
            │   └── registry
            └── storage
                └── localfilesystem
                    └── projects
                        ├── git
                        └── ssh
7

Please read my reply. The npm installed version of Node-RED doesn't include the unbuilt source of the editor. If you want to edit the code, you'll need to clone from git and use the build process to generate the editor code.

1 Like
8

Hello, I have a similar requirement and need to align the input/output ports to the top and bottom of each custom node. If you are able to share how you accomplished this, I would greatly appreciate it.

9

There is this thread that demonstrates vertical flow and has a link to his source code. You should be able to view a diff and try it out on current node red source.

1 Like
10

Thanks @Steve-Mcl , I've become well acquainted with that thread :slight_smile: