Bangle.js - an Open Source Smartwatch

Key Concepts

• Esprino: A JavaScript interpreter designed for microcontrollers with extremely limited resources.
• Microcontrollers: Small, specialized computers found in embedded systems, often with kilobytes of RAM.
• V8: Google's high-performance JavaScript engine, requiring significantly more RAM than Esprino.
• Web Bluetooth: A web API that allows web applications to communicate with Bluetooth devices.
• Bangaljs: A smartwatch-like device running Esprino, featuring an always-on color screen, sensors, and long battery life.
• UARTJS: A JavaScript library that simplifies the use of Web Bluetooth for serial communication.
• TensorFlow Lite for Microcontrollers: A version of TensorFlow designed to run machine learning models on microcontrollers.
• ARM Clyde AI: An ARM library providing optimized functions for AI libraries like TensorFlow on ARM microcontrollers.

Esprino: JavaScript Interpreter for Constrained Devices

The Esprino project is a JavaScript interpreter specifically engineered for microcontrollers, which are devices with very limited RAM, often in the double-digit kilobyte range. Esprino itself can operate with its execution stack using less than 8 kilobytes of RAM, a stark contrast to engines like V8 that require around 1 megabyte.

The primary motivation for using a JavaScript interpreter on such constrained devices is to overcome the "black box" nature of traditional embedded systems. Without a hardware debugger, diagnosing issues on these devices is extremely difficult, as they simply stop working without providing any diagnostic information. Problems can stem not only from software but also from misconfigured peripherals, incorrect component values, or faulty wiring within the larger circuit. Esprino provides a way to "get inside the circuit" by allowing users to execute commands, inspect variable states, and even modify code on the fly, significantly aiding in debugging and development.

Furthermore, for devices like wearables, having a stack trace available in case of a software error is invaluable for development and ensuring production reliability. Esprino offers a simplified, OS-like experience without the overhead of a full operating system and its associated RAM requirements. It also promotes low-power code development, as JavaScript developers are accustomed to event-based programming, allowing the interpreter to enter sleep modes when not actively in use.

Esprino is entirely open-source under the MIT license. While the interpreter is written in C, the applications and user interface elements are in JavaScript. To support its development, the project also designs and sells open-hardware products, primarily based on ARM Cortex-M chips like the NRF52 (Bluetooth) and STM32.

Bangaljs: A Wearable JavaScript Platform

The most popular products developed have been those closer to finished consumer devices. By integrating desirable features like a case, rechargeable battery, and display into a small form factor, the result resembles a watch. This is the Bangaljs, a smartwatch that runs the Esprino JavaScript interpreter.

Bangaljs features an always-on color screen, various sensors, and a battery life of up to four weeks. The entire platform, including the interpreter, apps, and user interface, is open-source and MIT licensed, with all code available on GitHub.

Web Bluetooth: Enabling Seamless Device Interaction

A significant challenge for developers is deploying and managing applications on these devices. Web Bluetooth emerges as a crucial tool, acting as a "savior" for developers. This API, available in Chromium-based browsers (excluding iOS), allows for safe and secure low-level access to Bluetooth devices.

Web Bluetooth simplifies development by eliminating the need for users to install any software. This enables the creation of tools that can send JavaScript code to the Bangaljs device over Bluetooth, allowing it to execute commands. For example, a simple web page can use Web Bluetooth to turn on the heart rate monitor, receive raw sensor data, send it over Bluetooth, and process it in real-time. This provides a way to view live data from the device directly within a web browser.

Web AI and Bangaljs Integration

The ability to receive live sensor data from wearable devices like Bangaljs opens up exciting possibilities for experimenting with Web AI. The presentation highlights how this integration was made possible with support from Google, who provided devices for attendees to experiment with.

Getting Started with Bangaljs

The presentation provides a step-by-step guide for users to get started with their Bangaljs devices:

