Custom Inputs for Tayloring the User Interface

Custom Inputs
for Tailoring the User Interface

Involving the users, offering them user interaction - instead of just letting them read - is a significant part of Online Communication: provide demos, leaving it to the users how to control them. But how do you get their interaction, without spending more effort on it than on writing the actual contents? Well, you need some tools for it, taking up not more than 1 code line. Such tools like the Custom Inputs.

Idea behind Custom Inputs

Tell me, and I will forget.

Show me, and I might remember.

Let me do it, and I understand.

Confucius

That "Golden Rule" in pedagogy is well-known, but hard to apply. Until recently at least. With the upcoming of computer and Online Communication you can provide virtually "any" kind of user interaction - if you are ready to invest a good deal of your effort, that is.

Then the question is, what's more effective:

If the authors use the greater part of their time for writing the actual contents, giving just a few skimpy demos.
Or if the authors deliberately restrict themselves in the breadth of their contents, saving some time for giving more memorable samples.

Obviously, this will depend very much on how efficient it is to provide samples making the users feel they would like to get involved. If the tools are good enough to build such a sample with only a few lines of code, this will probably boost teaching by samples.

That's the idea behind the Custom Inputs.

next top

Handling

Here is summarized what the users should do when they want to achieve a particular effect in their interaction.

Handling - Button

Button inputs are good for

controlling the timing of a sample (default Button)
selecting any one of a number of alternatives ("1:n", multistable Button)
pre-setting a combination of one to all of a number of options ("n:n", bistable Button)
cycling through a number of steps (multistate Button)

Each of these variants can be implemented by one line of HTML-code, optionally adding a keyword ("bistable", "multistable", …)

To set any of the given alternatives, click the corresponding button.

If it's a default button row, it will turn to being "pressed" while you press the mouse button. When you release the mouse button, the default button will be released again.
If it's a bistable button row, already "pressed" button(s) will remain "pressed". If you click a button that's already "pressed", it will be released.
If it's a multistable button row, the currently "pressed" button will be released automatically. (If you click a button that's already "pressed", it behaves like a bistable button.)
If it's a multistate button, the button label will cycle trough all the labels given in coding. After the last of the given labels, the first one will turn up again.

previous next top

Handling - ColorSelect

Sometimes it should be open to the users in which color a graphic element should be painted. There are three ways to determine a color:

