ModernUI_Spinner Control [asm x86]

[fearless]

I created a spinner type control to add to the ModernUI controls (based on an my original version a few years ago: http://masm32.com/board/index.php?topic=1179.0) - typically used when loading, pre-loading or processing something and to hint or indicate to the user something is occurring - similar in that regard to progress bar controls.

Download

The control can be downloaded via the ModernUI repository or downloaded directly from this link: https://github.com/mrfearless/ModernUI/blob/master/Release/ModernUI_Spinner.zip?raw=true


Example

I created an example project to demonstrate it.

The example (which includes a Radasm project) can be downloaded via the ModernUI repository or downloaded directly from this link: https://github.com/mrfearless/ModernUI/blob/master/Release/MUISpinner1.zip?raw=true



There are a number of ways of adding image frames to the ModernUI_Spinner control.
The most basic level is to add individual images to construct the spinner animation. This can be done with the MUISpinnerAddFrame or MUISpinnerLoadFrame - using an image handle that is already loaded or using a resource id of an image.

For example, the first spinner it is comprised of 8 separate bitmap images:


For images that are circular, it can be more convenient to use the MUISpinnerAddImage or MUISpinnerLoadImage functions, as these only require one image. The image is copied a number of times into frame images - as specified by the dwNoFramesToCreate parameter. Each new frame image is incrementally rotated - based on the angle calculated for each new frame image. The bReverse parameter if set to TRUE will set the spinner animation to counter-clockwise. Note: the MUISpinnerAddImage or MUISpinnerLoadImage functions only work with png images or png's stored as RCDATA resources.

The far right spinner on the top row is created via loading a single png image:

Once loaded it is rotated and new frames are created to enable it to look like this:


For more complicated spinners, or spinners that are not circular in nature, the MUISpinnerAddSpriteSheet and MUISpinnerLoadSpriteSheet functions are provided. These allow you to provide a long (wide) image (bitmap, icon or png) handle (or resource id) that contains all the spinner frames in the one image. The image frames are extracted out of this image. The amount of frame images in the spritesheet is passed via the dwSpriteCount parameter.

The clock spinner is a good example of this, as it can't be rotated due to the buttons around its edge:

So either it can be constructed by manually adding each frame or by using a spritesheet like so:

Which looks like this once all the individual frames are extracted:


I put some compile time conditions to allow for using of TimerQueue, Multimedia Timer or WM_TIMER for the animation of the spinner. There is also a ModernUI_Spinner.h file for c/c++ - but as I don't actively use that language there may be some typos or mistakes or wrong types specified (I haven't tested it).

The Icons8 website is a good source for spinners, and they can be adjusted for size and color etc before downloading - including under the additional download options button as a spritesheet (using apng format). Take note of the frames value, as you will need to use this so that the spritesheet can be divided up into the correct individual frames.

https://icons8.com/preloaders/en/search/spinner

[_null_]

This is very nice. You've put some good work into these. Thanks for sharing with us! 

[fearless]

Small update - Biterider on the masm32 forums reported an issue with some of the spinners on windows 10 x64. He was able to track it down as an issue with the fpu still holding data from previous function calls. I have updated the source, library and the demo.