
Bangle.js Development
You may also be interested in the Bangle.js 1 or Bangle.js 2 Hardware reference pages.
Don't have a watch?
You can work along using the Bangle.js online Emulator however you won't get access to the sensors, Bluetooth, speaker, or vibration motor!
If your watch isn't connectable by Bluetooth:
Bangle.js 1
- When you're at the clock screen on Bangle.js, press the middle button (BTN2)
- Use the bottom button (BTN3) to scroll down until you get to Settings
- Press BTN2 to select
- Either: Ensure
BLE
andProgrammable
areOn
to enable programming permanently, and then chooseBack
to exit settings - Or: Scroll down to
Make Connectable
, select it, and leave Bangle.js displaying on theConnectable
screen
Bangle.js 2
- When you're at the clock screen on Bangle.js, press the button
- Scroll down until you get to Settings and then tap on it
- Now you drag your finger up and down to change the selected menu item and tap to select.
- Either: Ensure
BLE
andProgrammable
areOn
to enable programming permanently, and then chooseBack
to exit settings - Or: Scroll down to
Make Connectable
, select it, and leave Bangle.js displaying on theConnectable
screen
Then...
- Head to https://espruino.com/ide in Chrome
- Click
Connect
up the top left of the screen - Click
Web Bluetooth
(if you don't see 'Web Bluetooth' check out the Bluetooth Getting Started Guide) - Search for your Bangle.js (based on the last 4 digits) in the list of devices
You should hopefully be connected now! If not, take a look at http://www.espruino.com/Quick+Start+BLE#banglejs
If you just want to get started and have an Android phone, you can use that too! If you don't have an external keyboard then you might want to install the free 'Hackers Keyboard' app to get access to arrow keys via touchscreen.
Note: If you've used Espruino before, make sure the Upload button (middle of the screen) shows RAM
underneath it. Otherwise by writing to Flash
you can remove the watch's built-in menu (you can just re-add it by removing and installing bootloader
using https://banglejs.com/apps)
Once connected
The Web IDE is made up out of two parts - there's the black REPL on the left, and a white editor on the right.
The REPL on the left is a direct connection to the watch and executes anything you type immediately - but be careful, it uses bracket counting to detect when to execute, so:
if (true) {
Bangle.buzz();
}
will make your watch vibrate, but:
if (true)
Bangle.
buzz();
With Enter
rather than Alt-Enter
will run three commands, the last two of which will cause an error. If you write your code in a K&R style then you're unlikely to hit issues - and if you write your code on the right hand side of the IDE, the line endings are handled automatically.
When writing on the right, you can click the button in the middle of the IDE to reset Bangle.js (temporarily!) and upload the code on the right hand side. However the initial code (that works on most Espruino devices!) will fail as there's no LED on Bangle.js.
You can now try some commands:
First, let's (temporarily) reset the watch and get rid of the connectable window:
Type:
reset();
on the left-hand side of the IDE. The Bangle.js
logo will be displayed.
Bangle.buzz();
Will make Bangle.js vibrate, and:
Bangle.beep();
Will make it beep.
Note: The majority of Bangle.js devices do not contain a piezo speaker, but instead use the vibration motor for sound.
You'll notice the functions return promises, so you can chain them:
Bangle.buzz().then(() => {
Bangle.beep();
});
You might want to clear the screen, in which case you can use g.clear()
. A
full list of Graphics commands is at: https://espruino.com/Reference#Graphics
If you want to write a message on the screen, you can use E.showMessage
:
E.showMessage("Hello","A Title")
In general, Bangle.js specific functions/events are in the Bangle
object,
and Espruino-specific functions are in the E
object
But the screen itself contains a VT100 terminal, so you can use Terminal.print
and Terminal.println
if you just want to log data:
Terminal.println("Hello World")
But these will scroll the screen up, which may make currently running apps look a bit strange!
It's worth noting that when you're disconnected from Bluetooth, Bangle.js will
write any messages from console.log
(as well as any Exceptions) to the display
if Debug info
is set to Show
in Settings
. This can be a great way of
seeing if your app is failing in unexpected ways when in every day use.
Want to react to user input on the buttons? You can query the button state.
- Bangle.js 1 - BTN1/BTN is the top button, BTN2 is the middle, BTN3 is the bottom
- Bangle.js 2 - BTN1 or BTN refers to the only button
BTN1.read();
Will output true
or false
depending on the state of the button, but often we don't want to poll because running
code all the time would use battery.
Instead, you can use setWatch
. This sets up the hardware to watch for a button press:
setWatch(() => {
E.showMessage("You\npressed\nthe button!");
setTimeout(()=>g.clear(), 1000);
}, BTN1);
At this point the code's getting longer, so you might want to copy this to the right-hand side of the IDE and then use the Upload button
By default, this will only happpen once, but you can add {repeat:true}
to the end:
setWatch(() => {
Bangle.buzz();
E.showMessage("You\npressed\nthe middle\nbutton!");
setTimeout(()=>g.clear(), 1000);
}, BTN2, {repeat:true});
The default is to detect button press, but you can also add edge:"falling"
or
edge:"both"
if you want to detect when the button is released.
Using the Right-hand side of the IDE
The Right-hand side of the IDE is just a syntax-highlighted editor. To send the code you have written to Bangle.js you must click the upload button:
This preprocesses the code you wrote, loading and files you require
d, and
the uploads it to Bangle.js. The destination is written underneath, and can
be changed either by pressing the down arrow, or by going to Settings
and Communications
:
RAM
- you should normally try and use this - it writes nothing permanently to Bangle.js so is quick and safe to develop with.Flash
/Flash (always)
- DO NOT USE THIS ON BANGLE.JS because you will overwrite the existing Bangle.js bootloader with your own app (if you do, you can re-install thebootloader
app using https://banglejs.com/apps).Storage
- you can use this to select a file on Storage to write to. This is great for developing your own apps - see Bangle.js: First Application
Next Steps
You might want to check out:
- Bangle.js: First Application
- https://github.com/espruino/BangleApps/blob/master/README.md for detailed info on the format of custom apps
- https://github.com/espruino/BangleApps/tree/master/apps for all the source code for existing apps
- https://github.com/gfwilliams/workshop-nodeconfeu2019 (Step 2 and later) of the Nodeconf workshop for Bangle.js 1
Tutorials































This page is auto-generated from GitHub. If you see any mistakes or have suggestions, please let us know.