Frame Time of Padding+Text or WrappedText in Animation Doesn't Seem to be Correct

Hello,

I am working on an Animation sequence to display some messages… but the timing on the Tidbyt seems inconsistent.

I have reproduced the issue with some boxes separated by some text. The webp dropped into a browser seems to work fine, but when pushed to the Tidbyt, the text is not displayed for the proper time. It seems the immediately preceding box is displayed during the text time slot(s) then maybe it appears once before the sequence continues. If I had to guess, there may be a double-buffering issue somewhere in the render pipeline related to text rendering or stacking or layering, etc. :slight_smile:

In this code, I expect the text to be displayed for multiple time slots, and any box is only a single time interval. So the sequence would be something like this:

Blue Screen
Clock
Clock
Clock
Red Screen
Text
Text
Text
Text
Text
Green Screen
Cyan Screen
Black Screen (Only to accommodate the last frame not rendered issue (I expect this one to not actually show for now.

So the clock shows three times as long as the first Blue screen, then a Red screen then some text for five times as long as the Red screen then a couple more solid color screens at the end of the sequence. Works 100% as built in the .webp dropped on a browser.

Here is the test code I made to show the issue:

load("render.star", "render")
load("time.star", "time")


#
# Render Test 
#
# December 30, 2021
# v1.0
# scottorama
#
# 
def main(config):
    timezone = config.get("timezone") or "America/Chicago"
    now = time.now().in_location(timezone)

    frames = []

    #
    # Blue Box to start
    #
    frames.append( 
                       render.Box(child=render.Box(color="#00f")),
      )

    #
    # Show a clock for fun
    #
    frames.append( 
                         render.Padding( #clock
                           pad=(17,12,0,0),
                           child=render.Column(
                             children=[
                               render.Text(
                                 content = now.format("3:04 PM"),
                               ),
                             ],
                           ),
                         ),
      )
				
    #
    # Show a clock for fun
    #
    frames.append( 
                         render.Padding( #clock
                           pad=(17,12,0,0),
                           child=render.Column(
                             children=[
                               render.Text(
                                 content = now.format("3:04 PM"),
                               ),
                             ],
                           ),
                         ),
      )
				
    #
    # Show a clock for fun
    #
    frames.append( 
                         render.Padding( #clock
                           pad=(17,12,0,0),
                           child=render.Column(
                             children=[
                               render.Text(
                                 content = now.format("3:04 PM"),
                               ),
                             ],
                           ),
                         ),
      )
				

    #
    # Red Box - Note that in the webp, in a browser, this frame is shown for ONE time unit
    #           but on the Tidbyt it is shown for the duration of itself, plus N-1 Stack units of time.
    #
    frames.append( 
                       render.Box(child=render.Box(color="#f00")),
      )

    #
    # Display a message in a stack
    #
    frames.append( 
                    render.Stack(
                       children=[
                          render.Box(child=render.Box(color="#000")),
                          render.Padding(
                            pad=(0,0,0,0), 
                            child=render.Row(expanded=True, main_align="center", 
                              children=[ render.WrappedText(content = "Hello," + "\n" + "this is" + "\n" + "a test!"), ], ),
                          ),
                       ],
                    ),
      )

    #
    # Display a message in a stack
    #
    frames.append( 
                    render.Stack(
                       children=[
                          render.Box(child=render.Box(color="#000")),
                          render.Padding(
                            pad=(0,0,0,0), 
                            child=render.Row(expanded=True, main_align="center", 
                              children=[ render.WrappedText(content = "Hello," + "\n" + "this is" + "\n" + "a test!"), ], ),
                          ),
                       ],
                    ),
      )

    #
    # Display a message in a stack
    #
    frames.append( 
                    render.Stack(
                       children=[
                          render.Box(child=render.Box(color="#000")),
                          render.Padding(
                            pad=(0,0,0,0), 
                            child=render.Row(expanded=True, main_align="center", 
                              children=[ render.WrappedText(content = "Hello," + "\n" + "this is" + "\n" + "a test!"), ], ),
                          ),
                       ],
                    ),
      )

    #
    # Display a message in a stack
    #
    frames.append( 
                    render.Stack(
                       children=[
                          render.Box(child=render.Box(color="#000")),
                          render.Padding(
                            pad=(0,0,0,0), 
                            child=render.Row(expanded=True, main_align="center", 
                              children=[ render.WrappedText(content = "Hello," + "\n" + "this is" + "\n" + "a test!"), ], ),
                          ),
                       ],
                    ),
      )

    #
    # Display a message in a stack
    #
    frames.append( 
                    render.Stack(
                       children=[
                          render.Box(child=render.Box(color="#000")),
                          render.Padding(
                            pad=(0,0,0,0), 
                            child=render.Row(expanded=True, main_align="center", 
                              children=[ render.WrappedText(content = "Hello," + "\n" + "this is" + "\n" + "a test!"), ], ),
                          ),
                       ],
                    ),
      )

    #
    # Green Box
    #
    frames.append( 
                   render.Box(child=render.Box(color="#0f0"),),
      )

    #
    # Cyan Box
    #
    frames.append( 
                   render.Box(child=render.Box(color="#0ff"),),
      )

    #
    # Black Box - Extra frame to account for minor Animation Bug not showing last frame
    #
    frames.append( 
                   render.Box(child=render.Box(color="#000"),),
      )

    print(str(len(frames)) + " frames")

    #
    # Return Render List
    #
    return render.Root(
         delay = 500,
         child = render.Animation(
           children=frames,
         )
    )