inserting getEyetracker start and stop into the code

[multanip]

I am having problems sending results to our server (same place wehre it reterives the images and audio). I realzed it might be because I accidently deleted the or forgot to insert getEyeTracker(“tracker”).start() and getEyeTracker(“tracker”).stop(). But my code looks different from the getCanvas codes used to write the getEyeTracker in other examples. How do I write and where do I insert getEyetracker start and stop in my code below. THis code below is from a script I used from your example last year where middle image remain the same and one image is shown at a time. I played around with different ways either its not working or it shows the first images but when stuck on white screen. The script works and images and audio work but no logging of eyetracker without getEyetracker start and stop in the code.

//Experimental trial
Template( "eng_01_geo_List_tense.csv", row=>  // all newText commands will automatically print the text centered when run
    newTrial("eyetracking",
        defaultImage.center().print(),    // all newImage commands will automatically print the image centered when run
        defaultImage.size(1280,720).print()//,
        .print("center at 50vw", "center at 50vh")
        //defaultText.center().print()
    ,
    newEyeTracker("tracker",1).callback( function (x,y) {
        if (this != getEyeTracker("tracker")._element.elements[0]) return; // The callback commands lets us log the X and Y coordinates of the 
        estimated gaze-locations at each recorded moment in time
        getEyeTracker("tracker")._element.counts._Xs.push(x);
        getEyeTracker("tracker")._element.counts._Ys.push(y);
        })
    ,
    newFunction(()=>{
        getEyeTracker("tracker")._element.counts._Xs = [];
        getEyeTracker("tracker")._element.counts._Ys = [];
    }).call()
    ,
        getEyeTracker("tracker")
            .calibrate(5)  // Make sure that the tracker is still calibrated
            .log()  // log the calibration scores
    ,
        getEyeTracker("tracker")
            .add(   // We track the Canvas elements
            )
            .log()  // If this line is missing, the eye-tracking data won't be sent to the server
            .start()
       ,
    newTimer("pre-trial0", 500).start().wait()
    ,
    newImage("image0", row.Static_image1),// we always use middleImage.png as the middle image
    newTimer("displayTime0", 2000).start().wait(), //.start(),//.wait() //wait 400ms befoere moving to the iamge
    //getTimer("last-image"),
    getImage("image0").remove()
    .log()
    ,
    newTimer("pre-trial1", 500).start().wait()
    ,
    newImage("image1", row.action_image), // the first image is set in design.csv
    newTimer("displayTime1", 2500).start().wait(), //.start().wait() // wait 400ms before moving on to the next image
    //getTimer("mid-image"),
    getImage("image1").remove()
    .log()
    ,
    newTimer("pre-trial2", 500).start().wait()
    ,
    newImage("image2", row.Static_image2),
// we always use middleImage.png as the middle image
    newAudio("audio", row.wav_file).play(), // the audio file is set in design.csv
    getAudio("audio").wait("first"), // wait until the Audio element has finished playing back
    //getImage("image2").remove(), //getText("AudioSpace").remove(),
    //newKey("stop", "FJ").callback(getTimer("last-image").stop()),
    newTimer("displayTime2", 400).start().wait(), //.start(),//.wait() //wait 400ms befoere moving to the last iamge
    //getTimer("last-image"),
    getImage("image2").remove()
    .log()
    ,
    newTimer("pre-trial3", 500).start().wait()//remain for 1000 ms on screen
    ,
    newImage("image3", row.action_image2), // the third image is set in design.csv
    newTimer("displayTime3", 2500).start().wait(),
    getImage("image3").remove()
    .log()
    ,
    // Stop now to prevent collecting unnecessary data
    getEyeTracker("tracker")
        .stop()
    )
.noHeader()
  .log("Subject"              , getVar("Subject")  )
  .log("Static_image1"          ,row.Static_image1)
  .log("action1_image"          ,row.action_image)
  .log("ID_No"                  ,row.random)
  .log("Static_image2"          ,row.Static_image2)
  .log("wav_file"               ,row.wav_file)
  .log("action_image2"          ,row.action_image2)
  .log("ViewportWidth" 	    	,window.innerWidth	 		) // Screensize: width
  .log("ViewportHeight"	    	,window.innerHeight 		) // Screensize: heigth
)

