HoshinoKoji/psychojs
1
0
Fork 0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-10 10:40:54 +00:00
Code Actions Packages Releases Activity
3d04c899cd
psychojs/docs/module-core.GUI.html
Alain Pitiot 3d04c899cd updated the documentation
2020-08-20 12:04:19 +02:00

1879 lines
24 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: GUI</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: GUI</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>
<span class="ancestors"><a href="module-core.html">core</a>.</span>GUI<span class="signature">(psychoJS)</span><span class="type-signature"></span></h2>
<div class="class-description">Graphic User Interface</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="GUI"><span class="type-signature"></span>new GUI<span class="signature">(psychoJS)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>psychoJS</code></td>
<td class="type">
<span class="param-type"><a href="module-core.PsychoJS.html">module:core.PsychoJS</a></span>
</td>
<td class="description last">the PsychoJS instance</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line20">line 20</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="_getDialogSize"><span class="type-signature">(private) </span>_getDialogSize<span class="type-signature"></span></h4>
<div class="description">
Get the size of the dialog.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line681">line 681</a>
</li></ul></dd>
</dl>
<h4 class="name" id="dialogMargin"><span class="type-signature">(readonly) </span>dialogMargin<span class="type-signature"> :Symbol</span></h4>
<div class="description">
Dialog window margins.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Symbol</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line837">line 837</a>
</li></ul></dd>
</dl>
<h4 class="name" id="dialogMaxSize"><span class="type-signature">(readonly) </span>dialogMaxSize<span class="type-signature"> :Symbol</span></h4>
<div class="description">
Maximal dimensions of the dialog window.
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Symbol</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line826">line 826</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="_dialogResize"><span class="type-signature">(private) </span>_dialogResize<span class="signature">(dialogId)</span><span class="type-signature"></span></h4>
<div class="description">
Ensure that the browser window's resize events redimension and reposition the dialog UI.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dialogId</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">the dialog ID</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line516">line 516</a>
</li></ul></dd>
</dl>
<h4 class="name" id="_estimateDialogScalingFactor"><span class="type-signature">(private) </span>_estimateDialogScalingFactor<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h4>
<div class="description">
Estimate the scaling factor for the dialog popup windows.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line645">line 645</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
whether or not the scaling factor is different from the previously estimated one
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="_onDialogOpen"><span class="type-signature">(private) </span>_onDialogOpen<span class="signature">(dialogId)</span><span class="type-signature"> &rarr; {function}</span></h4>
<div class="description">
Callback triggered when the jQuery UI dialog box is open.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>dialogId</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">the dialog ID</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line483">line 483</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
function setting the dimension and position of the dialog box
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id="_onKeyChange"><span class="type-signature">(private) </span>_onKeyChange<span class="signature">(gui, event)</span><span class="type-signature"></span></h4>
<div class="description">
Listener for change event for required keys.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>gui</code></td>
<td class="type">
<span class="param-type"><a href="module-core.GUI.html">module:core.GUI</a></span>
</td>
<td class="description last">this GUI</td>
</tr>
<tr>
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Event</span>
</td>
<td class="description last">event</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line699">line 699</a>
</li></ul></dd>
</dl>
<h4 class="name" id="_onResourceEvents"><span class="type-signature">(private) </span>_onResourceEvents<span class="signature">(signal)</span><span class="type-signature"></span></h4>
<div class="description">
Listener for resource event from the <a href="ServerManager.html">Server Manager</a>.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>signal</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, (string|Symbol)></span>
</td>
<td class="description last">the signal</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line559">line 559</a>
</li></ul></dd>
</dl>
<h4 class="name" id="_updateOkButtonStatus"><span class="type-signature">(private) </span>_updateOkButtonStatus<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Update the status of the OK button.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line618">line 618</a>
</li></ul></dd>
</dl>
<h4 class="name" id="dialog"><span class="type-signature"></span>dialog<span class="signature">(options)</span><span class="type-signature"></span></h4>
<div class="description">
Show a message to the participant in a dialog box.
<p>This function can be used to display both warning and error messages.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>message</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">the message to be displayed</td>
</tr>
<tr>
<td class="name"><code>error</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, *></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">an exception</td>
</tr>
<tr>
<td class="name"><code>warning</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">a warning message</td>
</tr>
<tr>
<td class="name"><code>showOK</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">specifies whether to show the OK button</td>
</tr>
<tr>
<td class="name"><code>onOK</code></td>
<td class="type">
<span class="param-type"><a href="GUI.html#.onOK">GUI.onOK</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
</td>
<td class="description last">function called when the participant presses the OK button</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line324">line 324</a>
</li></ul></dd>
</dl>
<h4 class="name" id="DlgFromDict"><span class="type-signature"></span>DlgFromDict<span class="signature">(options)</span><span class="type-signature"></span></h4>
<div class="description">
<p>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.</p>
<b>Setting experiment values</b>
<p>DlgFromDict displays an input field for all values in the dictionary.
It is possible to specify default values e.g.:</p>
<code>let expName = 'stroop';<br>
let expInfo = {'participant':'', 'session':'01'};<br>
psychoJS.schedule(psychoJS.gui.DlgFromDict({dictionary: expInfo, title: expName}));</code>
<p>If the participant cancels (by pressing Cancel or by closing the dialog box), then
the dictionary remains unchanged.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>logoUrl</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">Url of the experiment logo</td>
</tr>
<tr>
<td class="name"><code>text</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">information text</td>
</tr>
<tr>
<td class="name"><code>dictionary</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="description last">associative array of values for the participant to set</td>
</tr>
<tr>
<td class="name"><code>title</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
</td>
<td class="description last">name of the project</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core_GUI.js.html">core/GUI.js</a>, <a href="core_GUI.js.html#line50">line 50</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-core.html">core</a></li><li><a href="module-data.html">data</a></li><li><a href="module-sound.html">sound</a></li><li><a href="module-util.html">util</a></li><li><a href="module-visual.html">visual</a></li></ul><h3>Classes</h3><ul><li><a href="module-core.BuilderKeyResponse.html">BuilderKeyResponse</a></li><li><a href="module-core.EventManager.html">EventManager</a></li><li><a href="module-core.GUI.html">GUI</a></li><li><a href="module-core.Keyboard.html">Keyboard</a></li><li><a href="module-core.KeyPress.html">KeyPress</a></li><li><a href="module-core.Logger.html">Logger</a></li><li><a href="module-core.MinimalStim.html">MinimalStim</a></li><li><a href="module-core.Mouse.html">Mouse</a></li><li><a href="module-core.PsychoJS.html">PsychoJS</a></li><li><a href="module-core.ServerManager.html">ServerManager</a></li><li><a href="module-core.Window.html">Window</a></li><li><a href="module-data.ExperimentHandler.html">ExperimentHandler</a></li><li><a href="module-data.TrialHandler.html">TrialHandler</a></li><li><a href="module-sound.Sound.html">Sound</a></li><li><a href="module-sound.TonePlayer.html">TonePlayer</a></li><li><a href="module-sound.TrackPlayer.html">TrackPlayer</a></li><li><a href="module-util.Clock.html">Clock</a></li><li><a href="module-util.Color.html">Color</a></li><li><a href="module-util.CountdownTimer.html">CountdownTimer</a></li><li><a href="module-util.EventEmitter.html">EventEmitter</a></li><li><a href="module-util.MixinBuilder.html">MixinBuilder</a></li><li><a href="module-util.MonotonicClock.html">MonotonicClock</a></li><li><a href="module-util.PsychObject.html">PsychObject</a></li><li><a href="module-util.Scheduler.html">Scheduler</a></li><li><a href="module-visual.Form.html">Form</a></li><li><a href="module-visual.ImageStim.html">ImageStim</a></li><li><a href="module-visual.MovieStim.html">MovieStim</a></li><li><a href="module-visual.Polygon.html">Polygon</a></li><li><a href="module-visual.Rect.html">Rect</a></li><li><a href="module-visual.ShapeStim.html">ShapeStim</a></li><li><a href="module-visual.Slider.html">Slider</a></li><li><a href="module-visual.TextBox.html">TextBox</a></li><li><a href="module-visual.TextStim.html">TextStim</a></li><li><a href="module-visual.VisualStim.html">VisualStim</a></li><li><a href="TextInput.html">TextInput</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-sound.SoundPlayer.html">SoundPlayer</a></li></ul><h3>Mixins</h3><ul><li><a href="module-core.WindowMixin.html">WindowMixin</a></li><li><a href="module-util.ColorMixin.html">ColorMixin</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Thu Aug 20 2020 12:03:43 GMT+0200 (Central European Summer Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
View Git Blame Copy Permalink