npm-polymer-elements
Version:
Polymer Elements package for npm
176 lines (154 loc) • 7.39 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title><platinum-bluetooth> Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../marked-element/marked-element.html">
<link rel="import" href="../../paper-item/paper-item.html">
<link rel="import" href="../../paper-material/paper-material.html">
<link rel="import" href="../../paper-progress/paper-progress.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../platinum-bluetooth-device.html">
<link rel="import" href="../platinum-bluetooth-characteristic.html">
<style>
body {
background-color: #fafafa;
margin: 0;
padding: 24px;
}
paper-progress {
display: block;
padding-bottom: 20px;
padding-top: 20px;
width: 100%;
}
paper-button {
background-color: #0f9d58;
color: white;
margin-bottom: 20px;
}
#actions {
width: 100%;
}
#container {
background-color: white;
margin: auto;
max-width: 800px;
padding: 20px;
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="page-template">
<paper-material id="container" elevation="1">
<paper-item>
<paper-item-body>
<div>The <a href="https://github.com/WebBluetoothCG/web-bluetooth">Web Bluetooth API</a> discovers and communicates with devices over the Bluetooth 4 wireless standard using the <a href="https://developer.bluetooth.org/TechnologyOverview/Pages/GATT.aspx">Generic Attribute Profile (GATT)</a>. It is currently only partially implemented in Chrome OS behind the experimental flag <code>chrome://flags/#enable-web-bluetooth</code>.</div>
<br/>
<div>This demo illustrates the use of the Web Bluetooth API to retrieve battery information, body sensor location and reset energy expended from a nearby Bluetooth Device advertising Battery and Heart Rate information with Bluetooth Low Energy. You may want to try it with the BLE Peripheral Simulator App from the <a target="_blank" href="https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral">Google Play Store</a>.</div>
</paper-item-body>
</paper-item>
<paper-item>
<paper-item-body id="actions">
<paper-progress></paper-progress>
<paper-button id="get-battery-level" raised>Get Battery Level</paper-button>
<paper-button id="get-body-sensor-location" raised>Get Body Sensor Location</paper-button>
<paper-button id="reset-energy-expended" raised>Reset Energy Expended</paper-button>
</paper-item-body>
</paper-item>
<paper-item>
<paper-item-body>
<marked-element markdown="{{text}}"></marked-element>
</paper-item-body>
</paper-item>
</paper-material>
<platinum-bluetooth-device services-filter='["battery_service"]' id="battery-device">
<platinum-bluetooth-characteristic
service="battery_service"
characteristic="battery_level"
value={{batteryLevel}}>
</platinum-bluetooth-characteristic>
</platinum-bluetooth-device>
<platinum-bluetooth-device services-filter='["heart_rate"]' id="heart-rate-device">
<platinum-bluetooth-characteristic
service="heart_rate"
characteristic="body_sensor_location"
value={{bodySensorLocation}}>
</platinum-bluetooth-characteristic>
<platinum-bluetooth-characteristic
service="heart_rate"
characteristic="heart_rate_control_point">
</platinum-bluetooth-characteristic>
</platinum-bluetooth-device>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var template = document.getElementById('page-template');
var batteryDevice = document.getElementById('battery-device');
var batteryLevel = batteryDevice.querySelector('[characteristic=battery_level]');
var heartRateDevice = document.getElementById('heart-rate-device');
var bodySensorLocation = heartRateDevice.querySelector('[characteristic=body_sensor_location]');
var heartRateControlPoint = heartRateDevice.querySelector('[characteristic=heart_rate_control_point]');
var getBatteryLevelButton = document.getElementById('get-battery-level');
var getBodySensorLocationButton = document.getElementById('get-body-sensor-location');
var resetEnergyExpendedButton = document.getElementById('reset-energy-expended');
var progressBar = document.querySelector('paper-progress');
var buttons = document.querySelectorAll('paper-button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', buttonClick);
}
getBatteryLevelButton.addEventListener('click', function() {
batteryDevice.request().then(function(device) {
return batteryLevel.read().then(function(value) {
var data = new DataView(value);
template.text = device.name + ' Battery Level is ' + data.getUint8(0) + '%';
progressBar.indeterminate = false;
})
})
.catch(onError);
});
getBodySensorLocationButton.addEventListener('click', function() {
heartRateDevice.request().then(function(device) {
return bodySensorLocation.read().then(function(value) {
var data = new DataView(value);
var loc = ['other', 'chest', 'wrist', 'finger', 'hand', 'ear lobe', 'foot'];
template.text = device.name + ' Body sensor is placed on the ' + loc[data.getUint8(0)];
progressBar.indeterminate = false;
})
})
.catch(onError);
});
resetEnergyExpendedButton.addEventListener('click', function() {
heartRateDevice.request().then(function(device) {
// Writing 1 is the signal to reset energy expended.
var resetEnergyExpended = new Uint8Array([1]);
return heartRateControlPoint.write(resetEnergyExpended).then(function() {
template.text = device.name + ' Energy expended has been reset';
progressBar.indeterminate = false;
})
})
.catch(onError);
});
function buttonClick() {
progressBar.indeterminate = true;
template.text = '';
}
function onError(error) {
template.text = 'Argh! ' + error;
progressBar.indeterminate = false;
}
});
</script>
</body>
</html>