Hiding Controls

The main challenge of the filters tool is how to display the possible parameters for the filter that the user selects. Each filter comes with its own set of parameters. Each parameter has its own unique name and range of acceptable values that the user ought to be able to choose by pulling down a menu or checking a selection box. The solution is to prepare these controls in advance and hide them with style="DISPLAY: none". Once a specific control is needed, it is copied to the display area that the user interacts with. If we want to copy the content of an HTML element with ID=source to another HTML element with ID=target, you would do:

target.innerHTML = source.innerHTML;

That's exactly what we do in the filters tool. We prepare the source for all filters, and then copy their innerHTML to the user's visible area. Let's take a simple filter first and see how we prepare its control in advance. The Engrave filter is the simplest filter as it does not accept any parameters. (it suppose to support the bias parameter but it does not seem to influence the filter at all in Internet Explorer 5.5.) Here is the control for the Engrave filter:

<SPAN id=oEngraveControls style="DISPLAY: none">
</SPAN>

Notice how we hide this control by specifying "DISPLAY: none" for the STYLE parameter. Let's take a slightly more complex filter, the MotionBlur filter. It supports three parameters: Strength , Direction, and a boolean Add. The Strength parameter can be selected from a pull-down menu. It can be any positive number. The Direction parameter can be chosen from a pull-down menu as well. It can assume any angle between 0 and 360. The Add parameter is boolean and is reflected by checking or not checking the checkbox's square. Here is the control:

<SPAN id=oMotionBlurControls style="DISPLAY: none"><BR/>
Strength: <SELECT onchange=motionBlurFilterChange() name=Strength>
<OPTION value=0>0</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=10 SELECTED>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
<OPTION value=50>50</OPTION>
</SELECT>
<BR><BR>
Direction: <SELECT onchange=motionBlurFilterChange() name=Direction>
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=45>45</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=135>135</OPTION>
<OPTION value=180>180</OPTION>
<OPTION value=225>225</OPTION>
<OPTION value=270>270</OPTION>
<OPTION value=315>315</OPTION>
</SELECT><BR/><BR/>
Add: <INPUT onclick=motionBlurFilterChange()
 type=checkbox name=addSwitch>
</INPUT><BR><BR><BR/><BR/>
</SPAN>

We'll explain in following pages the event handlers and the usage of the name parameter. Consult the listings appended to this column for hidden controls of the other nine filters.

Next: How to define the HTML elements of the tool