Place a rectangle (polygon) on top of an image online

Online experiments
1

For my experiment, I need to use a rectangle surrounding one of the images on the screen. I used rectangle with “none” fill color (polygon) and it works well on my computer. But when I upload the experiment and try to run it on Pavlovia, the rectagle’s fill color becomes black, completely hiding my image. I tried to change “none” to “null” but it doesn’t work. What should I do in this situation?

1 Like
2

@CatK, thanks for reporting this issue, it is a bug. To fix, you will need to recreate your polygon in a code component, in the “Begin Experiment” tab, setting the fillColor property to undefined:

 polygon = new visual.Rect ({
    win: psychoJS.window, name: 'polygon', 
    width: [0.5, 0.5][0], height: [0.5, 0.5][1],
    ori: 0, pos: [0, 0],
    lineWidth: 1, lineColor: new util.Color([1, 1, 1]),
    fillColor: undefined,
    opacity: 1, depth: -1, interpolate: true,
  });

I will fix this issue on GitHub now for future releases.

3

Thanks! I do need the polygon’s position to change trial-by-trial. Should I redefine a polygon for every trial? Or do I just need to initiate it one time then change the location n the polygon dialogue box?

4

You can just keep everything the same, where you set the position on each routine using your conditions file using the polygon dialog box. Also, I realise now that you do not actually need the above code, you can just use the following code for setting the fill color as transparent in the “Begin Routine” tab.

polygon.setFillColor(undefined)

You could set the transparency from your conditions file. If you have a column called fillCol and use values such as “white”, “black” or undefined, and use the following in the “Begin Routine” tab, things should work. It works by only creating a new color and using it, if an actual color is given.

let nextCol = (fillCol === "undefined" || fillCol === undefined ? undefined : new util.Color(fillCol))
polygon.setFillColor(nextCol);
1 Like