Web IDE Remote connections

Hi! I just wanted to show off a new feature and hopefully get some feedback.

We've had the Web IDE relay (to allow you to connect from your phone and run the IDE on your PC) for a while, but it's always been a bit rough around the edges (and used the espruino.com server).

I've come up with a new version that uses WebRTC, and even allows video streaming.

To try it...

• Go to https://espruino.github.io/EspruinoWebIDE/ (the development app loader)
  
• Click connect up the top left
  
• At the bottom left of the popup, click 🌐 Remote Connection
  
• Scan the QR code with your Android phone/tablet/etc
  
• On the phone, if you haven't connected with the Web IDE before, click top-left as before to 'remember' a device
  
• The device will now magically appear as something you can connect to in the IDE
  
• If you tap the webcam icon on the IDE in the phone then it'll enable the webcam and will stream the video to the background of the IDE on your PC - this could be really helpful if for example you're trying to help a friend out (or even just make a quick robot with a phone as the camera).
  
  

You should be able to keep connecting and reconnecting via the IDE, to any paired device, so for example if you left an old Android phone at home you can then connect to any of your Espruino devices from anywhere in the world.

You can also now use the Espruino CLI (https://www.npmjs.com/package/espruino) with the same connections using the --remote peer-id argument.

I'm also working on an option in the app loader to allow the Web IDE to be used from a phone running Gadgetbridge.

Just gave it a try, it seems to work like a charm! Great job, as always!
things will be lot easier for remote operations.

I scanned QR code, opened browser on phone, connected to some BLE espruino device. It immediately disconnected and prints that is device is now paired device list.

However on PC nothing happens. QR code dialog stays on. When I close the dialog with QR code and try to reconnect nothing magically appears there, same dialog as before with 3 choices of web bluetooth, web serial and emulator shows. I can open qr code dialog again and retry, guids stay the same but again nothing more happens when connecting to device on phone.

What is supposed to happen on PC with QR code dialog opened in "The device will now magically appear as something you can connect to in the IDE" step?

The browser on phone is Samsung Internet browser, so far it worked great with WebIDE.
After some time (phone went off?) I noticed Error lost connection to server in the phone espruino IDE otput.

You said "f you left an old Android phone at home you can then connect to any of your Espruino devices from anywhere in the world." - how that is supposed to work when the phone goes idle and turn screen off? Can I reconnect is such state?

@Jean-Philippe_Rey that's great! Thanks for trying it out.

I scanned QR code, opened browser on phone, connected to some BLE espruino device. It immediately disconnected and prints that is device is now paired device list.

Ok, that's good - that is what it's meant to do.

... but when you open the page on the phone, the IDE should immediately close that popup and open the 'port selector' dialog. So the fact it's not working is I guess because something somewhere isn't making the WebRTC connection.

Any chance of a screenshot of the Samsung browser right after you opened the webpage?

Right at the top, mine says:

Bridge's Peer ID: 6e48f242-d915-4ca4-9465-1b5609d13822
Connected to: c8331ebf-abcf-4286-9bac-b18dbb3053c1

But if yours doesn't say that for some reason WebRTC isn't working - if we could find out why (maybe plug your phone into the PC and do chrome://inspect/#devices on desktop) then at least we could put a warning in the remote window.

You said "if you left an old Android phone at home you can then connect to any of your Espruino devices from anywhere in the world." - how that is supposed to work when the phone goes idle and turn screen off? Can I reconnect is such state?

Probably not, but if you enable developer mode in Android settings (tap on the Android Version button 8 times or something like that?) then you get a developer menu, and in that menu there's an option Don't sleep while charging so you can just turn that on, leave it on charge and you're good.

Gadgetbridge connections

@HughB I think you requested this?

Connections from Gadgetbridge are now live! In Gadgetbridge, go to the App Loader (3x3 squares icon below the device name) then tap More... and Web IDE Remote.

You'll get a Peer ID shown, which you need to highlight, share, email to yourself, and then paste into the Settings page on https://espruino.github.io/EspruinoWebIDE/ - and voila - it'll work!

It's active as long as the App Loader page is still visible on the screen, but doing anything to share the Peer ID from Android will likely make the App Loader page disappear so you'll have to click through to start it and enable Remote Access again (the Peer ID should be the same each time).

Also...

The Web IDE now has multiple tabs (for different files). Hopefully this will work ok, but let me know (or even better help with a fix!) if there are issues.

Bridge's Peer ID: 6e48f242-d915-4ca4-9465-1b5609d13822
Connected to: c8331ebf-abcf-4286-9bac-b18dbb3053c1

Mine doesn't have this "Connected to:" line at all, no error message. Only the "Bridge's Peer ID" line is there.

But if yours doesn't say that for some reason WebRTC isn't working - if we could find out why (maybe plug your phone into the PC and do chrome://inspect/#devices on desktop) then at least we could put a warning in the remote window.

Here it is

1 Attachment

And after connecting to ble device I see this. At no point there is any error in console

1 Attachment

And this is the PC Chrome console when the QR code dialog is there

1 Attachment

Wow! That's a super cool feature to have.

Some interesting findings when I tried it just now...

1. When my phone is connected to the same LAN as the computer it does not show the remote bridge connection to the bangle.
   
2. Switching off WiFi on my phone and using the cell connection made it immediately show up in the web IDE on my computer.
   
3. It had a seemingly random disconnect on both the web IDE and web IDE bridge on my phone, but interestingly enough I was able to reconnect it right from the web IDE so that's nice. Edit: Now that I think about it, it's possible my phone locked and that's what caused the disconnect.
   
4. I could not get the gadgetbridge remote web IDE connection to work even after copying the peer ID from the app loader in gadgetbridge to the communication settings in the web IDE on the computer. I tried both LAN and WAN
   

2 Attachments

When my phone is connected to the same LAN as the computer it does not show the remote bridge connection to the bangle.

That's interesting because for me it didn't work when I was not on same wifi, just 4g data connection.

Hmm, so yours is the opposite? That is pretty strange.

Update: I just tested this again on a different network using my phone as the bridge and my steam deck as the remote computer on the same LAN (both were using WiFi this time) and it worked flawlessly! Last time I tested this my desktop was hardwired and the phone was on WiFi so maybe that has something to do with why it didn't work on my LAN at home.

It actually came in very handy just now because for some reason when using the web IDE on my phone it's extremely hard to edit and select text, and trying to connect my bangle to my steam deck directly didn't work with chromium or chrome. But... Using the phone as a bridge and the remote IDE on the steam deck worked perfectly! Amazing flexibility here. It even helped me find the bug in my clock that caused the launcher to stay stuck when trying to back out of it.

The extra tabs in the editor are a nice addition as well. Great work, Gordon!

One more thing... On the topic of using developer options in android to keep the screen on while charging - with LCD it's not much concern, but for OLED this will most certainly lead to burn in with extended use. That can be easily avoided by installing a Display Tester app that you can use to set the screen to fully black while the screen is on and unlocked.

Thanks - that is really strange - so it looks like the WebRTC connection just isn't going through for some reason. Could it be some kind of firewall setting on your computer that's blocking it?

Just tried it again and same behavior. With my phone acting as a bridge on WiFi it does not show in the remote IDE on my hardwired desktop. As soon as I switch off WiFi it shows up. Maybe something in my router, although it's got default settings which I would think should work?

I'm not sure what to suggest really - maybe you could try some Peer.js examples like https://peerjs.com/examples and see if they exhibit the same problems. I'd assumed that WebRTC was basically fine now and people wouldn't have any connection issues with it :(

https://peerjs.com/examples

Oh, that looks neat!

It's active as long as the App Loader page is still visible on the screen, but doing anything to share the Peer ID from Android will likely make the App Loader page disappear so you'll have to click through to start it and enable Remote Access again (the Peer ID should be the same each time).

Do we know of a way to make the app loader webview somehow persist within Gadgetbridge when it is not showing, so we could go back and forth more seamlessly? and also have the remote connection persist. Ideally (maybe there are some drawback to this) it would persist even if Gadgetbridge itself wasn't in the foreground on the android device either.

I'll search some and come back with an edit if I find something out.

It'd be great if you could work that out - I'm not sure how feasible it is though...

Just a note that I did make some changes to try and allow upload/download, and as part of that I realised I was ripping the webview down when I didn't need to: https://codeberg.org/gfwilliams/Gadgetbridge/commit/8e7bfa1e9115c69ee2d9fa0b86859f37681db925

So when that goes in, hopefully you'll be able to move away (for example with the share dialog) and still stay on the App Loader view.

So how's everyone feeling about the new IDE?

I've been using it for a week or two here and it seems ok, so I'm considering launching it on espruino.com/ide - anything that actually seems broken in it?

So when that goes in, hopefully you'll be able to move away (for example with the share dialog) and still stay on the App Loader view.

That would be very nice!

So how's everyone feeling about the new IDE?

I can't say I've been using it a lot yet. But the little testing of file-tabs and remote connections via app loader has worked for me. Both very welcome improvements :)

EDIT: I just changed the Peer ID in settings. The change didn't take effect until I reloaded the web page.

There is one thing I noticed that could be improved with regards to the tabs.

If you open a file from storage and click "Copy to Editor" a new tab with its name appears. However if the tab remains open and the file on the device has been updated and reloaded from storage again, it doesn't actually update the open tab with the new file data when clicking "Copy to Editor" again.

Also, ctrl+b doesn't seem to work for beautify anymore, and ctrl+` only switches from terminal to editor but not from editor to terminal.

Just a note that I did make some changes to try and allow upload/download, and as part of that I realised I was ripping the webview down when I didn't need to: https://codeberg.org/gfwilliams/Gadgetbr­idge/commit/8e7bfa1e9115c69ee2d9fa0b8685­9f37681db925

So when that goes in, hopefully you'll be able to move away (for example with the share dialog) and still stay on the App Loader view.

I just noticed that if I enter an App loader URL in device specific settings in Gadgetbridge, the App loader will be forwarded to be opened with my web browser (Firefox) instead. This happens if I enter either https://espruino.github.io/BangleApps or https://banglejs.com/apps. If I leave it blank it works as expected, opening the Official App Loader in a webview inside Gadgetbridge. I tried this with the beta version on the Google Play Store.

Edit:
I got it to work by adding "/android.html" at the end, as hinted in the setting description. I haven't had to do this before though.

@Ganblejs I'm also using the beta version of gadgetbridge and I have a custom app loader that opens up normally in the GB app. Do you have chrome installed as well on your phone? I'm thinking it's actually supposed to use chrome within gadgetbridge to display it.

I'm thinking it's actually supposed to use chrome within gadgetbridge to display it.

It uses webview (web engine component of android) inside GB. It's not exactly the same as opening it with an external browser even if it's based on webview (like chrome). Opening in an external browser uses the browser permissions (among other things like history etc.), like for example downloading files to storage.

I got it to work by adding "/android.html" at the end, as hinted in the setting description. I haven't had to do this before though.

That's odd - as far as I'm aware the android.html was always required?

I didn't have to add it previously. But no need to care about it now 🙂

Would it be simple to implenet use of the new remote connections between two instances of the App Loader as well?

My thinking is I could be connected to gadgetbridge on my phone and also use the app loader on my laptop - skipping the process of disconnecting from phone and connecting to pc and back.

Not very important of course but could be neat.