New serial terminal WEB to test

All that relates to the Annex Toolkit Utility
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 response so far.
This time, I added process to change the text color on xterm,
but I don't know how to describe it.

Code: [Local Link Removed for Guests]

// HTML color select form 
  	<label>TextColor</label><select name="colorSEL" onChange="fontColorChange()">
									<option value="red">red</option>
									<option value="green">green</option>
									<option value="yellow" selected>yellow</option>
									<option value="blue">blue</option>
									<option value="mazenta">mazenta</option>
									<option value="cyan">cyan</option>
									<option value="white">white</option>							
								</select>
  .......
  .......
  
// Script  Font color Change
function fontColorChange(){
    term.setOption("theme",'{foreground:' +event.target.value+ ' ,}' ); 
  	//                                     ^^^^^^^^^^^^^^^^^^^^~~ error
    term.refresh(0, term.rows - 1);
}
^~~~:error point

For exsample,I want this argument to be '{foreground:red,}' if 'red' value is selected.
Plase tell me how to write if you know.
User avatar
cicciocb
Site Admin
Posts: 1889
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 405 times
Been thanked: 1261 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

Hi,
Ii can be easily be done using this simple html code that you can add at your program.
IN fact the javascript is very versatile so you can enter the code directly in the HTML instead of creating a dedicated function.

Code: [Local Link Removed for Guests]

a$ = ||
a$ = a$ + |<label>TextColor</label><select name="colorSEL" onChange="term.setOption('theme', {foreground: this.value});">|
a$ = a$ + |<option value="red">red</option>|
a$ = a$ + |<option value="green">green</option>|
a$ = a$ + |<option value="yellow" selected>yellow</option>|
a$ = a$ + |<option value="blue">blue</option>|
a$ = a$ + |<option value="magenta">magenta</option>|
a$ = a$ + |<option value="cyan">cyan</option>|
a$ = a$ + |<option value="white">white</option>|
a$ = a$ + |</select>|
html a$


The "complete " program should be ....

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$ + |<label>TextColor</label><select name="colorSEL" onChange="term.setOption('theme', {foreground: this.value});">|
a$ = a$ + |<option value="red">red</option>|
a$ = a$ + |<option value="green">green</option>|
a$ = a$ + |<option value="yellow" selected>yellow</option>|
a$ = a$ + |<option value="blue">blue</option>|
a$ = a$ + |<option value="magenta">magenta</option>|
a$ = a$ + |<option value="cyan">cyan</option>|
a$ = a$ + |<option value="white">white</option>|
a$ = a$ + |</select>|
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); |
' this line is for the esp32
'A$ = A$ + |   connection.send("cmd:setvarxd$="+ e); | ' send what received in the variable d$
' this line is for the esp8266
'A$ = A$ + |   connection.send('cmd:immediatxd$="'+ e + '"'); | ' send what received in the variable d$
'A$ = A$ + "   connection.send('cmd:immediatxd$=|'+ e + '|'); " 
A$ = A$ + |   if (e.includes('"')) |
A$ = A$ + "      connection.send('cmd:immediatxd$=|'+ e + '|'); " ' send what received in the variable d$ using |
A$ = A$ + |   else|
A$ = A$ + |      connection.send('cmd:immediatxd$="'+ e + '"'); | ' send what received in the variable d$ using "
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:
d$ = replace$(d$, chr$(10), chr$(10) + chr$(13))
Print d$; 'print the characters received in the serial port
Return

serialIn:
k$ =  serial.input$
k$ = replace$(k$, chr$(10), "\n")
k$ = replace$(k$, chr$(13), "\r")
jscall |term.write('| + k$ + |');| 'send what received in the web terminal
return
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 information,

point) onChange=" "
<select name="colorSEL" onChange="term.setOption('theme', {foreground: this.value});">

I will try it later.
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 »

Thanks to you, I published it on the web below,

https://skyberryjam.jimdofree.com/web%E ... 83%ABterm/
sorry for japanese only

Additionally, I am creating Wifi version now on ESP8266 by 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 »

I copied and ran the above program. But it didn't work properly.
Xterm screen did not appear.
The debug screen is below.
If you know the reason, please let me know.
wifir_xterm_debug02.jpg
serialMonotor01.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
cicciocb
Site Admin
Posts: 1889
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 405 times
Been thanked: 1261 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

Did you uploaded the files .js and .css in the module?
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 information. It recovered by re-uploading the .js file on RDS
Sometimes when saving a source BAS file,
it stops in the middle and cannot be saved.
And it's file can become corrupted.
Do you know the cause ?
BeanieBots
Posts: 315
Joined: Tue Jun 21, 2022 2:17 pm
Location: South coast UK
Has thanked: 168 times
Been thanked: 102 times

Re: New serial terminal WEB to test

Post by BeanieBots »

I had something similar. Turned out to be the SD card at fault.
If you have a second unit to try and all goes well, then swap the SD cards and see if the problem follows the card.
If you are not using an SD card, then still worth trying another unit. Flash is very power supply sensitive, so double check that as well.
User avatar
cicciocb
Site Admin
Posts: 1889
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 405 times
Been thanked: 1261 times
Contact:

Re: New serial terminal WEB to test

Post by cicciocb »

[Local Link Removed for Guests] wrote: [Local Link Removed for Guests]Tue Oct 25, 2022 1:00 pm Thank you for your information. It recovered by re-uploading the .js file on RDS
Sometimes when saving a source BAS file,
it stops in the middle and cannot be saved.
And it's file can become corrupted.
Do you know the cause ?
This problem could also happens when there is not enough free space in the flash disk
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 the information.
Try using it for a while, paying attention to the power supply and the available space.
Post Reply