Introduction

The general appearance of some elements of Web Sketchpad sketches are skinnable by means of css. Certain classes will have overridable properties as documented in the sample wsp-skin.css file. Other sketchpad elements may be customized by using javascript, as documented below.

Button Customization

Parameter Customization

Tool palette Customization

Numberpad Customization: CSS

Numberpad Key Order (Javascript)

By using Javascript, the set of keys used by the Numberpad may be configured, as well as their order.

Keys are represented as strings. Web Sketchpad's Numberpad understands the following keys:

Digits

'1', '2', '3', '4', '5', '6', '7', '8', '9', '0'

Decimal Point

'dot'

Mathematical Operators

'plus', 'minus', 'star', 'slash'

Parentheses

'lparen', 'rparen'

The Constant π

'pi'

Clear (erase all)

'clear'

Delete One Character Left

'backspace'

Enter

'submit'

Web Sketchpad uses the javascript configuration option GSPConfig.NumberpadManager.options.keyOrder to define the Numberpad's keys. Its value should be an array whose values are themselves arrays containing strings. As described above, the strings represent keys. The arrays containing strings represent rows of the Numberpad.

For example, a Numberpad with five rows, containing every available key except 'submit,' would look like this:

window.GSPConfig = { NumberpadManager: { options: { keyOrder: [['1', '2', '3', 'plus'], ['4', '5', '6', 'minus'], ['7', '8', '9', 'star'], ['dot', '0', 'pi', 'slash'], ['lparen', 'rparen', 'backspace', 'esc']] } } }

Miscellaneous