Millisecond Forums » Millisecond Forums » Inquisit 4 » Picture resizing

Picture resizing

JuliaJuliaJulia — Sat, 09 Feb 2019 04:26:41 GMT

Hey there!

For my study I need to present images on a screen. Unfortunately, I don't know the exact size. The picture I want to present also have different sizes. Some of them have a vertical format, others a horizontal. I want to present them in the following way: All pictures should have the same hight (80 % of screen hight), the picture ratio should stay the same. So the picture shouldn't be cut. Furthermore, the picture should be presented in the middle of the screen.

I tried already tried it with the following code:
<picture japanese>
/items = japanese
/select = noreplace
/position = (50%, 50%)
/height = 80%
/select = noreplace
</picture>

but that doesn't really work...
Has anybody an idea?

Best,

Julia

RE: Picture resizing

JuliaJuliaJulia — Sat, 09 Feb 2019 04:26:41 GMT

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

I'm sorry for being so silly but that still doesn't make sense to me. Let's take this code:

<block myblock>
/ trials = [1-2 = mytrial]
</block>
<trial mytrial>
/ ontrialbegin = [picture.mypicture.width = list.widths.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>
<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>
<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>
<item myitems>
/ 1 = "01.jpg"
/ 2 = "02.jpg"
</item>
---------------------------------------------------------------------------------
For both items the hight is 80% of the screen right? And only the widths varies (80% for the first picture and 40% for the second picture)?

[/quote]

> For both items the hight is 80% of the screen right? And only the widths varies (80% for the first picture and 40% for the second picture)?

Yes. The height of the <picture> element is set to 80% here

<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>

and nowhere is it changed. The width is set on a trial-by-trial basis here

<trial mytrial>
/ ontrialbegin = [picture.mypicture.width = list.widths.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>

and it is sampled from the <list> element. Which value, i.e. width, the list returns depends on the picture item the trial will display.

Do keep in mind one thing: Inquisit will not, under any circumstances, distort the original image's dimensions. They will remain intact, i.e. Inquisit will not "stretch" an image just because you set an excessive width or height. I.e. suppose you have an image that is 400 pixels wide, and 300 pixels high, then -- not matter what you do, the 4:3 width/height ratio will always be preserved, even if you set the <picture> element's dimensions to something absurd like width = 5% & height = 90%.

[/quote]

Hey Dave,

thanks so much for this explanation and your help! I didn't know that Inquisit doesn't distort the image's dimensions. Know everything makes completely sense too me!!!!!!

And it works!

Thanks and best,

Julia

RE: Picture resizing

Dave — Wed, 06 Feb 2019 17:45:48 GMT

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[/quote]

RE: Picture resizing

JuliaJuliaJulia — Wed, 06 Feb 2019 16:22:25 GMT

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

Ah, so I will create another list element, so that I have in sum two list elements: on for the width and one for the height.

I just have problems to understand this pice of code:

<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>

<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>

For the first item ("01.jpg"; so the horizontal image) the height is set to 80% and the width also to 80%. But that shouldn't be so: The width should be set to 80% and the hight should be allowed to vary... For the second item ("02.jpg"; so the horizontal image) the height is set to 80% and the width to 40%. That also shouldn't be so: The hight should be set to 80% and the width should be allowed to vary and shouldn't be fixed to 40%...

Is there a possibility to do that?

Best Julia

[/quote]

Just flip what I illustrated for the width in the example I posted around and do it with the height instead. You don't need two lists, you need only one.

<block myblock>
/ trials = [1-2 = mytrial]
</block>

<trial mytrial>
/ ontrialbegin = [picture.mypicture.height = list.heights.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>

<picture mypicture>
/ items = myitems
/ height = 0%
/ width = 40%
/ position = (50%, 50%)
</picture>

<list heights>
/ items = (40%, 80%)
/ selectionmode = picture.mypicture.nextindex
</list>

<item myitems>
/ 1 = "01.jpg"
/ 2 = "02.jpg"
</item>

Run this, and you'll find that the width is now constant, while the height var

[/quote]

Thanks for your code!
I think your code only works because your image 1 is a square, but in my case image 1 looks like "The Annuciation.jpg" and image 2 like "Eight_Famous_Sights_of_Omi.jpg". In your case image 1 is a square, so a hight of 40% and a width of 40% works...

[/quote]

Sorry, the second image cant be loaded, here is the link: https://upload.wikimedia.org/wikipedia/commons/2/2c/Eight_Famous_Sights_of_Omi_by_Imamura_Shiko_%28Tokyo_National_Museum%29.jpg

[/quote]

You should adjust the values in the list such that they suit *your* images.

[/quote]

RE: Picture resizing

Dave — Wed, 06 Feb 2019 10:29:01 GMT

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

Sorry, the second image cant be loaded, here is the link: https://upload.wikimedia.org/wikipedia/commons/2/2c/Eight_Famous_Sights_of_Omi_by_Imamura_Shiko_%28Tokyo_National_Museum%29.jpg

[/quote]

You should adjust the values in the list such that they suit *your* images.

RE: Picture resizing

JuliaJuliaJulia — Wed, 06 Feb 2019 08:11:22 GMT

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

Sorry, the second image cant be loaded, here is the link: https://upload.wikimedia.org/wikipedia/commons/2/2c/Eight_Famous_Sights_of_Omi_by_Imamura_Shiko_%28Tokyo_National_Museum%29.jpg

RE: Picture resizing

JuliaJuliaJulia — Wed, 06 Feb 2019 08:09:37 GMT

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

RE: Picture resizing

JuliaJuliaJulia — Wed, 06 Feb 2019 08:03:23 GMT

[quote]

[b]Dave - Wednesday, February 6, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

RE: Picture resizing

Dave — Wed, 06 Feb 2019 07:14:28 GMT

[quote]

[b]JuliaJuliaJulia - Wednesday, February 6, 2019[/b]

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

RE: Picture resizing

JuliaJuliaJulia — Wed, 06 Feb 2019 02:39:56 GMT

[quote]

[b]Dave - Tuesday, February 5, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Tuesday, February 5, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Tuesday, February 5, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

Hey there,
just an additional question: Is it possible, to set the width only for horizontal pictures to 80% and make here the height flexible. For vertical pictures the height should than be 80% and the width flexible. I just don't have a clue how to do that...

[/quote]

The only thing you can do is encode the height you need for each individual image item in a <list> and then set the <picture> element to that width dynamically. I.e.

<block myblock>
/ trials = [1-2 = mytrial]
</block>

<trial mytrial>
/ ontrialbegin = [picture.mypicture.width = list.widths.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>

<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>

<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>

<item myitems>
/ 1 = "01.jpg"
/ 2 = "02.jpg"
</item>

[/quote]

Hey Dave, thanks a lot for your answer. I think, I don't really get what you are doing in your code.
Especially this peace of code:
/ items = (80%, 40%)
What are you doing here and where are the 40% from?
How does Inquisit know which picture is vertical, which horizontal and when to set the hight to 80% (for vertical pictures) and when to set the width to 80% (for horizontal pictures).

Thanks for your help!!!!!

Julia

[/quote]

<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>

The <list> is tied to the <picture> element. The 1st item in the list -- 80% -- indicates the width for the 1st item in the <picture> element, 01.jpg. The 2nd item in the <list> indicates the width for the <picture> element's 2nd item -- 02.jpg. In essence, this is the same as https://www.millisecond.com/support/docs/v4/html/howto/howtopairs.htm

[/quote]

Great, thanks, I think I have got it. :)
But then the height of both pictures is 80%, isn't it? I only want it to be 80% for vertical images.

Maybe I will try it differently: I want to fix only the longest dimension
of every painting at a standard size (say 1000 pixels), the other dimension should be set to default (so that the proportions of the image don't change)...

Thanks and sorry for asking so much!

Best regards

Julia

[/quote]

If it helps, here is my code :)

**************************************************************************************************************
**************************************************************************************************************
Stimulus Items

**************************************************************************************************************
**************************************************************************************************************

<item resonant_masterpieces>
/1 = "Campbell_soup_can.jpg"
/2 = "Der_Wanderer_uÌber_dem_Nebelmeer.jpg"
/3 = "FuÌnfzehn_Sonnenblumen.jpg"
/4 = "The_Birth_of_Venus.jpg"
/5 = "The_creation_of_Adam.jpg"
/6 = "The_Kiss.jpg"
/7 = "The_Persistence_of_Memory.jpg"
/8 = "The_Scream.jpg"
/9 = "The_starry_night.jpg"
/10 = "The_Water_Lily_Pond.jpg"
</item>

<item nonresonant_masterpieces>
/1 = "Armored_Train.jpg"
/2 = "Bacchus_and_Ariadne.jpg"
/3 = "Ballet_Rehearsal.jpg"
/4 = "Bonjour_Monsieur_Courbet.jpg"
/5 = "Boulevard_des_Italiens_Morning_Sunlight.jpg"
/6 = "Boy_Bitten_by_a_Lizard.jpg"
/7 = "Chalk_Cliffs_on_RuÌgen.jpg"
/8 = "Cornelia_Presenting_Her_Children_as_Her_Treasure.jpg"
/9 = "Cut_with_the_Kitchen_Knife.jpg"
/10 = "Dido_building_Carthage.jpg"
/11 = "Interieur_au_violon.jpg"
/12 = "La_Montagne_Saint_Victoire_Barnes.jpg"
/13 = "Laokoon.jpg"
/14 = "Les_Glaneuses.jpg"
/15 = "Les_Majas_at_the_balcony.jpg"
/16 = "Oath_of_the_Horatii.jpg"
/17 = "pier-and-ocean.jpg"
/18 = "Quince_Cabbage_Melon_and_Cucumber.jpg"
/19 = "Raft_of_the_Medusa.jpg"
/20 = "Raphael_Galatea.jpg"
/21 = "Self-Portrait_with_Vanitas_Symbols.jpg"
/22 = "Suprematist_Composition.jpg"
/23 = "Swing-Renoir.jpeg"
/24 = "The_Annunciation.jpg"
/25 = "The_Banquet_of_Cleopatra.jpg"
/26 = "The_Coronation_of_Napoleon.jpeg"
/27 = "The_Daughters_of_Edward_Darley_Boit.jpg"
/28 = "The_Embarakation_for_Cythera.jpg"
/29 = "The_Hay_Wain.jpg"
/30 = "The_Thankful_Poor.jpg"
/31 = "The_Third_Class_Carriage.jpg"
/32 = "The_Valpincon_Bather.jpg"
/33 = "Three_Philosophers.jpg"
/34 = "View_from_Mount_Holyoke.jpg"
/35 = "Vision_after_the_Sermon.jpg"
</item>

<item japanese>
/1 = "8_Famous_Sights_of_Xiao_&_Xiang_Rivers.jpg"
/2 = "Actor_Ichikawa_Danjuro.jpg"
/3 = "Autumn_and_Winter_Landscapes.jpg"
/4 = "Cypress_Trees.jpg"
/5 = "Eight_Famous_Sights_of_Omi.jpg"
/6 = "Hawk_on_a_pine_tree.jpg"
/7 = "Maiko.jpg"
/8 = "Merrymaking_Under_the_Cherry_Blossoms_-_Google_Art_Project.jpg"
/9 = "Morning_view_of_the_Uji_River.jpg"
/10 = "Narrow_ivy_road.jpg"
/11 = "Popular_Geisha_at_the_Pleasure_Quarters.jpg"
/12 = "Portrait_of_Ashikaga_Yoshimasa.jpg"
/13 = "Spring_Ridge.jpg"
/14 = "Sundial_of_Young_Women.jpg"
/15 = "Yoroboshi.jpg"
/16 = "Zhou_Maoshu_Appreciating_Lotuses.jpg"
</item>

<text fixationCross>
/ items = ("+")
/ fontstyle = ("Arial", 300px)
/ color = (0, 0, 0)
</text>

<picture resMas>
/items = resonant_masterpieces
/select = noreplace
/position = (50%, 50%)
/size = (90%, 90%)
/select = noreplace
</picture>

<picture nonresMas>
/items = nonresonant_masterpieces
/select = noreplace
/position = (50%, 50%)
/size = (90%, 90%)
/select = noreplace
</picture>

<picture japanese>
/items = japanese
/select = noreplace
/position = (50%, 50%)
/size = (90%, 90%)
/select = noreplace
</picture>

<radiobuttons ratingquestionLiking>
/ caption="Wie gefÃ¤llt Ihnen das Kunstwerk?"
/ options=("Sehr gut", "Gut", "Durchschnittlich", "Weniger", "Gar nicht")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

<radiobuttons ratingquestionUnderstanding>
/ caption="Wie gut verstehen Sie das Kunstwerk?"
/ options=("Sehr gut", "Gut", "Durchschnittlich", "Weniger", "Gar nicht")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

<radiobuttons ratingquestionWTP>
/ caption="Wie groÃ ist Ihre Bereitschaft Geld dafÃ¼r zu zahlen, dieses Kunstwerk im Museum zu sehen?"
/ options=("Sehr hoch", "Hoch", "Durschnittlich hoch", "Weniger hoch", "Gar nicht hoch")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

<radiobuttons questionPaintingFamilarity>
/ caption="Wie stark sind Sie mit dem Kunstwerk vertraut?"
/ options=("Sehr hoch", "Hoch", "Durschnittlich hoch", "Weniger hoch", "Gar nicht hoch")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

**************************************************************************************************************
**************************************************************************************************************
TRIALS
**************************************************************************************************************
**************************************************************************************************************

<trial resMas>
/ stimulustimes = [0=fixationCross; 2000=resMas]
/branch = [surveypage.ratingPage]
/timeout = 10000
/ pretrialpause=3000
</trial>

<trial nonresMas>
/ stimulustimes = [0=fixationCross; 2000=nonresMas]
/branch = [surveypage.ratingPage]
/timeout = 10000
/ pretrialpause=3000
</trial>

<trial japanese>
/ stimulustimes=[0=fixationCross; 2000=japanese]
/branch = [surveypage.ratingPage]
/timeout = 10000
/ pretrialpause=3000
</trial>

<surveypage ratingPage>
/caption = "Please answer the following items to the best of your ability"
/ fontstyle = ("Verdana", -12, true, false, false, false, 5, 0)
/questions=[1=ratingquestionLiking; 2=ratingquestionUnderstanding; 3=ratingquestionWTP; 4=questionPaintingFamilarity]
/finishlabel="Weiter"
/caption = "Bitte beantworten Sie folgende Fragen Ã¼ber das zuletzt gezeigte Bild:"
</surveypage>

<block EXP>
/trials = [1-61 = noreplace(resMas, resMas, resMas, resMas, resMas, resMas, resMas, resMas, resMas, resMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese)]
</block>

<expt>
/blocks = [1 = EXP]
</expt>

[/quote]

If you want the width to be fixed, but the height to vary, that works in the same way.

[/quote]

RE: Picture resizing

Dave — Tue, 05 Feb 2019 06:55:37 GMT

[quote]

[b]JuliaJuliaJulia - Tuesday, February 5, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Tuesday, February 5, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

If you want the width to be fixed, but the height to vary, that works in the same way.

RE: Picture resizing

JuliaJuliaJulia — Tue, 05 Feb 2019 05:47:59 GMT

[quote]

[b]JuliaJuliaJulia - Tuesday, February 5, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

RE: Picture resizing

JuliaJuliaJulia — Tue, 05 Feb 2019 05:46:46 GMT

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

RE: Picture resizing

Dave — Mon, 04 Feb 2019 16:55:27 GMT

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

JuliaJuliaJulia — Mon, 04 Feb 2019 14:07:27 GMT

[quote]

[b]Dave - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

RE: Picture resizing

Dave — Mon, 04 Feb 2019 11:55:58 GMT

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]

RE: Picture resizing

JuliaJuliaJulia — Mon, 04 Feb 2019 09:16:05 GMT

[quote]

[b]JuliaJuliaJulia - Monday, February 4, 2019[/b]

[/quote]