How to use Puck.js if your PC/Mac doesn't work with Web Bluetooth (Web IDE Relay)

I know some of you have had trouble with the instructions in the Quick Start so there's now another option.

Web IDE Relay

This allows you to use a phone or tablet (or any device that has Web Bluetooth) to access your Puck.js from a PC.

Use as follows:

• Open https://www.espruino.com/ide/relay on your phone. If you're using iOS you'll need to do this via the WebBLE web browser as Safari doesn't support Web Bluetooth.
  
• Click the connect icon in the top left
  
• Choose your Puck.js device
  
• Now open https://www.espruino.com/ide on your PC
  
• Copy the 8 digit 'relay key' that was displayed on your phone into Communications -> Relay Key in your Web IDE's settings on the PC
  
• Now click the connect icon on the PC
  
• Choose Web IDE Relay
  
  

And enjoy programming Puck.js via your phone! Just make sure it doesn't go to sleep or you might lose your Bluetooth connection :)

Hope that helps some of you out. It's still a bit 'beta', so if you have any suggestions/tweaks it'd be good to know.

https://www.youtube.com/watch?v=H8L8ft830hI

It's also worth noting that the phone and PC don't have to be in the same place. You could be on the other side of the world programming Puck.js!

thanks @Gordon, nice work!

I've tried with an ipad running /ide/relay and windows 10/Chrome for the web ide

It took about 3 cycles to get it to work - however I did end up with a flashing red led!

Then on ipad I get DISCONNECTED at the bottom.

so you reconnect, and then need to enter the key again on the PC...

Some feedback

1. Please ask to update the bookmarks on WEBBLE to include https://www.espruino.com/ide/relay
   
2. It doesn't look you can increase the font size on the relay key - I found it a bit hard to read
   
3. There is no indication on the PC ide that the other end has disconnected? update - this did disconnect after sometime - quite a bit after the disconnect on the ipad
   

4. Would it be possible to re-connect silently and retain the key so that it not needed to be re-entered?
   Perhaps the key could be picked up both ends from the url?
   https://www.espruino.com/ide/relay#rcm04j5p
   https://www.espruino.com/ide#rcm04j5p
   Then it would not need to be typed into the settings?
   I realise there could be security implications here - just brain dumping
   5.
   if you don't update the key, and connect again on the PC - it says connected, but it isn't

   Device found (connectionId=undefined)
   [success] Connected to port Web IDE Relay
   >>> Connected to port Web IDE Relay
   

So there seems to be no indication that the expired key or wrong key is used?

Odd about the repeated connects and disconnect - was the Puck nearby, or could it have had bad signal?

I'll wait until it's a bit more stable before adding it to the bookmarks. It's trivial to add /relay to the end of the IDE URL and add it as a new bookmark though.

It doesn't look you can increase the font size on the relay key - I found it a bit hard to read

Hopefully I've just fixed that.

There is no indication on the PC ide that the other end has disconnected?

Good point - I thought it did, but looking at the code it doesn't.

Would it be possible to re-connect silently and retain the key

Reconnecting silently might be tricky with Web Bluetooth (as I guess it's entirely likely it would need user input?). The key should be retained - it is on Android I believe (it's stored in a cookie) but I wonder if WebBLE doesn't preserve cookies?

So there seems to be no indication that the expired key or wrong key is used?

Yes, I wasn't sure about that - I don't want people to be able to brute-force it to find other people's keys so for the moment I'm just leaving it with no response.

If anyone does want to hack around on this, the code itself is here:

relay: https://github.com/espruino/EspruinoWebIDE/blob/gh-pages/relay/relay.js
ide comms: https://github.com/espruino/EspruinoTools/blob/c57e60e94b6b324cbf1bd495f2365880a805f2c3/core/serial_websocket.js

It's not too difficult.

Having the key being able to be specified in the URL could work well - realistically it's only those on iOS that'd need it... Maybe at some point there could even be a QR code in the main IDE that generated a scannable link :)

Although i don't need it, this kind of efforts are always worth a donation. $5 sent.
p.s. it's easy, just hit http://www.espruino.com/Donate .

@Gordon Why not something like this below

1 Attachment

Thanks!

:) that's a nice idea too! I don't have control of the forum itself at the moment, but stuff like that could be a good reason to start running the forum myself.

And some "like" emoticons, so I don't make too much noise with saying "great idea"

I was really interested in this option, tried it both combined with my LG G4 and the WebBLE app on my iPad, but was unable to get beyond the "connecting" dialog on my laptop.
Don't really know where to look for debug info though.

The log on my laptop looks "normal", no errors, also no connection.

1 Attachment

Log on my iPad, which also keeps on disconnecting while the puck is right beside it.

1 Attachment

I don't see any errors... Are you connecting on your laptop after connecting on the iPad - and are you absolutely sure the code you entered is the same on both devices?

The IDE won't show you errors if the code is wrong - while it's annoying I decided not to report errors for incorrect codes to stop people brute-forcing every possible code to try and take control of other people's Pucks.

Hi Gordon,
Can the Relay Key feature also be available on the Chrome extension and also the cli too?

Good question :)

I'm not sure the chrome extension has been updated with it, but when I next do an update (or you manually install the version from GitHub) then yes, it'll work.

With the command line tools I'm afraid it won't, because it's expecting to use the Web Browser's Websocket implementation which won't exist in Node.js. I guess with a bit of work it could do (especially if there's a Browser-compatible websocket implementation for Node.js?)

Not really, am using the latest version and it doesn't have the Relay feature.

Am not sure if there is a module for that, maybe i check it out.

That's odd then. Out of interest - is there a reason you need to use the Chrome app? With the relay you shouldn't need it to access hardware directly

Hi,
I have a problem that is no relay key input field on the web IDE. Does it normal? I need help... Thanks all who help me!

1 Attachment

And you're accessing it via https://www.espruino.com/ide/ ? The Chrome Web App version of the IDE won't have a relay option in it.

Please could you go to the developer console and paste up the messages displayed in it?

Hi Gordon,
Yes, I'm accessing it via the URL.

Following is the console log when the web IDE has been load,

serial_audio: Audio Sample rate : 48000
serial_audio: Audio Serial Baud 9600 Bit time 5
No chrome.sockets - serial_socket disabled
Running from github/espruino.com - WebSocket support disabled
No chrome.storage API - disabling Offline mode
Initialising SettingsConsole
Initialising Utils
Initialising Config
Initialising Notifications
Initialising Status
Initialising App
Initialising File
Initialising Code
Initialising Serial

• Initialising Serial Audio
  
• Initialising Serial Web Bluetooth
  Initialising Terminal
  Initialising CodeWriter
  Initialising Modules
  Initialising Env
  Initialising Flasher
  Initialising EditorBlockly
  Initialising EditorJavaScript
  Initialising Send
  Initialising MenuPortSelector
  Initialising MenuSettings
  Initialising MenuFlasher
  Initialising SettingsAbout
  Initialising SettingsFlasher
  Initialising BoardJSON
  Initialising VersionChecker
  Initialising Compiler
  Initialising Assembler
  Initialising GetGitHub
  Initialising SetTime
  Initialising Unicode
  Initialising Minify
  Initialising SaveOnSend
  Initialising Tutorial
  Initialising Webcam
  Initialising FontSize
  Initialising UiMode
  Initialising URLHandler
  Initialising CodeLink
  Initialising Project
  Initialising Testing
  Initialising Notification_Sound
  Initialising Tern
  Initialising Debugger
  Initialising Tour
  Initialising HelpLinks
  Initialising Arrows
  No code in storage.
  Handling URL "https://www.espruino.com/ide/"
  Service worker active
  
  

By the way, my OS is win7 64bit with Google Chrome version 59.0.3071.115.
Thank you for helping!

Hi Gordon,
Which version of IDE will have the relay option?

@user80065

I too am unable to locate the relay option under Communications using the Web+IDE version https://www.espruino.com/ide/

Try https://www.espruino.com/ide/relay/
under settings, COMMUNICATIONS it is.

Hi Frida,
Thank you for your helping.
I think the "relay" web is running on the relay phone, but I'm trying the web of PC side now.
I can't find any inputing field for building the communication between phone and PC side.
Is my understanding about Espruino wrong?

@user80065,

I agree with you that in step #1 for the PC side that it is written
https://www.espruino.com/ide/
and that the 'Relay Key' edit field is not present there.

Maybe @Frida is trying to imply that https://www.espruino.com/ide/relay/ is used on both ends perhaps, and that step #1 has 'improved' since five months ago?

Such that the relay link-app is used to pair the two, then use https://www.espruino.com/ide/ to access perhaps?

The input field is under Settings >> Communications>>Relay Key:: (Last Entry)
as Frida indicates.

My outbound BLE device can't connect, so I am unable to test this idea on PC side.

@Robin - if you don't have an Android/iOS device that can act as the other end of the Relay (which you said you didn't in other posts?) then I'm afraid the Relay option won't be much use to you.

The Relay Key option should be here https://www.espruino.com/ide/

However, it looks like I'd made a recent IDE change which has disabled it - and the cached version on my PC was still showing it as working. I have since tweaked it so it should be working.

Go to https://www.espruino.com/ide/ and Ctrl-click the reload button - that should force a full reload of the IDE, and after that you should hopefully see the Relay Key option.

1 Attachment