Clarification on image placement

[vlanglois]

Hello! I’m putting together a visual world study, and I have a clarification question about image position. Currently, I have the images placed based on set coordinates, as seen in the demonstration link (https://farm.pcibex.net/r/RgVUnM/
) and the code below.

newCanvas("visualWorld",1400, 600)
        .add(-300,-100, getImage("TL"))
        .add(-300,260, getImage("BL"))
        .add(700,-100, getImage("TR"))
        .add(700,260, getImage("BR"))
        .print()

I would like the images to be placed based on the size of the page (or the screen, assuming the study is in fullscreen), like it is in the eyetracker project example script. But since that script combines two images together, I don’t really understand the code when it comes to image position, e.g. "center at 75%" , "middle at 50%". Is there a way where the images can be positioned in the four corners based on screen size?

Thanks!

[Jeremy]

Hi,

If you need to place your elements at negative coordinates, you would be better off expanding the size of your Canvas element

Passing "center at 75%" as the X coordinate means that the elements you are adding will be positioned so that their horizontal center will be placed 75% off the left edge of the Canvas element (that is, 75% of its width). Passing "middle at 50%" as the Y coordinate means that their vertical center will be placed 50% off the top edge of the Canvas element (that is, 50% of its height = vertical middle). To take your example, where you Canvas element is 1400*600px, if you placed an image of 200*200px on that Canvas element at "center at 75%" , "middle at 50%" then its left edge would end up 0.75*1400-(200/2)=950px off the left edge of the Canvas element, and its top edge would end up 0.5*600-(200/2)=200px off the top edge of the Canvas element. If you then printed the Canvas element at the perfect center of the page (.print("center at 50vw", "middle at 50vh")) then the left edge of your image would effectively appear 950-(1400/2)=250px to the left of the horizontal center of the page, and its top edge would effectively appear 200-(600/2)=-100px from the vertical center of the page, ie. your 200px high image would be vertically centered on the page (because you would be both vertically centering the image on the Canvas element, and centering the Canvas element on the page itself)

The EyeTracker template project prints one Canvas element at each “corner” of the page: one is printed at "center at 25vw" , "middle at 25vh", one isprinted at"center at 25vw" , "middle at 75vh", one is printed at "center at 75vw" , "middle at 25vh" and one isprinted at"center at 75vw" , "middle at 75vh". Because 1vw represents 1% of the page’s width and 1vh represents 1% of the page’s height, each Canvas element is centered on a different quarter of the page

Inside each of those Canvas elements are printed two images side by side, vertically centered: one is horizontally centered at 25% of the Canvas element’s width, the other one at 75%. Because all Image elements are sized at 20vh*20vh in that trial (defaultImage.size("20vh", "20vh")), and the Canvas elements at 40vh*40vh, the result is that the two images stand perfectly next to each other and fill the horizontal surface of their Canvas element

Since PennController 1.9, you can use the command .scaling("page") to stretch any element (and its content) so that if fits the page. So if you wanted to make your Canvas element “visualWorld” occupy all (or, rather, as much as possible of) the page area, you could do this:

newCanvas("visualWorld", 1700, 700)
    .add(   0,   0, getImage("TL"))
    .add(   0, 360, getImage("BL"))
    .add(1000,   0, getImage("TR"))
    .add(1000, 360, getImage("BR"))
    .scaling("page")
    .print("center at 50vw","middle at 50vh")

But I suspect that what you want is closer to something like this (I arbitrarily chose margins of 50px):

newCanvas("visualWorld", 1700, 700)
    .add(    "left at 50px" ,     "top at 50px" , getImage("TL"))
    .add(    "left at 50px" , "bottom at 650px" , getImage("BL"))
    .add( "right at 1650px" ,     "top at 50px" , getImage("TR"))
    .add( "right at 1650px" , "bottom at 650px" , getImage("BR"))
    .scaling("page")
    .print("center at 50vw","middle at 50vh")

Let me know if you have questions

Jeremy

[Author]

Posts