Skip to content

Intro to spinners

A spinner is a widget that allows you to cycle between different options of a list, using left and right buttons. Additionally, it has a center button that can be configured with the usual callbacks.

Constructor

The constructor for this widget is UISpinner, which inherits from UIOptionGroup. This means that it has the same base values (for example, to get the selected index, you would call the same exact getIndex method as in the mutliple option groups).

The signature is as follows:

UISpinner(_id, _x, _y, _option_array, _sprite_base, _sprite_arrow_left, _sprite_arrow_right, _width, _height, _initial_idx=0, _relative_to=UI_DEFAULT_ANCHOR_POINT)
  • id is the string ID.
  • x and y are the offsets with respect to the anchor point. Note that, as directed in the Fundamentals page, your sprites should have its origin point set to top left, to allow for correct positioning in gooey.
  • option_array is the array of strings containing the possible values to choose from.
  • sprite_base is the sprite used to render the center button.
  • sprite_arrow_left is the sprite used to render the left button.
  • sprite_arrow_right is the sprite used to render the right button.
  • width and height are the desired width and height of the widget.
  • initial_idx is the initially selected index (by default, 0). Note you cannot have an "unselected" option in spinners.
  • relative_to is the anchor point, as usual from the UI_RELATIVE_TO enum.

Spinners are a "mashup" widget

A spinner in gooey is a "mashup" of different widgets. Taking a look at how the UISpinner constructor is built is a great way to understand how to extend gooey with custom widgets.

In particular, a spinner has four widgets:

  • A UIGroup to group everything together
  • A UIGrid of dimensions 1x3 which allows for easier layout and positioning.
  • A left UIButtton to display and cycle left (reduce the index by 1, cyclically).
  • A center UIButtton to display the selected item.
  • A right UIButtton to display and cycle right (increase the index by 1, cyclically).

Setting the appearance and behavior

Since spinners are a "mashup" widget, the way to set up spinner appearance and behavior is by directly interacting with the specific controls. Consequently, there are no specific setters and getters (other than the ones inherited from the option group), but rather we get ths corresponding widgets and then set appearance and behavior of those.

For example, to set the sprite of the left arrow button, we first get that button using getButtonLeft and then we use the Button methods to set appearance and behavior.

Warning

Be careful to not override the callbacks of the left/right buttons, as this will render the widget unusable.

Example

Let's use the same example and asset pack we have been using for multiple option widgets, found in the Option group tutorial, but now configure a spinner out of it:

1
2
3
4
5
var _panel = new UIPanel("TestPanel", 0, 0, 400, 300, blue_panel, UI_RELATIVE_TO.MIDDLE_CENTER);
_panel.setTitle("Choose your difficulty").setImageAlpha(0.7);
var _opts = new UISpinner("MultipleOption", 0, 0, ["Easy", "Medium", "Hard", "Nightmare"], blue_button02,spr_Arrows,spr_Arrows,200, 64,, UI_RELATIVE_TO.MIDDLE_CENTER);
_opts.getButtonRight().setImage(1).setImageMouseover(1).setImageClick(1);
_panel.add(_opts);

As you can see in the highlighted line, we get the right button and then use standard button methods to set up appearance.

You can take a look at the resulting interactive example here: