Stop Scrolling But Line Running

[tomeroto]

Hi, can smoothie do like "Heart Chart Monitor". I have found example, but I don't know to implement it with smoothie. Example: Simple Heart Chart Monitor

So, I need to stop auto scrolling, and let just the line is moving.

Btw, smoothie is great and stable, I love it.

[WofWca]

Yes. Although you have to get creative.

I have implemented this in my code (see the jumpPeriodMs > 0 case): https://github.com/WofWca/jumpcutter/blob/517de1973af1e9ccbe0c9dbc386407fbe940f1e0/src/entry-points/popup/Chart.svelte#L504-L535

Explanation: you want to manually call smoothie.render(canvas, time) with time that increments in jumps the size of the chart length.

[ajamesmiller35]

I have created a custom version of smoothie in typescript that is capable of rendering charts that are completely still. So if you have a prerecorded data set for example you can just load that into smoothie charts and then pan forward and back at your own pace so you can analyze the data carefully. It also works in realtime and you can switch between the two seamlessly.

From my experience with this I would recommend instead of calling render manually, keep the requestAnimationFrame loop running and just modify nowMillis at the beginning of the render function. Set that to increments the size of the chart length like WofWca suggests.

You could get the current time at the beginning of the render function, set the value of nowMillis from a new property on the Smoothie object (maybe call it 'jumpIntervalTime'. Then check at the beginning of each render if the current time is greater than or equal to the jumpIntervalTime. If it is, then add the correct amount of time to jumpIntervalTime based on the chart length.

The advantage of not calling render manually is that your tooltips will still work. Also, I haven't analyzed WofWca's code closely, but if you are calling render manually at those intervals I am not sure how the line is getting drawn in between.