New serial terminal WEB to test

All that relates to the Annex Toolkit Utility
User avatar
cicciocb
Site Admin
Posts: 1900
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 407 times
Been thanked: 1271 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

Yes, it is possible and normally is already supported by the VT100 emulation.
What are the keycodes that you require?
yama
Posts: 27
Joined: Fri Sep 16, 2022 1:42 pm
Been thanked: 3 times

Re: New serial terminal WEB to test

Post by yama »

What is "keycodes"?
To control so that the cursor moves only over characters
I want to know related xterm methods etc. 
I would like to know if there is a reference program code.
User avatar
cicciocb
Site Admin
Posts: 1900
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 407 times
Been thanked: 1271 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

The utility includes xterm.js https://github.com/xtermjs/xterm.js/

I think you can find all the information there.

In particular, it follows the rules of the standard ECMA-48 / VT100
https://www.ecma-international.org/wp-c ... e_1991.pdf

And, for all about the VT100
https://vt100.net
yama
Posts: 27
Joined: Fri Sep 16, 2022 1:42 pm
Been thanked: 3 times

Re: New serial terminal WEB to test

Post by yama »

Thank you . I want to check it.
Another matter, I want to operate a certain serial communication control via web terminal using WiFi.
Is it possible to turn Web-terminal into Web-Terminal via WiFi, using ESP on Annex-RDS?
Is it realistic to implement Xterm.js etc. on ESP using Annex-RDS?
yama
Posts: 27
Joined: Fri Sep 16, 2022 1:42 pm
Been thanked: 3 times

Re: New serial terminal WEB to test

Post by yama »

Thank you for your support.
xterm on ESP8266 RDS code, xterm do not work.
Are there any improvements?

A$ = ||
A$ = A$ + |<!doctype html>|
A$ = A$ + | <html>|
A$ = A$ + | <head>|
A$ = A$ + | <link rel="stylesheet" href="/term/xterm.css" />| <-on local ESP8266
A$ = A$ + | <script src="/term/xterm.js"></script>|
A$ = A$ + | </head>|
A$ = A$ + | <body>|
A$ = A$ + | <H1> Wifi Xterm Test </H1>|
A$ = A$ + | <div id="terminal"></div>|
A$ = A$ + | <script>|
A$ = A$ + | var term = new Terminal();|
A$ = A$ + | term.open(document.getElementById('terminal'));|
A$ = A$ + | term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')|
A$ = A$ + | </script>|
A$ = A$ + | </body>|
A$ = A$ + | </html>|
HTML A$
User avatar
cicciocb
Site Admin
Posts: 1900
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 407 times
Been thanked: 1271 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

In fact, to make it work, you must :
1 - Upload the xterm.js and xterm.css locally on the module as the internal web server requires these files inside
Eventually the files can be compressed in gzip format to reduce their size (and the loading time)
2 - Split your program in 2 parts separating the javascript part from the html one

Use the following files, just to support this example
xterm.js.gz
xterm.css.gz
Simply upload them using the file manager
image.png
Then use this program

Code: [Local Link Removed for Guests]

cls

'loads the javascript
jsexternal "/xterm.js"
pause 2000 ' a little pause for loading the javascript

A$ = ||
A$ = A$ + |<!doctype html>|
A$ = A$ + | <html>|
A$ = A$ + | <head>|
A$ = A$ + | <link rel="stylesheet" href="/xterm.css" />| 
A$ = A$ + | </head>|
A$ = A$ + | <body>|
A$ = A$ + | <H1> Wifi Xterm Test </H1>|
A$ = A$ + | <div id="terminal"></div>|
A$ = A$ + | </body>|
A$ = A$ + | </html>|
html a$

a$ = ||
A$ = A$ + | term = new Terminal();|
A$ = A$ + | term.open(document.getElementById('terminal'));|
A$ = A$ + | term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');|

A$ = A$ + | term.onData(async function(e) { |
A$ = A$ + |   console.log("onData:", e); |
A$ = A$ + |   connection.send("cmd:setvarxd$="+ e); | ' send what received in the variable d$
A$ = A$ + | });|
jscript a$

OnHtmlChange Jump1  'will jump to Jump1 when a variable changes on the web page
onSerial serialIn ' will jump to serialIn when data received on the serial port
Wait         'pause waiting for the event

Jump1:
Print d$; 'print the characters received in the serial port
Return

serialIn:
jscall |term.write('| + serial.input$ + |');| 'send what received in the web terminal
return
This is the result
image.png
EDIT :
I did a very fast implementation using a little bit of Javascript that enables the transfer of the characters between the serial port and the web terminal; It works on both directions and it could be a good baseline for your project.

However, there is a specific project using the ESP8266 named ESP-LINK that probably fits your needs.


P.S.
just for info, I did this example using the web simulator :D
You do not have the required permissions to view the files attached to this post.
yama
Posts: 27
Joined: Fri Sep 16, 2022 1:42 pm
Been thanked: 3 times

Re: New serial terminal WEB to test

Post by yama »

Thank you for your detailed advice. I've seen the light of success. I've tried it.
I can recieve character via serial ,I can see it in the terminal window.
However, a message like a picture appeared when entering characters.

A$ = A$ + | connection.send("cmd:setvarxd$="+ e); | ' send what received in the variable d$
        ^  maybe in this command
I can not send character via serial port.
WiFiterm.jpg


I look forward to further advice.
You do not have the required permissions to view the files attached to this post.
User avatar
cicciocb
Site Admin
Posts: 1900
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 407 times
Been thanked: 1271 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

Are you using a japanese keyboard?
yama
Posts: 27
Joined: Fri Sep 16, 2022 1:42 pm
Been thanked: 3 times

Re: New serial terminal WEB to test

Post by yama »

yes,
yama
Posts: 27
Joined: Fri Sep 16, 2022 1:42 pm
Been thanked: 3 times

Re: New serial terminal WEB to test

Post by yama »

"I can not send character via serial port."
<correction>
"I can not send character via serial TX-line(ESP8266 UART) ."
Post Reply