Giving the name of a standard color. (Currently there are 140 standard colors defined. The browser translates the name to the corresponding color code.)
Freely choosing any color out of a "color wheel" (a combination of all possible colors RED - GREEN - BLUE). This will give just an approximation of the desired color, but normally this will do.
For more demanding applications it might be needed to type in the exact color code, a combination of 6 hexadecimal digits ("#………). The first pair of digits represent the RED-component, the next pair GREEN, the last pair BLUE.

To select a color, you can take it from the standard colors by clicking on the left button. A table with all the standard colors will pop up. When you click on any of them, the table is closed and the name of the selected color appears in the text box, with the corresponding background color. At the same time the border color is set.

If you want to fine-tune a color, click the right button. A "color wheel", a wild combination of the three colors red, green and blue will pop up. You can select an approximation of the desired color by moving the cursor on it and clicking finally. The color wheel is removed, the corresponding color code appears in the text box, with the corresponding background color.

There you can type in another 6-digit hexadecimal number, if you want to modify the color. When you press the ENTER-key then, you are asked whether to update the final color.
(Note: Don't be surprised if you don't see the new color right away. The application might be designed such that the color selection works as a pre-setting only; the new color will become visible not before you click the application's "Apply"-button.)

previous next top

Handling - Slider

In many applications you will want to leave it to the users to choose any value out of a given range, between minimum and maximum value. It's very intuitive to the users if they just have to move a graphic element (called "thumb") along a linear axis (represented by the "shaft"). This input is called a "Slider".

You can set any value between the given minimum and maximum by clicking on the slider thumb and moving the cursor left/right (horizontal slider), or up/down (vertical slider). If you move the cursor sideward from the thumb, the slider remains active: when the thumb is caught again later, it will follow the cursor. When you want to finish moving the thumb, click on it once more.
(If the application is a pre-setting, the same holds true as was mentioned for the ColorSelect.)

previous next top

Handling - Tabs

previous next top

Coding

Coding - Button

The syntax of calling a custom Button is as follows:

Button(dest,"label1[|label2…]"[,options])

dest

Any string representing a Javascript-code of what to do with the result. Within the Javascript-code, the result is symbolized by a question mark (?). A '?'-symbol can appear at any place, any number of times. A '?' at the last place of the string may be omitted.

The result depends on the type of the Button:

default	When the button is clicked, the dest-string is executed with the result 1. When the button is released, the dest-string is executed again with the result 0.
bistable	When any button is clicked, it turns to a "pressed" state and remains that way (unless it was clicked already - then it turns to "released" and remains that way). The dest-string is executed with a result equivalent to the bitmap combined by 1 for each of the pressed buttons, 0 for each of the released buttons. The first button determines the most significant bit. Example: Let's assume, you have a button row "label1\|label2\|label3\|label4". The button corresponding "label1" is already pressed. When you click the button corresponding "label3", the dest-string is executed with a result of 10 (binary 1010). Thus you can easily check for a bistable button being pressed by if (result & 1) { … } else { … } if (result & 2) { … } else { … } if (result & 4) { … } else { … } if (result & 8) { … } else { … } :
multistable	When any button is clicked, a button already pressed is released and the dest-string is executed with a result equivalent to the index of the button you clicked. The button with "label1" has index 1, "label2" corresponds to index 2, etc. If no button is pressed at all, the result is 0. Example: Let's assume, you have a button row "label1\|label2\|label3\|label4". The button corresponding "label1" is already pressed. When you click the button corresponding "label3", the button with "label1" is released and the dest-string is executed with a result of 3. If, however, you click the pressed button, it is released and the dest-string is executed with a result of 0.
multistate	When a multistate button is clicked, the state is increased by one. When the state is greater than the number of labels given, state 0 is restored. The dest-string is executed with a result equal to the new state. Example: Let's assume, you have a multistate button "label1\|label2\|label3\|label4". The current state corresponds to "label1". When you click the button again, the button face turns to "label2" and the dest-string is executed with a result of 2. If, however, the current state is 3 (i.e. "label4" is visible) and you click once more, the button face turns to "label1" and the dest-string is executed with a result of 0.

label1[|label2…]

Button face(s) that is/are visibly at a time, depending on the button type (bistable, multistable, etc.) Each label can be plain text or any HTML-code (except <INPUT>, <BUTTON> or any other Custom Input)

options

String with any number of options, separated by at least one whitespace. All options are of the form keyword=value . If the value is to hold a whitespace, it needs to be enclosed in quotes: keyword='value' or keyword="value" If the opening quote is a single quote ('), the following single quote is taken to be the closing quote. The same holds for double quotes (").

Currently the following keywords are defined for Button options:

bistable/multistable/multistate	Button type. If omitted, a default Button is assumed.
vertical	The button row is arranged vertically. If omitted, the row is horizontally.
w= decimal_number	Width of each button. If omitted, the width is estimated by the text width of the button label; useful only for plain-text labels.
h= decimal_number	Height of each button. If omitted, the button height is estimated by the font size (+ some padding) of the button label; useful only for plain-text labels.

Additionally, the user has control over the following details. They are modified by assigning a value to them, just like in Javascript:

buttonStyleUp	Style in which a button is painted when "released" (default: 'padding:10; color:black; background-color:lightgrey; border-width:4px; border-style:outset' )
buttonStyleDown	Style in which a button is painted when "pressed" (default: 'padding:10; color:white; background-color:darkgray; border-width:4px; border-style:inset' )

previous next top

Coding - ColorSelect

The syntax of calling a ColorSelect is as follows:

ColorSelect(dest[,options])

dest

options

size=decimal_number

By default, a ColorSelect is created with a text input of SIZE=20 , what is sufficient even for the longest standard color name. If you want to have a different size, you can set it by this option.

previous next top

Coding - Slider

The syntax of calling a Slider is as follows:

Slider(dest[,min[,max[,ini[,options]]]])

dest

min

Minimum of slider range (= min. result possible). Default: 0

max

Maximum of slider range (= max. result possible). Default: 100. Note that preceding parameters must be coded, even if they are at their default value, if this parameter is used explicitly; only terminating parameters may be omitted.

ini

Initial value of result. Default: 0. Note that preceding parameters must be coded, even if they are at their default value, if this parameter is used explicitly; only terminating parameters may be omitted.

options

String with any number of options, separated by at least one whitespace. All options are of the form keyword=value . If the value is to hold a whitespace, it needs to be enclosed in quotes: keyword='value' or keyword="value" If the opening quote is a single quote ('), the following single quote is taken to be the closing quote. The same holds for double quotes (").
Currently the following keyword is defined for Slider options:

vertical

The Slider is arranged vertically. If omitted, the Slider is horizontally.

previous next top

Coding - Tabs

previous next top

Requirements for Use

To use Custom Inputs in an application, the following requirements have to be met:

Hardware
In order to make full use of Custom Inputs, you should be sure of the following hardware at your users':

Keyboard:
Most of the Custom Inputs require keyboard typing.
Will all your users have a keyboard?
Mouse:
All of the Custom Inputs are designed for mouse input.
Will all your users have a mouse?
Monitor - Colors, Screen Resolution:
Some of the Custom Inputs assume multichrome monitors.
Will all your users have a multichrome monitor?
In general, you should be aware of the monitors' size and screen resolution. What will they be at your users'?

previous top

Browser: IE
The Custom Inputs are applicable under IE browsers only.
Will all your users have an IE browser?

top

include Input.js and gen.js
Anywhere in your HTML-file, before the first call of a Custom Input, you should have the following two lines:

<SCRIPT SRC="Input.js"></SCRIPT>
<SCRIPT SRC="gen.js"></SCRIPT>

Of course, you should make sure that the Javascript-Files Input.js and gen.js are in the current working directory on your server. If not, you might have to alter the path, e.g.

<SCRIPT SRC="..\JS\Input.js"></SCRIPT>
<SCRIPT SRC="..\JS\gen.js"></SCRIPT>

top
call in brackets <SCRIPT> … </SCRIPT>
All Custom Inputs should be called in <SCRIPT>-brackets, e.g.

<SCRIPT>Button( … )</SCRIPT>
<SCRIPT>ColorSelect( … )</SCRIPT>
<SCRIPT>Slider( … )</SCRIPT>

If you want to have several related calls, they may be combined within a common bracket and must be separated by a semicolon - e.g.

<SCRIPT>Button( … );
Slider( … )</SCRIPT>

If you have more than one application in your HTML-file, they all share a common namespace. I.e. all identifiers must be unique over all the applications.

previous top

Custom Inputs for Tailoring the User Interface

Custom Inputs
for Tailoring the User Interface