Banglejs connect and share information from/to website

Where's the information on how to receive and send info from a website to the banglejs and back?
I got connected via ble js by using the smartwatch name, but none of the services seem standard.

Any help?

Sun 2021.010.03

Bangle/Puck bi-directional Try It examples here:

https://www.espruino.com/Web%20Bluetooth
https://www.puck-js.com/go

A quite helpful list of links:

Commonly Referenced Links to Review and Bookmark

Thanks, will be checking this.
But can't relate to Banglejs directly. Maybe I need to check app loader js scripts to figure out how send commands

Well the page https://www.espruino.com/Web+Bluetooth directly describes what you asked for - "how to receive and send info from a website to the banglejs and back?" puck.js is the same as bangle.js in this regard. Or there is more generic page https://www.espruino.com/UART.js it is mostly the same but does not reference puck.js or try directly the demo https://www.espruino.com/try.php?page=UART.js&n=1 This allows you to connect to bangle.js and read internal temperature. The nonstandard service is named Nordic UART. Or maybe you mean WebIDE? https://www.espruino.com/ide/ there you connect and can directly write commands on left side.

Thank you. I wasn't aware it was the same as puck.

I was able to send text to the banglejs, but I'm still searching how I can send a bTN press to the website and be detected. The web should be polling the watch endlessly to detect a press?

Mon 2021.10.04

reply to post #5

'I wasn't aware it was the same as puck.'

I posted this same question three years ago, and as functionality demand was really low, it appears the time/cost involvement in competition with KickStarter campaigns for new devices, to re-write in a more generic sense that wouldn't get confused with existing names, mainly BT, BLE and the like, it has been acceptable to leave as is, as it does in fact work for all authentic boards with BT.   if it ain't broke, don't fix it   It was a bit un-nerving for me at the time to include 'puck.js' in a file to support the MDBT42Q for instance.

What is the Pixl and MDBT42Q equivalent to puck.js Puck.connect() for BLE

Mon 2021.10.04

reply to post #6

'how I can send a bTN press to the website and be detected'

As I'm not aware of your level of coding expertise, forgive if this is a bit too basic.

Beneath heading: Reading from Puck.js halfway down the page

https://www.espruino.com/Web%20Bluetooth

Puck.eval("BTN.read()",function(x) { console.log(x); })

Is the example that you are after. Now, that said, how it functions is a bit trickier. Having a foundation and background with the request/response model along with a solid understanding of callbacks and promises will be required, along with GATT familiarity.

https://www.espruino.com/Reference#t_BluetoothDevice

Here is my go to source along with a 'Try It' window:

https://www.w3schools.com/jsref/jsref_eval.asp
https://www.w3schools.com/js/js_callback.asp
https://www.w3schools.com/js/js_promise.asp

The easiest way is to take a peek at the source, follow the inclusion to the .js source

<script src="https://www.puck-js.com/puck.js" script>

and load that file in the browser from:    https://www.puck-js.com/puck.js

go the the end of that file and search backwards for:

eval : function(expr, cb) and study the relationships between the example send event and the code file receive/decode event.

If I were doing this and as a suggestion, create a new page and embed that code source into that page to make easier debug breakpoint setting and step through several times to see the sequence in action.

Remember this must be served from an https: server such as deployed at github.

Practical usage will be more beneficial in the long run, than trying to explain what to do.

Amazing, thanks! I have expertise on JS and Ajax but not on promises, however I'm good at "understanding" or may I call reverse engineering given a working script.

Looking at the Espruino reference I already suspected the 'function' command was the one to use, but I needed some advice.

In fact button detection is not really needed, only the ability to send a text to the website. The button press will happen at the watch and the js at the web can interpret it. I thought " Bluetooth.println(JSON.stringify({t:"info", msg:"Hello"})); " might work, but no.

I am testing at my own server as you pointed out. I appreciate the help.

working on it. Thought this was the solution but it's no so simple> UART.eval("BTN3.read()",function(t) { alert('pressed'); });

you can also set a watch via setWatch and produce some output when button click happens. Then from the website you probably have some handler when new data arrives from the UART. That way you would not need to poll.

check https://github.com/espruino/EspruinoWebTools/blob/master/uart.js#L36

I was trying :

