Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Home Start Get started Quick tour of Polymer Install Polymer 2.x Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community

We're particularly glad to share with you today the platinum bluetooth elements, a brand new set of Polymer platinum elements to discover and communicate with nearby Bluetooth devices. These new components are powered behind the scenes by the experimental Web Bluetooth API.

Even though the Web Bluetooth API specification is not finalized yet, we can already play with it as it's partially implemented in Chrome OS M45 behind an experimental flag. Go to chrome://flags/#enable-web-bluetooth, enable the highlighted flag, restart Chrome and you should be able to scan for and connect to nearby Bluetooth devices and read/write Bluetooth characteristics.

Demo

The official demo featuring platinum bluetooth elements will give you an idea of what you can do with it:

platinum bluetooth demo screenshot

Scan for Bluetooth Devices

It is worth mentioning again there that due to security requirements, Web Bluetooth will only work for HTTPS websites. We would recommend you set up HSTS for enforcing HTTPS on your website. If you don't control the server, check out our new <platinum-https-redirect> element.

The new <platinum-bluetooth-device> element allows you to easily discover nearby bluetooth devices. For instance, here's how to request a nearby bluetooth device advertising Battery service :

button.addEventListener('click', function() { document.querySelector('platinum-bluetooth-device').request() .then(function(device) { console.log(device.name); }) .catch(function(error) { console.error(error); }); });

Read a Bluetooth Characteristic

What we really want to do now is read a Bluetooth Characteristic. This can be simply achieved with a child element <platinum-bluetooth-characteristic>.

Once again, here's how to read battery level from a nearby bluetooth device advertising Battery service:

var bluetoothDevice = document.querySelector('platinum-bluetooth-device'); var batteryLevel = document.querySelector('platinum-bluetooth-characteristic');

button.addEventListener('click', function() { bluetoothDevice.request().then(function() { return batteryLevel.read().then(function(value) { var data = new DataView(value); console.log('Battery Level is ' + data.getUint8(0) + '%'); }); }) .catch(function(error) { }); });

It is also possible for <platinum-bluetooth-characteristic> to use data binding to bind to value in response to a read.

Write to a Bluetooth Characteristic

Here's an example of how to reset the energy expended on a nearby bluetooth device advertising Heart Rate service:

var bluetoothDevice = document.querySelector('platinum-bluetooth-device'); var heartRateCtrl = document.querySelector('platinum-bluetooth-characteristic');

button.addEventListener('click', function() { bluetoothDevice.request().then(function() { // Writing 1 is the signal to reset energy expended. var resetEnergyExpended = new Uint8Array([1]); return heartRateCtrl.write(resetEnergyExpended).then(function() { console.log('Energy expended has been reset'); }); }) .catch(function(error) { }); });

One of our favorite ways to write though is to use the auto-write property of the <platinum-bluetooth-characteristic> element. When set to true, changes in value will automatically drive characteristic writes.

As always, if you have any questions around how this works, please feel free to use the polymer tag on StackOverflow, or join us on the Polymer Slack Channel.