How to present a picture OVER a video?


I’m trying to display a picture that lasts 100ms at x intervals over a video whilst the video is still playing. My issue is that the picture (a checker board) is not presented over the video but behind it. Any idea how to make it display in front of the video?

No idea but reapplying the picture made it come to the front of the video so that issue is now fixed

I changed some things in my code and now the issue has reappeared! Any idea how to fix this :frowning:

The vertical ordering of stimulus components is the layered drawing order, from top (first) to bottom (last). So to have a stimulus drawn over a video, ensure that the stimulus is below the video component. You can change the order by right-clicking the stimulus component icons.

Hello Michael,

I’ve done this but the issue still remains, whether I upload a code object that shows the picture and put it at the top of the list or whether i put a picture object at the top. I don’t get what is wrong :confused:

I’m attaching the whole code for the experiment to see whether you can spot something. The experiment displays/loops a 40second video 6 times. During the video presentation, an auditory beep happens every 6 to 10 seconds and a short checker pattern visual stimulus (0.1s) appears every 2-4 seconds.

#!/usr/bin/env python
# -*- coding: utf-8 -*-
This experiment was created using PsychoPy3 Experiment Builder (v2020.2.10),
    on January 22, 2021, at 10:49
If you publish work using this script the most relevant publication is:

    Peirce J, Gray JR, Simpson S, MacAskill M, Höchenberger R, Sogo H, Kastman E, Lindeløv JK. (2019) 
        PsychoPy2: Experiments in behavior made easy Behav Res 51: 195.


from __future__ import absolute_import, division

from psychopy import locale_setup
from psychopy import prefs
from psychopy import sound, gui, visual, core, data, event, logging, clock
from psychopy.constants import (NOT_STARTED, STARTED, PLAYING, PAUSED,
                                STOPPED, FINISHED, PRESSED, RELEASED, FOREVER)

import numpy as np  # whole numpy lib is available, prepend 'np.'
from numpy import (sin, cos, tan, log, log10, pi, average,
                   sqrt, std, deg2rad, rad2deg, linspace, asarray)
from numpy.random import random, randint, normal, shuffle
import os  # handy system and path functions
import sys  # to get file system encoding

from psychopy.hardware import keyboard

# Ensure that relative paths start from the same directory as this script
_thisDir = os.path.dirname(os.path.abspath(__file__))

# Store info about the experiment session
psychopyVersion = '2020.2.10'
expName = 'gligalab'  # from the Builder filename that created this script
expInfo = {'participant': '', 'session': '001'}
dlg = gui.DlgFromDict(dictionary=expInfo, sortKeys=False, title=expName)
if dlg.OK == False:
    core.quit()  # user pressed cancel
expInfo['date'] = data.getDateStr()  # add a simple timestamp
expInfo['expName'] = expName
expInfo['psychopyVersion'] = psychopyVersion

# Data file name stem = absolute path + name; later add .psyexp, .csv, .log, etc
filename = _thisDir + os.sep + u'data/%s_%s_%s' % (expInfo['participant'], expName, expInfo['date'])