1. Attaching Straps: Straps are attached by inserting a peg into a slot and securing it with a metal lever.
2. Powering On: Press and hold the single button on the device. A progress bar will appear; release the button upon completion. Releasing too early leads to the bootloader, and too late to the recovery menu.
3. Initial Setup: The device displays an introductory sequence that can be navigated by swiping or pressing the button.
4. QR Code Display: At the end of the intro, a QR code with "Bangaljs" underneath is displayed. This QR code is crucial for connecting to the device.
5. Accessing the QR Code: To return to the QR code screen from the clock face:
   • Press the button once to unlock (if locked).
   • Press again to access the launcher.
   • Tap the "Connect" button.
6. Bluetooth Advertising: To manage the connection process for a large number of devices (500 in this case), Bangaljs devices do not advertise their Bluetooth presence by default. They only advertise when displaying the QR code.
7. Connecting via QR Code: Scanning the QR code directs users to a special Web AI landing page pre-configured to connect to that specific device.
8. Device Identification: Devices advertise themselves with "Bangaljs" followed by four digits, representing the last four digits of their MAC address, which are also displayed on the watch screen.

Web AI Landing Page and Social Sharing

The landing page allows users to connect to their device. A simple Web AI application is demonstrated, which detects clapping and displays animations. A text box on this page allows users to enter a social URL (e.g., LinkedIn, X, personal webpage). Upon clicking "Set watch QR code," a QR code is generated that, when double-tapped on the watch, displays the user's social details. This provides a convenient way to share contact information at events.

App Management and Development

App Loader and GitHub Integration

Bangaljs supports around 600 applications, accessible via a website hosted on GitHub Pages. Users can connect to their device and upload multiple apps. A key feature is a GitHub icon under each app, which links directly to the app's code repository. Developers can fork these repositories, enable GitHub Pages, and create their own personal uploaders. They can also submit pull requests to contribute changes back to the main project.

Web IDE for Development

For app development, a Web IDE is available through the app loader. This IDE provides:

• REPL (Read-Eval-Print Loop): On the left, a REPL allows direct interaction with the device.
• Code Editor: On the right, an editor with code completion facilitates writing JavaScript code.
• Live Upload: Developers can use their preferred external editor. By clicking a download arrow below the "open" icon and selecting "watch and upload," any file saved in their editor will be automatically re-uploaded to the watch. This eliminates the need for installing any local software.

Web AI Development with Bangaljs

The primary focus of the presentation is on Web AI development using Bangaljs. A dedicated website is provided for this purpose, which can be accessed via a link or by taking a picture of a QR code.

Using UARTJS for Communication

The UARTJS library simplifies the use of Web Bluetooth for serial communication. Key steps for using it include:

1. Initial Connection: The first call to UART.write() attempts to connect to the device.
2. Resetting the Device: It is recommended to call reset() first to clear the device's RAM and ensure a clean state. Failing to do so can lead to multiple event handlers and duplicate data.
3. Sending Code: After a brief pause (e.g., half a second), UART.write() is used again to send the JavaScript code to be executed. It's advisable to test this code in the IDE first to ensure it produces the expected data and avoids errors.
4. Handling Data: The received data is then processed.

Recovering from Errors

If the watch display deviates from the clock face due to code execution:

• Return to Clock: Press and hold the button for approximately two seconds to reload the clock.
• Factory Reset: If the device is in a severely corrupted state (e.g., all JavaScript deleted), press and hold the button for an additional ten seconds to access the recovery menu and perform a factory reset. This will restore the device to its original state.

Advanced Features and Future Possibilities

Bangaljs includes TensorFlow Lite for Microcontrollers, but due to the 64 MHz processor, complex tasks like computer vision are not feasible. For more intensive AI work on ARM microcontrollers, the ARM Clyde AI library offers highly optimized functions for popular AI libraries like TensorFlow.

The presentation concludes by expressing excitement for the potential applications in areas such as games, fitness, and quantified self (e.g., tracking water intake). Attendees are encouraged to visit the demo table for questions and assistance. The speaker also acknowledges the support of the ARM ambassador program for covering travel expenses.