Display text over an image

Online experiments
, , , ,
1

URL of experiment: https://gitlab.pavlovia.org/TVLP/tvlp_shifting

Description of the problem:
I have 2 components in the same routine: an image, containing a black grid on gray background, and text. When I run the experiment from PsychoPy on my PC, the text is always displayed above the image. The text is one letter which appears in specific cell of the grid, depending on its coordinates. But when I run the experiment on Pavlovia, I can only see the black grid on gray background and no letters. I tried to do the following:

  • Move the image to the bottom in builder. When I did that, the depth attribute changed in generated .js files. Now image component has depth of -2.0 and text is on depth 0.0. But nothing changed. I don’t understand how this worked in PsychoPy before that, but it seems text was always drawn above the image, even if it was placed below, which seems incorrect, but that is just what I needed.
  • I tried to edit my image and use transparent color instead of the gray background. I saved it as a PNG image, because PNG format supports transparency. But this had no visible effect either.
2

Hi @naushniki, the issue is with the positioning of the text because there is a difference in how PsychoJS reads lists from the conditions file (i.e., your position coordinates). Try the following, where you give individual columns for x, y coordinates in your conditions file, which are fed to your text component using:

[posx, posy]

letternumber.xlsx (11.0 KB)

3

@dvbridges Thank you! That helped.