Problems inserting locations from table for selector

PennController for IBEX Forums Support Problems inserting locations from table for selector

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6228
    OwenJames
    Participant

    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 end
    
    

    I hope I made clear enough what my problem is.

    #6230
    Jeremy
    Keymaster

    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 end

    And 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

    #6231
    OwenJames
    Participant

    Wow, thanks! That looks really helpful. I will take a look at it, but I think this will help me loads to construct the rest of the experiment! Thank you!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.