index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BLE</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-light_blue.min.css">
    <link rel="stylesheet" href="styles.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

    <!-- <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-light_blue.min.css" /> -->
  </head>

  <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base" style="margin: 10px;">


    <div class="mdl-layout__tab-bar-container">
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark mdl-js-ripple-effect--ignore-events">
        <span class="mdl-layout__tab is-active" style="color: white; text-transform: none;">Web Bluetooth with Noble</span>
      </div>
    </div>


    <div class="mdl-card mdl-shadow--2dp roundbox" style="padding: 8px; margin: auto; margin-top: 10px;">
      This page use a bundled version of the noble API with WebBluetooth to connect and use Bluetooth Low Energy devices.<br>
      <a href="https://github.com/sandeepmistry/noble" target="blank">Noble on github</a><br>
      Data sent and recieved to characteristics is the form of comma separated bytes in values of 0-255
      <br><br>
      You can scan services with a comma separated list such as: heart_rate, battery_service, a000

      <div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="serviceInput">
          <label class="mdl-textfield__label" for="service">service</label>
        </div>

        <button class="mybutton mdl-button mdl-button--raised mdl-button--colored" id="scanBtn">
          scan
        </button>
      <div>

    </div>


    <div id="services"></div>
    <div id="output"></div>
    <div id="errorOutput" style="color: red;"></div>
    <script src="main.bundle.js"></script>
  </body>
</html>