Why are there two ways to import libraries? :
By calling with "require" in settings.js to take it to a global variable and via httpStatic to settings.js to take it to a port and call it from a template node with <script src = localhost: 1880 / library> ( I dnt know if I explained myself correctly).
The other question is, can a library like d3 be accessed by the global method for use in a template node? From what I've tried, it results in a string "[object object]"
http static method:
and global method
Because these are two completely different things.
The first one are web resources exposed by the web server Node-RED is running for the admin UI (Browser).
The second one is the global context exposed to your flows in the Node-RED runtime (NodeJS).
1 Like
So there is no way to use a global variable with the library inside the template node?
also in case i want to use a library on both sides (like linq) I should copy this library in node_modules and in a separate folder for the template node? (not to access all node-network modules from the browser)
D3.js library is used by Node-Red core and is readily available for using in your ui_template. No need to load the library from any external source.
You can check by copying this piece of code inside an ui_template node.
<!DOCTYPE html>
<html>
<head>
<style>
circle {
fill: green;
cursor: pointer;
}
</style>
</head>
<body>
<svg width="760" height="140">
<g transform="translate(70, 70)">
<circle r="40" />
<circle r="40" cx="120" />
<circle r="40" cx="240" />
<circle r="40" cx="360" />
<circle r="40" cx="480" />
</g>
</svg>
<div class="status">Click on a circle</div>
<script>
d3.selectAll('circle')
.on('click', function(x, y) {
d3.select('.status')
.text('You clicked on circle ' + y);
});
</script>
</body>
</html>
2 Likes
Well, I didn't know that, since in the default template node of node-red I couldn't access it without httpstatic. I don't use the dashboard module.
however I put d3 as an example. What I want to know is if it is possible to use linq.js or another library offline on a template node without using Script src
I'll take a look anyway
Linq.js is not used by Node-Red core but you should have no issues to load it by configuring the require in settings.js (assuming you have the module already installed). Did you try that ?
I have linq installed by the require method.
What crossed my mind was why I can't call this library in the template node that comes with node-red if they are in the same flow. They function in the function node perfectly.
Kuema has largely resolved my doubts, but I still think, being now linq.js as a global variable, can't I call it inside a script? Is there no way to put it in a in the template node without httpstatic method?
Just for clarity.
Which template node do you mean?
How do you foresee using linq within that node?
Templates are for front-end code. That is to say that they are delivered to the browser.
The static declaration in settings.js allows anything in that folder to be served up to the browser as a front-end, e.g. a http-in/out combo or Dashboard or even uibuilder. That is not used by the Node-RED editor as that uses a different server altogether.
If you load a library with a require in settings.js, you are making it available to the node.js server that Node-RED runs under. It actually isn't available to the browser either in the Editor or in a dashboard or whatever.
As a summary, you should realise that Node-RED creates THREE "servers":
- A node.js app - this is the "back-end" for Node-RED, all of the .js files for all of the nodes you have in your pallet are executed in this context. Anything
required in settings.js is also run in that context. - An admin ExpressJS web server. This presents the Editor (the Node-RED admin UI) to any browser tab that connects to it. This has things like D3 and jQuery pre-loaded by Node-RED itself. All of the .html files for nodes are loaded in this context (they define the configuration panels for the nodes).
- A user ExpressJS web server. This is used to serve up http-in/out web apps along with the Dashboard web app and also 3rd party web apps like uibuilder or my static markdown node. It also serves up anything in the static folder you may have defined in settings.js
Hope this clarifies things.
4 Likes
Let me show you with an example. Let´s say you want to use the library echarts.js.
I would do this way:
1- add the library to an ui_template node configuring in to be added to the <head> section of the site.
2- In you template node you can use the methods provided by the library inside script tags.
<script type="text/javascript">
var dom = document.getElementById("divChart3");
var myChart =null;
myChart = echarts.init(dom);
option = null;
{{{payload}}}
if (option && typeof option === "object")
{
myChart.setOption(option, true);
}
</script>
1 Like
I am using the template node that is predefined with node-red.
With what has been explained by others, I have understood how and why to call these libraries in these ways.
Now I am thinking, can you call the d3.js library of the Node-Red core from this node? without using node-red-dashboard nodes to avoid having to install more things that I may not use.
Or should I continue doing the script src method (httpStatic)?
The Node-RED editor page includes d3.js for its own use. If you were talking about creating a custom node edit dialog that uses d3, then yes, you'd be able to just use d3 as it is part of the editor environment.
But you are creating your own webpage, so you need to provide all the dependencies yourself.
1 Like
I am using the template node that is predefined with node-red.
Template node:
Sets a property based on the provided template.
Dashboard template node:
The template widget can contain any valid html and Angular/Angular-Material directives.
This node can be used to create a dynamic user interface element that changes its appearence based on the input message and can send back messages to Node-RED.
What are you trying to do ?
That is the ui_template node that support angular (and has d3 available) - it is NOT the template node indicated above....
I know, which is the reason i asked what the plan is.
