Status Screen

Modified on 2016/06/19 10:47 by Administrator — Categorized as: Special Concepts


 Description

The Status Screen has been developed to increse comfort of the experimenter. It allows the person running an experiement to observe (on an external screen) how far through a participant is, images that are on the participant screen (or the whole image of participant screen) and up-to-the-minute statistics relating to performance.

Practical Use

XAML code can define this screen's appearance and content at the level of the experiment in the code snippets. Read-only variables such as reaction time can be viewed in either text or graphical format, using XAML code to define both the graphical design and the content (the binding variables). See below for example code displaying an operator screen binding to a number of pre-defined variables such as reaction time (RT), current block and the outcome of each trial. These stats will be displayed in real time, in both text and graphical format.

Examples


CodeWhat it will do

<Grid></Grid> element, alowing you to divide screen area



<Grid.ColumnDefinitions><ColumnDefinition Width="1*"/><ColumnDefinition Width="1*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="1*"/><RowDefinition Height="2*"/><RowDefinition Height="3*"/><RowDefinition Height="4*"/></Grid.RowDefinitions>
This script will divide screen area into a table containing two columns and four rows, which heights are related as 1/2/3/4. Image

<Grid.ColumnDefinitions><ColumnDefinition Width="250"/><ColumnDefinition Width="*"/><ColumnDefinition Width="250"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="200"/><RowDefinition Height="150"/><RowDefinition Height="200"/><RowDefinition Height="*"/></Grid.RowDefinitions>
his script will divide screen area into a table containing three columns and four rows. Left and right columns are 100 pixels width. Width of the central column is "*". It means that central column will fill all space left on the screen excluding the summery width of left and right columns.
You can find other properties of the <Grid> here.
Image

Grid.Column&Grid.Row attributes allowing you to put elements to the particular cells of the grid


To put some element to the particular cell of the grid, row and column should be specified. It can be done by adding such properties to the element you want to place in the selected cell:
Grid.Column="particular column number" Grid.Row="particular row number"
Columns and rows numbers starts from zero number. So if you'd like to put selected element to the first column of the first row, you should add such properties to it:
Grid.Column="0" Grid.Row="0"
For example this script will put text element to the second column of the third row of the grid: 

<TextBlock Grid.Column="1" Grid.Row="2" Text="2.3"
HorizontalAlignment="Left" FontFamily="Garamond"
FontSize="10" Foreground="Black"/>
And this code will put another text element to the second column of the second row, but this element will be stretched to the third column of this row: 

<TextBlock Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"
Text="2.2...................................This text will be stretched to 2.3 cell"
HorizontalAlignment="Left" FontFamily="Garamond"
FontSize="10" Foreground="Black"/>

Other properties of the <TextBlock> element can be found here.		Image

<UniformGrid Grid.Column="0" Grid.Row="2" Margin="5" Columns="5" Rows="2"></UniformGrid>
This script will add a table containing five columns and two rows to the first column of the third row of the grid.
The former five elements in <UniformGrid></UniformGrid> tags will be put in the first row, the following five elements will be put to the second row.
Other properties of the <UniformGrid> element can be found here.
Image

<UniformGrid></UniformGrid> element, allowing you to but another grid into a cell of the grid



<UniformGrid Grid.Column="0" Grid.Row="2" Margin="5" Columns="5" Rows="2"><TextBlock Text="Trial Number" FontSize="20" FontFamily="Verdana"/><TextBlock Text="Is Congruent" FontSize="20" FontFamily="Verdana"/><TextBlock Text="Response Code" FontSize="20" FontFamily="Verdana"/><TextBlock Text="RT" FontSize="20" FontFamily="Verdana"/><TextBlock Text="Correct" FontSize="20" FontFamily="Verdana"/><TextBlock Text="{Binding TrialNumber}" FontFamily="Calibri"/><TextBlock Text="{Binding IsCongruentTrial}" FontFamily="Verdana"/><TextBlock Text="{Binding ResponseCode}" FontFamily="Verdana"/><TextBlock Text="{Binding RT}" FontFamily="Verdana"/><TextBlock Text="{Binding Correct}" FontFamily="Verdana"/></UniformGrid>
This script will do the same as the previous one and it will add five text blocks to the first row of the table and five text blocks to the second row.
Text in the first row is a simple text.
{Binding TrialNumber} will put value of the TrialNumber variable to the text block. The same belongs to the other four variables.
Image

<Image></Image> element, allowing you to add images



<Image Grid.Column="1" Grid.Row="2" Source="{Binding CurrentScreen}" Margin="5"/><Image Grid.Column="0" Grid.Row="3" Source="{Binding RTGraph}" Margin="15"/><Image Grid.Column="1" Grid.Row="3" Source="{Binding CRGraph}" Margin="15"/>
Not only simple variables can be added to the Status Screen.
Diagrams and any graphics can be added with <Image/> element the way it is done to RTGraph and CRGraph.
{Binding CurrentScreen} will add image of the subject screen to the Status Screen.
Other properties of the <Image> element can be found here.
Image