Multiple Styles for Controls?

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

Chazrox

@bwoogie and when you're done with that....

Lindon

@dannytaurus said in Multiple Styles for Controls?:

@Lindon Nice.

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

yes its very very big...

Lindon

@dannytaurus said in Multiple Styles for Controls?:

@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.

Sadly, no the LAF processing is considerably more sophisticated than just dealing with styling buttons dependent upon some value in the text attribute, so sometimes its there, sometimes not..

bwoogie

@Chazrox said in Multiple Styles for Controls?:

@bwoogie and when you're done with that....

...I'll know right where to find you

Multiple Styles for Controls?

18

2.1k

13.0k

112.6k