# An ExperimentHandler isn't essential but helps with data saving
thisExp = data.ExperimentHandler(name=expName, version='',
    extraInfo=expInfo, runtimeInfo=None,
    savePickle=True, saveWideText=True,
# save a log file for detail verbose info
logFile = logging.LogFile(filename+'.log', level=logging.EXP)
logging.console.setLevel(logging.WARNING)  # this outputs to the screen, not a file

endExpNow = False  # flag for 'escape' or other condition => quit the exp
frameTolerance = 0.001  # how close to onset before 'same' frame

# Start Code - component code to be run after the window creation

# Setup the Window
win = visual.Window(
    size=(1920 , 1080), fullscr=True, screen=0, 
    winType='pyglet', allowGUI=False, allowStencil=False,
    monitor='testMonitor', color=[0,0,0], colorSpace='rgb',
    blendMode='avg', useFBO=True, 
# store frame rate of monitor if we can measure it
expInfo['frameRate'] = win.getActualFrameRate()
if expInfo['frameRate'] != None:
    frameDur = 1.0 / round(expInfo['frameRate'])
    frameDur = 1.0 / 60.0  # could not measure, so guess

# create a default keyboard (e.g. to check for escape)
defaultKeyboard = keyboard.Keyboard()

# Initialize components for Routine "trial"
trialClock = core.Clock()
import psychopy.visual
import psychopy.event

checker = visual.ImageStim(
    name='checker', units='cm', 
    image='C:\\Users\\apavl\\Desktop\\gligalab\\checker.jpg', mask=None,
    ori=0, pos=(0, 0), size=(30, 30),
    color=[1,1,1], colorSpace='rgb', opacity=1,
    flipHoriz=False, flipVert=False,
    texRes=128, interpolate=True, depth=-3.0)
checker.drawing = False
checker.waiting = False
trialDuration = 40
movie = visual.MovieStim3(
    win=win, name='movie',units='cm', 
    noAudio = False,
    ori=0, pos=(0, 0), opacity=1,
# make tone

beep = sound.Sound('A', secs=0.2, stereo=True, hamming=True,
beep.playing = False
beep.waiting = False
trialDuration = 40

# Create some handy timers
globalClock = core.Clock()  # to track the time since experiment started
routineTimer = core.CountdownTimer()  # to track time remaining of each (non-slip) routine 

# set up handler to look after randomisation of conditions etc
trials = data.TrialHandler(nReps=6, method='sequential', 
    extraInfo=expInfo, originPath=-1,
    seed=None, name='trials')
thisExp.addLoop(trials)  # add the loop to the experiment
thisTrial = trials.trialList[0]  # so we can initialise stimuli with some values
# abbreviate parameter names if possible (e.g. rgb = thisTrial.rgb)
if thisTrial != None:
    for paramName in thisTrial:
        exec('{} = thisTrial[paramName]'.format(paramName))

for thisTrial in trials:
    currentLoop = trials
    # abbreviate parameter names if possible (e.g. rgb = thisTrial.rgb)
    if thisTrial != None:
        for paramName in thisTrial:
            exec('{} = thisTrial[paramName]'.format(paramName))
    # ------Prepare to start Routine "trial"-------
    continueRoutine = True
    # update component parameters for each repeat
    # keep track of which components have finished
    trialComponents = [movie]
    for thisComponent in trialComponents:
        thisComponent.tStart = None
        thisComponent.tStop = None
        thisComponent.tStartRefresh = None
        thisComponent.tStopRefresh = None
        if hasattr(thisComponent, 'status'):
            thisComponent.status = NOT_STARTED
    # reset timers
    t = 0
    _timeToFirstFrame = win.getFutureFlipTime(clock="now")
    trialClock.reset(-_timeToFirstFrame)  # t0 is time of first possible flip
    frameN = -1
    # -------Run Routine "trial"-------
    while continueRoutine and routineTimer.getTime() > 0:
        # get current time
        t = trialClock.getTime()
        tThisFlip = win.getFutureFlipTime(clock=trialClock)
        tThisFlipGlobal = win.getFutureFlipTime(clock=None)
        frameN = frameN + 1  # number of completed frames (so 0 is the first frame)
        # update/draw components on each frame
        # we want to present the image every
        # 2 - 4 seconds for the duration of the trial
        # if the picture is not currently displaying
        if not checker.drawing and not checker.waiting:
            # pick how long we will wait for
            checkerISI = randint(2, 4)
            print('checkerISI', checkerISI)
            checkerOnset = t +checkerISI
            #we are waiting for the image to display
            checker.waiting = True
        elif not checker.drawing and checker.waiting:
            if t >= checkerOnset:
                checker.drawing = True
                checker.waiting = False
        elif checker.drawing:
            if t >= checkerOnset + 0.1-frameTolerance:
                 checker.tStop = t  # not accounting for scr refresh
                 checker.frameNStop = frameN  # exact frame index
                 checker.drawing = False
        # end the routine if the trial duration has been reached
        if t > trialDuration:
            checker.drawing = False
            checker.waiting = False
            continueRoutine = False
        # *movie* updates
        if movie.status == NOT_STARTED and tThisFlip >= 0.0-frameTolerance:
            # keep track of start time/frame for later
            movie.frameNStart = frameN  # exact frame index
            movie.tStart = t  # local t and not account for scr refresh
            movie.tStartRefresh = tThisFlipGlobal  # on global time
            win.timeOnFlip(movie, 'tStartRefresh')  # time at next scr refresh
        if movie.status == STARTED:
            # is it time to stop? (based on global clock, using actual start)
            if tThisFlipGlobal > movie.tStartRefresh + 40-frameTolerance:
                # keep track of stop time/frame for later
                movie.tStop = t  # not accounting for scr refresh
                movie.frameNStop = frameN  # exact frame index
                win.timeOnFlip(movie, 'tStopRefresh')  # time at next scr refresh
        # we want to present the tone every
        # 6 - 10 seconds for the duration of the trial
        # if the sound is not currently playing
        if not beep.playing and not beep.waiting:
            # pick how long we will wait for
            beepISI = randint(6, 10)
            print('beepISI', beepISI)
            beepOnset = t +beepISI
            #we are waiting for the sound to play
            beep.waiting = True
        elif not beep.playing and beep.waiting:
            if t >= beepOnset:
                beep.playing = True
                beep.waiting = False
        elif beep.playing:
            if t >= beepOnset + beep.secs:
                beep.playing = False
        # end the routine if the trial duration has been reached
        if t > trialDuration:
            beep.playing = False
            beep.waiting = False
            continueRoutine = False
        # check for quit (typically the Esc key)
        if endExpNow or defaultKeyboard.getKeys(keyList=["escape"]):
        # check if all components have finished
        if not continueRoutine:  # a component has requested a forced-end of Routine
        continueRoutine = False  # will revert to True if at least one component still running
        for thisComponent in trialComponents:
            if hasattr(thisComponent, "status") and thisComponent.status != FINISHED:
                continueRoutine = True
                break  # at least one component has not yet finished
        # refresh the screen
        if continueRoutine:  # don't flip if this routine is over or we'll get a blank screen
    # -------Ending Routine "trial"-------
    for thisComponent in trialComponents:
        if hasattr(thisComponent, "setAutoDraw"):
    trials.addData('checkerISIs', checkerISIs)
    trials.addData('checkerOnsets', checkerOnsets)
    trials.addData('beepISIs', beepISIs)
    trials.addData('beepOnsets', beepOnsets)
# completed 6 repeats of 'trials'

# Flip one final time so any remaining win.callOnFlip() 
# and win.timeOnFlip() tasks get executed before quitting

# these shouldn't be strictly necessary (should auto-save)
thisExp.saveAsWideText(filename+'.csv', delim='auto')
# make sure everything is closed down
thisExp.abort()  # or data files will save again on exit

Any ideas? It is driving me crazy!

It’s not really easy to read through a verbose Builder-generated Python script to find issues. You should post the .psyexp file instead.

However, very clearly, the code above does show that the checker board is drawn before the video, meaning that what is happening (the video obscuring the checkerboard) is exactly what you are specifying should happen.

Both of these things would give the reverse of what you want. As noted, things at the top in the Builder component timeline are drawn first and so get over-written by things below them (the video in this case).

Yes indeed, that code is the old one. Here is the .psyexp file where at least from what I can see the checker is at the bottom.

gligalab.psyexp (13.4 KB)

I’ve seen now that when I create an image object from the UI it is displayed over the video but when i create a code object that loads the image and does all the things I want it to do its displayed behind the video…

OK, that will be because Builder makes extensive use of autoDrawing of stimuli. This means that stimuli are placed in an ordered queue for automatic drawing when the window is flipped. If you are creating your own stimulus in code, I guess it is not in that queue.

At the moment, you have an explicit call to checker.draw(). This means that your stimulus will get drawn before the autoDraw queue gets worked through, which will be the last thing that happens after any “each frame” code is executed. So your checkerboard will be overdrawn. So you could try setting the “autoDraw” property of your stimulus to True, in the same way that you can see Builder does it at the moment for your movie stimulus (search the .py script for movie.setAutoDraw(True)). If you get that right, hopefully it should be drawn in the right sequence.

Give setting checker.setAutoDraw(True) a go, as an alternative to checker.draw(). If that doesn’t solve things, then you need to go the opposite route: also create the movie in code, and then your explicit calls to .draw() the movie and the checkerboard can be done in order as needed.

Setting checker.setAutoDraw(True) made it work! Thanks Michael!