Buttons and Sliders

Buttons, sliders, and text inputs are probably the most useful controls in everyday applications. There is also a checkbox control, but I have not yet seen that one used. And there are specialized controls, like the color selector. While I haven't done anything with text inputs, I have done a little with buttons and a little more with sliders.

Sunday

Who works on Sundays? Apparently some SAGE developers do because on Sunday I was on e-mail with William Stein trying to get to understand interact.py, the file that contains most of the Python interact code. Eventually I made a three-line change that satisfied one of the open boxes in the todo list.

The change is highlighting depressed buttons in button bars, which posed only a very little design challenge: somehow figuring out which button has been highlighted. But, JQuery comes to rescue with a very simple solution:

$("BUTTON", this.parentNode).css("border-style", "outset")

The first part tells JQuery to look for all buttons in the cell containing the button being pressed, the second part tells JQuery to make all those buttons look like they have popped up.

The patch: SAGE Trac #3578 is approved and merged with the next release of SAGE.

Monday

I started playing around with sliders, trying to dynamically assign slider width, and soon realized that is too much work for the result - for now. This is because SAGE uses visually-appealing sliders with rounded ends. So, I settled with a longer static-width slider but decided to also add a label. Like with buttons, the point is to make it easier to tell the position of the slider so the label would have to change as I move the slider, not afterwards. This, of course, meant that there must be a Javascript array containing the possible values on the slider, and they are not limited to numbers. And if you are experienced with Javascript, you'll know this trick:

(function(){
    var values = [...];
    ...
})();

This creates a block and executes it. Why? The scope of the variable sliders is limited to the block, so I can create several of these and not worry about confuscating the variable to avoid duplicates.

Here is an example of an interaction using sliders:

The patch: SAGE Trac #3599 is currently awaiting review.