Create custom ui node in Dashboard 2

General
, ,
21

Yes

Also Yes.

2 Likes
22

In the .vue file there is already html code in the when you look at the ui-example repo. (node-red-dashboard-2-ui-example/ui/components/UIExample.vue at main · FlowFuse/node-red-dashboard-2-ui-example · GitHub)
Should something already be displayed in the dashboard if you integrate the repo into the dashboard without changing anything?

23

You have to follow the instructions for building it as described in Building Third Party Widgets | Node-RED Dashboard 2.0

24

I have followed the instructions but it still does not work.

Dashboard 2 is working and other nodes are displayed on the dashboard. (Node-RED is installed locally on my PC)

First I downloaded the ui-example repo from github and installed it. At this point I did not change anything in the repo.
Then I used the command 'npm run build'.

Did I make a mistake or does the ui-example repo not work for someone else either?

25

You also have to go into the example node folder and run
npm install
that seems to be missing from the instructions. Also, since you installed the node using npm you have to restart node-red.

26

Colin,
Suppose he did not execute this command. How would he then have been able to execute ´npm run build´? Because that build requires Vite, which needs yo be installed via your command. Or am I just getting nuts...

27

Yes, I realised that after I posted, so either the build was not run, or maybe just needs a restart.

1 Like
28

Yes, i ran npm install and for the npm run build i got this result:

image
image1172×136 6.35 KB

And after that i also restarted Node-RED, but it still does not work.

29

Run the command to install the node again and show us the output from that command (copy/paste please, not screenshot).

Also, in settings.js, set the log level to Trace and show us the output when you start node red.

Also show us the contents of package.json

30

There are two npm install steps required:

  1. npm install from within your example directory
  2. npm install /path/to/your/local/node-red-dashboard-example-node from within your Node-RED directory

The former pulls in dependencies for example, and the latter adds the example to your Node-RED environment.

Re-reading the docs this is not entirely clear, so I'll improve them now and get a PR opened.

2 Likes
31

Thank you for clarifictaion. Now it works :smiley: :+1:

32

Docs are also updated for the future now too: Building Third Party Widgets | Node-RED Dashboard 2.0

1 Like
33

While working on my node, a new question came up.

Is it possible to change the style of an div and a keyframe in the js-script?
My intention is to start and end an animation with a different start and end point every time a new message arrives on the node.

34

Here is a nice example of an animated water tank, based on the value of msg.payload. It is taken from dashboard v1.0, It should be easy to convert to v2.0;

<style>
    .wrapper{
        position: absolute;
        width: 90%;
        height: 90%;
        margin: auto;
        inset: 0;
        overflow:hidden;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
    .txt{
        position: absolute;
        width: 100%;
        top: 45%;
        text-align: center;
        font-size: xx-large;
        font-weight: 700;
        user-select: none;
    }
    .frame{
        position: absolute;
        width: 100%;
        height: 100%;
        margin: auto;
        inset: 0;
        outline: 5px solid;
        outline-offset:-5px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
    .fluid{
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        background: #00a8ff;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
</style>
<div class="wrapper">
    <div class="fluid" style="height:{{msg.payload}}%"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>
35

Another option is to inject styling in your JS code, e.g.:

	const newStyle = msg.payload;// e.g. "border:3px solid #add8e6;";
	const myStyleId = "some-unique-id";
	const styleTags = document.getElementsByTagName("style");
	for (let i = 0; i < styleTags.length; i++)
		if (styleTags[i].id === myStyleId)
		{
			styleTags[i].remove();			
			break;
		}
	const el = document.createElement("style");
	el.type = "text/css";
	el.innerText = newStyle;
	el.id = myStyleId;
	document.head.appendChild(el);
36

To make this Dashboard 2.0 friendly, you'd adjust:

<div class="wrapper">
    <div class="fluid" style="height:{{msg.payload}}%"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

to be:

<div class="wrapper">
    <div class="fluid" :style="'height:' + msg.payload + '%'"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

or, if you want to use Template Literals syntax:

<div class="wrapper">
    <div class="fluid" :style="`height:${msg.payload}%`"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

Detail on why in our docs: Template ui-template | Node-RED Dashboard 2.0

1 Like