Ctrlr UIComponents structure explained

[damiensellier]

Hi everybody,
I am currently deciphering how Ctrlr is working under the hood to improve features and fix bugs in a near future.
Here is a diagram about How the GUI is organized with their JUCE component names.

1. CtrlrDocument is the JUCE top-level component where every sub component are constructed for Ctrlr.

2. The Main Ctrlr component is CtrlrEditor, CtrlrEditor holds the menuBar and CtrlrPanelEditor

3. CtrlPanelEditor is a classStretchableLayoutManager layout manager element divided in 3 layouts :
   ctrlrPanelViewport (0), spacerComponent(1), ctrlrPanelProperties(2)

Note : spacerComponent is just the little 8px draggable spacer-bar that separates ctrlPanelEditor in two parts, ctrlrPanelViewPort and ctrlrPanelProperties

4. ctrlrPanelViewport contains another component called ctrlrViewPort which is aimed at displaying scrollbars if ctrlrPanelViewport is smaller than its child ctrlrPanelCanvas

5. ctrlrPanelProperties contains the ctrlrPanelComponentProperties where you set all the component properties of the selected component. it can also hold the ctrlrPanelResourcesEditor, or the ctrlrPanelUtilities for the XML text of the current component.

6. Last but not least ctrlrPanelCanvas which is the layout we are all working on and contains all the components/modulators we need for our panels.

Hope it helps to understand a little bit better the file and UI structure of Ctrlr.

[dobo365]

Super Damien!

[Ted-juh]

No, talking about "Component Size and position". See picture in the properties panel:

A while ago I tried out a "sort of" new layout to see if I could make a properties panel which was easier on the eye and easier to get around without all the scrolling or opening closing sections. It was just a quick mockup done in Juce.

[damiensellier]

Oh yeah I see what you mean.
It's because Ctrlr has a VAR2RECT function that stringifies the parameters (x, y, w, h) of JUCE function setBounds(x,y,w,h)
VAR2RECT for component's bounds (x,y,w,h) will give a string "x y w h"
VAR2RECT is everywhere in Ctrlr
So if you want to customize your CtrlrPanelProperties with those independent value boxes you have to forget about this VAR2REC and goes straight to setX() setY() setWidth() setHeight() for the component. check JUCE class Rectangle
CtrlrPanelProperties.cpp is located in Source/UIComponents/CtrlrPanel

The functions you want to customize to your very nice panel GUI is located in Source/UIComponents/CtrlrComponents/CtrlrComponent.cpp

For retro compatibility I would keep the property "componentRectangle" as it is but would add 4 property ids like "componentRectanglePosX", "componentRectanglePosY", "componentRectangleWidth", "componentRectangleHeight" that would get an update on resize with setProperty() when either one (the REC string) or the others (Int) changes.
You can get those component values with getX() getY() getWidth() getHeight()

[damiensellier]

@DnaldeT Do you have good skills in C++ ? I'm really bad and if you could help me with some little correction on my updates that would be awesome. Let me know ;)

[Ted-juh]

To be honest, I don't have any skills in C++. I struggle a lot to understand the way how it's structured. Hard to explain what the problem is. I don't understand why something goes in a .cpp file and the other thing must be in a .h file. Or why something must be in the header or at the bottom of a file.. (Seems to be read from the bottom to top?). All in all, I won't be of much help there.

But, I managed to build some things in Juce. A colourselecter with swatches. A menubar with my own items. The properties panel you saw in the last post. But that's Juce, doesn't have much to do with C++ itself. If you get my drift. What you tell me about VAR2Rect and where I can find or change some things will take me a good day of working out what you meant. That doesn't mean I don't appreciate your effort to explain it, I salute you for that.

But hey, I taught myself Lua. I can find my way around Ctrlr. I kind of understand Juce. So, the next step would be C++. But in the meantime, there must be people on the forum that have a greater knowledge of C++ than I have. And since this is a community thing..

---

Not to hijack the topic. But ever since I worked with Ctrlr I found it very cumbersome to change colors in my panel. There is a colourselector in Ctrlr but I always wondered why there were no "placeholders" or swatches for predefined colors". So I made this panel. Don't mind the title in the title bar, it was just to show Dnaldoog what was possible. But it's just that, a colourselector with swatches which you can change on the fly. Don't ask me how to incorporate something like that in Ctrlr.. :)

colourSelector.zip

[damiensellier]

@DnaldeT The problem with Ctrlr is that the file structure is sprawling. There's at least 10 extra files called in the cpp file and another 10 in the header .h for each one. There's sometimes some code in the header file as well... i's very easy to lose your path.
Roman Kubiak already implemented a lot of functions on resize, for refresh panels gui etc but it's hard to track them all down unless you learnt and take notes of the whole project beforehand. There's almost no commenting at all on the script as well.
I think I came to the conclusion that for other basic tasks than debugging, minor improvements etc unless Roman can reply to some questions and explain us, it's going to be pretty hard to take up the torch with Ctrlr.
I asked a friend who is advanced in C++ to help me with some minor improvements to start with, we will see how it goes.

PS: there's a color picking tool available in JUCE so it won't be hard to call it and pass the hex value to the different boxes in Ctrlr. https://docs.juce.com/master/classColourSelector.html

[Ted-juh]

About losing your path: Don't know if it's of any use for you but there is this nifty program called "Sourcetrail". https://www.sourcetrail.com/ (Free for noncommercial use)
This program gave me some clues about how Ctrlr was structured. Because it shows which files are linked to which and so on. I also use it as a "search" program to quickly find which classes/ functions are available in Ctrlr or which parameters they need.

[damiensellier]

wow thanks a lot for sourcetrail. I just downloaded it, that will really help me with this maze. Thanks mate