A Web Bluetooth demo of DFRobot Vortex dancing.

<!DOCTYPE html>
<!--
A Web Bluetooth (draft w3c spec) demo of DFRobot Vortex dancing, by Wayne Keenan 2016.

As of writing you need to use Chrome 49+ on an ChromeOS or Android device.
You also need to enable this setting in Chrome: chrome://flags/#enable-web-bluetooth

For more info please see; http://www.thebubbleworks.com/

-->

<html>

<head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="https://polygit.org/components/paper-toggle-button/paper-toggle-button.html">
    <link rel="import" href="https://polygit.org/components/platinum-bluetooth/platinum-bluetooth-elements.html">
</head>

<body unresolved>
  <h1>Dancing Vortex</h1>

  <template is="dom-bind" id="my-app">
    <paper-toggle-button id="connect-toggle">Connect</paper-toggle-button>
    <paper-toggle-button id="dance-toggle">Dancing!</paper-toggle-button>
  </template>

  <!-- This is a Polymer component that wraps the Web Bluetooth API.
       see: https://elements.polymer-project.org/elements/platinum-bluetooth
  -->

    <platinum-bluetooth-device services-filter='["0000dfb0-0000-1000-8000-00805f9b34fb"]' id="vortex-device">
      <platinum-bluetooth-service service="0000dfb0-0000-1000-8000-00805f9b34fb">
        <platinum-bluetooth-characteristic characteristic="0000dfb1-0000-1000-8000-00805f9b34fb">
        </platinum-bluetooth-characteristic>
      </platinum-bluetooth-service>
    </platinum-bluetooth-device>
    
    
  <script>
    'use strict';

    // Wait until the DOM is ready
    document.addEventListener('WebComponentsReady', function(e) {

      // Check the Web Bluetooth API is present
      if (navigator.bluetooth == undefined) {
        alert("The Web Bluetooth API is missing. Please enable it at chrome://flags/#enable-web-bluetooth and try again.");
      }


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

      // Lsiten for connect toggle button events
      document.getElementById("connect-toggle").addEventListener('click', function() {
        console.log("Connecting" + this.checked);

        if (this.checked) {
          bluetoothDevice.request().then(function(device) {
            console.log("Connected to: " + device);
          }).catch(onError);
        } else {
          // TODO: disconnect
          console.log("Disconnecting");
        }
      });


      // Listen for dance toggle button events
      // The Vortex Protocol is better described here:
      // https://github.com/TheBubbleWorks/TheBubbleWorks_WebBluetooth_VortexDemo/blob/master/app/scripts/vortex.js
      document.getElementById("dance-toggle").addEventListener('click', function() {
        if (this.checked) {
          console.log("On the floor!");
          // Send the command to dance (pattern 1 of 5)
          bluetoothWriteCharacteristic.write(new Uint8Array( [0x40, 0x01]));
        } else {
          console.log("Off the floor");
          // Send the command to stop dancing
          bluetoothWriteCharacteristic.write(new Uint8Array([0x40, 0x00]));
        }
      });

      function onError(error) {
        console.log("ERROR: " + error);
      }
    });
  </script>
  
  <p>
    <a target="_blank" href="http://www.thebubbleworks.com/">The Bubble Works</a>
  </p>
</body>

</html>