CtrlrX v5.6.28 Release - Scalable GUI for responsive design added and menuBar not showing on export FIXED

[damiensellier]

Hi,
I just published a new commit to my Ctrlr Fork as v5.6.28.
https://github.com/damiensellier/CtrlrX

There's 2 major updates in this commit.

1. The menu bar not showing up on exports is now fixed for v5.6.23+ and can be set in the property pane.
2. I added a callback triggered when the app/plugin frame is resized. It allows to have a LUA script and resize the uiZoom value to change relative to the Native OS window size.

This is the new Editor part for Globals in the property pane:

"Canvas Bounds" , changing values are now updating the actual canvas graphics. Before, only resizing with the mouse worked.
"ViewPort is resizable on a restricted instance" is set to to Resizable as default. You can lock the window with this option.
"ViewPort Scrollbars visibility on an exported instance" is set to "Show" as default". You can hide them to prevent scrollbars showing if the APP window is showing scrollbars on your panel when locked.
"ViewPort resize limits enabled on an exported instance" it's set to Disabled by default. It let you define a minimum and maximum APP window size.
"ViewPort enable aspect ratio" is where the magic happens. It's set to Disabled by default. When Enabled, you can keep an aspect ratio for your APP window, required for scalable/responsive design.
"ViewPort fixed aspect ratio" is calculated automatically when the canvas size field is changed (0 0 600 400 for 1.5 etc)
"Panel ViewPort background colour" is a new property to define the color of the ViewPort (where the panel canvas sits)

"Called when the ViewPort is resized" is where you select your LUA script triggered by resizing the APP/Plugin window.

Here is an exemple on how to scale the panel to the OS window:

--
-- Called when the panelEditor is resized
--

vpResizedCbk = function(--[[ CtrlrPanelEditor --]] panel)

canvasWidth = panel:getCanvas():getWidth()
canvasHeight = panel:getCanvas():getHeight()
viewportWidth = panel:getPanelEditor():getWidth()
viewportHeight = panel:getPanelEditor():getHeight()
canvasRatio = canvasWidth/canvasHeight
zoomWidthRatio = viewportWidth/canvasWidth
zoomHeightRatio = viewportHeight/canvasHeight

if canvasWidth >= canvasHeight then
    zoomRatio = zoomWidthRatio
else
    zoomRatio = zoomHeightRatio
end

panel:getPanelEditor():setProperty("uiPanelZoom",zoomRatio,true)

end

Hope it will help with your new projects and happy new year 2024 to each and everyone of you ;)

Damien

EDIT :

Saving/recalling the window sizes in a value tree stateData LUA script is required to have the current size stored in the plugin host prefs.
Exemple here (not responsive yet, but saving size for DAW) :
https://github.com/RomanKubiak/ctrlr/files/7819295/Select.Window.Size_1_0_0_2022-01-05_21-15.panel.zip
I'll post a sample panel with all features soon.

[Ted-juh]

Some great additions there Damien. I haven't yet had time to test it, but I have to ask. Does this function "blur" pictures used for sliders/ backgrounds as long as they're not vector-based? Nonetheless, they are great additions. I'm in the process of writing a complete background for my panel which consists solely of the paint method, which would scale nicely with your added zoom function because it's based on the width/ height of the panel instead of absolute coordinates.

In my instance of Ctrlr, I added a few missing defs from classes. One that comes to mind is jmap. I also tried to bind the Normalisable Range class from Juce with Luabind. Which partially succeeded. Very handy when it comes to creating sliders yourself in a custom component. Yes, there are workarounds, like adding a function in Lua but it's fewer scripts and functions this way.

Not added yet but I also wanted to add a right-click menu to the custom component like the other components have. Speaking about right-click. Wanted to add the "open panel mode" to the right-click menu on components, as well as a window that opens just the component properties in a floating window.

I would like to add them to your fork so you can review them before adding them but.. I don't get the geist of GitHub. I can create my own fork but I don't have a clue what I'm doing when it comes to pulling/ requests/ commits and so on. Let alone contribute to your fork. Dnaldoog once tried to pull me through but to no avail. Read a lot but there are way too many confusing tutorials on how to do it in Visual Studio or GitHub's own program or external consoles. I just can't get the hang of it.

So if someone has a tutorial that made it tick the "gotcha" boxes, please let me know.

[damiensellier]

@Ted-juh maybe yu could try converting your design to svg or vector paths?
I'm into the vst3 naming problem I'll add something in the juce vst3 wrapper to grab the name and other IDs from the info.plist and windows program header, exactly as it's implemented as in the vst2wrapper, AU wrapper and AAX wrapper.
The way the VST3 wrapper is done is totally enclosed and doesn't communicate with the Ctrlr manager at any point. So the only way to identify the vst3 plugin/panel is to get those IDs from a xml or datas available outside. We need those IDs at the entry point of the wrapper, before the wrapper even calls the ctrlr application. The vst2 wrapper doesn't even call the getName() in the audioprocessor class, it just gets the name from the plugin file itself (without extension), if you rename it, the plugin will show up differently in the host. VST3 is a bit different and creates the wrapper with statics from the projucer definitions, this is the reason why it's stays "Ctrlr | Instigator" because it's hard-coded to the wrapper that is cloned when exporting the panel as vst3. There's no interaction with the panel possible in anyway as it is right now. It's totally segregated. Getting IDs from the header or the package bundle is the easiest with the Juce File class and XMLelement class.

