How to create a progress bar?

Builder
1

Hello,

I am making a experiment with image and sound, and I want to create a progress bar like Youtube,
people can choose to play or pause sound by dragging on the bar.
Is it possible to make it?

I am sorry if it’s a old question, but I can’t find any similar question here.
Thanks in advance, any response will be useful.

2

Hi,

Creating a progress bar in PsychoPy is possible, but it might require some coding. You can create a progress bar using the visual.ShapeStim class to draw a rectangle that changes its size based on the progress of the experiment. However, creating a draggable progress bar like YouTube’s, where users can play or pause the sound by dragging the bar, is more complex and might not be directly supported by PsychoPy’s built-in features.

Hope this helps.

3

Hi, Chen.

Thanks for your help.
I almost give up creating a draggable progress bar like YouTube’s.
Although it seems to be possible in Python, I have no idea how to create it in Psychopy.
Anyway, thanks again!

Best,
Cindy.

4

You could use a :slider: Slider component and a :code: Code component for a draggable bar, if the ticks of the Slider are 0 and the duration of the video (in seconds), then that means mySlider.markerPos will be directly mappable to a number of seconds. So you could do this in the Each Frame tab of a Code component:

# get current timestamp in video
vidTime = myMovie.getPercentageComplete() * myMovie.duration / 100

if mySlider.rating is None:
    # if we've not got a rating from the Slider, set its position to match the movie
    mySlider.markerPos = vidTime
else:
    # if we've got a rating from the Slider, seek movie to that point and clear the rating
    myMovie.seek(mySlider.markerPos)
    mySlider.rating = None

Alternatively, for a simple progress bar, from 2023.2.0 (releasing extremely soon) onwards you’ll be able to use a Progress Component, which is essentially two rectangles positioned relative to one another, with an attribute progress which can be set between 0 (empty) and 1 (full).

2 Likes
5

Hi, thanks for your help.

I will try to use the code component!
I am setting a sound rather than a video in my experiment, I just need to change the code from video to sound, right?
And I can’t wait to try for the progress component!

Best wishes,
Cindy.