# GUI

## core GUI

GUI manages the various pop-up dialog boxes that guide the participant, throughout the lifecycle of the experiment, e.g. at the start while the resources are downloading, or at the end when the data is uploading to the server

## Constructor

#### new GUI(psychoJS)

Source:
  - core/GUI.js, line 25

##### Parameters:

Name | Type | Description
--- | --- | ---
`psychoJS` | module:core.PsychoJS | the PsychoJS instance

### Members

#### DEFAULT_SETTINGS :Object

Source:
  - core/GUI.js, line 32

Default settings for GUI.

##### Type:

- Object

### Methods

#### (protected, static) _onKeyChange(gui, event)

Source:
  - core/GUI.js, line 649

Callback triggered upon change event (for required keys).

##### Parameters:

Name | Type | Description
--- | --- | ---
`gui` | module:core.GUI | this GUI
`event` | Event | the key's event

#### (protected) _onCancelExperiment()

Source:
  - core/GUI.js, line 493

Callback triggered when the participant presses the Cancel button

#### (protected) _onResourceEvents(signal)

Source:
  - core/GUI.js, line 542

Callback triggered upon a resource event from the `Server Manager`.

##### Parameters:

Name | Type | Description
--- | --- | ---
`signal` | Object.<string, (string|Symbol)> | the ServerManager's signal

#### (protected) _onStartExperiment()

Source:
  - core/GUI.js, line 507

Callback triggered when the participant presses the OK button

#### (protected) _setProgressMessage(message)

Source:
  - core/GUI.js, line 466

Set the progress message.

##### Parameters:

Name | Type | Description
--- | --- | ---
`message` | string | the message

#### (protected) _updateDialog(changeOKButtonFocusopt)

Source:
  - core/GUI.js, line 601

Update the dialog box.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`changeOKButtonFocus` |  | <optional> | `false` | whether to change the focus to the OK button

#### (protected) _updateProgressBar()

Source:
  - core/GUI.js, line 480

Update the progress bar.

#### (protected) _userFriendlyError(errorCode) → {Object}

Source:
  - core/GUI.js, line 673

Get the user-friendly html message associated to a pavlovia.or server error code.

##### Parameters:

Name | Type | Description
--- | --- | ---
`errorCode` | number | the pavlovia.org server error code

##### Returns:

a user-friendly error message

Type
  Object

#### closeDialog()

Source:
  - core/GUI.js, line 452

Close the previously opened dialog box, if there is one.

#### dialog(options)

Source:
  - core/GUI.js, line 281

Show a message to the participant in a dialog box.

This function can be used to display both warning and error messages.

##### Parameters:

Name | Type | Description
--- | --- | ---

`options`

Object

###### Properties

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`message` | string |  |  | the message to be displayed
`error` | Object.<string, *> |  |  | an exception
`warning` | string |  |  | a warning message
`showOK` | boolean | <optional> | `true` | specifies whether to show the OK button
`onOK` | GUI.onOK | <optional> |  | function called when the participant presses the OK button

#### DlgFromDict(options)

Source:
  - core/GUI.js, line 82

Create a dialog box that (a) enables the participant to set some experimental values (e.g. the session name), (b) shows progress of resource download, and (c) enables the participant to cancel the experiment.

Setting experiment values

DlgFromDict displays an input field for all values in the dictionary. It is possible to specify default values e.g.:

`let expName = 'stroop';
let expInfo = {'participant':'', 'session':'01'};
psychoJS.schedule(psychoJS.gui.DlgFromDict({dictionary: expInfo, title: expName}));`

If the participant cancels (by pressing Cancel or by closing the dialog box), then the dictionary remains unchanged.

##### Parameters:

Name | Type | Description
--- | --- | ---

`options`

Object

###### Properties

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`logoUrl` | String | <optional> |  | Url of the experiment logo
`text` | String | <optional> |  | information text
`dictionary` | Object |  |  | associative array of values for the participant to set
`title` | String |  |  | name of the project
`requireParticipantClick` | boolean | <optional> | `true` | whether the participant must click on the OK button, when it becomes enabled, to move on with the experiment

#### finishDialog(options)

Source:
  - core/GUI.js, line 407

Create a dialog box with a progress bar, to inform the participant of the last stages of the experiment: upload of results, of log, and closing of session.

##### Parameters:

Name | Type | Description
--- | --- | ---

`options`

Object

###### Properties

Name | Type | Attributes | Description
--- | --- | --- | ---
`text` | String | <optional> | information text

### Type Definitions

#### onOK()

Source:
  - core/GUI.js, line 266