SendResults("Send")

[multanip]

THis is an eyetracking script and study.
I went back and added and moved the eyetracker start in different part of the script and all the items run with audio but no logging in server. Below is the newer script.

Template( "eng_01_geo_List_tense_old.csv", row=>  // all newText commands will automatically print the text centered when run
    newTrial("eyetracking",
        defaultImage.center().print(),    // all newImage commands will automatically print the image centered when run
        defaultImage.size(1280,720).print()//,
        .print("center at 50vw", "center at 50vh")
        //defaultText.center().print()
    ,
    newEyeTracker("tracker",1).callback( function (x,y) {
        if (this != getEyeTracker("tracker")._element.elements[0]) return; // The callback commands lets us log the X and Y coordinates of the estimated gaze-locations at each recorded moment in time
        getEyeTracker("tracker")._element.counts._Xs.push(x);
        getEyeTracker("tracker")._element.counts._Ys.push(y);
        })
    ,
    newFunction(()=>{
        getEyeTracker("tracker")._element.counts._Xs = [];
        getEyeTracker("tracker")._element.counts._Ys = [];
    }).call()
    ,
        getEyeTracker("tracker")
            .calibrate(5)  // Make sure that the tracker is still calibrated
            .log() // log the calibration test.index
        //,
        //getEyeTracker("tracker")
           // .log()  // If this line is missing, the eye-tracking data won't be sent to the server
            //.start()
       ,
    newTimer("pre-trial0", 500).start().wait()
    ,
    newImage("image0", row.Static_image1),// we always use middleImage.png as the middle image
    newTimer("displayTime0", 2000).start().wait(), //.start(),//.wait() //wait 400ms befoere moving to the iamge
    //getTimer("last-image"),
    getImage("image0").remove()
    .log()
    ,
    newTimer("pre-trial1", 500).start().wait()
    ,
    newImage("image1", row.action_image), // the first image is set in design.csv
    newTimer("displayTime1", 2500).start().wait(), //.start().wait() // wait 400ms before moving on to the next image
    //getTimer("mid-image"),
    getImage("image1").remove()
    .log()
    ,
    newTimer("pre-trial2", 500).start().wait()
    ,
    newImage("image2", row.Static_image2),
// we always use middleImage.png as the middle image
    newAudio("audio", row.wav_file).play(), // the audio file is set in design.csv
    getAudio("audio").wait("first"), // wait until the Audio element has finished playing back
    //getImage("image2").remove(), //getText("AudioSpace").remove(),
    //newKey("stop", "FJ").callback(getTimer("last-image").stop()),
    newTimer("displayTime2", 400).start().wait(), //.start(),//.wait() //wait 400ms befoere moving to the last iamge
    //getTimer("last-image"),
    getImage("image2").remove()
    .log()
    ,
    newTimer("pre-trial3", 500).start().wait()//remain for 1000 ms on screen
    ,
    newImage("image3", row.action_image2), // the third image is set in design.csv
    newTimer("displayTime3", 2500).start().wait(),
    getImage("image3").remove()
    .log()
    ,
    getEyeTracker("tracker")
        .add(   
            getImage("image0"),
            getImage("image1"),
            getImage("image2"),
            getImage("image3")
        )
        .log()  // If this line is missing, the eye-tracking data won't be sent to the server
        .start(),
    // Stop now to prevent collecting unnecessary data
    getEyeTracker("tracker")
        .stop()
    )
.noHeader()
  .log("Subject"              , getVar("Subject")  )
  .log("Static_image1"          ,row.Static_image1)
  .log("action1_image"          ,row.action_image)
  .log("ID_No"                  ,row.random)
  .log("Static_image2"          ,row.Static_image2)
  .log("wav_file"               ,row.wav_file)
  .log("action_image2"          ,row.action_image2)
  .log("ViewportWidth" 	    	,window.innerWidth	 		) // Screensize: width
  .log("ViewportHeight"	    	,window.innerHeight 		) // Screensize: heigth
)

