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
4942e0156e
psychojs/docs/module-core.GUI.html
Alain Pitiot 4942e0156e 2020.1 branch
2020-02-14 08:18:25 +01:00

1967 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#line19">line 19</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#line627">line 627</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#line777">line 777</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#line766">line 766</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#line467">line 467</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#line596">line 596</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#line434">line 434</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#line644">line 644</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#line525">line 525</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#line575">line 575</a>
</li></ul></dd>
</dl>
<h4 class="name" id="dialog"><span class="type-signature"></span>dialog<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Destroy the currently opened dialog box.
</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#line507">line 507</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#line294">line 294</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#line45">line 45</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.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.TextStim.html">TextStim</a></li><li><a href="module-visual.VisualStim.html">VisualStim</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 Fri Feb 14 2020 08:15:34 GMT+0100 (Central European Standard Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
View Git Blame Copy Permalink