Modify the UP/DOWN Arrows on a Spinner Widget?

[gwmplum]

When developing programs using a Tablet Interface, I would like to be able to Increase the size of the up & down arrows of the Spinner Element. If I increase the size of the input box or the Font of the data the size of the arrows remains tiny. This is fine for a desktop/laptop display where a user would have use of a mouse, but on the Tablet my users are using only their fingers. A stylus is slightly better but still very difficult for the users in our manufacturing environment to hit the proper arrow.
I am currently trying to simply create a custom widget but I don't know where to start. I have created Custom Panel Widgets without a problem but I am struggling with the Spinner.
Any help would be greatly appreciated.
Greg

[Scott Klement]

I must admit, I am not a fan of the spinner widget. I would suggest simply not using it, especially if you are working with a touch interface. (I assume your tablet is a touch display.)

But, to answer your question: the arrows in the spinner widget are just images that are downloaded and displayed over the right edge of the box. Since they are images, there's no easy way to change their size. You could replace them with your own, bigger images, but I suspect this would not work right because the code that positions them, etc, would not position them correctly for the larger size. So, short of writing your own spinner widget, I don't see how you'd enlarge the arrows.

I would recommend using a regular textbox with input type = number. Most mobile devices recognize the input type,and will make it easier to type the number.

If it's important to have a graphical way (rather than keyboard) of changing the number, I would suggest placing a slider widget to the right of the textbox. Slider widgets work very nicely on a touch interface. You can use JavaScript to make the slider change the value of the textbox, so the user can slide the slider to adjust the textbox value.

If you like that idea, the JavaScript code would go into the "onchange" property of the slider, and would look something like this (this is just off the top of my head, but should be close):

Code: Select all

var tb = getObj("your-textbox-id");
tb.innerHTML = Number(this.value).toFixed(2);
tb.modified = true;

The toFixed(2) forces two decimal places, and should be adjusted as appropriate for the field you're working with.

[gwmplum]

Scott,
Thanks for your quick response and for the recommendation. I will look at the Slider option. in the mean time I simply changed to an input box and 2 buttons next to it for Increase & Decrease.
Greg