Displaying Line shapes in PsychoJS

Online experiments
1

URL of experiment: https://gitlab.pavlovia.org/Selene/vstm

Description of the problem: Good day,
I am fairly new both to Psychopy and Pavlovia. I am trying to design a visual working-memory study, using both the builder, then eventually adjusting the JS code to suit what I need.
So far, I’ve built the general structure of the study in the builder, which displays things fine when ran in local. However, when switching to the online version, the Line shapes that I want to draw don’t get displayed. I’ve also tried using Rectangle shapes instead, but also nothing. I tried with different screen units (pixels, now height), without success.

I’ve included the gitlab repo if you would be so kind to have a look at the JS script. The part where I define the line parameters looks like this:

line1 = new visual.ShapeStim ({
    win: psychoJS.window, name: 'line1', 
    vertices: [[-[0.8, 0][0]/2.0, 0], [+[0.8, 0][0]/2.0, 0]],
    ori: 1.0, pos: [0, 0],
    lineWidth: 4, lineColor: new util.Color([1, 1, 1]),
    fillColor: new util.Color([1, 1, 1]),
    opacity: 1, depth: 0, interpolate: true,
  });

Thank you so much for your help,

Quarantined regards,
Selene

2

@Selene, you would be better off just using Builder to implement your experiment, and then using code components for extra customizations required, rather than changing the JS code directly. However, I think the issue is related to how the positions etc are read from the conditions file.
Currently, if you enter an array containing x,y coordinates in your conditions file (e.g., [0,. 01]), the PsychoJS library will read your positions as a string, rather than as an array, so your linePos1 variable will contain "[0, .1]", rather than an array containing x,y coordinates. To get around this issue, you need to set your x,y coordinates in separate columns of your conditions file, and feed them as separate variables to your positions in your line components. E.g., your conditions file should contain two columns for line 1 positions, line1Pos_X, and line1Pos_Y. These will contain either x or y values as a number, not as a list/array. Then, in your shape components in Builder, set your positions using:

[line1Pos_X, line1Pos_Y]
3

Thank you so much, that worked!