setWatch(() => {
E.showMessage("You\npressed\nthe bottom\nbutton!");
Bluetooth.println(JSON.stringify({t:"info", msg:"You\npressed\nthe bottom\nbutton!"}));
setTimeout(()=>g.clear(), 5000);
}, BTN3);

But don't know how to set a handler on the website to catch the info.

I was able to receive words from button press, but I'm a bit confused as of why it works only one time for each button press. This is all the code in my banglejs app:

setWatch(() => {
E.showMessage("sent");
Bluetooth.println("sent");
setTimeout(()=>g.clear(), 5000);
}, BTN3);

setWatch(() => {
E.showMessage("hear");
Bluetooth.println("hear");
setTimeout(()=>g.clear(), 5000);
}, BTN1);

I lost the ability to send from the website to the watch now, as pressing the button that calls the function Puck.write('E.showMessage("HELLO","Message")'); instead of making the watch show it as before, it asks for a new ble connection.

I'm a bit confused as of why it works only one time for each button press.

The default for setWatch is to fire only once... If you do:

setWatch(() => {
/...
}, BTN3, {repeat:true});

You'll be sorted!

Ohh! I'm slowly progressing and kinda liking it.
I wonder if there's any developers to find in freelancer.com who know Banglejs!

I was using showmessage to send text to the watch but I'd appreciate a better way, to catch something sent from the phone on my app and display it. Thanks so much

Tue 2021.10.05

reply to post #12

'But don't know how to set a handler on the website to catch the info.'

One of my biggest hurdles was to keep separate which side of the fence I was on, along with un-learning the DOM event model within the browser for code on the micro side. One of the reasons I suggested starting a new monolithic page was to be able to track the DOM event model within the browser debugger. Keepng the events such as when setWatch() fires on the micro side mentally separate from the behavior within the browser DOM can at time have one in fits. My only suggestion is to just keep plugg'n away with small one line code change baby steps. Take and modify the first successful button press event that was captured successfully and build on that. It does get easier after each iteration and after a bit of thinking time.

After some effort has been put in, post some code and I'm sure others will provide suggestions.

Tue 2021.10.05

reply to post #13

'I lost the ability to send from the website to the watch now, as pressing the button that calls the function Puck.write('E.showMessage("HELLO","Messa­ge")'); instead of making the watch show it as before, it asks for a new ble connection.'

Another struggle was maintaining page state and still update sections within the page. It was likely that a page refresh or something of the sort caused the OTA connection to be lost. One quick verification check, did a new reloading the page and then interacting with BLE allow the re-pairing and re-connecting to occur?

The trick is to update a part of the page without refreshing the entire page. This keeps the DOM intact after establishing the BLE connection. I played with hidden divs and iframes along with global vs local and attempts with IIFE but never really settled on one technique.

Tue 2021.10.05

reply to post #15

'Ohh! I'm slowly progressing and kinda liking it.'

It does get addicting on those small successes regardless of the complexity, doesn't it!

Do you know if there's an app in the app loader that sends text from a web to the banglejs, so I can see the code example?

I solved everything and all I got left is to enlarge the font of the showmessage command. So I either change the way the info is sent to the watch... or I patch the firmware. Old hacky style

Ahh - one issue I see is you're not sending a newline character. So it's sending the command but it's like you're not pressing 'enter' to execute it.

Try: Puck.write('E.showMessage("HI","MESSAGE")\n');

good point! thanks

Everything works, thanks. To finish, I would like to find a way to change the font size of the showmessage, or a way to send text from the website to the banglejs app (then I can set the proper font there).

a way to send text from the website to the banglejs app

Are you running your own app? If so, just define a function called myFunction and then send the code to call that. For example in the Bangle.js:

function myFunction(txt) {
  g.clear(1);
  g.setFont("Vector",30).setFontAlign(0,0);
  g.drawString(txt, g.getWidth()/2, g.getHeight()/2);
}

On the web page:

Puck.write('myFunction("MESSAGE"­)\n');

That makes sense. But I'm testing and testing, and the message does not get displayed.
If I change the line for : Puck.write('E.showMessage("HI","MESSAGE")'); works...
What could be wrong?

My bad, a strange character got in the code. It works perfectly thanks!