global.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Global</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">Global</h1>

    
<section>

<header>
    
        <h2></h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        
<dl class="details">

    
</dl>


    </div>

    
        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="PIEaddButton"><span class="type-signature"></span>PIEaddButton<span class="signature">(name)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a button to the screen
<p>
This adds a button to the screen 
The name is the id as well as the text appearing on the button.
<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>name</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The text to appear on the button</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1661">line 1661</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The creatd button
</div>


    <h4 class="name" id="PIEaddDisplayCheckbox"><span class="type-signature"></span>PIEaddDisplayCheckbox<span class="signature">(label, value, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a checkbox element to the Display panel
<p>
The label is the id (label) appearing before the checkbox.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on click</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1235">line 1235</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDisplayCommand"><span class="type-signature"></span>PIEaddDisplayCommand<span class="signature">(label, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a command element to the Display panel
<p>
The label is the id (label) appearing on the command button.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the command</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The command function to be called</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1478">line 1478</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDisplaySlider"><span class="type-signature"></span>PIEaddDisplaySlider<span class="signature">(label, value, min, max, step)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a slider element to the input panel
<p>
The label is the id (label) appearing before the slider.
The value is the default value appearing in the slider.
The min, max, step define slider behaviour.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>min</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The Minimum value in slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>max</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The Maximum value in slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>step</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The The step by which slider should change</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line936">line 936</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDisplayText"><span class="type-signature"></span>PIEaddDisplayText<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a text input element to the display GUI panel
<p>
The label is the id (label) appearing before the input.
The value is the default value appearing in the input.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the text element</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line633">line 633</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDualCheckbox"><span class="type-signature"></span>PIEaddDualCheckbox<span class="signature">(label, value, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a check box element to both the input and display GUI panels
<p>
The label is the id (label) appearing before the checkbox.
The value is the default value appearing in the checkbox.
The notify function is called on checkbox click.
It in turn calls the PIEaddInputCheckbox and PIEaddDisplayCheckbox.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the checkbox</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on checkbox click</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1220">line 1220</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDualCommand"><span class="type-signature"></span>PIEaddDualCommand<span class="signature">(label, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a command (button) to both the input and display GUI panels
<p>
The label is the id (label) appearing before the command.
The notify function is called on command click.
It in turn calls the PIEaddInputCommand and PIEaddDisplayCommand.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on checkbox click</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1464">line 1464</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDualText"><span class="type-signature"></span>PIEaddDualText<span class="signature">(label, value, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a text input element to both the input and display GUI panels
<p>
The label is the id (label) appearing before the input.
The value is the default value appearing in the input.
It in turn calls the PIEaddInputText and PIEaddDisplayText 
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the text element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on text change completion</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line618">line 618</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddDualText"><span class="type-signature"></span>PIEaddDualText<span class="signature">(label, value, notify, min, max, step)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a slider element to both the input and display GUI panels
<p>
The label is the id (label) appearing before the slider.
The value is the default value appearing in the slider.
The min, max, step define slider behaviour.
The notify function is called on slider change completion.
It in turn calls the PIEaddInputSlider and PIEaddDisplaySlider.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on slider change completion</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>min</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The Minimum value in slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>max</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The Maximum value in slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>step</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The The step by shic slider should change</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line917">line 917</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddElement"><span class="type-signature"></span>PIEaddElement<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a user defined element to the scene.
<p>
By default the element is made to receive and cast shadow.
<p>
For every PIE object : hover (ON/OFF) and drag (start,drag,end) are set to null as deault.
Default menthods are provided for all five events.
The  developer can supply special methods (if he wants to restrict drag or drag a ggroup)
<p>
The element is also added to the array of elements maintained by the library.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The element created by the user</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1913">line 1913</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The element ID maintained by thhe library (index into array)
</div>


    <h4 class="name" id="PIEaddInputCheckbox"><span class="type-signature"></span>PIEaddInputCheckbox<span class="signature">(label, value, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a checkbox element to the Input panel
<p>
The label is the id (label) appearing before the checkbox.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on click</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1278">line 1278</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddInputCommand"><span class="type-signature"></span>PIEaddInputCommand<span class="signature">(label, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a command element to the Input panel
<p>
The label is the id (label) appearing on the command button.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the command</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The command function to be called</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1519">line 1519</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddInputSlider"><span class="type-signature"></span>PIEaddInputSlider<span class="signature">(label, value, notify, min, max, step)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a slider element to the input panel
<p>
The label is the id (label) appearing before the slider.
The value is the default value appearing in the slider.
The min, max, step define slider behaviour.
The notify function is called on slider change completion.
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on slider change completion</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>min</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The Minimum value in slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>max</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The Maximum value in slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>step</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The The step by which slider should change</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line984">line 984</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddInputText"><span class="type-signature"></span>PIEaddInputText<span class="signature">(label, value, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adds a text input element to Input GUI panel
<p>
The label is the id (label) appearing before the input.
The value is the default value appearing in the input.
The notify function is called when the element loses focus (onFinishChange).
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label to appear on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The initial value of the text element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The callback function to be called on text change completion</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line677">line 677</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddModalWindows"><span class="type-signature"></span>PIEaddModalWindows<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    The function adds modal window
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line410">line 410</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEaddSystemButtons"><span class="type-signature"></span>PIEaddSystemButtons<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    The function adds system buttons
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line358">line 358</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEadjustAnimationTime"><span class="type-signature"></span>PIEadjustAnimationTime<span class="signature">(dt)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adjusts the simulation time
<p>
This is called when the experiment desires to change the simulation time.
Typically whenever a boundary condtion (change of direction, collision) is
detected, the simulation should stop and proceed from that time.
<p>
The animation current time is reduced.
<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>dt</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The time difference by which animation has to be reset</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2173">line 2173</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEadjustCamera"><span class="type-signature"></span>PIEadjustCamera<span class="signature">(x, y, z)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the position of the camera.
<p>
The position of the camera is set.
Then the camera is adjusted to look at the center of the area of interest.
<p>
In most cases, the (x,y) position of the camera should be set to center of area of interest.
The z position of the camera should be such that the fov shpould cover the height.
The aspect ratio of the camera should cover the width.
<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>x</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The x position of camera</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>y</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The y position of camera</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>z</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The z position of camera</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1686">line 1686</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEadjustDisplayScene"><span class="type-signature"></span>PIEadjustDisplayScene<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function adjusts the area of the scene which will be displayed on the screen.
<p>
The function will be called whenever the area of interest changes or when the display screen is resized.
<p>
The display scene variables will be computed such that the area of interest is visible and will occupy maximum display.
The area of interest will occupy the center of the screen.
The aspect ratio of the display scene will match the aspect ration of the display element.
<p>
The camera will be positioned such that it will look right down at the center of the area.
The camera z coordinate will be such that the area is visible and will occupy maximum display.
The camera aspect ratio will continue to be equal to the aspect ratio of the screen element
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1823">line 1823</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEanimate"><span class="type-signature"></span>PIEanimate<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function is called at every frame of an animation cycle
<p>
The actual time Date.now() is obtained.
The current animation time is calculated by subtracting the animation start time.
The offset time (from last call) is calculated using the current animation speed.
The current animation speed has no effect.
User supplied updatePosition function is called with animation time and ffset time.
Finally the scene is rendered.
<p>
As a matter of precaution, there is no processing if the animationON flag is reset
or if the animationPause flag is set.
Ordinarily the flags would have proper value.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2068">line 2068</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEappendHelp"><span class="type-signature"></span>PIEappendHelp<span class="signature">(helpContent)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function appends the existing help content with designer supplied content
<p>
It removes existing cntent.
It adds the span showing close button.
It append the given (new) content.
<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>helpContent</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">HTML content to be displayed in help modal</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line486">line 486</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEappendInfo"><span class="type-signature"></span>PIEappendInfo<span class="signature">(infoContent)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function appends the existing info content with designer supplied content
<p>
It removes existing cntent.
It adds the span showing close button.
It append the given (new) content.
<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>infoContent</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">HTML content to be displayed in info modal</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line527">line 527</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeDisplayCheckbox"><span class="type-signature"></span>PIEchangeDisplayCheckbox<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes the checkbox element on the Display panel
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new value of the checkbox</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1318">line 1318</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeDisplayCommand"><span class="type-signature"></span>PIEchangeDisplayCommand<span class="signature">(label, newName, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes a command on the Display panel
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The original label appearing on the command</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>newName</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new label to appear on the command</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new command function to be called</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1559">line 1559</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeDisplaySlider"><span class="type-signature"></span>PIEchangeDisplaySlider<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes the value in an Display slider
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The value to be put in the slider</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1024">line 1024</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeDisplayText"><span class="type-signature"></span>PIEchangeDisplayText<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes the value in a Display text
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The value to be put in the box</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line717">line 717</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeInputCheckbox"><span class="type-signature"></span>PIEchangeInputCheckbox<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes the checkbox element on the Input panel
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the checkbox element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new value of the checkbox</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1365">line 1365</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeInputCommand"><span class="type-signature"></span>PIEchangeInputCommand<span class="signature">(label, newName, notify)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes a command on the Input panel
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The original label appearing on the command</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>newName</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new label to appear on the command</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>notify</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new command function to be called</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1609">line 1609</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeInputSlider"><span class="type-signature"></span>PIEchangeInputSlider<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes the value in an input slider
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input slider</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The value to be put in the slider</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1071">line 1071</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEchangeInputText"><span class="type-signature"></span>PIEchangeInputText<span class="signature">(label, value)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function changes the value in a input text
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input element</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The value to be put in the box</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line764">line 764</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEcreateTable"><span class="type-signature"></span>PIEcreateTable<span class="signature">(title, rows, cols, header)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function creates an table with the given name and given rows and columns
<p>
The name identifies the table in all future calls.
The rows and columns specify the initial values. Rows can be added and deleted later and so can columns.
This function creates an initial (blank) table which can be modified later.
The table is positioned at top left corner of the window and can be moved later.
The table is initrially hidden with display=none property. It can be made visible later.
<p>
The table element is graggable and can be positioned anywhere. The table can also be 'closed' and 'opened'.
<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>title</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Title of the table</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>rows</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Initial number of rows excluding header row (can be changed dynamically)</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>cols</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Initial number of columns (can be changed dynamically)</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>header</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Flag to state whethert first row is header</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2512">line 2512</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEcreateTableCell"><span class="type-signature"></span>PIEcreateTableCell<span class="signature">(row, col, header)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function creates a cell (td or th) in the current table
<p>
It extends the PIEtableData (a 3d array) and PIEtableRows (a 2darray) if required.
It creates an empty row (tr) and stores it in PIEtableRows at appropriate place.
It creates an empty cell (th) and stores it in PIEtableData at appropriate place.
</p><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>row</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Row</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>col</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Column</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>header</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Flag if set create th or create td</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2842">line 2842</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEdefaultDrag"><span class="type-signature"></span>PIEdefaultDrag<span class="signature">(element, newpos)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function is the default library action for drag
<p>
The default action is to move the dragged element to the new position.
If the developer has specified any drag method, it is called with the new position.
Typically one can move multiple elements, implement restricted motion etc.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which drag method is attached</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>newpos</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The new 3D position of the dragged element</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2234">line 2234</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEdefaultDragEnd"><span class="type-signature"></span>PIEdefaultDragEnd<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function is the default library action for drag end
<p>
there is no default action.
If the developer has specified any drag end method, it is called with the new position.
Typically one can move multiple elements, implement restricted motion etc.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which drag method is attached</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2250">line 2250</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEdefaultDragStart"><span class="type-signature"></span>PIEdefaultDragStart<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function is the default library action for drag start
<p>
Currently there is no default action.
If the developer has specified any drag start method, it is called.
Typically one can store  initial values and other information.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which drag method is attached</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2218">line 2218</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEdefaultHoverOFF"><span class="type-signature"></span>PIEdefaultHoverOFF<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function is the default library action for hoverOFF
<p>
This can poentially de-highlight the element.
Currently there is no default action.
If the developer has specified any method, it is called.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which mouseover method is attached</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2203">line 2203</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEdefaultHoverON"><span class="type-signature"></span>PIEdefaultHoverON<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function is the default library action for hoverON
<p>
This can poentially highlight the element.
Currently there is no default action.
If the developer has specified any method, it is called.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which mouseover method is attached</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2188">line 2188</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEdragElement"><span class="type-signature"></span>PIEdragElement<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function marks a user defined element for drag-drop operation
<p>
The library maintains an array of items which can be dragged and dropped.
The element is added to this array.
Whenever mouse down event happens, the library determines whether the mouse
is on any of the elements listed in the array.
If the mouse is on any such element, the element is marked as the drag
element and it's drag handler is called on mouse move.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The element created by the user</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2326">line 2326</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The element ID maintained by thhe library (index into array)
</div>


    <h4 class="name" id="PIEgetDisplayCheckbox"><span class="type-signature"></span>PIEgetDisplayCheckbox<span class="signature">(label)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function accesses the status of the check box element on the input panel
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the checkbox</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1412">line 1412</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The value in the checkbox
</div>


    <h4 class="name" id="PIEgetDisplaySlider"><span class="type-signature"></span>PIEgetDisplaySlider<span class="signature">(label)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function accesses the value in an Display slider element
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the Display slider</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1118">line 1118</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The value in the slider
</div>


    <h4 class="name" id="PIEgetDisplayText"><span class="type-signature"></span>PIEgetDisplayText<span class="signature">(label)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function accesses the text in the input text
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input text</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line811">line 811</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The value in the box
</div>


    <h4 class="name" id="PIEgetInputSlider"><span class="type-signature"></span>PIEgetInputSlider<span class="signature">(label)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function accesses the value in an Input slider element
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input slider</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1166">line 1166</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The value in the slider
</div>


    <h4 class="name" id="PIEgetInputText"><span class="type-signature"></span>PIEgetInputText<span class="signature">(label)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function accesses the text in the input text
<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>label</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The label appearing on the input text</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line859">line 859</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The value in the box
</div>


    <h4 class="name" id="PIEhideControlElement"><span class="type-signature"></span>PIEhideControlElement<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function hides the control bar
<p>
This should be called when there are no experiment controls.
Happens when all the interacions are supported within the canvas element.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line594">line 594</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEmouseDown"><span class="type-signature"></span>PIEmouseDown<span class="signature">(ev)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function handles the mouse down event.
<p>
If the mouse is on any draggable element, It is selected for Dragging
<p>
The function locates the draggable element (nearest to camera) on which the mouse is positioned.
<p>
If a draggable element is found, the function marks it as current drag element
If no draggable element is found, the function exits without any action
<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>ev</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The mouse down event</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2396">line 2396</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEmouseMove"><span class="type-signature"></span>PIEmouseMove<span class="signature">(ev)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function handles the mouse move event.
<p>
The mouse coordinates are normalised (-1 to +1) to canvas dimensions
<p>
If an element is being dragged, the drag method of the element is called.
It could be either the default method or a user supplied method.
<p>
Oherwise, if the mouse is on any element,
the mouseover method of the nearest element is called (if any).
<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>ev</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The mouse down event</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2344">line 2344</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEmouseUp"><span class="type-signature"></span>PIEmouseUp<span class="signature">(ev)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function handles the mouse up event.
<p>
If the mouse is on any element, the highlight method of the element is called (if any)
<p>
First the function tries to locate the element (nearest to calmera) on which the mouse is positioned.
If the element is not on the draggable list, the function recursively finds the next nearest draggable element.
<p>
If a draggable element is found, the function marks itas current drag element
If no draggable element is found, the unction exits without any action
<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>ev</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The mouse up event</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2430">line 2430</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEpauseAnimation"><span class="type-signature"></span>PIEpauseAnimation<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function pauses an animation cycle
<p>
This is called when the user presses the (library provided) pause button.
<p>
The animation cycle is paused by setting the paused flag.
The pause/resume button is set to resume mode.
<p>
The PIEanimate function will be called one more time but will do nothing.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2113">line 2113</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEremoveElement"><span class="type-signature"></span>PIEremoveElement<span class="signature">(element)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function removes a user defined element from the scene.
<p>
The element is also removed from the array of elements maintained by the library.
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The element created by the user</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1875">line 1875</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The element ID maintained by thhe library (index into array)
</div>


    <h4 class="name" id="PIErender"><span class="type-signature"></span>PIErender<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function renders the modified scene.
<p>
The function uis separated to allow calling outside the animation cycle as well.
For example, the window resize operation needs to render the scene after adjusting the camera and renderer.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2098">line 2098</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEresetExperiment"><span class="type-signature"></span>PIEresetExperiment<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function handles the beginning of an animation cycle
<p>
This is called when the user presses the (library provided) start button.
<p>
It stops the animation (if any).
It then calls the developer supplied resetExperiment function.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1940">line 1940</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEresize"><span class="type-signature"></span>PIEresize<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function handles the resizing of the window.
<p>
The display scene variables will be computed such that the area of interest is visible and will occupy maximum display.
The area of interest will occupy the center of the screen.
The aspect ratio of the display scene will match the aspect ration of the display element.
<p>
The camera will be positioned such that it will look right down at the center of the area.
The camera z coordinate will be such that the area is visible and will occupy maximum display.
The camera aspect ratio will continue to be equal to the aspect ratio of the screen element
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line546">line 546</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEresumeAnimation"><span class="type-signature"></span>PIEresumeAnimation<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function restarts an animation cycle
<p>
This is called when the user presses the (library provided) resume button.
<p>
The pause/resume button is set to pause mode.
The animation cycle is resumed by resettng the paused flag.
The animation start time is advanced by the amount of time the animation cycle was paused.
The PIEanimate function is called to resume animation.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2142">line 2142</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetAreaOfInterest"><span class="type-signature"></span>PIEsetAreaOfInterest<span class="signature">(tlX, tlY, brX, brY)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the area of interest in xy plane (z=0) of the scene.
<p>
Note : This area will always be displayed on the center of the display area.
The library will change the aspect ratio and position of the camera such that
the aspect ratio matches the canvas and the area is fully visible.
The library will ensure that resize of display is automatically taken care of.
<p>
The area of interest varibles will be set and the aspect ration of computed
<p>
The display scene variables will be computed such that the area of interest is visible and will occupy maximum display.
The area of interest will occupy the center of the screen.
The aspect ratio of the display scene will match the aspect ration of the display element.
<p>
The camera will be positioned such that it will look right down at the center of the area.
The camera z coordinate will be such that the area is visible and will occupy maximum display.
The camera aspect ratio will continue to be equal to the aspect ratio of the screen element
<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>tlX</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The top left x coordinate of the scene (area of interest)</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>tlY</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The top left y coordinate of the scene (area of interest)</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>brX</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The bottom right x coordinate of the scene (area of interest)</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>brY</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The bottom right y coordinate of the scene (area of interest)</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1796">line 1796</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetCameraAspect"><span class="type-signature"></span>PIEsetCameraAspect<span class="signature">(aspect)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the aspect ratio of the camera
<p>
The field of view (fov) specifies the vertical angle of the frustum.
The frustum vertical limits are defined by the fov.
<p>
The frustum horizontal limits are defined by the fov and the aspect ratio.
<p>
The frustum depth is defined by the far specification.
<p>
If the camera is loking at the center of the scene,
the aspect ratio shuld be the aspect ratio of the display scene
<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>aspect</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The aspect ration of camera</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1725">line 1725</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetCameraDepth"><span class="type-signature"></span>PIEsetCameraDepth<span class="signature">(depth)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the depth of the camera
<p>
The frustum depth is defined by the far specification.
The camera does not see beyond this depth.
<p>
The field of view specifies the vertical angle of the frustum.
The frustum vertical limits are defined by the fov.
<p>
The frustum horizontal limits are defined by the fov and the aspect ratio.
<p>
If the camera is loking at the center of the scene,
the aspect ratio shuld be the aspect ratio of the display scene
<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>depth</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The depth of camera frustum</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1768">line 1768</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetCameraFOV"><span class="type-signature"></span>PIEsetCameraFOV<span class="signature">(fov)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the field of view (fov) of the camera
<p>
The field of view specifies the vertical angle of the frustum.
The frustum vertical limits are defined by the fov.
<p>
The frustum horizontal limits are defined by the fov and the aspect ratio.
<p>
The frustum depth is defined by the far specification.
<p>
If the camera is loking at the center of the scene,
the aspect ratio shuld be the aspect ratio of the display scene
<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>fov</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The field of view (vertical) of camera</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1746">line 1746</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetCellInput"><span class="type-signature"></span>PIEsetCellInput<span class="signature">(row, col, size, text)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function creates an input element in the specified cell
<p>
It extends the PIEtableData (a 3d array) and PIEtableRows (a 2darray) if required.
It creates an empty row (tr) and stores it in PIEtableRows at appropriate place.
It creates an empty cell (th) and stores it in PIEtableData at appropriate place.
Finally it updates the cell with the given text.
</p><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>row</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Row</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>col</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Column</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Size of input text field</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>text</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Default text in the input field</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2801">line 2801</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetColumnInput"><span class="type-signature"></span>PIEsetColumnInput<span class="signature">(col, size, text)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function creates an input element in the specified column
<p>
It does not create any elements.
Existing elements in the specified column are appended with a input box.
</p><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>col</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Column</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Size of input text field</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>text</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Default text in the input field</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2740">line 2740</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetDeveloperName"><span class="type-signature"></span>PIEsetDeveloperName<span class="signature">(name)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the name of the developer of the experiment.
<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>name</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The developer name(s)</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line583">line 583</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetDrag"><span class="type-signature"></span>PIEsetDrag<span class="signature">(element, method)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the drag method for a PIE element
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which drag method is attached</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>method</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The drag method</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2295">line 2295</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetDragEnd"><span class="type-signature"></span>PIEsetDragEnd<span class="signature">(element, method)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the drag End method for a PIE element
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which drag method is attached</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>method</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The drag method</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2307">line 2307</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetDragStart"><span class="type-signature"></span>PIEsetDragStart<span class="signature">(element, method)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the drag Start method for a PIE element
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which drag method is attached</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>method</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The drag method</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2284">line 2284</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetExperimentTitle"><span class="type-signature"></span>PIEsetExperimentTitle<span class="signature">(title)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the title of the experiment.
<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>title</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The exepriment name</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line573">line 573</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetHoverOFF"><span class="type-signature"></span>PIEsetHoverOFF<span class="signature">(element, method)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the hoverOFF method for a PIE element
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which mouseover method is attached</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>method</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The hoverOFF method</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2273">line 2273</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetHoverON"><span class="type-signature"></span>PIEsetHoverON<span class="signature">(element, method)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function sets the hoverON method for a PIE element
<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>element</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The PIE element to which mouseover method is attached</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>method</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The hoverON method</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2262">line 2262</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEsetRowInput"><span class="type-signature"></span>PIEsetRowInput<span class="signature">(row, size, text)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function creates an input element in the specified row
<p>
It does not create any elements.
Existing elements in the specified row are appended with a input box.
</p><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>row</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Row</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Size of input text field</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>text</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Default text in the input field</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2769">line 2769</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEshowControlElement"><span class="type-signature"></span>PIEshowControlElement<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function shows the control bar
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line602">line 602</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEshowHelp"><span class="type-signature"></span>PIEshowHelp<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function shows the help modal
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line456">line 456</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEshowInfo"><span class="type-signature"></span>PIEshowInfo<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function shows the info modal
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line497">line 497</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEslowdownAnimation"><span class="type-signature"></span>PIEslowdownAnimation<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function slows down animation speed
<p>
This is called when the user presses the (library provided) << button.
<p>
The PIEanimationSpeed is changed to next lower speed.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1970">line 1970</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEspeedupAnimation"><span class="type-signature"></span>PIEspeedupAnimation<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function speeds up animation speed
<p>
This is called when the user presses the (library provided) >> button.
<p>
The PIEanimationSpeed is changed to next higher speed.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1957">line 1957</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEstartAnimation"><span class="type-signature"></span>PIEstartAnimation<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function starts a fresh animation cycle
<p>
This is called when the user presses the (library provided) reset button.
<p>
The animation start time is set to the current date.
The animation current time (t) is set to 0.
The animation offset time (dt) is set to 0.
The animation cycle is started.
The pause/resume button is made visible pause mode.
The start/stop function changes to stop mode.
The current animation speed has no effect.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1989">line 1989</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEstopAnimation"><span class="type-signature"></span>PIEstopAnimation<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function stops an animation cycle
<p>
This is called when the user presses the (library provided) stop button.
<p>
The animation start time is set to 0;
The animation current time is set to 0.
The animation offset time is set to 0.
The animation cycle is stopped.
The pause/resume button is hidden.
The start/stop function changes to start mode.
The current animation speed has no effect.
<p>
The PIEanimate function will be called one more time but will do nothing.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2030">line 2030</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEtoggleTable"><span class="type-signature"></span>PIEtoggleTable<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function shows/hides the table
<p>
If the tablke is hidden, it shows the table. If not, it hides the table.
</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2640">line 2640</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEturnCamera"><span class="type-signature"></span>PIEturnCamera<span class="signature">(x, y, z)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function turns the camera to point towards the given point.
<p>
The camera is adjusted to look at the specified position
<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>x</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The x position of target</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>y</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The y position of target</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>z</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">The z position of target</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line1702">line 1702</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEupdateHelp"><span class="type-signature"></span>PIEupdateHelp<span class="signature">(helpContent)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function updates the help content with designer supplied content
<p>
It removes existing cntent.
It adds the span showing close button.
It append the given (new) content.
<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>helpContent</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">HTML content to be displayed in help modal</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line467">line 467</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEupdateInfo"><span class="type-signature"></span>PIEupdateInfo<span class="signature">(infoContent)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function updates the info content with designer supplied content
<p>
It removes existing cntent.
It adds the span showing close button.
It append the given (new) content.
<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>infoContent</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">HTML content to be displayed in info modal</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line508">line 508</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEupdateTable"><span class="type-signature"></span>PIEupdateTable<span class="signature">()</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function cllects all the elements and attaches them to an empty table
<p>
This is to be called whever a table gets extended/created.
It removes all elements of the table and then recreates the fuill structure from the changed arrays.
</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2686">line 2686</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEupdateTableCell"><span class="type-signature"></span>PIEupdateTableCell<span class="signature">(row, col, text)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function updates a cell (td or th) content in the current table
<p>
If required, it extends the PIEtableData (a 3d array) and PIEtableRows (a 2darray).
If required, it creates an empty row (tr) and stores it in PIEtableRows at appropriate place.
If required, it creates an empty cell (td) and stores it in PIEtableData at appropriate place.
Finally it updates the cell with the given text.
</p><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>row</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Row</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>col</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Column</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>text</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Text to be updated</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2926">line 2926</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEupdateTableColumn"><span class="type-signature"></span>PIEupdateTableColumn<span class="signature">(col, textA)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function updates a column content in the current table
<p>
If required, it extends the PIEtableData (a 3d array) and PIEtableRows (a 2darray).
If required, it creates an empty row (tr) and stores it in PIEtableRows at appropriate place.
If required, it creates an empty cell (td) and stores it in PIEtableData at appropriate place.
Finally it updates the cell with the given text.
</p><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>col</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Column</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>textA</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Text array to be updated</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2904">line 2904</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="PIEupdateTableRow"><span class="type-signature"></span>PIEupdateTableRow<span class="signature">(row, textA)</span><span class="type-signature"></span></h4>

    
<div class="description">
    This function updates a row content in the current table
<p>
If required, it extends the PIEtableData (a 3d array) and PIEtableRows (a 2darray).
If required, it creates an empty row (tr) and stores it in PIEtableRows at appropriate place.
If required, it creates an empty cell (td) and stores it in PIEtableData at appropriate place.
Finally it updates the cell with the given text.
</p><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>row</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Row</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>textA</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Text array to be updated</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="PIElibrary.js.html">PIElibrary.js</a>, <a href="PIElibrary.js.html#line2883">line 2883</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#PIEaddButton">PIEaddButton</a></li><li><a href="global.html#PIEaddDisplayCheckbox">PIEaddDisplayCheckbox</a></li><li><a href="global.html#PIEaddDisplayCommand">PIEaddDisplayCommand</a></li><li><a href="global.html#PIEaddDisplaySlider">PIEaddDisplaySlider</a></li><li><a href="global.html#PIEaddDisplayText">PIEaddDisplayText</a></li><li><a href="global.html#PIEaddDualCheckbox">PIEaddDualCheckbox</a></li><li><a href="global.html#PIEaddDualCommand">PIEaddDualCommand</a></li><li><a href="global.html#PIEaddDualText">PIEaddDualText</a></li><li><a href="global.html#PIEaddElement">PIEaddElement</a></li><li><a href="global.html#PIEaddInputCheckbox">PIEaddInputCheckbox</a></li><li><a href="global.html#PIEaddInputCommand">PIEaddInputCommand</a></li><li><a href="global.html#PIEaddInputSlider">PIEaddInputSlider</a></li><li><a href="global.html#PIEaddInputText">PIEaddInputText</a></li><li><a href="global.html#PIEaddModalWindows">PIEaddModalWindows</a></li><li><a href="global.html#PIEaddSystemButtons">PIEaddSystemButtons</a></li><li><a href="global.html#PIEadjustAnimationTime">PIEadjustAnimationTime</a></li><li><a href="global.html#PIEadjustCamera">PIEadjustCamera</a></li><li><a href="global.html#PIEadjustDisplayScene">PIEadjustDisplayScene</a></li><li><a href="global.html#PIEanimate">PIEanimate</a></li><li><a href="global.html#PIEappendHelp">PIEappendHelp</a></li><li><a href="global.html#PIEappendInfo">PIEappendInfo</a></li><li><a href="global.html#PIEchangeDisplayCheckbox">PIEchangeDisplayCheckbox</a></li><li><a href="global.html#PIEchangeDisplayCommand">PIEchangeDisplayCommand</a></li><li><a href="global.html#PIEchangeDisplaySlider">PIEchangeDisplaySlider</a></li><li><a href="global.html#PIEchangeDisplayText">PIEchangeDisplayText</a></li><li><a href="global.html#PIEchangeInputCheckbox">PIEchangeInputCheckbox</a></li><li><a href="global.html#PIEchangeInputCommand">PIEchangeInputCommand</a></li><li><a href="global.html#PIEchangeInputSlider">PIEchangeInputSlider</a></li><li><a href="global.html#PIEchangeInputText">PIEchangeInputText</a></li><li><a href="global.html#PIEcreateTable">PIEcreateTable</a></li><li><a href="global.html#PIEcreateTableCell">PIEcreateTableCell</a></li><li><a href="global.html#PIEdefaultDrag">PIEdefaultDrag</a></li><li><a href="global.html#PIEdefaultDragEnd">PIEdefaultDragEnd</a></li><li><a href="global.html#PIEdefaultDragStart">PIEdefaultDragStart</a></li><li><a href="global.html#PIEdefaultHoverOFF">PIEdefaultHoverOFF</a></li><li><a href="global.html#PIEdefaultHoverON">PIEdefaultHoverON</a></li><li><a href="global.html#PIEdragElement">PIEdragElement</a></li><li><a href="global.html#PIEgetDisplayCheckbox">PIEgetDisplayCheckbox</a></li><li><a href="global.html#PIEgetDisplaySlider">PIEgetDisplaySlider</a></li><li><a href="global.html#PIEgetDisplayText">PIEgetDisplayText</a></li><li><a href="global.html#PIEgetInputSlider">PIEgetInputSlider</a></li><li><a href="global.html#PIEgetInputText">PIEgetInputText</a></li><li><a href="global.html#PIEhideControlElement">PIEhideControlElement</a></li><li><a href="global.html#PIEmouseDown">PIEmouseDown</a></li><li><a href="global.html#PIEmouseMove">PIEmouseMove</a></li><li><a href="global.html#PIEmouseUp">PIEmouseUp</a></li><li><a href="global.html#PIEpauseAnimation">PIEpauseAnimation</a></li><li><a href="global.html#PIEremoveElement">PIEremoveElement</a></li><li><a href="global.html#PIErender">PIErender</a></li><li><a href="global.html#PIEresetExperiment">PIEresetExperiment</a></li><li><a href="global.html#PIEresize">PIEresize</a></li><li><a href="global.html#PIEresumeAnimation">PIEresumeAnimation</a></li><li><a href="global.html#PIEsetAreaOfInterest">PIEsetAreaOfInterest</a></li><li><a href="global.html#PIEsetCameraAspect">PIEsetCameraAspect</a></li><li><a href="global.html#PIEsetCameraDepth">PIEsetCameraDepth</a></li><li><a href="global.html#PIEsetCameraFOV">PIEsetCameraFOV</a></li><li><a href="global.html#PIEsetCellInput">PIEsetCellInput</a></li><li><a href="global.html#PIEsetColumnInput">PIEsetColumnInput</a></li><li><a href="global.html#PIEsetDeveloperName">PIEsetDeveloperName</a></li><li><a href="global.html#PIEsetDrag">PIEsetDrag</a></li><li><a href="global.html#PIEsetDragEnd">PIEsetDragEnd</a></li><li><a href="global.html#PIEsetDragStart">PIEsetDragStart</a></li><li><a href="global.html#PIEsetExperimentTitle">PIEsetExperimentTitle</a></li><li><a href="global.html#PIEsetHoverOFF">PIEsetHoverOFF</a></li><li><a href="global.html#PIEsetHoverON">PIEsetHoverON</a></li><li><a href="global.html#PIEsetRowInput">PIEsetRowInput</a></li><li><a href="global.html#PIEshowControlElement">PIEshowControlElement</a></li><li><a href="global.html#PIEshowHelp">PIEshowHelp</a></li><li><a href="global.html#PIEshowInfo">PIEshowInfo</a></li><li><a href="global.html#PIEslowdownAnimation">PIEslowdownAnimation</a></li><li><a href="global.html#PIEspeedupAnimation">PIEspeedupAnimation</a></li><li><a href="global.html#PIEstartAnimation">PIEstartAnimation</a></li><li><a href="global.html#PIEstopAnimation">PIEstopAnimation</a></li><li><a href="global.html#PIEtoggleTable">PIEtoggleTable</a></li><li><a href="global.html#PIEturnCamera">PIEturnCamera</a></li><li><a href="global.html#PIEupdateHelp">PIEupdateHelp</a></li><li><a href="global.html#PIEupdateInfo">PIEupdateInfo</a></li><li><a href="global.html#PIEupdateTable">PIEupdateTable</a></li><li><a href="global.html#PIEupdateTableCell">PIEupdateTableCell</a></li><li><a href="global.html#PIEupdateTableColumn">PIEupdateTableColumn</a></li><li><a href="global.html#PIEupdateTableRow">PIEupdateTableRow</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Wed Mar 22 2017 10:46:16 GMT+0530 (IST)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>