A SlideButton sub-object may be added to a Slide or FeedbackDisplay object to present a defined target area. When an input mask is enabled on the parent object (i.e., Slide or FeedbackDisplay), the SlideButton sub-object may be used as a response input option (i.e., like the keyboard or the mouse). See E-STUDIO: Button Device [24411] for information pertaining to using a button for input.
The display of a SlideButton sub-object may be composed of one or more elements (i.e., combination of text, background, icon, border, and image). The image below indicates the relationship between possible defined component areas within the SlideButton sub-object.
NOTE: It is important to note that the image below is intended to indicate the defined areas available within the SlideButton, if present, and how they relate to each other. However, while the image indicates distinct areas that are affected by varying properties, these areas may actually overlap depending on property settings, and not all elements will be used on all SlideButton sub-objects (e.g., if the padding property values are equal to zero, the Padding Rectangle exactly overlays the Frame; if an icon is not used, the Content rectangle would overlay the Padding Rectangle). In addition, the drawing order of the components is important in the ultimate display of the Button (see Drawing Order below).
|
|
Element |
Defined by |
Description |
Theme Tab: Properties affecting size |
|
|
Frame |
Frame: X, Y, Width, Height |
The outermost border of the SlideButton sub-object, as defined by the Frame properties. Defines the maximum area available for the SlideButton. |
General: BorderWidth
|
|
|
Background Rectangle |
Inset on Frame |
Defines the maximum area permitted for a background image. The Background Rectangle is only affected by the Frame settings, and is independent of the other elements. |
Background: Border Left, Border Right, Border Top, Border Bottom |
|
|
Padding Rectangle |
Frame, with padding values applied |
Defines the maximum area available for combinations of text, icon, and/or image. Not affected by Background border. |
General: Padding Left, Padding Right, Padding Top, Padding Bottom |
|
|
Icon Rectangle |
Inset on Padding Rectangle, with Icon width/height applied |
Defines the maximum area available for an icon image. |
Icon: Width, Height |
|
|
Icon Margin* |
Icon rectangle, with Icon margins applied |
Defines the horizontal and/or vertical spacing between the Icon Rectangle and the Content Rectangle. |
Icon: MarginX, MarginY
|
|
|
Content Rectangle |
Padding Rectangle, reduced by the Icon rectangle (if present) |
Defines the area available for display of text and/or image relative to the Padding Rectangle. This area is reduced/adjusted for the Icon rectangle, if an icon is specified, and/or the Icon Margin properties, if > 0. |
General: Padding Left, Padding Right, Padding Top, Padding Bottom
Icon: Width, Height |
* Note: Only MarginX is represented in the image above
Component Drawing Order
In addition to properties related to size of the individual elements composing the SlideButton, it is important to consider the order in which the components are drawn in order to understand why specific property settings may or may not appear to take effect. The order in which SlideButton components are drawn is as follows:
- Background color
- Background image
- Simple border
- Content image
- Icon image
- Text
Refer to the SlideButtonStyle (Object) topic within the E-Prime Command Reference for important information pertaining to ordering of elements.
The General tab on the SlideButton sub-object defines high-level properties of the sub-object.
|
Field |
Possible Values |
Description |
|
Name |
String values |
Defines the string by which the button is identified. |
|
Response |
String values |
Defines the value logged in the RESP value when the button is pressed. This value is optional, but overrides Name when a value is entered. |
|
Word Wrap |
Yes, No |
Permits wrapping of text appearing on the button. |
|
Auto Check |
Yes, No |
Determines whether or not the user has the ability to "check" the button (i.e., if AutoCheck is true, the Checked property will be toggled when the button is pressed. |
|
Initial Check |
Yes, No |
Determines whether or not the button appears as "checked" when the parent object is run. |
The Name property is used to identify the sub-object within the design interface, and the Response property is used to log a value different from the Name in the data file (i.e., in the Object.RESP attribute, where "Object" refers to the parent object for which the button is used to collect input). A setting for the Response property is not required, but if used, will override the Name setting. For example, if a SlideButton sub-object named "StartButton" is used to collect input on a Slide object named "Stimulus," and the Response field is left blank, Stimulus.RESP will be logged as "StartButton" in the data file for a response using this SlideButton. If a value of "1" is entered into the Response field, the Response value overrides the Name value, and the Stimulus.RESP attribute will instead log a value of "1" for a response using this SlideButton. A label below the Response field indicates how the RESP property will be reported in the data file.
The Allowable and Correct fields on the Duration/Input tab are required to match the value (Name or Response) that is being used.
Auto Check and Initial Check are relevant when the SlideButton is being used to function as a checkbox (i.e., toggle on/off).
The Frame tab is used by the SlideButton sub-object to define a rectangular area on the parent display area (e.g., SlideState) as the display area for the Button.
The rectangular area defined by the properties is referred to as a “Frame.” Refer to E-STUDIO: Frame [22716] for more information concerning Frames. Note that there are separate Frame properties for a SlideButton sub-object, the SlideState on which it resides, and the parent Slide object that houses both of them. Be careful to select the appropriate element for which you wish to configure the Frame.
|
Field |
Possible Values |
Description |
|
Width |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references |
Sets the width of the display area (frame) to a percentage of the x (horizontal) resolution, or to a fixed pixel size. |
|
Height |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references |
Sets the Height of the display area to a percentage of the y (vertical) resolution, or to a fixed pixel size. |
|
X |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references |
Sets the anchor position of the frame along the horizontal axis |
|
Y |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references |
Sets the anchor position of the frame along the vertical axis |
|
XAlign |
left, center, right |
Determines the horizontal positioning of the defined frame in relation to the X and Y anchor position. |
|
YAlign |
top, center, bottom |
Determines the vertical positioning of the defined frame in relation to the X and Y anchor position. |
The properties of the SlideButton sub-object are based on a theme, or a collection of settings. This collection of settings is organized within sub-tabs on the SlideButton's Theme tab.
|
Field |
Possible Values |
Description |
|
Parent Theme |
BaseButton, BaseChoice, BaseSlider, any custom themes added |
Predefined templates including default settings for specific sub-object types. |
Parent Theme
Properties are, by default, inherited from a parent theme. If these values are not modified (see Individual Button section below), the inherited values are indicated in the General properties at the bottom of the Theme tab (e.g., the BorderColor property setting of Black in the image above is inherited from the parent theme).
Properties for a parent theme may be edited using the Theme Editor (see E-STUDIO: Theme Editor [23585]). When editing the parent theme, modifications will apply to all SlideButton sub-objects within the experiment.
Individual Button
Properties may also be modified for a specific button. When modifying properties for a specific/individual SlideButton sub-object, modifications will apply ONLY to the specific button being modified, and will not affect other buttons within the experiment. If a property is modified for a specific SlideButton, the value for that property will appear in bold font type within the interface, indicating that the value deviates from the value within the parent theme. Literal/exact values (e.g., “YES”) appear in black font color. Variable values/attribute references (e.g., “[ButtonText]”) appear in blue font color.
|
Field |
Possible Values |
Description |
|
Property View |
Styles, Feedback |
Permits configuration of the appearance of a SlideButton (Styles), or feedback provided in response to input received (Feedback) |
|
Field |
Possible Values |
Description |
|
Circumstance |
Normal, Hover, Down, Fixated, Disabled, Checked, CheckedHover, CheckedDown, CheckedFixated, CheckedDisabled |
Selects the state of the button for which the displayed properties apply. |
General
The properties on the General tab within the Theme indicate settings for the SlideButton related to the background and border (see Parent Theme and Individual Button sections above for information pertaining to inherited versus individual settings).
|
Field |
Possible Values |
Description |
|
BorderColor |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime), Attribute references |
Sets the color of the border to be drawn around the overall display area (i.e., Frame). BorderWidth must be a positive value for BorderColor to be visible. |
|
BorderWidth |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references |
Sets the width of the Frame border. |
|
BackColor |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime), Attribute references |
The solid background color on which to display the text characters (functionality depends on BackStyle property). |
|
BackStyle |
opaque, transparent |
Defines the style of the background on which the text is displayed. |
|
PaddingLeft |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the location of the left side of the Content Rectangle relative to the left side of the Padding Rectangle. |
|
PaddingRight |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the location of the right side of the Content Rectangle relative to the right side of the Padding Rectangle. |
|
PaddingTop |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the location of the top of the Content Rectangle relative to the top of the Padding Rectangle. |
|
PaddingBottom |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the location of the bottom of the Content Rectangle relative to the bottom of the Padding Rectangle. |
Text
The properties on the Text tab within the Theme indicate settings related to the display of text on the SlideButton (see Parent Theme and Individual Button sections above for information pertaining to inherited versus individual settings).
|
Field |
Possible Values |
Description |
|
Text |
String values, Attribute references |
Sets the text to be displayed on the SlideButton. |
|
Text Color |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime, etc.), Attribute references |
Sets the color for the display of text. |
|
AlignX |
left, center right, Attribute references |
Horizontal alignment of the text within the Content rectangle |
|
AlignY |
top, center bottom, Attribute references |
Vertical alignment of the text within the Content rectangle |
|
Font |
Dropdown list created from those available in the system, string values (e.g., "Arial") |
Specifies the name of the font to be used for the display of text. |
|
Size |
Integer values (e.g., 10, 12), Integer values +.5 (e.g., 10.5) |
Sets the point size of the font. |
|
Bold |
Yes, No, Attribute references |
Sets the bold status of the text. |
|
Underline |
Yes, No, Attribute references |
Sets the underline status of the text |
|
Italic |
Yes, No, Attribute references |
Sets the italic status of the text |
|
Strikeout |
Yes, No, Attribute references |
Sets the strikeout status of the text (a line drawn horizontally through the text). |
Image
The properties on the Image tab within the Theme indicate settings related to the display of an image on the SlideButton (see Parent Theme and Individual Button sections above for information pertaining to inherited versus individual settings).
|
Field |
Possible Values |
Description |
|
File |
String values (e.g., MyImage.png), Attribute references |
Specifies the name of the image file to load. See INFO: Use / for path separation for E-Objects with filename property [16554] for information pertaining to specification of file location. |
|
AlignX |
left, center right, Attribute references |
Horizontal alignment of the image within the Content Rectangle |
|
AlignY |
top, center bottom, Attribute references |
Vertical alignment of the text within the Content Rectangle |
|
MirrorX |
Yes, No, Attribute references |
Specifies whether or not to flip the image within the Content Rectangle along the horizontal axis. |
|
MirrorY |
Yes, No, Attribute references |
Specifies whether or not to flip the image within the Content Rectangle along the vertical axis. |
|
Stretch |
Yes, No, Attribute references |
Specifies whether the image should be expanded/reduced to fit the display area. |
|
Stretch Mode |
None, Both, FitX, FitY, Fit, Fill |
Specifies whether or not the image within the Content Rectangle should be sized to accommodate the display area, and the method to use during stretching (See Examples below). |
|
Use Color Key |
Yes, No, Attribute references |
Determines if a color key should be used to provide transparency. |
|
Color Key |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime, etc.), Attribute references |
Specifies the color to be used to provide transparency within an image. |
Examples
The examples below illustrate the results of various Stretch and Stretch Mode property settings when specifying an image within the Content Rectangle (Note no use of an Icon in the examples below). The red outline represents the boundary of the SlideButton.
|
|
Image Settings |
Result |
|
|
Stretch: No Stretch Mode: N/A
|
No stretching or shrinking of the image occurs. |
|
|
Stretch: Yes Stretch Mode: Both
|
Stretch or shrink the image on each axis to fit the space while ignoring aspect ratio. May result in distortion. |
|
|
Stretch: Yes Stretch Mode: FitX
|
Fit the width of the image to the space, calculate height maintaining aspect ratio. |
|
|
Stretch: Yes Stretch Mode: FitY
|
Fit the height of the image to the space, calculate width maintaining aspect ratio. |
|
|
Stretch: Yes Stretch Mode: Fit
|
Fit the smaller of width or height of the image to the space, calculate the other direction maintaining aspect ratio. Will result in the same output as FitX if width is the smaller direction; will result in the same output as FitY if height is the smaller direction. |
|
|
Stretch: Yes Stretch Mode: Fill |
Fit the larger of width or height of the image to the space, calculate the other direction maintaining aspect ratio. Will result in the same output as FitX if width is the larger direction; will result in the same output as FitY if height is the larger direction. |
Icon
The properties on the Icon tab within the Theme indicate settings related to the display of an icon image to represent the meaning/purpose of the button via a graphic (see Parent Themeand Individual Buttonsections above for information pertaining to inherited versus individual settings).
A set of icon images is included as part of the E-Prime full system installation (C:\Program Files (x86)\PST\E-Prime 3.0\Resources\Icons), and a shortcut is automatically provided when selecting or referring to a system provided resource file. When navigating to or specifying an absolute path that is associated with the root folder of the system-provided resources (C:\Program Files (x86)\PST\E-Prime 3.0\Resources), the value is translated to a shortened path with “@Resources” replacing the portion of the absolute path of the resource image area. If the “@Resources” shortcut is explicitly typed in, it is likewise translated and accepted as a valid path.
|
Field |
Possible Values |
Description |
|
File |
String values (e.g., BlackOnTransparent-ArrowDown.png), Attribute references, Filenames including @Resources |
Specifies the name of the icon file to load. See INFO: Use / for path separation for E-Objects with filename property [16554] for information pertaining to specification of file location. |
|
Width |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the width of the Icon Rectangle |
|
Height |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the height of the Icon Rectangle |
|
AlignX |
left, center right, Attribute references |
Horizontal alignment of the text relative to the Icon Rectangle |
|
AlignY |
top, center bottom, Attribute references |
Vertical alignment of the text relative to the Icon Rectangle |
|
Wrap Content X |
Yes, No, Attribute references |
Sets the horizontal alignment of the Content Rectangle in relation to the Icon Rectangle, permitting overlap. If Yes, the width of the Content Rectangle is reduced by the width of the Content Rectangle (e.g., no overlap). Note, wrapping is ignored when the AlignX setting=Center. |
|
Wrap Content Y |
Yes, No, Attribute references |
Sets the vertical alignment of the Content Rectangle in relation to the Icon Rectangle, permitting overlap. If Yes, the height of the Content Rectangle is reduced by the height of the Content Rectangle (e.g., no overlap). Note, wrapping is ignored when the AlignY setting=Center. |
|
Margin X |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Specifies the size of the horizontal margin to apply to the outer right side of the Icon Rectangle to provide spacing between the Icon and the Content (i.e., reduces the size of the Content Rectangle). Wrap Content X must be "Yes" for Margin X to take effect. |
|
Margin Y |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Specifies the size of the vertical margin to apply to the outer top/bottom of the Icon Rectangle to provide spacing between the Icon and the Content (i.e., reduces the size of the Content Rectangle). Wrap Content Y must be "Yes" for Margin Y to take effect. |
|
Use Color Key |
Yes, No, Attribute references |
Determines if a color key should be used to provide transparency. |
|
Color Key |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime, etc.), Attribute references |
Specifies the color to be used to provide transparency within an image. |
|
Stretch Mode |
None, Both, FitX, FitY, Fit, Fill |
Specifies whether or not the images should be sized to accommodate the display area, and the method to use. · Both – Stretch to fit X and Y, ignores aspect ratio · FitX – Fit the width, calculate height from aspect ratio · FitY – Fit the height, calculate width from aspect ratio · Fit – Fit to the SMALLER of width or height · Fill – Fit to the LARGER of width or height |
Examples
The examples below illustrate the results of various settings related to use and positioning of Icon and Content components. The Icon rectangle is represented by the checkmark in a bordered box. The Content Rectangle is represented by the blue rectangle. The red outline represents the boundary of the SlideButton.
|
|
Icon Settings |
|
|
AlignX: Left AlignY: Top Wrap Content X: Yes Wrap Content Y: Yes |
|
|
AlignX: Left AlignY: Top Wrap Content X: Yes Wrap Content Y: No |
|
|
AlignX: Left AlignY: Top Wrap Content X: No Wrap Content Y: Yes |
|
|
AlignX: Left AlignY: Top Wrap Content X: No Wrap Content Y: No |
|
|
AlignX: Center AlignY: Top Wrap Content X: <IGNORED> Wrap Content Y: Yes |
|
|
AlignX: Right AlignY: Center Wrap Content X: Yes Wrap Content Y: <IGNORED> |
|
|
AlignX: Center AlignY: Center Wrap Content X: <IGNORED> Wrap Content Y: <IGNORED> |
Background
The properties on the Background tab within the Theme indicate settings related to the background of the SlideButton (see Parent Theme and Individual Button sections above for information pertaining to inherited versus individual settings).
A set of background images is included as part of the E-Prime full system installation (C:\Program Files (x86)\PST\E-Prime 3.0\Resources\Backgrounds), and a shortcut is automatically provided when selecting or referring to a system provided resource file. When navigating to or specifying an absolute path that is associated with the root folder of the system-provided resources (C:\Program Files (x86)\PST\E-Prime 3.0\Resources), the value is translated to a shortened path with “@Resources” replacing the portion of the absolute path of the resource image area. If the “@Resources” shortcut is explicitly typed in, it is likewise translated and accepted as a valid path.
|
Field |
Possible Values |
Description |
|
File |
String values (e.g., Simple1-BlueDark-Normal.png), Attribute references, , Filenames including @Resources |
Specifies the name of the image file to load as the background. See INFO: Use / for path separation for E-Objects with filename property [16554] for information pertaining to specification of file location. |
|
Border Left |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the size of the left border relative to the Frame. |
|
Border Right |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the size of the right border relative to the Frame. |
|
Use Color Key |
Yes, No, Attribute references |
Determines if a color key should be used to provide transparency. |
|
Border Top |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the size of the top border relative to the Frame. |
|
Border Bottom |
Numeric values in pixels (e.g., "10"), Relative values (e.g., 10%), Attribute references. |
Sets the size of the bottom border relative to the Frame. |
|
Color Key |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime, etc.), Attribute references |
Specifies the color to be used to provide transparency within an image. |
Mask
The properties on the Mask tab within the Theme indicate settings related to the display of a file to be used as a mask on the SlideButton (see Parent Theme and Individual Button sections above for information pertaining to inherited versus individual settings). The Mask image redefines the location at which click, press, and hover events occur on the button.
|
Field |
Possible Values |
Description |
|
File |
String values (e.g., MyMask.png), Attribute references |
Specifies the name of the image file to load as the mask. See INFO: Use / for path separation for E-Objects with filename property [16554] for information pertaining to specification of file location. |
|
Color Key |
Color value (RGB values), Specific color strings (e.g., black, maroon, lime, etc.), Attribute references |
Specifies the color to be used to provide transparency within an image. |
The SlideButton sub-object supports the ability to provide automatic feedback when generating an input response. The Feedback view organizes settings related to the presentation of audio feedback associated with a specific Circumstance state of a SlideButton. Like the Styles properties, the Feedback properties are individually configurable for each Circumstance of the SlideButton. Use the Circumstance field to select the state of the button to configure. Additionally, feedback is customizable for any response type (e.g., audio feedback may differ for a click versus a double click).
During experiment creation, audio feedback is not initially enabled for any of the SlideButton Circumstance states, unless inherited from the parent theme. If feedback entries are inherited, they appear as disabled, and may not be modified.
Add Feedback
To add audio feedback (e.g., a "click" sound when pressing a SlideButton), use the Add Feedback button. A feedback entry will be created with default settings. A feedback entry is added, by default, configured for the Click response, Presses Only, etc.
Configure the feedback entry by selecting the desired entry from the dropdown list associated with each property/column.
Sound
To select content for the Sound field, select a specific feedback entry to enable the Browse For Sound… button. By default, clicking the Browse For Sound… button will allow the user to browse to a sound file, beginning in the experiment folder. The dropdown arrow on the right side of the Browse For Sound… button permits quick selection of the Experiment or Resources folder to initiate the browse.
A set of sound files is included as part of the E-Prime full system installation (C:\Program Files (x86)\PST\E-Prime 3.0\Resources\Sounds), and a shortcut is automatically provided when selecting or referring to a system provided resource file. When navigating to or specifying an absolute path that is associated with the root folder of the system-provided resources (C:\Program Files (x86)\PST\E-Prime 3.0\Resources), the value is translated to a shortened path with “@Resources” replacing the portion of the absolute path of the resource image area. If the “@Resources” shortcut is explicitly typed in, it is likewise translated and accepted as a valid path.
Feedback Properties
|
Field |
Possible Values |
Description |
|
Response |
Down, Click, Dbl Click, Hover, Fixation, LongPress, Checked |
Specifies the type of response for which to configure the feedback event. |
|
Sound |
String values (e.g., MyFeedbackSound.wav.), Attribute references, Filenames including @Resources |
Specifies the audio file to be played as the feedback event (max duration 4000 ms). See INFO: Use / for path separation for E-Objects with filename property [16554] for information pertaining to specification of file location. |
|
Press |
Presses and Releases, Presses Only, Releases Only |
Specifies the type of event to which feedback applies. |
|
Primary |
Primary and Secondary, Primary Only, Secondary Only. |
Determines whether the feedback event will apply to responses collected by primary or secondary keys only, or both (see Primary and Secondary Keys below). |
|
Active |
Active and Inactive, Active Only, Inactive Only |
Specifies whether to limit feedback based on whether or not a SlideButton is active. |
|
Enabled |
Enabled And Disabled, Enabled Only, Disabled Only |
Specifies whether to limit feedback based on whether or not a SlideButton is enabled. |
Modify Feedback
Settings for feedback entries may be modified using the dropdown lists associated with each of the fields within a specific entry. Select the desired option from the dropdown list for a particular field, and apply the changes using the Apply button.
Remove Feedback
To remove a feedback entry, select the entry in the list to enable the Remove Feedback button. Click Remove Feedback to remove the entry from the list.
Next Article: E-STUDIO: SlideChoice Sub-Object [23599]
Previous Article: E-STUDIO: SlideMovie Sub-Object [23597]
Comments
0 comments
Please sign in to leave a comment.