Click here to Skip to main content
13,868,307 members
Click here to Skip to main content
Add your own
alternative version


78 bookmarked
Posted 3 Aug 2002

Rotary Fader

, 3 Aug 2002
Rate this:
Please Sign up or sign in to vote.
A CSliderCtrl using 3 bitmaps for scale, knob and dot

Sample Image


This is the second article in a series called: Virtual Instruments. The series will show you how to enhance your application's GUI with bitmap based controls. You'll find the workspace for all demos under the directory :- /visiomedia/products/virtualinstrumentsmfc. Please skip loading of project files not yet found by the workspace. The

from the first article is currently not available.

Rotary Fader control

This article is about a rotary slider/fader control. It is derived from the MFC CSliderCtrl and supports bitmaps for scale, knob and dot. The CVMRotaryFaderCtrl can be used based on the following:

  • Add the CVMRotaryFaderCtrl class to your project.
  • Add the helper class CVMBitmap.
  • Add a slider control to your dialog/form-view.
  • Use the ClassWizard to create a control member variable for this slider
  • In your dialogs header file rename
    to CVMRotaryFaderCtrl .
  • Load the bitmaps you want to use.
  • Attach the bitmaps to the slider control.

These steps are outlined in detail as follows:

In your dialog or form-view class create a standard windows slider control and set an ID, say IDC_FADER1. Now open the class wizard  to associate a control variable, say m_Fader1 with the slider.  Manually edit the class name of this member definition in your dialog header file from

to CVMRotaryFaderCtrl.

CVMLinearFaderCtrl m_Slider1
If you do not like using DDX then you can just subclass the control:
m_Slider1.SubclassDlgItem(IDC_SLIDER1, this);

How do we load the bitmaps?

We don't want to use bitmaps from the applications resource file. Instead we use the LoadImage function to load them directly from a file. These files must exist in the same folder as our .exe file. In our project settings we have specified a bin folder as working directory. All images go there.

pszBitmapFile = _T("rotaryscale22a151x.bmp");
m_hBitmap[Scale1] = (HBITMAP)::LoadImage(NULL, pszBitmapFile, 

In our dialog's header file we setup an HBITMAP array and an enum for clarity. So nothing gets mixed up even when we use lots of images. We close the enum with a BitmapCount and use this value to specify the array size. With the loading code in the dialog, we can load images once and attach them to multiple controls.




HBITMAP     m_hBitmap[BitmapCount];

We also use an enum to specify which bitmap we want to attach to an individual part of our control.

m_Rotary1.SetBitmap(m_hBitmap[Scale1], CVMRotaryFaderCtrl::Scale);
m_Rotary1.SetBitmap(m_hBitmap[Knob1], CVMRotaryFaderCtrl::Knob);
m_Rotary1.SetBitmap(m_hBitmap[Dot1], CVMRotaryFaderCtrl::Dot);

You can call the method SetBitmap at any time. With the flip buttons of our application we can change the scale, the knob and the dot in any combination at runtime. SetBitmap will recalculate the layout of the control based on the size of the bitmaps, but sometimes you might want to specify some parameters individually, for instance the radius of the dot position.

How can I make my own bitmaps?

Look at these bitmaps to get an idea:


Sample Image


Sample Image


Sample Image

The knob and the dot are masked. We use pink as transparent color. When designing knobs and dots, you have to make sure, that the borders of the visible parts have a clear separation from the transparent, pink parts. Otherwise you would get ugly artifacts.

Where can I get ready-to-use bitmaps?

If you don't feel like an artist, you may want to use free bitmaps from Visiomedia Virtual Instruments. Instead of using LoadImage, you can import bitmaps with more than 256 colors, but Visual Studio's editor can't handle those bitmaps. You have to edit them outside with a graphics application like Photoshop.

How do I set the controls value?

You can interact with the mouse. By design this will only work on the y-axis. By moving the mouse up and down the current value gets updated. This kind of movement is more naturally for the common user than the rotary mouse movement seen in other rotary controls.

You also can use the keyboard. Implemented are the up/down cursors for a relative movement and the keys left, space, right, home, end for an absolute movement.

SetKnobPos(int nAbsolute);
UpdateKnobPos(int nRelative);

The resulting control value lies between 30 and 330 degrees.


  • This example only shows you a rotary fader with a fixed range of 300 degrees.
  • The sliders size always is restricted to the bitmaps size by design.

Related articles

  • The CMemDC class from Keith Rule.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Frank Luchs
Germany Germany
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralOh! Pin
futurejo8-May-11 1:34
memberfuturejo8-May-11 1:34 
QuestionI Need Help !!! Pin
MacGadger19-Apr-06 9:35
memberMacGadger19-Apr-06 9:35 
GeneralUsing the control Pin
Andy C5-Nov-02 8:12
memberAndy C5-Nov-02 8:12 
GeneralGreat ! Pin
Adalsteinn B. Bjarnason4-Aug-02 6:52
memberAdalsteinn B. Bjarnason4-Aug-02 6:52 
GeneralWhat is the best movement method for rotary sliders? Pin
Frank Luchs4-Aug-02 7:23
memberFrank Luchs4-Aug-02 7:23 
GeneralRe: What is the best movement method for rotary sliders? Pin
Michel Wassink4-Aug-02 21:50
memberMichel Wassink4-Aug-02 21:50 
GeneralRe: What is the best movement method for rotary sliders? PinPopular
tobybearproductions7-Aug-02 11:42
membertobybearproductions7-Aug-02 11:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190214.1 | Last Updated 4 Aug 2002
Article Copyright 2002 by Frank Luchs
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid