Banglejs connect and share information from/to website #2913
Replies: 24 comments
-
Posted at 2021-10-03 by Robin Sun 2021.010.03 Bangle/Puck bi-directional Try It examples here:
A quite helpful list of links: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-03 by mg Thanks, will be checking this. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-03 by @fanoush 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. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-03 by mg Thank you. I wasn't aware it was the same as puck. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-04 by mg 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? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by Robin Mon 2021.10.04 reply to post #5
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.
|
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by Robin Mon 2021.10.04 reply to post #6
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
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. Here is my go to source along with a 'Try It' window:
The easiest way is to take a peek at the source, follow the inclusion to the .js source
go the the end of that file and search backwards for:
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. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by mg 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. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by mg working on it. Thought this was the solution but it's no so simple> UART.eval("BTN3.read()",function(t) { alert('pressed'); }); |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by @fanoush 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 |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by mg I was trying : setWatch(() => { But don't know how to set a handler on the website to catch the info. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by mg 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(() => { setWatch(() => { 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. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by @gfwilliams
The default for
You'll be sorted! |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-05 by mg Ohh! I'm slowly progressing and kinda liking it. 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 |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by Robin Tue 2021.10.05 reply to post #12
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. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by Robin Tue 2021.10.05 reply to post #13
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. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by Robin Tue 2021.10.05 reply to post #15
It does get addicting on those small successes regardless of the complexity, doesn't it! |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by mg 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 |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by @gfwilliams 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: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by mg good point! thanks |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-06 by mg 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). |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-07 by @gfwilliams
Are you running your own app? If so, just define a function called
On the web page:
|
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-07 by mg That makes sense. But I'm testing and testing, and the message does not get displayed. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-07 by mg My bad, a strange character got in the code. It works perfectly thanks! |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-03 by mg
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?
Beta Was this translation helpful? Give feedback.
All reactions