peterstockings/cardio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Live plot cadence and heart rate when both devices are connected and display heart rate graph in workout view

Browse Source
This commit is contained in:
Peter Stockings
2023-05-07 21:36:48 +10:00
parent 43e5f66cc1
commit 01078d6b08
3 changed files with 72 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
templates/new_workout.html
View File

@@ -32,7 +32,7 @@
<button>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
class="inline w-12 h-12 text-red-800 fill-current" id="heart_rate_button"
class="inline w-12 h-12 text-gray-700 fill-current" id="heart_rate_button"
viewBox="0 0 33.087 33.087">
<path
d="M6.802 13.924h.007c.25.003.477.15.58.379l1.482 3.288 1.142-1.517a.617.617 0 0 1 .559-.256c.217.015.412.14.518.33l1.939 3.497 1.606-5.947a.643.643 0 0 1 1.192-.13l1.244 2.377 2.316-4.499a.658.658 0 0 1 .666-.344.647.647 0 0 1 .54.521l1.254 6.762 2.903-2.826a.628.628 0 0 1 .574-.17c.206.04.381.182.466.376l.859 1.988 1.407-4.622c.06-.193.215-.314.396-.383.013-.384.029-.766-.012-1.157-.698-6.77-8.258-6.665-11.898-3.399-3.64-3.266-11.195-3.37-11.897 3.399-.164 1.58.133 3.094.711 4.517l.865-1.817a.64.64 0 0 1 .581-.367z">
@@ -55,13 +55,34 @@
<div class="w-1/3 text-lg font-medium">Time</div>
<div class="w-3/4 bg-gray-200 text-3xl font-bold pl-3 rounded-md" id="duration-display">00:00</div>
</div>
<div class="flex mb-4 h-12 leading-10">
<!-- <div class="flex mb-4 h-12 leading-10">
<div class="w-1/3 text-lg font-medium">Distance</div>
<div class="w-3/4 bg-gray-200 text-3xl font-bold pl-3 rounded-md" id="distance-display">0.0</div>
</div>
<div class="flex mb-4 h-12 leading-10">
<div class="w-1/3 text-lg font-medium">Calories</div>
<div class="w-3/4 bg-gray-200 text-3xl font-bold pl-3 rounded-md" id="calories-display">0.0</div>
</div> -->
<div class="flex mb-4">
<div class="w-1/3 bg-gray-200 text-center mx-2 rounded-md">
<div class="flex flex-col justify-between">
<div class="pb-2 text-lg font-medium">Distance</div>
<div class="text-3xl font-bold pb-2" id="distance-display">0</div>
</div>
</div>
<div class="w-1/3 bg-gray-200 text-center mx-2 rounded-md">
<div class="flex flex-col justify-between">
<div class="pb-2 text-lg font-medium">Calories</div>
<div class="text-3xl font-bold pb-2" id="calories-display">0.0</div>
</div>
</div>
<div class="w-1/3 bg-gray-200 text-center mx-2 rounded-md">
<div class="flex flex-col justify-between">
<div class="pb-2 text-lg font-medium">Heart</div>
<div class="text-3xl font-bold pb-2" id="heart-display">0</div>
</div>
</div>
</div>
<div class="flex mb-4">
@@ -108,6 +129,7 @@
const caloriesDisplay = document.getElementById('calories-display');
const wattsDisplay = document.getElementById('watts-display');
const speedDisplay = document.getElementById('speed-display');
const heartDisplay = document.getElementById('heart-display');
const toggleButton = document.getElementById('toggle-button');
// Initialize variables
@@ -117,9 +139,16 @@
let isRunning = false;
let startTime = 0;
let intervalId = null;
let workout = [];
let workoutData = [];
let previousReadingTime = null;
//Heart rate variables
const heartRateButton = document.getElementById('heart_rate_button');
let isHearRateMonitorActive = false;
let heartRateCharateristic = null;
let heartRateData = [];
let screenLock;
document.addEventListener('visibilitychange', async () => {
if (screenLock !== null && document.visibilityState === 'visible') {
@@ -192,10 +221,10 @@
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ workout: workout, heart_rate: heartRateData }),
body: JSON.stringify({ workout: workoutData, heart_rate: heartRateData }),
}).then(res => res.json())
.then(res => {
workout = [];
workoutData = [];
swal("Submitted", JSON.stringify(res), "success").then(isConfirm => window.location.href = '/');
})
.catch(err => swal("Failed to submit workout", err.message, "error"));
@@ -223,7 +252,7 @@
svg.attr('height', '100%');
// Set up the x-axis and y-axis scales
const xScale = d3.scaleLinear().range([50, 550]);
const xScale = d3.scaleTime().range([50, 550]);
const yScale = d3.scaleLinear().range([350, 50]);
// Set up the x-axis and y-axis
@@ -241,8 +270,7 @@
// Set up the line function
const line = d3.line()
.x((d) => xScale(d.x))
.y((d) => yScale(d.y))
.x((d) => xScale(d.timestamp))
.curve(d3.curveCardinal.tension(0.25));
// Create an empty data array
@@ -251,19 +279,34 @@
// Set up the graph update function
const updateGraph = () => {
// Update the x-axis and y-axis scales
xScale.domain([0, data.length]);
yScale.domain([0, d3.max(data, d => d.y)]);
const combinedData = heartRateData.concat(workoutData);
const maxValue = Math.max(...combinedData.flatMap(v => [v.rpm, v.bpm].filter(v => v)));
xScale.domain(d3.extent(combinedData, d => d.timestamp));
yScale.domain([0, maxValue]);
// Remove the old line path from the SVG
svg.selectAll('path').remove();
// Add a new line path to the SVG with the updated data
svg.append('path')
.datum(data)
.attr('d', line)
const workoutPath = svg.selectAll(".workout-line").data([workoutData]);
workoutPath.enter()
.append("path")
.attr("class", "workout-line")
.attr('fill', 'none')
.attr('stroke', 'blue')
.attr('stroke-width', '2');
.attr('stroke-width', '3')
.merge(workoutPath)
.attr("d", line.y(d => yScale(d.rpm)));
const heartRatePath = svg.selectAll(".heart-rate-line").data([heartRateData]);
heartRatePath.enter()
.append("path")
.attr("class", "heart-rate-line")
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', '3')
.merge(heartRatePath)
.attr("d", line.y(d => yScale(d.bpm)));
};
// Call the updateGraph function to start the live updates
@@ -336,7 +379,6 @@
res.crankTime = value.getUint16(index, true);
index += 2;
}
console.log("CSC", res);
if (prevRes) {
let rpm = revsToRPM(prevRes, res);
if (rpm > 0) {
@@ -359,7 +401,9 @@
updateBikeDisplay(distance, calories, power, speed, rpm);
updateGraph();
workout.push({ distance, calories, power, speed, rpm, timestamp: new Date() })
console.log("rpm", rpm);
workoutData.push({ distance, calories, power, speed, rpm, timestamp: new Date() })
}
}
prevRes = res;
@@ -409,11 +453,6 @@
}
// Heart Rate monitor code
const heartRateButton = document.getElementById('heart_rate_button');
let isHearRateMonitorActive = false;
let heartRateCharateristic = null;
let heartRateData = [];
heartRateButton.addEventListener('click', async () => {
console.log('heartRateButton clicked, isHearRateMonitorActive: ', isHearRateMonitorActive);
@@ -451,8 +490,9 @@
function heartRateChange(event) {
const currentHeartRate = parseHeartRate(event.target.value);
heartRateData = [...heartRateData, { timestamp: new Date(), heartRate: currentHeartRate }];
heartRateData = [...heartRateData, { timestamp: new Date(), bpm: currentHeartRate }];
console.log('currentHeartRate:', currentHeartRate);
heartDisplay.innerText = currentHeartRate;
}
function heartRateMonitorConnect() {