How do you use filmstrip images for knobs?


#1

Hi all:

I am starting to have a bit of success with Juce. I have a frequency shifting echo running, and am currently working on porting some reverb VST code to Juce.

I have been playing with adding my own lookAndFeel files, which is fun, but I would like to have more “realistic” controls than what I am currently able to generate out of the primitives.

Is there an existing method for using filmstrip graphics for a rotary knob or slider, instead of drawing the knobs by creating and filling Paths? I would like to use knobs generated by Knobman:

http://www.g200kg.com/en/software/knobman.html

I am sure that there are other plugin developers that would be interested in using filmstrip bitmaps/PNGs as well.

Thanks,

Sean Costello


#2

It’s pretty easy to do: just override the knob/slider paint method and draw the image your self:

and compute xoffset, yoffset, knobWidth, knobHeight according to the strip (vertical, horizontal, grid) and number of images


#3

Something like:

[code]class FilmStripKnob : public Slider
{
public:
FilmStripKnob(File const& image, const int numFrames, const bool stripIsHorizontal)
: Slider(image.getFullPathName() + T(" FilmStripKnob")),
filmStrip(image.exists() ? ImageFileFormat::loadFrom(image) : 0),
numFrames_(numFrames),
isHorizontal_(stripIsHorizontal)
{
if(filmStrip)
{
setTextBoxStyle(NoTextBox, 0, 0, 0);

		if(isHorizontal_) {
			frameHeight = filmStrip->getHeight();
			frameWidth = filmStrip->getWidth() / numFrames_;
		} else {
			frameHeight = filmStrip->getHeight() / numFrames_;
			frameWidth = filmStrip->getWidth();
		}
	}
}

~FilmStripKnob() { delete filmStrip; }
	
void paint(Graphics& g)
{
	if(filmStrip) {
		int value = (getValue() - getMinimum()) / (getMaximum() - getMinimum()) * (numFrames_ - 1);
		if(isHorizontal_) {
			g.drawImage(filmStrip, 0, 0, getWidth(), getHeight(), 
						value * frameWidth, 0, frameWidth, frameHeight);
		} else {
			g.drawImage(filmStrip, 0, 0, getWidth(), getHeight(), 
						0, value * frameHeight, frameWidth, frameHeight);
		}
	}
	
}
		
int getFrameWidth() const  { return filmStrip ? frameWidth  : 100; }
int getFrameHeight() const { return filmStrip ? frameHeight : 24;  }

private:
Image* filmStrip;
const int numFrames_;
const bool isHorizontal_;
int frameWidth, frameHeight;
};[/code]

…then used something like this:

[code]class MainComponent : public Component
{
private:

public:
MainComponent ()
{
addAndMakeVisible(filmStripKnob = new FilmStripKnob(String("~/Desktop/knobs/20070917sample2.jpg"),
4,
true));
}

~MainComponent ()
{
	deleteAllChildren();
}

void resized ()
{
	filmStripKnob->setBounds(20, 
							 20, 
							 filmStripKnob->getFrameWidth(), 
							 filmStripKnob->getFrameHeight());
}

private:
FilmStripKnob *filmStripKnob;
};[/code]

… where the file “20070917sample2.jpg” is one of the sample files on http://www.g200kg.com/en/software/knobman.html (which is a horizontally orgnaised series of four frames).


#4

Thank you for the detailed replies! I will try out the suggestions soon.


#5

OK, I’ve managed to get filmstrip images working for knobs. My next question: Will there be official support for these at some point? If I get some fairly flexible control classes running (sliders, buttons), can I submit the code somewhere for review, revision/critique, and inclusion in the official source?

Ideally, one could use filmstrip images for controls within the Jucer, for a super powerful WYSIWYG editor that would kick booty over anything currently available for VSTGUI. I’ve looked into what this would entail, but am busy with some non-GUI projects right now.

Sean Costello


#6

Sure, film-strip controls are a common request, so if you want to throw some code my way to start from, that’d be really helpful, thanks!


#7

Hello,

So far I was overriding paint method thru look& feel & png, but it would be definitively faster to to have such control from the JUCER ! (no need to tweak/build, tweak / build etc…)

So request +1 !

Salvator


#8

In Juced http://code.google.com/p/juced/
this kind of things are already implemented.

Check out:
ImageKnob
ImageSlider
Joystick
MeterComponent


#9

[quote=“masshacker”]In Juced http://code.google.com/p/juced/
this kind of things are already implemented.

Check out:
ImageKnob
ImageSlider
Joystick
MeterComponent[/quote]

Well, I will check this out right now! Thanks!

Question: Are the new components under the same license as the rest of Juce? i.e. GPL for open source, pay Jules for closed source? I’m working (slowly) on commercial apps, and want to ensure that the code I use can fit into a closed source plugin.

Sean Costello


#10

+1, as a total n00b, having these controls via Projucer would be nice… however, I’ll be starting to dig into the manual way of doing this soon.


#11