Animate a line off of heart rate

[KevTheDev26]

I am trying to create an animated line that will go from 0 to 100 across the X axis and then I wanted to take the batched heartRate data and animate the line on the Y axis based off of the current heart beat at each index. (If I wasn't clear there is a Fitbit app called HR Graph that basically is the idea I want to use.)

I have been able to animate the line across using an animation tag but I cannot get the Y axis to move at all. I've tried multiple things so far but I basically have a line animating across the X axis right now:

Index.gui

<svg class="background">  
    <symbol id="animatedHRLine" >
    <g id="hrGroup">
      <animateTransform id="hrTranslate" attributeType="scale"
        from="0,1" to="1,1" begin="enable" dur="20"/>
        <line id="hrLine" x1="0" y1="120" y2="120" fill="red" stroke-width="2" />
    </g>
  </symbol>
   <use id="hrActive" href="#animatedHRLine" width="100%" height="100%" />
</svg>

index.js

import document from "document";
import { HeartRateSensor } from "heart-rate";
import { display } from "display";
import { me } from "appbit";

const hrLine = document.getElementById("hrLine");
const hrGroup = document.getElementById("hrGroup");
const hrActive = document.getElementById("hrActive");

let hrm = null;
let timeStamps;
let bpm;
let currentHeartRate;
let currentTime;

// Activates animation after 1s, sets end of the X axis to match Ionic screen width
setTimeout(function() {
    hrActive.animate("enable"); 
    hrLine.x2 = 348;
}, 1000);

// Check if user granted persmission
if (me.permissions.granted("access_heart_rate")) {
   console.log('Permission Granted');
   hrm = new HeartRateSensor({ frequency: 1, batch: 10 });

} else { console.log('Permission Denied') };

// Return batched readings
hrm.onreading = function() {
  currentHeartRate = hrm.heartRate;
  currentTime = hrm.timestamp;
  for (let index = 0; index < hrm.readings.timestamp.length; index++) {
    timeStamps = hrm.readings.timestamp;
    bpm = hrm.readings.heartRate;
    heartRateReadings(timeStamps, bpm);
  }
};

// 
function heartRateReadings(time, bpm) { 
  for(let i = 0; i < bpm.length; i++) {
    let heartRate = 50 + (currentHeartRate - bpm[i]);

    hrGroup.groupTransform.scale.y = heartRate;
  }
}

hrm.start();

I want to use an animationTransform tag & then use Javascript to animate the g tag but I'm not sure if that is possible. Any suggestions would be great, thank you.

[JonFitbit · Accepted solution]

That particular app has 300+ <line> elements spread across the X axis, then adjusts the y1/y2 values based on the heart rate. I hope that helps.

[KevTheDev26]

Perfect, thank you so much.

[Gondwana]

This link may not work, and it doesn't sound quite like what you're trying to do, but if you've got any questions about how it operates (or not), ...

[KevTheDev26]

I appreciate your help, my computer was broken for about 2 1/2 weeks and I finally just recovered the majority of my stuff. The idea I am trying to make is basically just a line that is animating horizontally across the screen of the Fitbit. The line will move up and down the Y axis based off of heart rate and keep the shape created based on these movements up and down. Very similar to the HR Graph app, but as a clock face.

I wanted to ask when you say across the X axis, are these line elements vertical?

There are other things I am going to add(this is an idea from my nephew that I am trying to create), but I just want to make sure I can do this animation before I go ahead and build a full clock around it.

Thanks again for your suggestions.