I did the part of storing those IDs in the info.plist and windows program header already, so now I have them available at hand when exporting.
As you can see, now we have everything required, the panel version , the panel name, panel ID, manufacturer and manufacturer ID, so it's ready to go for the wrapper.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
  ///

    <key>CFBundleName</key>
    <string>exportNew01</string>  // for plugin name
///
    <key>CFBundleShortVersionString</key>
    <string>2.1</string>
    <key>CFBundleSignature</key>
    <string>5PN2</string> // for plugin UID
///
    <key>CFBundleVersion</key>
    <string>2.1</string>
///
    <key>NSHumanReadableCopyright</key>
    <string>damien</string> // For Manufacturer
    <key>ManufacturerID</key>
    <string>qmWq</string> // For ManufacturerID
  </dict>
</plist>

The remaining part is to get them and pass them to the host, I'm half way through. Unfortunately I'm pretty busy from now on after holidays and will have to wait until february to tackle this issue once and for all.

Concerning the github, you can probably request a push to my fork, I'll get a notification and I'll cherry pick the updated code for a new commit on a new branch of mine. I only got the updates from other forks by doing a pull request to my fork.

[damiensellier]

Edit: Yeah and you can also share your updates here in a discussion presenting the new feature with a link to your branch ;-) That would be so nice to have an updated version of Ctrlr including all the features everyone worked on.
Take care
Damien

[bijlevel]

Very good initiative, much appreciated! So now it's 'feature request' time 😉! I support @Ted-juh request for the right clicks. Maybe also a keyboard shortcut for the Lua editor. Most of the time the editor is hidden by the panel (I'm working on a rather big panel), so to show the editor a shortcut would be handy. Maybe I can do it myself, but if one of you could point me in the right direction, that would be nice! I'm also always struggling with the inspector panel layout. Never can I find quickly a property or setting. I'm not sure if rearranging is feasible. Maybe just colouring would help. I don't now. Again, if you can point me in the right direction where I have to look for these kind of changes, that would be very welcome.

[damiensellier]

@bijlevel I just checked the code and right click is already available on the customComponent. It's just that you have to right click on the name of the component to display it, not the empty area.

Or are you talking about a right click callback event to trigger a lua script?

[damiensellier]

everything happening on the canvas area is related to CtrlrPanelCanvasHandlers.cpp and CtrlrPanelCanvas.cpp
It's going to be very easy to add functions in the popup like "display component properties" etc
I'll add this to my to do list. I'm thinking about creating a thread for that like a ctrlr new featuress request and bug fix.
I will definitely implement the look and feel class to be able to style the components with the stock JUCE color templates. That would be neat.

[Ted-juh]

Maybe also a keyboard shortcut for the Lua editor.
There is already a shortcut, it's "Ctrl + e". I guess it's "Command + e" on Mac.

I'm not sure if rearranging is feasible.
Rearranging is possible. Or add a section to set all the colors for background, text, button on, button off and so on, that are now positioned between the options. The Component section and the Component Colours section.

Maybe just coloring would help.
It would help but the LookAndFeel Class for the PropertyPanel doesn't provide options to colour sections. Well, not that I could find.

I botched my installation of Ctrlr that I worked on to debug and release. I don't know what happened but I tried to fork Ctrlr (succeeded) but now I'm getting build errors while I did the exact same steps as I did before from Bijlevel's manual.

I think the problem is that it's not taking the repository from April 8th 2021. That was the one that would debug and release fine. But the 2 newer commits didn't. Does anybody know how I point Visual Studio to the right date of the repository?

[Ted-juh]

@ Damien

Even if the custom component is filled with graphics, I thought it was a transparency issue not selecting the component to register a right-click, then there's still no right-click menu. I could set the name to invisible later on but it's weird behaviour.

[bijlevel]

@Ted-juh @damiensellier I can confirm this behaviour on a Mac. Only r-click on the name or the border does show the menu.

[bijlevel]

The shortcut 'command+e" does set the panel in panel mode, so it does not show the Lua editor, at least in the Mac version. Of course it's a minor issue, but it would cause less mouse travel if there is a shortcut.

BTW my name is Sjoerd, so no need anymore to use 'bijlevel'😉.

[damiensellier]

Saving/recalling the window sizes in a value tree stateData LUA script is required to have the current size stored in the plugin host prefs.
Exemple here (not responsive yet, but saving size for DAW) :
https://github.com/RomanKubiak/ctrlr/files/7819295/Select.Window.Size_1_0_0_2022-01-05_21-15.panel.zip
I'll post a sample panel with all features soon.