Jump to content
View in the app

A better way to browse. Learn more.

Tuts 4 You

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

ModernUI_Spinner Control [asm x86]

Featured Replies

Posted

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

MUISpinner1.gif

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:
squares-circle-grey-1.png squares-circle-grey-2.png squares-circle-grey-3.png squares-circle-grey-4.png squares-circle-grey-5.png squares-circle-grey-6.png squares-circle-grey-7.png squares-circle-grey-8.png

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:
771-1.png
Once loaded it is rotated and new frames are created to enable it to look like this:
771.gif

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:
832-01.png
So either it can be constructed by manually adding each frame or by using a spritesheet like so:
832trans.png
Which looks like this once all the individual frames are extracted:
832.gif

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

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

  • Author

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.

Create an account or sign in to comment

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.