Image Component
Use the image component to add pictures to your sim. Use the image properties to delete, change the image size, add more images, adjust the position in the sim, and create conditional events that are triggered by comparative values (for more information, see ‘Image Settings: Conditionals’ below).Access the image component properties by clicking on the image component after it has been placed on the canvas. The Image Settings tab will appear in the component panel displaying a stack of horizontal tabs that are labeled and categorized as follows:
- Properties – Contains the property options used to add images, delete images, and select default images to display.
- Conditionals – Contains the property options used to set the state of your image to be visible or invisible based on the value of a variable in the model, a value of an interface variable, or the value of a simulation property.
- Position, and ToolTip – Contains the property options used to adjust the size and position of the image and provide tooltip information to the user.
Image Settings: Properties
Click the 'Properties' tab in the component panel to access the properties used to add images, delete images, and select default images to display.- Selected Default Image to Display – Click on the ‘Selected Default Image to Display’ drop-down menu arrow to choose a default image to display.
- Images to choose from – Displays a list of all available images so that unnecessary images can be deleted.
- Delete Selected Image – Click the 'Delete Selected Image' button to delete the image selected from the ‘Images to choose from’ list box.
- Upload More Images – Click the 'Upload More Images' button to open a file browser window for uploading images. Images that can be uploaded include: .jpg, .jpeg, .gif, and .png.
- Maintain Aspect Ratio – Use this checkbox to prevent image distortion when manually adjusting the image size.
FAQs
How do I add an image?
Image Settings: Properties
Image Settings: Conditionals
A conditional is used to set the state of your image to be visible or invisible based on the value of a variable in the model, a value of an interface variable, or the value of a simulation property. Click on the 'Conditionals' tab in the component panel to access the properties used to create conditions for your images.- Display – Click the ‘Display’ drop-down menu arrow to select an image to display.
- When – Click on the ‘When’ drop-down menu arrow, and then click ‘Browse’ to choose a variable, an interface variable, or a simulation property.
- Is Equal To – Click the ‘Is Equal To’ drop-down menu arrow to create a condition for the image, and then enter a value in the text entry box to compare to the ‘When’ option.
The 'Is equal to' drop-down menu options include the following:- “is greater than or equal to”
- “is equal to”
- “is greater than”
- “is less than”
- “is less than or equal to”
- “is not equal to”
- “is greater than or equal to”
- Add Conditional – Click the ‘Add Conditional’ button to add the conditional to the conditional list.
- Remove Conditional – Click the ‘Remove Conditional’ button to remove a selected conditional from your conditional list.
- Edit Conditional – Click the ’Remove Conditional’ button to edit a selected conditional from your conditional list.
Note that conditionals are executed in the order they appear in the list and execution stops when the first conditional is met.
FAQs
How do I create a conditional?
Image Settings: Conditionals Tab
Image Settings: Size, Position, and ToolTip
Click the ‘Size, Position, and ToolTip’ tab in the component panel to access the properties used to adjust the size and position of the image and provide tooltip information to the user.- X – Enter a number in the ‘X’ text entry box to adjust the left and right positioning of the image on the canvas. A higher number moves the image to the right, and a lower number moves the image to the left.
- Y – Enter a number in the ‘Y’ text entry box to adjust the up and down positioning of the image on the canvas. A larger number will lower the position, and a smaller number moves the image higher.
- Width – Enter a number in the ‘Width’ text entry box to adjust the image width.
- Height – Enter a number in the ‘Height’ text entry box to adjust the image height.
- Tab Index – Specifies the tab ordering of objects in a SWF file. The tabIe index property is -1 by default, meaning no tab index is set.
- Lock – Use the ‘Lock’ checkbox to lock the image’s position in place on the canvas. A small lock icon will appear near the image. Click on the lock icon or uncheck the lock checkbox to unlock the image.
- Visible to Facilitator Only – Use the ‘Visible to Facilitator’ checkbox to restrict the image ‘s visibility to only be seen by facilitators.
- Tooltip – Enter in the details of the image in the ‘ToolTip’ text entry box. The details entered will appear on the screen when a user places their mouse cursor on or across the image.
Image Settings: Size, Position, and ToolTip Tab