SendResults("Send")

[Jeremy]

Hi,

Do you have a link to your study, so I can troubleshoot it? Also, did you make sure you properly set your PHP script and reference the right URL in EyeTrackerURL?

Jeremy

[multanip]

Demo link
https://farm.pcibex.net/r/doDwEu/

[multanip]

data collection link
https://farm.pcibex.net/p/KdyWqP/

[multanip]

The study is published and the link the URL data is being sent. I am sure the URL is correct because there is data (white paper logo in front of individual lines in data ) being sent that time stamp matches in server when i ran the experiment. But it mostly only logs when i insert eyetracker start() before the newTimer (pretrial0…) line, but only shows first item or one pic in each row depending on how I experiment with script.

For the php, I will double check but it is the same php we used for other eyetracker study that logged data. But my understanding to do php file is just copy what you have on your website for php to text file and name it with name.php. correct? I believe There is data being sent to it because with individual yellow folder with same name as the data collection link and files individually created with timestamp.

[Jeremy]

Hi,

Your experiment crashes when it reaches the first trial labeled “eyetracking” because you’re adding Image elements to the eye tracker that are not on the page. In fact, all the elements you add will be mutually exclusively be printed on the page, which is not the kind of setup that the EyeTracker was designed to handle: the elements are supposed to be placed on the page together, at different locations, and the eye tracker tracks which one you are looking at a given time point

Now, you are using a hack to track the (X,Y) coordinates on top, which is what you are interested in, so you should just add one element that will persist on the page, in which you will successively print your four images: that’s a Canvas element

At the beginning of your trial, create that element, and make the Image elements automatically print on it:

newCanvas("imageContainer", 1280, 720)
,
defaultImage.size(1280,720).print(0,0,getCanvas("imageContainer"))

Then before starting the tracker, just print the Canvas element and then add it to the tracker instead of the Image elements:

getEyeTracker("tracker")
    .calibrate(5)
    .log()
,
getCanvas("imageContainer").print("center at 50vw", "middle at 50vh")
,
getEyeTracker("tracker")
    .add( getCanvas("imageContainer") )
    .start()

Once you do that, you do get eye tracking data at your server, e.g. here from my test run

Jeremy

[multanip]

Thank you. I will make these changes and then get back to you. But, I was something being logged in our server from a different link. I am assuming that was you. Our set up is different than the regular eyetrackign script which why I originally struggled to change the cards example eyetracking script from pcibex and asked for help last year.

Thank you and let me get back to you.

[multanip]

But I am wondering if there is a way to write the setup (one item 4images) above into the eyetrackign script of the cards example that you have? I played aroudn with script but no luck. at one point it showed one image from each row but no logging.

[Jeremy]

I’m not sure I understand your question, but your current setup, with one image on the page at a time, will work as long as you use the Canvas element method I suggest

The log file you see in your server is indeed mine, which is the one I link to in my previous message, to demonstrate that your setup is functional with that method

Jeremy

[multanip]

Hello, Thank you for the changes. I believe I made the changes correctly and it logs and runs throught all the images.

but I am ahving another issue that was not there before. The images are all off. Its only giving 500ms blank white flashing gap between image0 and image1 but after that there is no 500ms blank gap after that between image1 to image2 or image2 to image3. It flashed the first action image (iamge1) before the last image (image3). this was there before and it is not suppose to be that way.

Setup is 500ms preview time, image0 for 2500ms on the screen(guy lookng straight ahead), 500ms gap flashing white screen, image1 action image (small thermos being touched), 500ms flashing white screen, same as image0 (iamge2) +audio, 500ms flashing gap, image3 different action (big thermos being touched).

