Verve
Blog
Home > Blog > How To Build A Text Spinner Ui Widget

How to build a Text Spinner UI Widget

TextSpinner-UI-widget Spinner widgets are one of the UI components that are often used in games, in which either a user interaction or an internal process changes the content of the widget, but instead of a static change, the widget transitions smoothly by spinning from the old value to the new one. You might recognise the widget from its wide use in Casinos, iOS (for Date/Time selection), etc.

Recently, I needed to build a similar widget; despite the fact that I only needed the widget to spin digits, I decided it would be fun to challenge myself, getting the widget to spin any character set.

The widget uses jQuery for DOM (Document Object Model) manipulation (as it makes it a lot easier to deal with the DOM), but the dependency will be removed in future releases.

Firstly, I’ll take you through the process I followed to build the widget.

1. I listed the functional requirements (what exactly that the widget needs to do). In my case, the requirements were:

  • Adaptable for any piece of content. I wanted the widget to be flexible enough to be plugged into content, to flow inline with text.
  • Support different font faces/sizes. Since the widget can be plugged into any piece of content, it needs to match any styles set by the content, specifically font-face and font-size.
  • State transition. The widget needs to smoothly transition from one state (old value) to another (new value).
  • Configurable to different languages. Because we’re an international agency, doing business in a range of languages, I thought why not make the character set configurable so that it can spin text in any language.

Clearly stating the widget’s requirements in advance will help you stay focussed on the task at hand and not to get distracted by new features or trends that can be added. This will also enable you to have a clear division between core functionality and additional features.

2. The second step is to map these requirements with corresponding code specs:

  • Content pluggability: the widget needs to follow the flow of the page and content, so an “inline-block” with no prior assumptions on positioning of the widget i.e. use relative positioning.
  • Configurable font face/size: calculations needs to be done with respect to the font-size i.e. use “em” units.
  • Smooth transitions: use of either JavaScript animation or even better CSS animations/transitions.
  • Configurable character set: use JavaScript to generate the HTML structure of the widget.

3. The next step is to create the code. To keep things simple, for this example we’ll assume that we only want to spin digits from 1 through 6 and that we only have 3 places to spin i.e. “000” “666” “123”, etc.

First the HTML code of the widget:

 

If you’re confused by what the HTML code represents, then the following diagram should help clarify what’s what: HTML-TEXTSPINNER

For the CSS code I use SASS, which among lots of other cool features, makes it easier to generate repetitive CSS code blocks. Below, you’ll find the SASS code where I’ve made comments to make it easier to follow:

The CSS is easy to follow, but it’s worth emphasising that in this case we use transforms instead of top/margin-top when moving the viewport. This is a technique often used to ensure smooth animations in CSS. To put it simply, changing top/margin-top requires the browser to perform a relayout which then forces the browser to perform a repaint, while transforms don’t. Less repaints equates to higher performance! The logic behind it is much more elaborate, for more information about transforms/relayout/repaint, I recommend these posts by Paul Irish and Chris Coyier.

Next, we code in JavaScript:

The two most important points here are: “render” and “setText”. The “render” method renders the TextSpinner widget on screen and is also called upon every time the spinnable place counter changes. The “setText” method is used to set the current text of the widget. The method first converts whatever is passed to it into string, then it checks if the available spinnable places are enough to accommodate the new value. If the new value requires more spaces, the render method is called to create those places. Similarly, if the available places are more than the required places, the render method is called to remove the extra spinnable places. Internally, the “setText” method moves the viewport element of each spinnable place up/down depending on the character that needs to be shown in that place. The movement is done through controlling either the “transform” property and if not supported it will fallback to the “margin-top” property.

Here is a demo:

See the Pen meRvoJ by Suhail Abood (@suhdev) on CodePen.

For the sake of this blog post I have simplified the process, however, the fully implemented/tested widget is available here.

Please do use it, test it, and let me know how you get on.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">