popupDef.html

<p>
    Select the illumination model:
    <select name="illuminationModel" id="illuminationModel">
        <option>Phong</option>
        <option>Cook Torrance</option>
    </select>
</p>

<!--The tune popup-->
<p>
    Select your light:
    <select name="lightSelected" id="lightSelected">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
    </select>
    <input type="button" id="enableLightButton" value="Enabled">
    <input type="button" id="popupLightPosActivator" value="Light Position">
    <!--<input type="button" id="popupLightDirActivator" value="Light Direction"><br>-->
    <input type="button" id="popupLightColorActivator" value="Light Color">
    <input type="button" id="popupMaterialColorActivator" value="Material Color">
    <input type="button" id="popupShaderActivator" value="Shader">
</p>

<!--The light position popup-->
<div id="popupLightPos" class="popup" title="Tune the light position">
    <fieldset>
        <h3>ID light : <input type="text" class="lightSelectedStr" readonly></h3>
        <h4>Position: </h4>
        <div id="sliderLightPosX" class="sliderLightPos"></div>
        <label>X: </label>
        <input type="text" id="lightPosX" readonly>

        <div id="sliderLightPosY" class="sliderLightPos"></div>
        <label>Y: </label>
        <input type="text" id="lightPosY" readonly>

        <div id="sliderLightPosZ" class="sliderLightPos"></div>
        <label>Z: </label>
        <input type="text" id="lightPosZ" readonly>
    </fieldset>
</div>

<!--The light direction popup-->
<!--<div id="popupLightDir" class="popup" title="Tune the light direction">
    <fieldset>
        <h3>ID light : <input type="text" class="lightSelectedStr" readonly></h3>
        <h4>Direction: </h4>
        <div id="sliderLightDirX" class="sliderLightDir"></div>
        <label>X: </label>
        <input type="text" id="lightDirX" readonly>

        <div id="sliderLightDirY" class="sliderLightDir"></div>
        <label>Y: </label>
        <input type="text" id="lightDirY" readonly>

        <div id="sliderLightDirZ" class="sliderLightDir"></div>
        <label>Z: </label>
        <input type="text" id="lightDirZ" readonly>

        <h4>Cut off: </h4>
        <div id="sliderLightCutOff" class="classSliderLightCutOff"></div>
        <label>Value: </label>
        <input type="text" id="lightCutOff" readonly>
    </fieldset>
</div>-->

<!--The light color popup-->
<div id="popupLightColor" class="popup" title="Tune the light color">
    <fieldset>
        <h3>ID light : <input type="text" class="lightSelectedStr" readonly></h3>
        <h4>Ambient: </h4>
        <div id="sliderLightAmbR" class="sliderLightAmb"></div>
        <label>R: </label>
        <input type="text" id="lightAmbR" readonly>

        <div id="sliderLightAmbG" class="sliderLightAmb"></div>
        <label>G: </label>
        <input type="text" id="lightAmbG" readonly>

        <div id="sliderLightAmbB" class="sliderLightAmb"></div>
        <label>B: </label>
        <input type="text" id="lightAmbB" readonly>


        <h4>Diffuse: </h4>
        <div id="sliderLightDifR" class="sliderLightDif"></div>
        <label>R: </label>
        <input type="text" id="lightDifR" readonly>

        <div id="sliderLightDifG" class="sliderLightDif"></div>
        <label>G: </label>
        <input type="text" id="lightDifG" readonly>

        <div id="sliderLightDifB" class="sliderLightDif"></div>
        <label>B: </label>
        <input type="text" id="lightDifB" readonly>


        <h4>Specular: </h4>
        <div id="sliderLightSpecR" class="sliderLightSpec"></div>
        <label>R: </label>
        <input type="text" id="lightSpecR" readonly>

        <div id="sliderLightSpecG" class="sliderLightSpec"></div>
        <label>G: </label>
        <input type="text" id="lightSpecG" readonly>

        <div id="sliderLightSpecB" class="sliderLightSpec"></div>
        <label>B: </label>
        <input type="text" id="lightSpecB" readonly>
    </fieldset>
</div>

<!--The light color popup-->
<div id="popupMaterialColor" class="popup" title="Tune the material color">
    <fieldset>
        <h4>Ambient: </h4>
        <div id="sliderMaterialAmbR" class="sliderMaterialAmb"></div>
        <label>R: </label>
        <input type="text" id="materialAmbR" readonly>

        <div id="sliderMaterialAmbG" class="sliderMaterialAmb"></div>
        <label>G: </label>
        <input type="text" id="materialAmbG" readonly>

        <div id="sliderMaterialAmbB" class="sliderMaterialAmb"></div>
        <label>B: </label>
        <input type="text" id="materialAmbB" readonly>


        <h4>Diffuse: </h4>
        <div id="sliderMaterialDifR" class="sliderMaterialDif"></div>
        <label>R: </label>
        <input type="text" id="materialDifR" readonly>

        <div id="sliderMaterialDifG" class="sliderMaterialDif"></div>
        <label>G: </label>
        <input type="text" id="materialDifG" readonly>

        <div id="sliderMaterialDifB" class="sliderMaterialDif"></div>
        <label>B: </label>
        <input type="text" id="materialDifB" readonly>


        <h4>Specular: </h4>
        <div id="sliderMaterialSpecR" class="sliderMaterialSpec"></div>
        <label>R: </label>
        <input type="text" id="materialSpecR" readonly>

        <div id="sliderMaterialSpecG" class="sliderMaterialSpec"></div>
        <label>G: </label>
        <input type="text" id="materialSpecG" readonly>

        <div id="sliderMaterialSpecB" class="sliderMaterialSpec"></div>
        <label>B: </label>
        <input type="text" id="materialSpecB" readonly>
    </fieldset>
</div>

<!--The shader popup-->
<div id="popupShader" class="popup" title="Tune shader parameters">
    <fieldset>
        <h4>Indice of refraction: </h4>
        <div id="sliderIndiceOfRefraction" class="classSliderIndiceOfRefraction"></div>
        <label>ior: </label>
        <input type="text" id="indiceOfRefraction" readonly>

        <h4>Roughness: </h4>
        <div id="sliderRoughness" class="classSliderRoughness"></div>
        <label>rough: </label>
        <input type="text" id="roughness" readonly>

        <h4>Fresnel power: </h4>
        <div id="sliderFresnel" class="classSliderFresnel"></div>
        <label>fresnel pow: </label>
        <input type="text" id="fresnel" readonly>
    </fieldset>
</div>