Controlling puck.js over web BLE

Posted on Wed 13th, February 2019

• #1

Qbza

Hi, i am trying to control the puck.js from a web bluetooth website. I am not a programmer but i do understand some basics.
So far i have some basic code, grabbed from one of Gordons tutorials, what i am trying to achieve is to make the puck advertise a link and then of course disconnect it from the computer in order for it to advertise. if anyone knows a quick and easy solution please respond, would be really grateful.

Here is the code.

<html>
 <head>
 </head>
 <body>
  <script src="https://www.puck-js.com/puck.js"></script>
  
  
  <button onclick="Puck.write('LED1.set();\n');">On!</button>
  <button onclick="Puck.write('LED1.reset();\n');">Off!</button>
  
  <button onClick="Puck.write('NRF.setAdvertising([require("ble_eddystone").get("goo.gl/B3J0Oc")]);\n');">Advertise</button>
  
  <button onClick="Puck.disconnect();>disconnect device</button>
  
                   
 </body>
</html>

• #2

Jean-Philippe_Rey
IMO this doesn't work because at the time you call require("ble_eddystone"), the Puck is already left alone without any link to reach the module source. What you could try is to upload in the Puck a script like
```
var beacon=require("ble_eddystone");
save();
```
Then on your web page , the command should be <button onClick="Puck.write('NRF.setAdvertising([beacon.get("goo.gl/B3J0Oc")]);\n');">Advertise</button>.
This way, you ensure the module ble_eddystoneis already available on the Puck.

• #3

Qbza

Ok so i have uploaded the script into the puck and changed the buttons onClick function, now when i try to click the advertise button, it is giving me UncaughtSyntaxError.

I have also corrected the code on the disconnect device button as it has a little spelling mistake.

The code looks like this now:

<html>
 <head>
 </head>
 <body>
  <script src="https://www.puck-js.com/puck.js"></script>
  <button onclick="Puck.write('LED1.set();\n');">On!</button>
  <button onclick="Puck.write('LED1.reset();\n');">Off!</button>
  <button onClick="Puck.write('NRF.setAdvertising([beacon.get("goo.gl/test123")]);\n');">Advertise</button>
  
  <button onClick="Puck.disconnect()">Disconnect</button>
  
  
</body>
</html>

I have included the errors i am getting.

1 Attachment

• #4

Qbza

Ok a little update, i have managed to close the connection with Puck.close(); function.

• #5

Jean-Philippe_Rey

Dont' you have to escape the " on line 8?

<button onClick="Puck.write('NRF.setAdvertising([beacon.get(\"goo.gl/test123\")]);\n');">Advertise</button>

• #6

Qbza in reply to @Jean-Philippe_Rey
Well, from what i see the double quote has been closed, but maybe there is something im missing out?
```
<button onClick="Puck.write('NRF.setAdvertising([beacon.get("goo.gl/test123")]);\n');">Advertise</button>
```
It is telling me that it is a syntax error meaning that the link or entire function is wrongly typed?
• #7

Qbza
UPDATE

The puck is receiving the command when i use the console
```
Puck.write('NRF.setAdvertising([beacon.get("goo.gl/test123")]);\n');
```
But throws error as soon as i try do it using the button.
• #8

Gordon
The issue is that you have a quote inside a quote... Try:
```
<button onClick="Puck.write('NRF.setAdvertising([beacon.get(&quot;goo.gl/test123&quot;)]);\n');">Advertise</button>
```
Basically it's the web browser itself thinks the string onClick="... has ended when it sees the second quote.

There are other ways of doing it that are nicer, for instance you could use a third type of quotes! The templated String ones:
```
<button onClick="Puck.write('NRF.setAdvertising([beacon.get(`goo.gl/test123`)]);\n');">Advertise</button>
</body>
```
Or you could add a function inside a <script> tag and call that, because inside that function you won't have the quoting issues.

• #9

Qbza

Jean-Philippe_Rey and Gordon thank you very much for your help, it works the way i want it to now, i knew it was something with the quotes but couldn't figure it out.

For any one else that wants to achieve something similar, this is the code:

<html>
 <head>
 </head>
 <body>
  <script src="https://www.puck-js.com/puck.js"></script>
  <button onClick="Puck.write('LED1.set();\n');">On!</button>
  <button onClick="Puck.write('LED1.reset();\n');">Off!</button>
  <button onClick="Puck.write('NRF.setAdvertising([beacon.get(`goo.gl/test123`)]);\n');">Advertise</button>
  
  <button onClick="Puck.close()">Disconnect</button>
 
</body>
</html>

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Controlling puck.js over web BLE

About