Using Layers Tutorial 1.0

Home Forums General Programming Using Layers Tutorial 1.0

Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #120250
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    How to use layers in a panel.

    Layers are very useful for stacking different interfaces and controls independent of each other or for use as a backdrop/background for a layer above it.

    [1] To create a new layer:
    MENU (Panel -> Layer Editor -> Edit -> Add Layer)

    [2] Rename the layer by double clicking on the name and optionally set a background colour by right clicking on the default background ARGB 00000000 (this is black with opacity set to 0)

    [3] To hide a layer or show a layer when the program is run, I prefer to create a lua table of layer names. This table could be global or local to the change_layer() function.

    layers={"A","B","C"}
    Here I have three layers, each named unhelpfully A,B and C

    [4] Create a function:

    
    change_layer=function(selected)
    for _,v in ipairs(layers) do
    panel:getCanvas():getLayerByName(v):setVisible(false)
    end -- loop
    panel:getCanvas():getLayerByName(selected):setVisible(true)
    end --function
    

    [5] Create a callback function in for example a uiCombo:

    
    select = function(--[[ CtrlrModulator --]] mod, --[[ number --]] value, --[[ number --]] source)
    change_layer(value) 
    end
    

    Notes::

    When a selection is made, in this case using uiCombo, a function call is made to change_layer(selection) function. The selected Index of the uiCombo is passed into the function. uiCombo Indexes start at 0, but lua tables start at 1 so we have to increment by 1 in the function.

    In that function a loop runs through and sets all layers to not visible. After the loop is finished, the layer in the ‘layers’ table in a position corresponding to the selected value is set to visible.

    The top visible layer is the only layer that is editable. To edit other layers, hide layers sitting above the layer by clicking on the ‘eye’ icon or temporarily move down a layer you want to edit (meaning it is at the top!) edit -> move down (or move up).

    You can create uiSliders and other components in any layer and move them to another layer by right clicking on the modulator: send to layer

    See attached example panel.

    • This topic was modified 1 month, 3 weeks ago by dnaldoog. Reason: more editing
    Attachments:
    You must be logged in to view attached files.
    #120262
    Tedjuh
    Participant
    • Topics: 8
    • Replies: 95
    • Total: 103
    • ★★

    Nice work, Dnaldoog. Easy to follow and transparent explanation.

    — Rant mode on —

    I don’t know who maintains the Ctrlr site or who is a moderator at this forum. But isn’t it a good idea to make a category for manuals? Because those “manuals” are a very valuable source on how to get things done in Ctrlr. I know a lot of answers can be found on the forum and inside panels but it doesn’t make searching for an answer to a particular problem that much easier.

    For example: If I had known earlier on that it’s good practice to do:
    modulatorNamedSomething = panel:getModulatorByName(“modulatorName”)
    in a init file, and then later call it with
    modulatorNamedSomething:getProperty(“property”)
    it would have saved me an amount of time going over all my Lua files again.

    Hell, I wish I knew how LookAndFeel works because the Demo file doesn’t work for me. How to start with a
    Custom Component? How do you add children to a parent component? How to make a librarian? So many questions but not easy to find an answer for it.

    I would even like to contribute as I did with the manual on how to compile Ctrlr. Goodweather made a manual once but it’s somewhere at page 65. Dnaldoog knows his stuff and writes easy to understand manuals as well like above. Let’s make life easier. Let’s see what open-source is really about.

    — Rant Mode Off —

    #120269
    spiffo
    Participant
    • Topics: 12
    • Replies: 38
    • Total: 50

    Mmmmmm, that’s interesting I was solving this particular problem by using uiGroup Modulators on top of each other and then just setting them to visible / invisible like this:

    panel:getModulatorByName(“plate_reverb_group”):getComponent():setVisible(false)
    panel:getModulatorByName(“chamber_reverb_group”):getComponent():setVisible(true)
    panel:getModulatorByName(“infinite_reverb_group”):getComponent():setVisible(false)

    So what is the killer advantage of using Layers then?
    I mean what am I missing out on?

    #120271
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    Hi Spiffo,

    Probably another way of doing it, but then I am not familiar with using uiGroup and Goodweather, who has never used layers but is a veteran, didn’t know how to use layers, so I guess it shows the depth of Ctrlr (and JUCE) – several ways to achieve a similar result!

    My latest panel for the Zoom RFX-2000 uses 15 layers!

    Also, I often have hidden modulators in a hidden layer. That’s pretty useful.

    Regards,

    #120280
    dasfaker
    Keymaster
    • Topics: 79
    • Replies: 792
    • Total: 871
    • ★★★

    I don’t know who maintains the Ctrlr site or who is a moderator at this forum. But isn’t it a good idea to make a category for manuals?

    If someone compile those manuals and give me the links, I’ll upload them in Downloads/Manuals

    #120281
    Tedjuh
    Participant
    • Topics: 8
    • Replies: 95
    • Total: 103
    • ★★

    Will do Dasfaker. Thank you. I’ll start a new topic soon with some links to manuals/ tutorials instead of hijacking this thread. Excusez-moi for that Dnaldoog.

    Back on topic. I prefer layers over tabs. I don’t like the “folder structure” of tabs but that’s more of an aesthetic thing. I think Layers are easier to maintain, as in how to set them up in Ctrlr. The only thing that is kind of a shame is that layers are the “full panel” that is layered. But I think Spiffo has shown that a uiGroup can be handled as a “partial panel layer”. I knew I could set modulators to visible or invisible but never thought about doing it with a uiGroup. Nice!!

    #120362
    spiffo
    Participant
    • Topics: 12
    • Replies: 38
    • Total: 50

    Mmmmm, I spoke too soon.

    Placing one uiGroup on top of another one automatically makes the one on top a member of the lower group. So that means that setting the lower uiGroup invisible automatically makes all the other uiGroups on top of it invisible as well. If you set both uiGroups visible then you end up with a jumble of modulators from both groups all visible at the same time, which is not what I was after at all!

    Removing the ‘Component Generic – Group’ setting or unticking the ‘Is component a member of a group’ doesn’t seem to make any difference. If you have one uiGroup on top of another one then it belongs to the lower group and that’s that!

    I’m going to take a break and see if any divine inspiration strikes me when I’m doing something else 🙂

    #120363
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    I probably tried all that at some point and found it very frustrating – Stuff getting jumbled around lost – it is much harder than layers – once you get used to using layers, you will never look back! 👀

    #120368
    spiffo
    Participant
    • Topics: 12
    • Replies: 38
    • Total: 50

    OK, after more testing, please find attached 2 Test Panels, one with uiGroups on top of one another and another with uiTabs

    It is definitely possible to layer (for want of a better word) Tabs and Groups on top of one another and then make selective ones Visible / Invisible.

    I was struggling with my PCM80 Panel but doing things in the following order seems to work:

    1 Delete any text from the ‘Component Generic – Group’ entry
    2 Un-Tick the ‘is component a member of a group’, the uiGroup will leap to the 0,0 position on the Panel
    3 Drag the uiGroup back down to it’s original position
    4 Check that in the Component Generic section that there is nothing in the ‘Group’ entry and ‘is component a member of a group’ is stil un-ticked

    At the moment that is working, I can put 4 uiGroups in the same physical place on the Panel and make only one visible at any one time.

    Attachments:
    You must be logged in to view attached files.
    #120371
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    Thanks for that Spiffo!

    Something weird going on with that Tabs-Experiment panel though.

    When you first open it, there’s a tab group inside another one, but when you click on the comboBox it disappears forever!

    #120372
    spiffo
    Participant
    • Topics: 12
    • Replies: 38
    • Total: 50

    Strange, I just opened it there and it works fine for me!

    I’ve noticed that with the uiGroups you have to be careful not to accidently move one that’s on top of another because if you do it gets automatically assigned to the lower group again and the whole thing stops working again 🙁

    Basically you’re right, probably better off with layers, with that in mind, some questions:

    1 When in Layer Editor the Layer listed at the bottom is the only one you can Edit, is that the only consequence of the list order?
    2 Does a Layer always cover the entire area of the Panel, with you’re example they seem to?
    3 If I used layers then personally I would want certain areas of the Panel to remain unaffected whilst other localised areas changed layers depending on something else, is that possible?

    • This reply was modified 1 month, 1 week ago by spiffo.
    #120374
    spiffo
    Participant
    • Topics: 12
    • Replies: 38
    • Total: 50

    OK I’ll answer some of this myself, please find attached a Layers Experiment.

    The Order of the Layers is important even when not in Edit Mode, as it affects what is Visible and what is NOT Visible.

    As far as I can work out, Layers at the bottom of the Layer Editor window are in the Foreground and Layers at the top of the list are in the Background, so if you have Modulators in the same physical X, Y space then you need to make sure that any modulator which needs to be visible on top of another is lower down in the list, closer to the Foreground if you will, or it could get hidden behind!

    For instance with this panel attached if you move Layers 3 or 4 up higher in the list than Layers 1 and 2 then they end up getting hidden behind the tabs (which are on Layers 1 and 2).

    Attachments:
    You must be logged in to view attached files.
    #120376
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    Hi Spiffo,

    That’s right – a layer covers the whole panel, but if a component is not covered by another object in a layer above it, it can be accessed, so with a bit of design, so it’s actually a very useful feature.

    Also, in those if else statements, that last else is not necessary.

    function switch_tab_contents()

    mod1 = panel:getModulatorByName(“modulator-2”):getModulatorValue()

    if mod1 == 0 then

    panel:getCanvas():getLayerByName(“Layer3”):setVisible(true)
    panel:getCanvas():getLayerByName(“Layer4”):setVisible(false)

    elseif mod1 == 1 then

    panel:getCanvas():getLayerByName(“Layer3”):setVisible(false)
    panel:getCanvas():getLayerByName(“Layer4”):setVisible(true)

    else end
    end — function

    • This reply was modified 1 month, 1 week ago by dnaldoog.
    • This reply was modified 1 month, 1 week ago by dnaldoog.
    #120389
    spiffo
    Participant
    • Topics: 12
    • Replies: 38
    • Total: 50

    OK, thanks dnaldoog, I think I have my head around it now.

    I’m off to give it a go on the PCM80 Panel I have on the go at the moment.

    • This reply was modified 1 month, 1 week ago by spiffo.
    #120391
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    Great Spiffo!

    See this panel for an example of layers ctrlr.org/zoom-rfx-2000-editor/

    If you click on the EXTRA button each selection from the combo is a separate layer with the top section always visible in a top layer.

    Regards,

    #120407
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    Hey Spiffo,

    here’s another simple panel that uses layers. I posted it here
    https://ctrlr.org/forums/topic/did-i-mess-up-my-panel-size/

    but will attach it here again.

    Attachments:
    You must be logged in to view attached files.
    #120448
    goodweather
    Participant
    • Topics: 45
    • Replies: 549
    • Total: 594
    • ★★★

    Excellent thread and discussion.
    Thx a lot dnaldoog!!!
    If OK for you, I add this info in my ever expending and never ending Step by Step guide (I continued filling it and revising it even if only published the 1.x version)

    #120452
    dnaldoog
    Participant
    • Topics: 4
    • Replies: 477
    • Total: 481
    • ★★

    Hi Goodweather,

    By all means – that would be fantastic, otherwise the post will eventually get buried with all the other posts as time goes on! I plan to do a few of these eventually, especially for subjects that keep popping up on the forums.

    Thank you!

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.
There is currently 0 users and 31 guests online
No users are currently active
Forum Statistics
Threads: 2,452, Posts: 17,259, Members: 47,979
Most users ever online was 12 on January 22, 2019 3:47 pm
Do NOT follow this link or you will be banned from the site!