I wanted experiment similar to this setup u gave me. https://farm.pcibex.net/r/nkHbDP/ Only in between newimages I would add another newtimer. you can see small white screen before and after the middle picture then moves on to the next item. I no longer have that.

[Jeremy]

There seems to be a bug with printing to a Canvas element in a default command. So take out the print from the defaultImage command (defaultImage.size(1280,720)) and add the print command to each Image element instead:

newImage("image0", row.Static_image1).print(0,0,getCanvas("imageContainer")),
// ...
newImage("image1", row.action_image).print(0,0,getCanvas("imageContainer")),
// and so on

Jeremy

[multanip]

Like this:

newCanvas("imageContainer", 1280, 720),
        //defaultImage.size(1280,720).(0,0,getCanvas("imageContainer")),
        newImage("image0", row.Static_image1).print(0,0,getCanvas("imageContainer")),
        newImage("image1", row.action_image).print(0,0,getCanvas("imageContainer")),
        newImage("image2", row.Static_image2).print(0,0,getCanvas("imageContainer")),
        newImage("image3", row.action_image2).print(0,0,getCanvas("imageContainer"))

because now I am getting error message in the yellow window.

[12:30:5] Ambiguous use of getImage(“image3”): more than one elements were created with that name-- getImage(“image3”) will refer to the first one (newTrial: 15)
[12:30:5] Ambiguous use of getImage(“image2”): more than one elements were created with that name-- getImage(“image2”) will refer to the first one (newTrial: 15)
[12:30:5] Ambiguous use of getImage(“image1”): more than one elements were created with that name-- getImage(“image1”) will refer to the first one (newTrial: 15)
[12:30:5] Ambiguous use of getImage(“image0”): more than one elements were created with that name-- getImage(“image0”) will refer to the first one (newTrial: 15)
[12:30:5] Ambiguous use of getImage(“image3”): more than one elements were created with that name-- getImage(“image3”) will refer to the first one (newTrial: 14)
[12:30:5] Ambiguous use of getImage(“image2”): more than one elements were created with that name-- getImage(“image2”) will refer to the first one (newTrial: 14)
[12:30:5] Ambiguous use of getImage(“image1”): more than one elements were created with that name-- getImage(“image1”) will refer to the first one (newTrial: 14)
[12:30:5] Ambiguous use of getImage(“image0”): more than one elements were created with that name-- getImage(“image0”) will refer to the first one (newTrial: 14)
[12:30:5] Ambiguous use of getImage(“image3”): more than one elements were created with that name-- getImage(“image3”) will refer to the first one (newTrial: 13)
[12:30:5] Ambiguous use of getImage(“image2”): more than one elements were created with that name-- getImage(“image2”) will refer to the first one (newTrial: 13)
[12:30:5] Ambiguous use of getImage(“image1”): more than one elements were created with that name-- getImage(“image1”) will refer to the first one (newTrial: 13)
[12:30:5] Ambiguous use of getImage(“image0”): more than one elements were created with that name-- getImage(“image0”) will refer to the first one (newTrial: 13)
[12:30:5] Ambiguous use of getImage(“image3”): more than one elements were created with that name-- getImage(“image3”) will refer to the first one (newTrial: 12)
[12:30:5] Ambiguous use of getImage(“image2”): more than one elements were created with that name-- getImage(“image2”) will refer to the first one (newTrial: 12)
[12:30:5] Ambiguous use of getImage(“image1”): more than one elements were created with that name-- getImage(“image1”) will refer to the first one (newTrial: 12)
[12:30:5] Ambiguous use of getImage(“image0”): more than one elements were created with that name-- getImage(“image0”) will refer to the first one (newTrial: 12)

[Jeremy]

No, add the print command on the Image elements at the point where you want the corresponding Image element to be printed, ie. on where you used to have your newImage commands (they would be printed there too because you used to have print on defaultImage)

