ModernUI_Spinner Control

[fearless]

I updated my spinner control (original version is here: http://masm32.com/board/index.php?topic=1179.0)

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.

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

[Biterider]

Hi fearless
This is a very good job 
Recently I needed something similar, but due to time constraints I used a different solution. I will try your control.
There are two things that need improvement:
- Under Win10 64, your application triggers a virus warning (Trojan).
- On some spinners there is a graphics error (see picture).

Keep this cool work going! The complete MUI is a good stuff 

Biterider

[jj2007]

It's beautiful, my compliments

[fearless]

Thanks JJ and Biterider.
Its always work in progress ;-) but hopefully I can add to it all over time and build up a collection of useful UI controls.
Thats odd about the win10 x64 graphics issues - makes me think its dpi scaling related perhaps, as only a quarter of the image is shown for the spinners that are handled with the single image that is rotated - the manually added frames and spritesheet ones appear to look ok. Maybe its in using the GdipDrawRect in those single rotated images vs GdipDrawRectRect in the spritesheet functions. Something to look into though.

Also still have to do the x64 version at some point. But generally I'm behind with syncing my x64 version of the ModernUI controls and library vs the x86 version.
Thought about doing a ModernUI_Animation control which would likely be similar code, with additional code etc to handle a frame speed for each frame.

[fearless]

I updated the ModernUI_Spinner control to use the GdipDrawRectRectI instead of GdipDrawRect, hoping that this overrides any possible scaling issue - if that was the issue in win10 x64.
I uploaded MUISpinner1.exe to virustotal: https://www.virustotal.com/gui/file/d8c76960a7653fb3d688047101d662d0aa5c82fd0dfe33062f9ec888d7b6a7ae/detection
Only 4 false positives - so unsure how to combat that issue.
Attached is MUISpinner1.zip with just the updated exe to hopefully see if its fixed the issue on win10 x64

[Biterider]

Hi fearless
Unfortunately, it behaves like the first version 


Biterider

[fearless]

Well thats a strange one for sure. :D have to think on that for a bit, maybe I can create a dc and bitmap, then handle the original image with that as the backing and get that graphics context, instead of getting the graphics context straight from the image.

Do you have a high dpi monitor? I think it's a scaling issue, but don't know for sure - maybe its an issue with the actual png image somehow?

[LiaoMi]

Hi fearless,

try so ..

Code Select Expand

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
  <asmv3:application>
    <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
      <dpiAware>True/PM</dpiAware>
    </asmv3:windowsSettings>
  </asmv3:application>
  <dependency>
    <dependentAssembly>
      <assemblyIdentity
        type="win32"
        name="Microsoft.Windows.Common-Controls"
        version="6.0.0.0"
        publicKeyToken="6595b64144ccf1df"
        language="*"
        processorArchitecture="*"/>
    </dependentAssembly>
  </dependency>
  <trustInfo xmlns="urn:schemas-microsoft-com:asm.v3">
    <security>
      <requestedPrivileges>
        <requestedExecutionLevel
          level="requireAdministrator"
          uiAccess="false"/>
        </requestedPrivileges>
    </security>
  </trustInfo>
<compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
<application>
<!--The ID below indicates app support for Windows Vista -->
<supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}"/>
<!--The ID below indicates app support for Windows 7 -->
<supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}"/>
<!--The ID below indicates app support for Windows 8 -->
<supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}"/>
<!--The ID below indicates app support for Windows 8.1 -->
<supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}"/>
<!--The ID below indicates app support for Windows 10 -->
<supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}"/>
</application>
</compatibility>
</assembly>

[Biterider]

Hi fearless
Im using a ASUS MX299Q wide screen. The resolution is set at 2560x1080 pixel running at 60Hz.
I hope this helps 

Biterider

[LiaoMi]

Hi fearless
Im using a ASUS MX299Q wide screen. The resolution is set at 2560x1080 pixel running at 60Hz.
I hope this helps 

Biterider

I have a similar monitor, and I have the same effect, there must be another reason, not the screen resolution ...

[fearless]

I noticed that the png's from Icons8 are apng - which it turns out is an animated png - only seen this when using XnView and seen that the png contained x frames.
I opened those png's in IcoFx and exported out the single image which resulted in smaller png file sizes.
I'm hoping that maybe it was due to this. So I recompiled the MUISpinner.exe in the attached zip, hoping it was this, before I go off looking for other possible solutions.
Fingers crossed.

[Biterider]

Hi fearless
Sorry, still the same effect...


Biterider

[fearless]

Ok thanks for testing for me.
I updated the rotation function to use the dc of the control and then use that for the graphics context, similar to how the spritesheets are loaded and handled.
Updated the sample MUISpinner1.exe again. If its still the same, then I'm currently out of ideas.
Does it show the correct image size for any of those affected spinners - specifically the first image as its just cloned if angle is 0/360, and the 180deg of the image is flipped rather than rotated, so just wondering if any of those appear as quick flashes in those spinners?

[Biterider]

Hi fearless
One thought: It seems that the spinner image has sometimes and sometimes not an offset, like the hotspot of a cursor.
Biterider

[fearless]

Are they still animating but only showing a quarter of the image?