GUI Panel Element

Modified on 2018/08/03 02:04 by Administrator Categorized as User Interface
<div style="margin-right: 10px; margin-left: 16px; margin-bottom:10px; float: right; width: 500px; overflow: hidden; height: auto; padding: 0px; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));background: -moz-linear-gradient(top, #fbfbfb, #fafafa);border: 1px dashed #ddd;box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ddd, 0 0 0 10px #fff, 0 0 2px 10px #eee;">
== Summary ==
{s:Element Info Panel
| title=GUI Panel
| category=User Interface
| icon=[image|Element Icon|{UP(GUI-Panel-Element)}GUI-Panel-Element-Icon.png]
| author= OkazoLab
| addin= Base Layer
| scope= Parent event
| usage= Stimulus screen
| ownsnippets=  XAML Content
}
== Properties ==
{|
|-
! Name
! Description                              
! Constraints
! Type
! On<br/>runtime<br/>change
|-
| colspan="5" bgcolor="#AADDDDD" | Settings
|-
| Open XAML Editor        
| Opens a XAML editor that , where you can define a GUI layout        
| {s:atDesign}        
| Boolean        
|  
|-
| Is Input Enabled        
| Defines whether the user input is allowed into the GUI layout. If the value is false, the GUI layout is shown but its XAML elements are can not receive an user input (e.g. by the keyboard or mouse).        
| {s:atNormal}        
| Boolean        
|  
|-
| Visual Theme        
| Defines a visual theme for the element's GUI        
| {s:atDesign}        
| enXAML..        
|  
|-
| colspan="5" bgcolor="#AADDDDD" |   
|-
|          
|          
| {s:atNormal}        
| Boolean        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Visual Appearance
|-
| Alpha Masking        
| Defines, whether the visual content is used to create an opacity mask on the event surface. If masking is on, the content's pixel luminance (or, its inverse) defines transparency within element's viewport. The alpha masking allows, for example, create transparent holes on the event surface.        
| {s:atDesign}        
| Int32        
|  
|-
| AntiAliasing        
| if true, the rendered content will be antialiased for smoother visual appeariance. If false, rendering will be authentic to its source, e.g. a bitmap.        
| {s:atNormal}        
| Boolean        
|  
|-
| Position        
| Defines a position of the rendering viewport on the screen        
| {s:atNormal}        
| clPoint        
|  
|-
| Size        
| Defines a size of the element's rendering viewport on the screen        
| {s:atNormal}        
| clSize        
|  
|-
| Z Order        
| Indicates Z Order of the element on the given event        
| {s:atStatus}        
| Int32        
|  
|-
| Pivot Point        
| Defines alignment of the pivot point (or, element's position) relative to element's rendering area. The pivot point sets the center of element's rotation and scale directions.        
| {s:atNormal}        
| stAlig..        
|  
|-
| Visible        
| Defines whether the element is visible        
| {s:atNormal}        
| Boolean        
|  
|-
| Rotation        
| Rotation angle in degrees        
| {s:atNormal}        
| Double        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Effects
|-
| Transparent Color        
| The color of the original pixels of rendered content that will be set as transparent        
| {s:atNormal}        
| stColor        
|  
|-
| Transparent Tolerance        
| Tolerance ratio for choosing colors that become transparent. Zero means that effect is not applied, 1 denotes that all colors will become trasparent        
| {s:atNormal}        
| Int32        
|  
|-
| Color Mask        
| Produces a multiplicative combination of the original pixels
and the selected mask color (except the alpha channel).
 The effect emulates a look through a colored glass.
 White or transparent mask color dont change the original pixels        
| {s:atNormal}        
| stColor        
|  
|-
| Opacity        
| Opacity of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Contrast        
| Contrast of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Brightness        
| Brightness the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Saturation        
| Saturation of the rendered content        
| {s:atNormal}        
| Double        
|  
|-
| Pixelation        
| Pixelation of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Blurring        
| The radius used in the gaussian blur of rendered content, as a pixel-based factor. The default is 0 which means no blurring.        
| {s:atNormal}        
| Int32        
|  
|-
| Scrambling        
|         
| {s:atNormal}        
| Double        
|  
|-
| Scrambling Grid Size        
| Defines a size of the scrambling grid        
| {s:atNormal}        
| clSize        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Positional Jitter
|-
| Reset Jitter Now        
| Runtime command that resets the positional jitter.        
| {s:atRuntimeAction}        
| Boolean        
|  
|-
| Current Jitter        
| Returns the current jitter        
| {s:atStatus}        
| clPoint        
|  
|-
| Jitter Range        
| Defines a possible range for the random jitter. The range is centered to the position of the element.        
| {s:atNormal}        
| clSize        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Control
|-
| Is Enabled        
| If set to false the element is completely omitted when the experiment is run        
| {s:atDesign}        
| Boolean        
|  
|-
| Title        
| Title of the element        
| {s:atDesign}        
| String        
|  
|-            
|}
== ==
</div>
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
'''GUI Panel Element''' allows to lodge a user-defined layout of interactive GUI components (textboxes, buttons, sliders, checkboxes, etc.) into a selected zone on the event surface. The GUI layout is created with the XAML markup language and can host any number of GUI components. The components supports direct data binding to user global variables.<br><br>
{TOC}

== Description ==

The GUI Panel element allows to lodge a user-defined layout of interactive GUI components (textboxes, buttons, sliders, checkboxes, etc.) into a selected zone on the [event] surface. The GUI panel is created with the [XAML] markup language and can host any number of GUI components, for example a custom questionnaire form. Properties of the GUI components can be bound to the global and [proxy variables].

This is particularly useful, if you need feedback from the user that is more elaborate than pressing a button on the keyboard. E.g select an option that is presented on screen.

Some example templates are provided by right-clicking on the code plane & selecting "Insert code template". (See screenshot 3)


== Snapshots ==
{|
| [imageleft|Example response form<br>made from xaml code|{UP(GUI-Panel-element)}ResponseForm_sm.jpg|{UP(GUI-Panel-element)}ResponseForm.png]
| [imageleft|Code can be accessed by <br> clicking on the "XAML Content <br> snippet in the bottom plane|{UP(GUI-Panel-element)}ResponseFormCode_sm.jpg|{UP(GUI-Panel-element)}ResponseFormCode.jpg]
|-
| [imageleft|Right clicking in the code plane brings up a menue <br> from which one can select "Insert Code Template" |{UP(GUI-Panel-element)}GUICanvTemplates_sm.jpg|{UP(GUI-Panel-element)}GUICanvTemplates.png]
| [imageleft| A list of Example templates |{UP(GUI-Panel-element)}GUITemplOptions_sm.jpg|{UP(GUI-Panel-element)}GUITemplOptions.png]
|}

== Practical Use ==
=== Creating a simple response form ===
# Add a new event. Then click on "Add Element" -> "USER INTERFACE" -> 'GUI Panel'.
# Click on the "XAML Content" Snippet in the bottom plane as shown in the following screenshot:
[imageleft|Code can be accessed by <br> clicking on the "XAML Content <br> snippet in the bottom plane|{UP(GUI-Panel-element)}ResponseFormCode_sm.jpg|{UP(GUI-Panel-element)}ResponseFormCode.jpg] <br><br><br><br><br><br><br><br><br><br><br><br><br>

# Paste in the following code:
@@
<StackPanel Orientation="Vertical">
<TextBlock Text="Select the letter shown in white:" Foreground="LightGray" FontFamily="Verdana" Margin="0,20,0,5"/>
<ListBox SelectedIndex="{Binding ResponseTarget}">
<ListBoxItem Content="A"/>
<ListBoxItem Content="B"/>
<ListBoxItem Content="C"/>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" Rows="1"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

<TextBlock Text="Was 'X' presented?" Foreground="LightGray" FontFamily="Verdana" Margin="0,40,0,5" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<RadioButton Content="Yes" IsChecked="{Binding ResponseXPresent}" GroupName="1" Margin="0,0,30,0"/>
<RadioButton Content="No" IsChecked="{Binding ResponseXNotPresent}" GroupName="1"/>
</StackPanel>
</StackPanel>
@@
# Note that the GUI elements are bound to certain variables: {Binding '''ResponseTarget'''} , {Binding '''ResponseXPresent'''} , {Binding '''ResponseXNotPresent'''}.
# Open the header snippet from the bottom plane. Paste in the following:
@@
bool ResponseXPresent;
bool ResponseXNotPresent;
int ResponseTarget=-1;
@@
# These are the variables that will hold the values of the user input.
# In addition, you may want to add some code to the 'Control Loop' snippet next to "Response & Feedback", so the program will know when to move on.
@@
if ((ResponseTarget!=-1)&&((ResponseXPresent)||(ResponseXNotPresent)) {
... //record output, compare to expected output etc..
}
@@
Demo experiment showing the GUI Panel element in action are available in the Demo Gallery within EventIDE: Demos -> Classical Paradigms -> 'Attentional Blink in RSVP' and Demos ->Questionnaires.



== Notes ==

XAML will automatically scale the graphic to match the canvas.
Meta Keywords:
Meta Description:
Change Comment:
EventIDE Wiki

Navigation¶

GUI Panel Element
