sbrichardson · May 23, 2025 09:52 · May 23, 2021 · May 23, 2021 · May 23, 2021 · May 23, 2021
diff --git a/polar.js b/polar.js
@@ -68,7 +68,7 @@ function setupConsoleGraphExample(height, width) {
   canvas.height = height
   canvas.width = width
   context.fillStyle = '#fff'
-  window.console.graph = (data) => {
+  window.console.graph = data => {
     const n = data.length
     const units = Math.floor(width / n)
     width = units * n
@@ -81,4 +81,4 @@ function setupConsoleGraphExample(height, width) {
        background: url("${canvas.toDataURL()}"), -webkit-linear-gradient(#eee, #888);`,
     )
   }
-}
+}
diff --git a/polar.js b/polar.js
@@ -52,11 +52,11 @@ connect({ onChange: printHeartRate }).catch(console.error)
 function printHeartRate(event) {
   const heartRate = event.target.value.getInt8(1)
   const prev = hrData[hrData.length - 1]
-  console.clear()
   hrData[hrData.length] = heartRate
   hrData = hrData.slice(-200)
   let arrow = ''
   if (heartRate !== prev) arrow = heartRate > prev ? '⬆' : '⬇'
+  console.clear()
   console.graph(hrData)
   console.log(`%c\n💚 ${heartRate} ${arrow}`, 'font-size: 24px;', '\n\n(To disconnect, refresh or close tab)\n\n')
 }
@@ -68,7 +68,7 @@ function setupConsoleGraphExample(height, width) {
   canvas.height = height
   canvas.width = width
   context.fillStyle = '#fff'
-  window.console.graph = data => {
+  window.console.graph = (data) => {
     const n = data.length
     const units = Math.floor(width / n)
     width = units * n
@@ -77,10 +77,8 @@ function setupConsoleGraphExample(height, width) {
       context.fillRect(i * units, 0, units, 100 - (data[i] / 2))
     }
     console.log('%c ',
-     `font-size: 0;
-      padding-left: ${width}px;
-      padding-bottom: ${height}px;
-      background: url("${canvas.toDataURL()}"), -webkit-linear-gradient(#eee, #888);`
+      `font-size: 0; padding-left: ${width}px; padding-bottom: ${height}px;
+       background: url("${canvas.toDataURL()}"), -webkit-linear-gradient(#eee, #888);`,
     )
   }
-}
+}
diff --git a/polar.js b/polar.js
@@ -51,11 +51,14 @@ connect({ onChange: printHeartRate }).catch(console.error)
 
 function printHeartRate(event) {
   const heartRate = event.target.value.getInt8(1)
+  const prev = hrData[hrData.length - 1]
   console.clear()
   hrData[hrData.length] = heartRate
   hrData = hrData.slice(-200)
+  let arrow = ''
+  if (heartRate !== prev) arrow = heartRate > prev ? '⬆' : '⬇'
   console.graph(hrData)
-  console.log(`%c\n💚 ${heartRate}`, 'font-size: 24px;')
+  console.log(`%c\n💚 ${heartRate} ${arrow}`, 'font-size: 24px;', '\n\n(To disconnect, refresh or close tab)\n\n')
 }
 
 

diff --git a/polar.js b/polar.js
@@ -39,7 +39,6 @@ async function connect(props) {
 }
 
 
-
 // Basic example that prints a live updating chart of the heart rate history.
 // Note: This should only be used as a quick/hacky test, it's not optimized.
 
@@ -65,7 +64,6 @@ function setupConsoleGraphExample(height, width) {
   const context = canvas.getContext('2d')
   canvas.height = height
   canvas.width = width
-  canvas.style.cssText = 'position: absolute; left: -99999px'
   context.fillStyle = '#fff'
   window.console.graph = data => {
     const n = data.length
@@ -75,11 +73,11 @@ function setupConsoleGraphExample(height, width) {
     for (let i = 0; i < n; ++i) {
       context.fillRect(i * units, 0, units, 100 - (data[i] / 2))
     }
-    console.log('%c ', 
-     `font-size: 0; 
+    console.log('%c ',
+     `font-size: 0;
       padding-left: ${width}px;
       padding-bottom: ${height}px;
       background: url("${canvas.toDataURL()}"), -webkit-linear-gradient(#eee, #888);`
     )
   }
-}
+}
diff --git a/polar.js b/polar.js
@@ -75,12 +75,11 @@ function setupConsoleGraphExample(height, width) {
     for (let i = 0; i < n; ++i) {
       context.fillRect(i * units, 0, units, 100 - (data[i] / 2))
     }
-    console.log('%c ',
-      'font-size: 0;' +
-      `padding-left: ${width}px;` +
-      `padding-bottom: ${height}px;` +
-      `background: url("${canvas.toDataURL()}"),` +
-      '-webkit-linear-gradient(#eee, #888);'
+    console.log('%c ', 
+     `font-size: 0; 
+      padding-left: ${width}px;
+      padding-bottom: ${height}px;
+      background: url("${canvas.toDataURL()}"), -webkit-linear-gradient(#eee, #888);`
     )
   }
 }
diff --git a/polar.js b/polar.js
@@ -39,11 +39,13 @@ async function connect(props) {
 }
 
 
+
 // Basic example that prints a live updating chart of the heart rate history.
 // Note: This should only be used as a quick/hacky test, it's not optimized.
 
 let hrData = new Array(200).fill(10)
 
+console.clear()
 setupConsoleGraphExample(100, 400)
 connect({ onChange: printHeartRate }).catch(console.error)
 

diff --git a/polar.js b/polar.js
@@ -60,10 +60,9 @@ function printHeartRate(event) {
 
 function setupConsoleGraphExample(height, width) {
   const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
   canvas.height = height
   canvas.width = width
-  const context = canvas.getContext('2d')
-  document.body.appendChild(canvas)
   canvas.style.cssText = 'position: absolute; left: -99999px'
   context.fillStyle = '#fff'
   window.console.graph = data => {

diff --git a/polar.js b/polar.js
@@ -48,20 +48,16 @@ setupConsoleGraphExample(100, 400)
 connect({ onChange: printHeartRate }).catch(console.error)
 
 
-
-
 function printHeartRate(event) {
   const heartRate = event.target.value.getInt8(1)
-  hrData = hrData.slice(-199)
-  hrData[hrData.length] = heartRate
   console.clear()
+  hrData[hrData.length] = heartRate
+  hrData = hrData.slice(-200)
   console.graph(hrData)
   console.log(`%c\n💚 ${heartRate}`, 'font-size: 24px;')
 }
 
 
-
-
 function setupConsoleGraphExample(height, width) {
   const canvas = document.createElement('canvas')
   canvas.height = height

diff --git a/polar.js b/polar.js
@@ -48,6 +48,8 @@ setupConsoleGraphExample(100, 400)
 connect({ onChange: printHeartRate }).catch(console.error)
 
 
+
+
 function printHeartRate(event) {
   const heartRate = event.target.value.getInt8(1)
   hrData = hrData.slice(-199)
@@ -58,6 +60,8 @@ function printHeartRate(event) {
 }
 
 
+
+
 function setupConsoleGraphExample(height, width) {
   const canvas = document.createElement('canvas')
   canvas.height = height
@@ -66,11 +70,9 @@ function setupConsoleGraphExample(height, width) {
   document.body.appendChild(canvas)
   canvas.style.cssText = 'position: absolute; left: -99999px'
   context.fillStyle = '#fff'
-
   window.console.graph = data => {
     const n = data.length
     const units = Math.floor(width / n)
-
     width = units * n
     context.clearRect(0, 0, width, height)
     for (let i = 0; i < n; ++i) {

diff --git a/polar.js b/polar.js
@@ -1,3 +1,4 @@
+
 /*
 Make sure you are wearing the hr monitor, as it typically
 goes to sleep when inactive, not allowing you to connect to it.
@@ -41,16 +42,16 @@ async function connect(props) {
 // Basic example that prints a live updating chart of the heart rate history.
 // Note: This should only be used as a quick/hacky test, it's not optimized.
 
+let hrData = new Array(200).fill(10)
+
 setupConsoleGraphExample(100, 400)
 connect({ onChange: printHeartRate }).catch(console.error)
 
 
-let hrData = new Array(200).fill(10)
-
 function printHeartRate(event) {
   const heartRate = event.target.value.getInt8(1)
-  hrData.unshift(heartRate)
-  if (hrData.length > 200) hrData.length = 200
+  hrData = hrData.slice(-199)
+  hrData[hrData.length] = heartRate
   console.clear()
   console.graph(hrData)
   console.log(`%c\n💚 ${heartRate}`, 'font-size: 24px;')
@@ -65,9 +66,11 @@ function setupConsoleGraphExample(height, width) {
   document.body.appendChild(canvas)
   canvas.style.cssText = 'position: absolute; left: -99999px'
   context.fillStyle = '#fff'
-  window.console.graph = function(data) {
+
+  window.console.graph = data => {
     const n = data.length
     const units = Math.floor(width / n)
+
     width = units * n
     context.clearRect(0, 0, width, height)
     for (let i = 0; i < n; ++i) {
@@ -81,4 +84,4 @@ function setupConsoleGraphExample(height, width) {
       '-webkit-linear-gradient(#eee, #888);'
     )
   }
-}
+}
diff --git a/polar.js b/polar.js
@@ -0,0 +1,84 @@
+/*
+Make sure you are wearing the hr monitor, as it typically
+goes to sleep when inactive, not allowing you to connect to it.
+
+Instructions
+=============
+1. Using Google Chrome, open the dev console and paste the below code.
+2. A panel near the address bar will open, searching for nearby bluetooth (ble)
+   heart rate devices. Don't click away from the panel or Chrome will cancel the search.
+3. When found, click connect on your device.
+4. An event listener will be added to start capturing the hr data.
+   You can refresh the browser if you need to disconnect or cancel the streaming data.
+
+The event's value will be a DataView. Use the getInt8 method, which
+gets a signed 8-bit integer (byte) at the specified byte offset.
+To extract the heart rate value, pass 1 as the byte offset:
+
+  let dataView = event.target.value
+  let heartRate = dataView.getInt8(1)
+
+DataView documentation
+developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView
+developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt8
+*/
+
+async function connect(props) {
+  const device = await navigator.bluetooth.requestDevice({
+    filters: [{ services: ['heart_rate'] }],
+    acceptAllDevices: false,
+  })
+  console.log(`%c\n👩🏼‍⚕️`, 'font-size: 82px;', 'Starting HR...\n\n')
+  const server = await device.gatt.connect()
+  const service = await server.getPrimaryService('heart_rate')
+  const char = await service.getCharacteristic('heart_rate_measurement')
+  char.oncharacteristicvaluechanged = props.onChange
+  char.startNotifications()
+  return char
+}
+
+
+// Basic example that prints a live updating chart of the heart rate history.
+// Note: This should only be used as a quick/hacky test, it's not optimized.
+
+setupConsoleGraphExample(100, 400)
+connect({ onChange: printHeartRate }).catch(console.error)
+
+
+let hrData = new Array(200).fill(10)
+
+function printHeartRate(event) {
+  const heartRate = event.target.value.getInt8(1)
+  hrData.unshift(heartRate)
+  if (hrData.length > 200) hrData.length = 200
+  console.clear()
+  console.graph(hrData)
+  console.log(`%c\n💚 ${heartRate}`, 'font-size: 24px;')
+}
+
+
+function setupConsoleGraphExample(height, width) {
+  const canvas = document.createElement('canvas')
+  canvas.height = height
+  canvas.width = width
+  const context = canvas.getContext('2d')
+  document.body.appendChild(canvas)
+  canvas.style.cssText = 'position: absolute; left: -99999px'
+  context.fillStyle = '#fff'
+  window.console.graph = function(data) {
+    const n = data.length
+    const units = Math.floor(width / n)
+    width = units * n
+    context.clearRect(0, 0, width, height)
+    for (let i = 0; i < n; ++i) {
+      context.fillRect(i * units, 0, units, 100 - (data[i] / 2))
+    }
+    console.log('%c ',
+      'font-size: 0;' +
+      `padding-left: ${width}px;` +
+      `padding-bottom: ${height}px;` +
+      `background: url("${canvas.toDataURL()}"),` +
+      '-webkit-linear-gradient(#eee, #888);'
+    )
+  }
+}
No results found