chatmd2/bangle.html at main · TheOkster/chatmd2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
</html>
<head>
  <title>Bangle.js Heartrate streaming graph</title>
</head>
<body>
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script src="https://www.puck-js.com/puck.js"></script>
  <div id="chartContainer" style="height: 370px; width:100%;"></div>
  <button id="btnConnect">Connect</button>
</body>
</html>
<script>
  // Code to upload to Bangle.js
  var BANGLE_CODE = `
  Bangle.setHRMPower(1)
  Bangle.on('HRM',function(hrm) {
    var d = [
      "H",
      hrm.bpm,
      hrm.confidence
      ];
    Bluetooth.println(d.join(","));
  })
  `;

  // When we click the connect button...
  var connection;
  document.getElementById("btnConnect").addEventListener("click", function() {
    // disconnect if connected already
    if (connection) {
      connection.close();
      connection = undefined;
    }
    // Connect
    Puck.connect(function(c) {
      if (!c) {
        alert("Couldn't connect!");
        return;
      }
      connection = c;
      // Handle the data we get back, and call 'onLine'
      // whenever we get a line
      var buf = "";
      connection.on("data", function(d) {
        buf += d;
        var l = buf.split("\n");
        buf = l.pop();
        l.forEach(onLine);
      });
      // First, reset the Bangle
      connection.write("reset();\n", function() {
        // Wait for it to reset itself
        setTimeout(function() {
          // Now upload our code to it
          connection.write("\x03\x10if(1){"+BANGLE_CODE+"}\n",
            function() { console.log("Ready..."); });
        }, 1500);
      });
    });
  });

  //Chart Setup
  var dps = []; // dataPoints
  var chart = new CanvasJS.Chart("chartContainer", {
    title :{
      text: "Bangle.js HeartRate Monitoring Over Time"
    },
    axisY:{
      title: "Heart Rate",
    },
    axisX:{
      title: "Time",
      valueFormatString: "HH:mm:ss",
    },
    data: [{
      type: "spline",
      indexLabel: "{y}",
      dataPoints: dps
    }]
  });

  chart.render();
  var dataLength = 30; // number of dataPoints visible at any point

  var updateChart = function (hr) {
    if (dps.length <= dataLength) {
      labelVal = new Date().toISOString();
      xVal = new Date;
      yVal = hr;
      dps.push({
        x: xVal,
        y: yVal
      });
    }

    if (dps.length > dataLength) {
      dps.shift();
    }

    chart.render();
  };

  // When we get a line of data, check it and if it's
  // from the heart rate monitor, update it
  function onLine(line) {
    console.log("RECEIVED:"+line);
    var d = line.split(",");
    if (d.length==3 && d[0]=="H") {
      // we have an HR monitor reading
      var hr_data = {
        hr : parseInt(d[1]),
        conf : parseInt(d[2]),
      };
      updateChart(hr_data.hr);
    }
  }

</script>
</html>