Vu Meter using png strips

I have a png strip of a Vu Meter that I got from Knobman. How can I change the lookandfeel to show the images when sending values 0.0-1.0 ? I got the custom rotary knobs working perfectly.



Just create a custom component and draw the image in whatever way you see fit in the paint routine.


It works well to use a png with some transparent elements.  You can then draw a big, bright, green bar, and overlay the transparency.

I can't seem to get this to work correctly. I'm trying to get the Led to read peaks vertically starting from the top.

Can someone please help.  Here is my custom code and png.


void Meter2Custom::paint (Graphics& g)


Image knobStrip = ImageCache::getFromMemory (BinaryData::meter11_1_png, BinaryData::meter11_1_pngSize);

int numFrames = 8;

double fval = (1.0 - meterValue)  * (numFrames - 1);

int pos = (int)fval;

double frameWidth, frameHeight,frameHeightFrames;

frameWidth = knobStrip.getWidth();

frameHeightFrames = knobStrip.getHeight() / numFrames;

frameHeight = knobStrip.getHeight();

int hSize;

hSize = (int)(frameHeight * pos);

frameCount        =8.0;

<span>    </span>

int i = 1, srcY=0;

i = 1 + int(meterValue * (frameCount - 1) );

i = BOUNDED(i, 1, frameCount);

srcY = int(frameHeight * (i - 1) / frameCount);

srcY = srcY + frameHeightFrames / frameCount;

//Vertical Strip

<span> g.drawImage(knobStrip, 0, 0, frameWidth, frameHeightFrames, 0, srcY, frameWidth, frameHeightFrames);</span>



Did you ever get this code working?