Yes
Also Yes.
Yes
Also Yes.
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?
You have to follow the instructions for building it as described in Building Third Party Widgets | Node-RED Dashboard 2.0
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?
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.
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...
Yes, I realised that after I posted, so either the build was not run, or maybe just needs a restart.
Yes, i ran npm install
and for the npm run build
i got this result:
And after that i also restarted Node-RED, but it still does not work.
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
There are two npm install
steps required:
npm install
from within your example directorynpm install /path/to/your/local/node-red-dashboard-example-node
from within your Node-RED directoryThe 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.
Thank you for clarifictaion. Now it works
Docs are also updated for the future now too: Building Third Party Widgets | Node-RED Dashboard 2.0
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.
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>
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);
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