TextStim and polygon interaction issue

Online experiments
1

Hello,

I would like to put some text inside a polygon stimulus to give the text a border and to also allow it to become clickable. Locally, this is what it should look like:

image
image1920×1080 67.9 KB

Note that “Other” has a red border as I have written code to highlight the border of these rectangles when mouseover is detected (for feedback). In PsychoPy, all rectangle stimuli are drawn first and then the text is drawn over.

However, when run on Pavlovia, this is the result:

image
image1920×1080 98.1 KB

(Without mouseover)

The text is a bit washed out. I was able to replicate this result in the builder by drawing the text first and then the rectangle. Note that the rectangles have an opacity of 0.5, as an opacity of 0 would remove the border. Setting the opacity to 1 will give an opaque rectangle, which is fine if the TextStim is drawn first, but the rectangle still ends up covering the text in Pavlovia.

If anyone could offer some insight to this issue, I would highly appreciate it. Thank you!

2

Hi @Nicholas_Borg, looks like the draw order is being affected once you change the properties of the polygon. I have managed to keep the text on top in this example: https://run.pavlovia.org/dvbridges/test_linecol/html/

To do this, I set a text parameter after I set the color of the polygon using the following JavaScript

// Begin Experiment
red = new util.Color("red")
white = new util.Color("white")

// Each Frame
if (polygon.contains(mouse)) {
    polygon.lineColor = red;
    text.pos = text.pos;
} else {
    polygon.lineColor = white;
    text.pos = text.pos;
}
1 Like
3

Hi @dvbridges, thank you very much, that has solved the problem :slight_smile: