Designing UI elements with The Jucer


#1

hi experts, mates, folks, friends,

I hope you’re all fine.

WE (designthemedia.com) decided to go with Juce C++ and I’ll buy the commercial license very soon.
Even if I’m the team leader, I’m not the specialist but I have the charge of GUI design.
I’m okay with the design itself, I’d like to know a bit more about The Jucer.

So here are my questions. Please be indulgent. I did my best to find these answers but it isn’t as clear for me yet.

  • what is the difference between component & button (because button is … also, a component no) ?
    I guess component could be a whole panel, for instance, and button can be a slider, a rotary, a scope, a screen any static or changing element, right ?

  • I want to design parts with illustrator at the beginning, how would you proceed to include those elements in The Jucer ?

  • how do you make the differences between static parts & changing parts in your design (for instance, I want a rotary knobs, you turn it, its color, or a circle around changes its color) ?

  • how can I package the code + png elements to my programmer ?

Any tips would be very appreciated.

All the best,


#2

Hi!

  • A Component is an abstract base class for GUI objects. You should not use it directly (ie: create instances of the Component class, I don’t even think it is possible), instead you can create new classes that inherit from Component to make them do whatever you want your custom GUI object to do. For example, you can create a class ToggleSwitch, that inherits from Component (or maybe from a higher-level component like Button or Slider) and add custom features to these.

  • With Illustrator you can export files in .svg, that I think you can load in Juce. Otherwise, a good old PNG with the technique described below…

  • I don’t really get your point here…

  • To “package” your resources (png images, fonts…), you will need an external program (juce-based or not) to transform the binary files (.png files are in a binary format) into arrays of unsigned char, that you can add to your project. Then using some features of Juce you can load these arrays to gain access to your resources. Look for Binary Builder and Font Serializer on the forum, you’ll find plenty of good stuff about that.

I hope I answered some of your questions!


#3

Thanks for your answer

About component, I meant the new part you can design with jucer.
It proposes new component or new buttons. Whatever I need to create, I have to begin… with a button??

About the non clear part,
Imagine a knobs


#4

Oops sent to early…
Sorry
So, imagine a knob with a circle around it.
If the value is increased a bit, the circle’s colour changes.
How can I do that?


#5

You can do it by overriding LookAndFeel::drawRotarySlider, which gives you the knob’s value.
I don’t know if you can do it with the jucer…


#6

Hi masshacker,
ok
I guess I got it.

So, I have to design my elements, independantly of course.
If I need to use a rotary, I only create the circle element, I can create another element which would be the coloured circle part and when I’d have to assemble, I position the 2 elements and with the class you quoted, I alter colors when value changes.

How can I start from scratch and provide a (re)useable component to my programmer …?
This question sounds newbie, but on this part, I am :slight_smile:


#7

Actually, I think what Masshacker means is that, to change the look of a juce application, the simplest way is to have a custom Look and feel class

You just need a class which inherits from LookAndFeel and overrides drawRotarySlider . Nothing to do with the Jucer here ! That’s plain old C++.

So in the jucer, you would add a regular rotary slider, and in the code of your application, you have this custom class which manages the drawing of the rotary slider, and paints it in a different color depending on the value.

HTH


#8

okay.
I think I understand.

My question is: how can we separate a project in 2 parts: code/engine & GUI design ?

Can we use The Jucer on the GUI design part ?
I guessed it was for that.

I’d like to design a bunch of new elements for my programmers.

how can I proceed?


#9

The point is : the Juce is basically a c++ code generator. There are things you can do with the jucer (create windows, add components to them and so on …) and things you can’t (like having changing parts in your design) because the jucer doesn’t implement them (yet ? :slight_smile: ). In the later case you have to get your hands dirty and change some actual C++ code.

However, not only you can but you should separate the gui design and the engine. In the end, the GUI is just gonna be C++ code like everything else, but it can (must !) be separated from the rest, using your method of choice.
You have a lot of solutions out there : you can use JUCE’s own ChangeBroadcaster/Listener mechanism which is more or less an impolementation of the MVC design pattern, or more complex solutions, like MVP-PV using delegates (That’s what we do. I won’t get into details cause that would be off-topic). Which solution is better depends a lot on your actual needs.


#10

okay about the glue between GUI & Engine.

I discovered knobman.
It can fit well!