Image Object
The Image Object is one of the most commonly used objects in Labvanced, allowing researchers to present still images or pictures to participants during an experiment. It is commonly used in cognitive, social, and behavioral research to display stimuli such as objects, scenes, or faces. The Image Object is highly flexible and can be customized with various properties and settings to align with the experimental design. Researchers can control aspects like image size, position, rotation, and opacity to ensure precise stimulus presentation. Additionally, the Image Object can be dynamically manipulated through events, enabling advanced logical interactions.
The Image Object in Experimental Design
To work with an Image Object, it’s important to know how you can handle it during experimental design. Below, we will discuss several options of how you can add your images via this object, as well as how you can control it via customization, or using more dynamic approaches like data frames and events. Labvanced provides multiple ways to control the presentation and behavior of the Image Object within an experiment. These can be done using:
Let’s move on to say how an image can be added to the editor before diving into the topics mentioned above.
Adding an Image Object
To integrate an Image Object into your experiment, navigate to the Objects menu and select the Image Object.
Workflow Tip: Prepare and organize your stimuli in advance.
Object Properties Panel for Image Objects
The Object Properties panel, located on the right side of the screen during editing mode, provides you with several options for editing all properties of the image object, including options to upload image stimuli. As shown in the image below, there are several options on the right side-panel where you can control the settings of the image with just a few clicks. We renamed this image so that it’s called “Target Image”.
For a full explanation of these options, refer to this section at the bottom of the page where all the properties are listed in a table-format.
Note: Keep in mind that all of these properties are also accessible via Events. So if you want to have a custom action, like a button click, to change the property, that’s totally possible!
It’s very common to set a default property using this panel and then use an event to dynamically update it to a new value. For example, you can use an event and specify that upon image click (trigger), the image shifts to the right by 5 units.
Task Wizard for Adding Image Objects
If you like to set up your experimental task using spreadsheets / CSV data, the Task Wizard can be used to add your image stimuli.
In the example below, Columns B & C represent image stimuli which will then automatically be added to image objects for you, upon utilizing the Task Wizard in Labvanced.
In the example below, Columns B & C represent image stimuli which will then automatically be added to image objects for you, upon utilizing the Task Wizard in Labvanced.
Using this wizard, you can create your entire experimental task structure, including stimuli, events, variables, factors, conditions, randomization and data recordings from a single CSV file plus stimulus files.
Trial System and Image Objects
Once an image object is added to the frame, the Trial System can be collectively used to create different trials (several unique repetitions of the task) based on your experimental hypothesis.
Suppose you are studying emotion and want to categorize your trials and design based on emotion types. You can add two image objects to a frame, one with stimuli of happy emotions and another with sad emotions. Then, you could add a factor named ‘Emotion’ with two levels- ‘happy’ and 'sad’ before proceeding to upload the image stimuli under the relevant conditions.
📌 Hands-On Example: Uploading stimuli to specific levels and objects: In the video below we develop the experiment design by uploading image stimuli to the relevant condition.
For more information, please visit our Trial System documentation.
Events System and Image Objects
The Events System is a dynamic way to:
- Control how an image behaves
- Record specific properties of the object:
- Present image stimuli via data frames
We will discuss these points in greater detail now.
Controlling Image Behavior
Any behavior or appearance of the image can be modified using events.
In the example below we set up a mouse click (trigger) over the image object named ‘Target Image’ and specify that the Target Image’s x-coordinate (which is a property) should increase by +5. This essentially translates to each click will increase the x-coordinate by +5, shifting the image to the right.
Note: You can record and save in a variable the exact time in milliseconds that the object property change was updated on the screen!
Data and Recordings from the Image Object
To record values associated with the Image Object, you can use the Set/Record Variable action and specify what data you want to record.
Recording File Names
In some cases, you may want to record the exact names of the images that were presented in a trial during the experiment. That’s absolutely possible and easy to set up!
In the example below, we will store the image names for the correct image and the incorrect image. There are two variables– 'correct image name’ and ‘incorrect image name’, both which store ‘string’ data since the name of the file is in string format.
To point to the object, you simply click on the pencil icon and then select the Frame / Task / Object category and choose Object Property. For the first field, you select the target object and for the second field you select Filename. Similarly, for the 'incorrect image name' variable, we point to the filename of the stimulus by linking to the 'incorrect' image object.
As a result of the above, the specific file names of the images are listed per trial as shown in the image below.
The example above is taken from this sample study on the Bouba-Kiki effect which you can import to your account.
Randomization and Image Objects
Randomization is another key topic related to image presentation. There are many ways to discuss randomization in this context as randomization heavily relies on the particular experiment at hand.
With regards to the Image Objects, randomization typically involves changing the location of the target image or selecting a random image from a set.
For more information about randomization and balancing in Labvanced, refer to this page.
Research Spotlight: The Image Object in action
The Image Object plays a crucial role in experimental research, especially in studies involving visual perception, memory, and attention. Labvanced has enabled researchers across various domains to conduct their studies using Labvanced's Image Object.
Visual Attention Dynamics: An Eye Tracking Study
The study (Calignano et al., 2024) explored how semantic processing, i.e., the meanings of words and objects influence where and how we direct our visual focus. It was hypothesised that real words and familiar objects would bias attentional engagement and target detection more effectively than pseudo-words or pseudo-objects.
Participants were presented with primes (initial cues that might affect our attention and perception of later targets). The researchers carried out two web-based eye-tracking experiments using Labvanced:
- Experiment 1: Participants were presented with words (either real words or pseudo-words) as primes
- Experiment 2: Involved presenting images (real objects or pseudo-objects) as primes.
Experimental paradigms with Words (experiment 1) and Images (experiment 2); Calignano et al. (2024).
After viewing the prime, they saw a spatial cue (either valid or invalid) indicating where to look for the target. A valid spatial cue appears at the same location as the target, while an invalid cue appears at a different location from the target. Participants had to identify targets and respond by pressing a key when they locate the target.
The data collected included response times (milliseconds) for target detection, accuracy rates for task performance and eye-tracking data for attentional analysis.
Findings showed that words and recognized objects can enhance target detection through top-down processes even when their presentation is not directly related to the task.
Image Object Properties Table
As with any object in Labvanced, there are general but also object-specific properties that appear on the right side panel when working with the object. Below are the specification and descriptions associated with the Image Object options:
Main Properties of the Image Object
| Property Name | Data Type | Modifiable, How | Frame Type | Description |
|---|---|---|---|---|
Name | String | Yes, text box | Canvas & Page | The name of the object. The name is used many times as reference to the object (i.e. within events), so it should be unique. |
Visibility | Numeric (0-1) | Yes, checkbox | Canvas | The transparency value of the object. With a value of 0 the object will the completely invisible; a value of 1 is completely visible. |
Active | Boolean (true / false) | Yes, checkbox | Canvas & Page | Determines whether the object is active and can be changed during the experiment execution. If set to false, the object will not elicit any actions. |
Position & Size Properties of the Image Object
| Property Name | Data Type | Modifiable, How | Frame Type | Description |
|---|---|---|---|---|
X | Numeric (0- width of frame) | Yes, text or arrows | Canvas | The X position of the object. |
Y | Numeric (0-height of frame) | Yes, text or arrows | Canvas | The Y position of the object. |
Width | Numeric (0-width of frame) | Yes, text or arrows | Canvas | The width of the object. |
Height | Numeric (0-width of frame) | Yes, text or arrows | Canvas | The height of the object. |
Anchor | Categorical (1-9) | Yes, select option | Canvas | The anchor sets the "position reference point" of the object. By default, this is the top left corner. |
Scale & Rotation Properties of the Image Object
| Property Name | Data Type | Modifiable, How | Frame Type | Description |
|---|---|---|---|---|
Scaling | Numeric (0-Inf) | Yes, text or arrows | Canvas | Changes the scale / zoom of the element. Larger values will zoom-in the element. |
Rotation | Numeric (0-359) | Yes, text or arrows | Canvas | Changes the object's rotation. 0 is the default upright position. |
Keep aspect ratio | Boolean (true / false) | Yes, checkbox | Canvas | Determines whether the object's aspect ratio is kept when the object is rescaled. |
Style of the Image Object
| Property Name | Data Type | Modifiable, How | Frame Type | Description |
|---|---|---|---|---|
Border-Size | Numeric (0-INF) | Yes, text or arrows | Canvas | Changes the object's border size. 0 will show no border. |
Border-Color | Hex String (Color) | Yes, select option | Canvas | Changes the object's border color. |
Background (BG)-Color | Hex String (Color) | Yes, select option | Canvas | Changes the object's background color. By default there will be no color / transparent. |
Roundness | Numeric (0-1) | Yes, text or arrows | Canvas | Changes the object's roundness. 1 is a completly round object, 0 is a completely square object. |
Overflow-X | Categorical (Hidden,Auto,Visible) | Yes, select option | Canvas | Determines whether the object will have a visible scrollbar in the X dimension. |
Overflow-Y | Categorical (Hidden,Auto,Visible) | Yes, select option | Canvas | Determines whether the object will have a visible scrollbar in the Y dimension. |
Scroll Margin | Numeric | Yes, text or arrows | Canvas | Determines the margin of the scroll bar in percent. |
Change CSS Properties | CSS code | Yes, checkbox and text box | Canvas | Changes an aspect of the object's appearance using CSS code. |
Mouse Interaction in Player
| Property Name | Data Type | Modifiable, How | Frame Type | Description |
|---|---|---|---|---|
Selectable | Boolean (true / false) | Yes, checkbox | Canvas | Determines whether the object can be selected / highlighted during the experiment execution. |
Highlight on Select | Boolean (true / false) | Yes, checkbox | Canvas | Determines whether there object that has been selected visually appears selected (ie. with a border). |
Draggable | Boolean (true / false) | Yes, checkbox | Canvas | Determines whether the object can be dragged during the experiment execution. |
Resizable | Boolean (true / false) | Yes, checkbox | Canvas | Determines whether the object can be rescaled during the experiment execution. |
Track Scroll | Boolean (true / false) | Yes, checkbox and numeric values if activated (ScrollPositionX, ScrollPositionY) | Canvas | Enables tracking the scroll if an object is presented with scroll bars. |
Image Properties
| Property Name | Data Type | Modifiable, How | Description |
|---|---|---|---|
Filename | String | Yes, text box | The given name of the file. |
Select File (Folder Icon) | Function | Yes, click on icon | A click on the folder icon opens the file manager to choose an existing file or upload and select a new file. |
Stimulus Info | String | Yes, text box | A modifiable property that can be used to store dynamic stimulus information during the experiment execution. |
Stretch to Fit Bounding Box | Boolean (true / false) | Yes, checkbox | When activated, stretches the image to completely fill the bounding box. |
Bounding Box Fit | Function | Yes, click on icon | Upon clicking "Fit," the bounding box will be cropped to the dimensions of the image. |
Auto Fit Bounding Box with Image | Function | Yes, checkbox | When activated, the bounding box will automatically be changes to match the image. |