Multiple Styles for Controls?

[bwoogie]

Is it possible to create multiple styles for the same control? Like, if I wanted to have a couple different looking buttons or knobs for instance.

The only way I currently see is check the id of the control in my Look and Feel and draw based on that. But that's an awful way because it makes my code not reusable between plugins.

[Chazrox]

@bwoogie You could create an array of selected components and just apply its own laf functions to them. You could make how ever many different lafs you want. Make sure you're using LocalLookAndFeel as opposed to GlobalLookAndFeel. Does that answer your question? I think im understanding what you're asking.

[bwoogie]

@Chazrox Yes, that makes sense. That may be the way I'll do it, if a better way doesn't show up. I'd prefer to be able to just change a style setting in the gui editor - like how you'd choose a knob or a slider. But at least I'll have a method.

[Chazrox]

@bwoogie The only way I think you can change the actual style of the knob/button like that (and we're not just talking about colour and dimensions right?), you can use filmstrip images and just load different ones through the property editor. Then you can change the images individually.

[David Healey]

@bwoogie use local look and feel instead of global.

[dannytaurus]

@bwoogie The way to make your code reusable is LocalLookAndFeel in an external script.

Create multiple LAFs, one for each control style, then apply them to different controls based on their ID. If you stick to a convention of IDs it's very quick and easy. Something like:

Prefix with knbSm for small knob style:
knbSmOctave
knbSmTune

Prefix with knbLg for large knob style:
knbLgFreq
knbLgRes

Then create and apply your LAFs like this:

// Small Knobs
const lafknbSm = Content.createLocalLookAndFeel();

lafknbSm.registerFunction("drawRotarySlider", function(g, obj)
{
  // draw your small knob graphics here
}

for (knob in Content.getAllComponents("knbSm")) knob.setLocalLookAndFeel(lafknbSm);

// Large Knobs
const lafknbLg = Content.createLocalLookAndFeel();

lafknbLg.registerFunction("drawRotarySlider", function(g, obj)
{
  // draw your large knob graphics here
}

for (knob in Content.getAllComponents("knbLg")) knob.setLocalLookAndFeel(lafknbLg);

To make it reusable between plugins, move all your LAF code to an external JS file and include it in the main interface script like this:

include("LookAndFeel.js");

Then you just copy that file to the Scripts folder of a new project and include.

[Lindon]

@dannytaurus said in Multiple Styles for Controls?:

Create multiple LAFs, one for each control style, then apply them to different controls based on their ID. If you stick to a convention of IDs it's very quick and easy.

..this works but I do something a bit more flexible, for buttons at least - I use the text area to define the style...

so the json for a button I want to have the "Flat style" looks like this:

[
  {
    "type": "ScriptButton",
    "id": "PadEditSelector",
    "x": 170.0,
    "y": 30.0,
    "parentComponent": "EditPanel",
    "radioGroup": 51.0,
    "text": "FLAT:Edit Pad"
  }
]

..and in the interface looks like this

There's a giant loop thru all components in theLAF.js and the relevant bit is:

	
const var allComponents = Content.getAllComponents("");	


for (c in allComponents)
{	

	if(c.get("text").contains("FLAT"))
	{
			c.setLocalLookAndFeel(flatButtonLAF);
			continue;
	};

}	

and the LAF itself looks like this:

const var flatButtonLAF = Content.createLocalLookAndFeel();

flatButtonLAF.registerFunction("drawToggleButton", function(g, obj)
{  
	var a = obj.area;
	g.setFont(SkinSpace.skin.stdFont, 16);
	// get the text out..
	var ffText = obj.text;
	var fftextStart = ffText.indexOf(":");
	ffText = ffText.substring(fftextStart+1,ffText.length);
	
	//Console.print("drawing flat:" + ffText);
	var fillColour = SkinSpace.skin.highlight;
	var TextOnColour = SkinSpace.skin.outline;
	var hoverOnColour;
	
	//var cThisColour;
	if(obj.value)
	{
		g.setColour(fillColour);
		g.fillRoundedRectangle(a, 0);
		g.setColour(SkinSpace.skin.highlightContrast);
	}else{
		g.setColour(SkinSpace.skin.stdText);
	}
	
	if(obj.over)
	{
		g.setColour(SkinSpace.skin.Over);
		g.fillRoundedRectangle(a, 0);	
		g.setColour(SkinSpace.skin.highlightContrast);
	};
	//g.setColour(SkinSpace.skin.stdText);
	g.drawAlignedText(ffText, [a[0],a[1],a[2],a[3]], "centred");

});

..it uses a skin file to set the colours...

[dannytaurus]

@Lindon Nice.

Incidentally, radio group 51? What the hell are you building?!

[dannytaurus]

@Lindon You could simplify the control text a bit:

// Simplify this:
var ffText = obj.text;
var fftextStart = ffText.indexOf(":");
ffText = ffText.substring(fftextStart+1,ffText.length);
g.drawAlignedText(ffText, [a[0],a[1],a[2],a[3]], "centred");

// to this:
g.drawAlignedText(ojb.text.split(":")[1], [a[0],a[1],a[2],a[3]], "centred");

This assumes you'll always have the ":" in the obj.text. If not, the short version blows up.

[bwoogie]

Thanks guys! I realized i should be using LOCAL Look and Feel before I even got out of bed this morning