Color coded heart rate zones

[bphilli7]

Wonderful program. Very powerful and I appreciate the structure.

Do you have any thoughts on the following: If I wanted to create an overlay that had a colored frame or changed the rgb value of my "heartate/hr" metric, what would be the best way to implement that?

My Wahoo bike computer has a section in the FIT file to establish 5 heartrate zones

Depending on the BPM at the timeseries data point, I could change the rgb value of the text, or the color of a frame underneath the bpm text.

[bphilli7]

I think my plan will be to make a new widget (hrzone) that will dynamically color a frame, and then paint it as a component in the XML as the underlay to the HR text.

[bphilli7]

I have an initial rendering. Will do some code cleanup and additional small fixes, but this is essentially a new Widget object with a "reading=metric_value()" for heart rate and then some hard-coded HR zones which set an RGB value for the background in the draw() function.

The xml file defines where to place the rectangle. I've aligned the hr metric and new Widget elements and paint the new Widget first, hr metric second.

[time4tea]

This sounds interesting... i wonder if it is actually a generic way to paint a background frame? Using the metric accessors it could access any metric, then use your configuration to figure out what colour to draw the background. Just a thought!

[bphilli7]

I did attempt to make this useable for more than HR as a widget that can paint the background behind any metric. The name of the Widget is "DynamicFrame" but could be changed.

I made it a bit prettier with a draw.rounded_rectangle object with a border.

Right now, its limitations are it supports 5 zone colormap (should be modified to support xml defined colormaps, with arbitrary numbers of zones).

In layout_xml.py:

from .widgets.dynamic_frame import DynamicFrame
...
def tattrib(el, a, d=None, r=None) -> tuple:
    return tuple(map(int, attrib(el, a).split(',')))
...
@allow_attributes({"x", "y", "size", "thresholds", "width", "height", "outline", "outline_width"})
#TODO: implement outline, outline_width;
#       implement dynamic zones (5 zones required, in rgb() in DynamicFrame())
#       implement dynamic colormap (colormap is currently hardcoded into rgb() in DynamicFrame())
def create_hrzone(self, element, entry, **kwargs) -> Widget:
    return Translate(
        at=at(element),
        widget=DynamicFrame(
            thresholds=tattrib(element, "thresholds"),
            dimensions=Dimension(x=iattrib(element, "width"), y=iattrib(element, "height")),
            reading=metric_value(
                entry,
                accessor=metric_accessor_from(attrib(element, "metric", d="hr")),
                converter=self.converters.converter(attrib(element, "units", d=None)),
                formatter=lambda q: q.m,
                default=0
            ),
        )
    )

In widgets\dynamic_frame.py:

from PIL import Image, ImageDraw
from .widgets import Widget

class DynamicFrame(Widget):

def __init__(
        self,
        thresholds=(118, 137, 151, 173),
        dimensions=None,
        reading=0,
):
    if len(thresholds) != 4:
        raise IOError("4 thresholds needed, got "+str(len(thresholds)))
    self.thresholds = thresholds
    self.size = dimensions.tuple()
    self.reading = reading
    #self.image = None
    
    #putting these two lines into the draw() function bogs the process down for some reason
    
    self.image = Image.new("RGBA", self.size)
    draw = ImageDraw.Draw(self.image)

def draw(self, image: Image, draw: ImageDraw):
    def rgb(value):
        if(value>self.thresholds[3]): return 255,  51,  51
        if(value>self.thresholds[2]): return 255, 153,  51
        if(value>self.thresholds[1]): return 255, 255,  51
        if(value>self.thresholds[0]): return  51, 255,  51
        return 51, 255, 255        

    draw.rounded_rectangle([(0,0),self.size], radius=10, fill=(rgb(self.reading())+(170,)), outline=(rgb(self.reading())+(255,)), width=5)
    image.alpha_composite(self.image, (0, 0))

Finally, from my xml file:

    <composite x="16" y="940" name="heartbeat">
          <component type="hrzone" x="-8" y="-8" thresholds="118,137,151,173" width="234" height="60"/>
          <component type="icon" x="0" y="0" file="heartbeat.png" size="44"/>
          <component type="metric" x="160" y="-2" metric="hr" dp="0" size="44" align="right"/>
          <component type="text" x="164" y="12" size="28">bpm</component>
    </composite>

[bphilli7]

I considered using the ImageDraw object (draw, backing_draw) in Text and CachedText but needed to find a way to only draw the rounded_rectangle for metrics that were defined in the xml file, and give them a colormap.

My python skill is not terrific, so if you see ways to optimize it I would appreciate your insight. Rendering on my machine (with nvenc) causes noticeable slowness for the long video (36 min video). Comparing render times with and without the hrzone widget yields a 3x increase in render time to include it, which I would like to resolve.

[time4tea]

Cool.

Performance wise, you are drawing a rectangle every frame then compositing it into the main image.

You could try drawing directly into the main image, saving a composite call every frame, or try caching your drawn rectangle, although my guess is that drawing a rounded rectangle isn't very expensive (could be wrong, always best to measure)

You can use viztracer as an easy way to find the slow bits, that's how I created e.g. examples/perfetto-capture-2023-05-15.png