Look and Feel!

[crayolon]

Hi atom,

Having done a new background image/logo for my Virus B ctrlr, I spent some time last night trying to hack the look and feel from the Sequential Circuits ctrlr into it…and I failed miserably. I got the binary into my UI cpp alright, but by the time I got everything to compile, the knobs and buttons weren’t appearing. Obviously I did loads of stuff wrong and I suspect maybe the SC ctrlr is based on older code than the Virus B ctrlr…

Anyway, all I wanted was some nice knobs for my ctrlr, perhaps a nice button here and there and some dropdown menu skins (because the defaults look awful!). Is there any easy way for me to implement this on my end?

Cheers ” title=”Smile” />

[atom]

Well it’s fairly easy, i guess the simplest way is to have a look at the MBase01 Ctrlr, it’s the simplest yet.

The MBase01Editor.h contains the variable "knob" witch is the type of ImageSlider, in the Mbase01Editor constructor you see it applied to all sliders via: applyLookAndFeelToSliders(), and that’s it. The same goes for toggle buttons. The images used are knobman knobs exported as transparent PNG images, images are added as resources in the JUCER (knob0_png, btn0_png that’s what i name them always), and used as constructor initializers for the knob variable like so:
[code:2h14akjy]
knob(Pic(knob0_png, knob0_pngSize), Font(16, Font::bold))
[/code:2h14akjy]

basicly it says, use the image knob_png as the image for that slider, use that Font for the label, same thing for toggle buttons, for combo boxes you need to write your own LookAndFeel class, have a look at the already added LookAndFeel classes (there are 2 EdoLookAndFeel and GekonLookAndFeel), and apply them to your UI elements, there is a handy call

[code:2h14akjy]
void applyLookAndFeelToUsableElements (Component *parentComponent, const String &prefixForUsableElements, LookAndFeel *tabbedComponentLookAndFeel, LookAndFeel *slidersLookAndFeel, LookAndFeel *toggleButtonsLookAndFeel, LookAndFeel *comboBoxesLookAndFeel, const bool recurseToTabs)
[/code:2h14akjy]

that applies look and feel to components in the editor, and that recurses to tabs in tabbedcomponents so it’s one call for all, just pass 0 to those parameters you don’t want to modify, ImageSlider and ImageToggleButton are just LookAndFeel classes so you pass them to this call. Call this in your top editor class (not the tabs), pass "this" as the parentComponent, prefix is the name prefix, and set recurseToTabs to true so all tabs are modified.

[crayolon]

Note for anyone else who’s doing this – applyLookAndFeelToSliders() has been updated to applyLookAndFeelToUsableElements().

[Author]

Posts