Introduction

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

CVMLinearFaderCtrl

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

CSliderCtrl

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

CSliderCtrl

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.

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.

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:

Scale

Knob

Dot

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.

Restrictions

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.

License

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.

Comments and Discussions

Hey this is jst a gr8 Slider Ctrl.. kst wht i wantt.. but i want this same in normal Slider Control , which i can use Horizontal/Verticaly , plz note im askin u about to make a Simple Slider Ctrl, i want to use Images on them ,like u do
.. i want to Set Bitmaps from Outside not from Resources , like u do..realyyy u do a gr8 job.. realyy gr8.. but i cant use it my project.. cuz it need a normal slider.. plzz tell me can u made one for me..plz plz plzzz i will be very thnkful to u for this.. plz ..