Terminal implementation in Node-Red-Dashboard

Dashboard
1

Hello people,

I want to implement a web-based terminal in the dashboard.
My thought was to use xterm but it wont show up in the Dashboard.
The implementation should be correct:

image
image750Ă—303 13 KB

Do I maybe have to import something, like the .js?
I already tried to import it in my settings.js but this is just throwing errors.

image

Any idea, what I am doing wrong or do you have some other suggestions, how to implement a terminal in the dashboard?

Thanks

Justin

2

Firstly, the dashboard already has a html head body - dont enter these in the template node.

Next, to make xterm.css and xterm.js available to your dashboard, you need to "serve it up". That could be done by putting the necessary files in a static folder or use the http-in~http-respnse nodes to create an endpoint to serve them.

This is for server side not for client side.

But since you have found the settings.js file - read through it - you should see httpStatic - that is where you can host files (somewhere you could dump the required files & make them available to the dashboard).

Search the forum for "httpStatic" and read the docs

3

First, thanks for your help.

I found httpStatic in the settings.js and activated it (As I read in the docs I also activated httpAdminRoot).

My question now is: How do I "serv it up" in the template-node, without using head?
I put the whole xterm-folder from node_modules inside

/home/pi/node-red-static/

and the template is looking like this:

image
image695Ă—264 8.55 KB

But as you said, I shouldnt enter head and body in the template-node.

4

You don't need to put script links into the head, it is fine to put them into the body. So also fine for the link/script to go into the template.

But if you want to add to the head, change the template type:

image

5

I tried to put everything inside the body.

But I'm still not able to get it done.

What am I doing wrong?

6

impossible to say without seeing what you have done.

Open the browser dev tools (F12), select the network TAB, refresh the dashboard page.
Are the xterm css and js being fetched?

PS...

:point_up_2: if these are the URLs you are using, then that wont work.

7

Yeah, it's trying to GET it but throwing a 404.

I've read the docs but I cant see how to access my static directory.

8

You have used a filing system path instead of a URL path. If you've not changed any other node-red settings, the path should probably be /xterm/lib/xterm.js

1 Like
9

e.g... Use jquery in template node (not datshboard) - #4 by jbudd

If your settings.js file contains httpStatic: '/home/pi/JQuery/',
And you have restarted Node-red after editing it,
And that directory contains 123.png:
Then you should be able to see the image at <IP Address>:1880/123.png

1 Like
10

Yup, it's working now. Thank you guys! :+1:

11

Well I see the terminal but cant make any input :joy:

12

Back to dev tools - go to the console and look for errors.

13

image
image1910Ă—1011 68.7 KB

14

The .map warnings are nothing to worrry about. No errors. So now you need to head into the xterm.js docs to find out how to use it :mage:

15

Alright, I gonna do that. Thanks a lot!

16

Have you attached it to a real terminal?

I see you have managed to "host" a "web app" but it has to connect to a system!

See this...

17

You guys are the best!

I think thats what I was searching for right now.

I gonna get into that and share my result later!

18

Looks like you also need microsoft/node-pty: Fork pseudoterminals in Node.JS (github.com) and to wire them together.

Or maybe that :slight_smile:

19

I'm trying this right now. But I'm stuck at the point with the websocket.

I mean.. do I have to set up a websocket, if I want to communicate with the terminal on that local device which is hosting the node-red-dashboard?

20

Yes, looks like attach literally just attaches the xterm interactions to a websocket. With a matching listener in node-red, you will get the data back from the browser but will still have to do something with it.

1 Like