The error messages you see are telling me that you’ve added the four newImage commands below newCanvas in addition to the newImage commands you already have below in your script, thus resulting in two copies with the same name of each Image element. You should not create and, importantly, not print the Image elements at the beginning of the trial: you want to print them at different time points during the trial, so the print commands should go on the newImage commands that already are further down in your script

Jeremy

[multanip]

Ok. We have success with running all images and logging the way I wanted. I need to run a longer csv list so I will let you know if there are other issues.

Even though it works, I am just posting the main script below if you can see and let me know I did this correctly. otherwise the links are above for demo to see the script

Template( "eng_01_geo_List_tense_old.csv", row=> 
    newTrial("eyetracking",
        newCanvas("imageContainer", 1280, 720)
        //defaultImage.size(1280,720).(0,0,getCanvas("imageContainer"))
        //defaultImage.size(1280,720).print()//,
        //.print("center at 50vw", "center at 50vh")
        //defaultText.center().print()
    ,
    newEyeTracker("tracker",1).callback( function (x,y) {
        if (this != getEyeTracker("tracker")._element.elements[0]) return; // The callback commands lets us log the X and Y coordinates of the estimated gaze-locations at each recorded moment in time
        getEyeTracker("tracker")._element.counts._Xs.push(x);
        getEyeTracker("tracker")._element.counts._Ys.push(y);
        })
    ,
    newFunction(()=>{
        getEyeTracker("tracker")._element.counts._Xs = [];
        getEyeTracker("tracker")._element.counts._Ys = [];
    }).call()
    ,
        getEyeTracker("tracker")
            .calibrate(5)  // Make sure that the tracker is still calibrated
            .log() // log the calibration test.index
        ,
        getCanvas("imageContainer").print("center at 50vw", "middle at 50vh")
        ,
        getEyeTracker("tracker")
            .add(
                getCanvas("imageContainer"))
            .log()  
            .start()
        ,
    newTimer("pre-trial0", 500).start().wait()
    ,
    newImage("image0", row.Static_image1).print(0,0,getCanvas("imageContainer")),
    newTimer("displayTime0", 2000).start().wait(), 
    getImage("image0").remove()
    .log()
    ,
    newTimer("pre-trial1", 500).start().wait()
    ,
    newImage("image1", row.action_image).print(0,0,getCanvas("imageContainer")),
    newTimer("displayTime1", 2500).start().wait(), 
    getImage("image1").remove()
    .log()
    ,
    newTimer("pre-trial2", 500).start().wait()
    ,
    newImage("image2", row.Static_image2).print(0,0,getCanvas("imageContainer")),    
    newAudio("audio", row.wav_file).play(), // the audio file is set in design.csv
    getAudio("audio").wait("first"), 
    newTimer("displayTime2", 400).start().wait(), 
    getImage("image2").remove()
    .log()
    ,
    newTimer("pre-trial3", 500).start().wait()//remain for 1000 ms on screen
    ,
    newImage("image3", row.action_image2).print(0,0,getCanvas("imageContainer")),
    newTimer("displayTime3", 2500).start().wait(),
    getImage("image3").remove()
    .log()
    ,
    // Stop now to prevent collecting unnecessary data
    getEyeTracker("tracker")
        .stop()
    )
.noHeader()
  .log("Subject"              , getVar("Subject")  )
  .log("Static_image1"          ,row.Static_image1)
  .log("action1_image"          ,row.action_image)
  .log("ID_No"                  ,row.random)
  .log("Static_image2"          ,row.Static_image2)
  .log("wav_file"               ,row.wav_file)
  .log("action_image2"          ,row.action_image2)
  .log("ViewportWidth" 	    	,window.innerWidth	 		) // 
  .log("ViewportHeight"	    	,window.innerHeight 		) // Screensize: 
)

I have other questions but I will post later

[Author]

Posts