- This topic has 2 replies, 2 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
Hello!
I am trying to make a mousetracking experiment where there is a picture on a Canvas with three points of interest. On each point of interest needs to be a small visual placeholder which is also clickeable. Participants need to click one of these points of interest when they have activated the audio to play. The images as well as where on the canvas the clicking needs to take place differ per trial via a table. The problem is, I just cannot get the points of interest to fit on the image in the right spot for different screens, as the clickeable images move over the target image dependent on how big a screen is, and I cannot find a way for the locations for the selectors to vary according to what i have specified in my script.
I currently had the tactic of creating images for each area of interest (aoi) I have in total. There are 6 of those. Then I can hide them so they are not visible and selecteable in all loop itterations, but only in the ones where I can manually select them to be visible by calling them. My table has the columns “activeaoi” 1 to 3 with entries “aoi” 1 to 6. This is what you can see in my code.
Template(variable => newTrial( "trialin" , newAudio("audiofile", variable.Audio) , newImage("imagefile", variable.Imagein) .settings.size(853, 544) , newButton("start") .callback( getAudio("audiofile") .stop() .play() .once() .wait() .remove() ) , newSelector("choice") , newImage("aoi1", "square.png") //here I create the aoi images which I then hide .settings.size(50, 50) .selector("choice") .hidden() .print("center at 25%","center at 70%") //left.middle , newImage("aoi2", "square.png") .settings.size(50, 50) .selector("choice") .hidden() .print("center at 75%","top at 90%") //right low , newImage("aoi3", "square.png") .settings.size(50, 50) .selector("choice") .hidden() .print("center at 80%","center at 70%") //right middle , newImage("aoi4", "square.png") .settings.size(50, 50) .selector("choice") .hidden() .print("center at 27%","center at 90%") //left low , newImage("aoi5", "square.png") .settings.size(50, 50) .selector("choice") .hidden() .print("center at 27%","center at 40%") //left high , newImage("aoi6", "square.png") .settings.size(50, 50) .selector("choice") .hidden() .print("center at 75%","center at 40%") //right high , newText("act1", variable.aoiactive1) , newCanvas( "images", 853, 544) .add("center at 50%", "center at 50%", getImage("imagefile") .print()) .add("center at 50%","center at 0%",getButton("start") .print() .wait()) .print() .remove(getButton("start")) , newMouseTracker("mouse").log().start() , getImage("aoi1") // Here i would like to have a way to select instead of "aoi" the variable I have in my table. .visible() //here I then tell the selector images to be visible , getImage("aoi2") .visible() , getImage("aoi3") .visible() , getSelector("choice") .log() .wait() , getMouseTracker("mouse").stop() , getAudio("audiofile").stop() )//trial end )//template endI hope I made clear enough what my problem is.
Hello,
I think your code is a little more complex than it needs to be, and maybe doesn’t do exactly what you want it to do. Keep in mind that PennController executes the trial’s script in a linear top-down stream unless you use special commands (such as callback). Your design seems perfectly adapted to a linear execution, so I rewrote your code like this:
Template( variable => newTrial( "trialin" , // Start by creating the image, but don't print it yet // Its width will adapt to the screen width (75%) newImage("imagefile", variable.Imagein).size("75vw", "auto") , newSelector("choice").log() , // All images below this will be 2vw x 2vw, hidden, and in the selector defaultImage.size("2vw","2vw").hidden().selector("choice") , // 75% screen width, 75% screen height newCanvas("images", "75vw", "75vh") // Place the main image at the center of the Canvas .add("center at 50%", "middle at 50%", getImage("imagefile") ) // Now place the 6 (hidden) AOIs on the Canvas .add("center at 25%", "middle at 70%", newImage("aoiLM", "square.png") ) //left.middle .add("center at 75%", "top at 90%", newImage("aoiRL", "square.png") ) //right low .add("center at 80%", "middle at 70%", newImage("aoiRM", "square.png") ) //right middle .add("center at 27%", "middle at 90%", newImage("aoiLL", "square.png") ) //left low .add("center at 27%", "middle at 40%", newImage("aoiLH", "square.png") ) //left high .add("center at 75%", "middle at 40%", newImage("aoiRH", "square.png") ) //right high // Finally, place a button at the top of the Canvas .add("center at 50%", "middle at 0%", newButton("start") ) // Use print here only, it will display the Canvas' (non-hidden) content .print() , // Script will stay on this line until button is clicked, then remove it getButton("start").wait().remove() , // Button has been clicked: play the audio newAudio("audiofile", variable.Audio).play() , // Start mouse-tracking right away (no wait on Audio) newMouseTracker("mouse").log().start() , // Show this trial's AOIs getImage(variable.aoiactive1).visible(), getImage(variable.aoiactive2).visible(), getImage(variable.aoiactive3).visible() , // Script will stay on this line until an AOI is clicked getSelector("choice").wait() , // Stop the mouse tracker once an AOI is clicked getMouseTracker("mouse").stop() , // Stop the audio early in case it hasn't fully played yet getAudio("audiofile").stop() )//trial end )//template endAnd here are the first two lines of my table:
Audio,Imagein,aoiactive1,aoiactive2,aoiactive3 audio.wav,lees.png,aoiLH,aoiRM,aoiRL
Hopefully the script and setup above are self-explanatory, but please let me know if you have questions
Jeremy
- You must be logged in to reply to this topic.