Turning a GUI component's class on and off

[josh]

Hi,
I want to do something similar to what was suggested at https://forum.foleysfinest.com/t/making-components-leave-the-layout-when-invisible/132

That is, I have some classes defined in magic.xml. I want to be able to turn a component’s class on and off at run-time, in response to someone clicking a button on the interface.

What would be the line(s) of code in the PluginProcessor.cpp to add or remove a named GUI class from a GUI element?

Thanks!

[daniel]

I tried this quickly.
The flex grow set to 0 does not always work, because of the order the class is applied. If the node already sets a grow, the class has no chance to change that.
However, I used max-height sucessfully.

• First I added a ToggleButton and added a new value, here “UI:hideKeyboard”
• Then I created a class called “hidden”. Connect the class: active property to the “UI:hideKeyboard”.
• For good measure I set max-width, max-height and flex-grow to 0.
• applied the class to the component I wanted to hide

Unfortunately the change to the class didn’t work immediately, so I had to force a rebuild of the GUI in the menu: File → Refresh.

Now the checkbox can switch the keyboard on and off

Let me know if that works for you

[josh]

That worked! I hadn’t noticed the active property of a class before.
I’ve now extended this so that there are two Views, with the second View hidden (and not taking up blank space on the interface). If the user clicks a button, the first View gets hidden and the second View is revealed.
This is a precursor to getting the JUCE tutorial JUCE: Tutorial: Unlock your plugins through online registration working with PGM. Hopefully, the next step, getting JUCE’s OnlineUnlockForm as a custom GUI component, won’t be too difficult. If you’ve got any ideas there, though, that would be great.
Thanks again.

[pRicky187]

Hi, I’m not seeing ‘value’ in the ToggleButton. Would that be the same as 'Property? I have tried adding to the ‘property’ ‘UI::hideKeyboard’ but that doesn’t work either.

Thanks

[jos]

This is not working for me either. Does it depend on a recent change?
I’m using the latest develop branch as of July 7, after main was merged into it that day.
Below is my failing test layout. The toggle button has no effect. What am I missing?

<?xml version="1.0" encoding="UTF-8"?>

<magic>
  <Styles>
    <Style name="default">
      <Nodes/>
      <Classes>
        <hidden flex-grow="0" active="HideEditor">
          <media max-height="0" max-width="0"/>
        </hidden>
      </Classes>
      <Palettes>
        <default/>
      </Palettes>
    </Style>
  </Styles>
  <View>
    <View flex-direction="column" caption="Hide Test">
      <View>
        <View/>
        <ToggleButton text="Hide Editor View" property="Effects"/>
        <View/>
      </View>
      <View>
        <View caption="Editor View" class="hidden"/>
        <View caption="Performance View"/>
      </View>
    </View>
  </View>
</magic>

[daniel]

There are two errors in that XML, which might be a typo:

1. first the property in the ToggleButton and the active property in the class “hidden” should have the same name
2. the media tag in the class “hidden” constrains this class to certain view sizes.
   By setting max-width and max-height to 0 this class will never have an effect.
   It might be the editors fault to set it to zero instead of leaving it empty.

I am creating an UnitTest to validate

[jos]

Thanks! I definitely misunderstood. Now my simple test works.