Change uiTabsTabContentBackgroundColour from lua

[bda65hp]

hi all,

I can't find how to change the background color of the first tab when clicking on a button. This button actually change the MIDI channel:

CircuitSynthSelect = function(--[[CtrlrModulator --]] mod, --[[value --]] value)
	if value==0 then
		panel:setPropertyString("panelMidiOutputChannelDevice","1")
	end
	if value==1 then
		panel:setPropertyString("panelMidiOutputChannelDevice","2")
	end
end

I want to change the uiTabsTabContentBackgroundColour of my Synths uiTabstabName (index 0).
Tried panel:getComponent("Synths"):setProperty("uiTabsTabContentBackgroundColour", "ff80ff80", 0) but Ctrlr crash without error.

<modulator modulatorCustomIndex="0" modulatorCustomIndexGroup="0" modulatorIsStatic="1"
           name="SynthControl" modulatorVstExported="0" modulatorValue="0">
  <component componentLabelPosition="top" componentLabelJustification="centred"
             componentLabelHeight="14" componentLabelWidth="0" componentLabelVisible="0"
             componentLabelAlwaysOnTop="1" componentSentBack="0" componentLabelColour="0xffeeeeee"
             componentLabelFont="&lt;Sans-Serif&gt;;12;0;0;0;0;1;3" componentVisibleName="Synth Control"
             componentMouseCursor="2" componentGroupName="" componentGroupped="0"
             componentSnapSize="0" componentIsLocked="0" componentDisabled="0"
             componentRadioGroupId="0" componentRadioGroupNotifyMidi="1" componentVisibility="1"
             componentEffect="0" componentEffectRadius="1" componentEffectColour="0xff000000"
             componentEffectOffsetX="0" componentEffectOffsetY="0" componentExcludedFromLabelDisplay="0"
             componentValueDecimalPlaces="0" componentLuaMouseMoved="-- None"
             componentLuaMouseDown="-- None" componentLuaMouseDrag="-- None"
             componentLuaMouseDoubleClick="-- None" uiTabsCurrentTabChanged=""
             uiTabsDepth="24" uiTabsOutlineThickness="2" uiTabsFrontTabOutline="1"
             uiTabsTabOutline="1" uiTabsIndentThickness="0" uiTabsOrientation="2"
             uiTabsFrontTabFont="&lt;Sans-Serif&gt;;16;0;0;0;0;1;3" uiTabsTabFont="&lt;Sans-Serif&gt;;16;0;0;0;0;1;3"
             uiTabsOutlineGlobalColour="0x00000000" uiTabsOutlineGlobalBackgroundColour="0x67000000"
             uiTabsOutlineTabColour="0xff303030" uiTabsTextTabColour="ffffffff"
             uiTabsFrontTabOutlineColour="ff000000" uiTabsFrontTabTextColour="ffffffff"
             uiTabsAddTab="0" uiTabsRemoveTab="0" componentRectangle="-3 0 656 417"
             componentBubbleRoundAngle="10" componentBubbleBackgroundColour1="0x9cffffff"
             componentBubbleBackgroundColour2="0xbab9b9b9" componentBubbleBackgroundGradientType="1"
             componentBubbleValueColour="0xff000000" componentBubbleValueFont="&lt;Sans-Serif&gt;;14;0;0;0;0;1;3"
             componentBubbleValueJustification="centred" componentBubbleNameColour="0xff000000"
             componentBubbleNameFont="&lt;Sans-Serif&gt;;14;0;0;0;0;1;3" componentBubbleNameJustification="centred"
             uiTabsCurrentTab="0" componentLayerUid="ca87155b060000000000000000000000"
             uiType="uiTabs">
    <uiTabsTab uiTabsTabIndex="0" uiTabsTabName="Synths" uiTabsTabContentBackgroundColour="ff80ff80"
               uiTabsTabBackgroundColour="ffb2b2b2" uiTabsTabBackgroundImage="-- None"
               uiTabsTabBackgroundImageLayout="36" uiTabsTabBackgroundImageAlpha="255"/>
    <uiTabsTab uiTabsTabIndex="1" uiTabsTabName="Mod Matrix" uiTabsTabContentBackgroundColour="22b2b2b2"
               uiTabsTabBackgroundColour="ffb2b2b2" uiTabsTabBackgroundImage="-- None"
               uiTabsTabBackgroundImageLayout="36" uiTabsTabBackgroundImageAlpha="255"/>
    <uiTabsTab uiTabsTabIndex="2" uiTabsTabName="Macro Knob" uiTabsTabContentBackgroundColour="22b2b2b2"
               uiTabsTabBackgroundColour="ffb2b2b2" uiTabsTabBackgroundImage="-- None"
               uiTabsTabBackgroundImageLayout="36" uiTabsTabBackgroundImageAlpha="255"/>
    <uiTabsTab uiTabsTabIndex="3" uiTabsTabName="Sessions" uiTabsTabContentBackgroundColour="ffb2b2b2"
               uiTabsTabBackgroundColour="ffb2b2b2" uiTabsTabBackgroundImage="-- None"
               uiTabsTabBackgroundImageLayout="36" uiTabsTabBackgroundImageAlpha="255"/>
  </component>
</modulator>```

[damiensellier]

@bda65hp
setValue works with a booléan (true, false) for the last variable like this :

panel:getComponent("FxTabs"):setProperty("uiTabsCurrentTab", 1, false) -- Switch To Tab MainFx from LUA

So, "Synths" being the name of your uiTabs component, try instead the folllowing:
panel:getComponent("Synths"):setProperty("uiTabsTabContentBackgroundColour", "ff80ff80", false)

Sometimes UI components also needs to be "repainted" to show modification done from LUA.

Try the above fix and and let us know if it still crashes or works.

[bda65hp]

Same crash.
But that may come with ArchLinux. Arch come with binutils 2.36 with many change to libbfd. As thus i need to run Ctrlr in a chroot with an older arch version.
I'll try tomorrow on my raspberry pi with raspbian.
Thanks for your help.

[dobo365]

Hi,
I tried doing this (changing the background color or image - I don't remember what I tried - of a specific tab) some time ago but I also wasn't successful. I think that this is a bug in 5.3.201. However it didn't crash.

One thing very important to understand is
that the uiTabs is a value tree component. So, the property uiTabsTabBackgroundColor is not at the top level of the tree (the Tab modulator ) but at the level of each child.
While this will work (I take what Damien used as example):
panel:getComponent("FxTabs"):setProperty("uiTabsCurrentTab", 1, false) -- Switch To Tab MainFx from LUA
because you indicate the current tab to your uiTabs "FxTabs" component
the following will not work
panel:getComponent("Synths"):setProperty("uiTabsTabContentBackgroundColour", "ff80ff80", false)
because "Synths" is not known and is a child of "FxTabs".

You need to go the individual tab level and there change the property of the child tab.
To reach a child you use (1 is your tab index)
panel:getModulatorByName("FxTabs"):getComponent():getChildComponent(1)
but this is there that the issue is: the getProperty() or setProperty() is not available...
You can see that by doing
what (panel:getModulatorByName("FxTabs"):getComponent():getChildComponent(1))
getProperty() or setProperty() are not listed...

If someone has an idea, it would be nice but I guess this is a bug or an omission in 5.3.201...

[Ted-juh]

Have asked before about getChildComponent, addChildComponent, etc, etc before, to no avail.

I've done some research on "valueTree". It seems you can "get" those properties with getObjectTree().

panel:getModulatorByName("some name"):getObjectTree():getNumCildren() -- returns the number of children the modulator has.

panel:getModulatorByName("NameOfTabsModulator"):getComponent():getObjectTree():getPropertyName(51) -- in my case this is uiTabsTabContentBackground.

But I have to do some more fiddling to see if it's possible to change the property in the valueTree (and not in the properties itself). There is a setProperty in the objectTree though.

[Ted-juh]

Raised as a topic in 2020 by Goodweather (Reaching tabs properties.), I think we can close that topic as solved. With some help from Dnaldoog, I figured out how to change the color properties of individual tabs. A panel is provided with a very basic example.

tabcolour.zip

In other words, Goodweather, you were really really close!!

edit New panel posted, last one crashed at startup. Thanks, Dnaldoog for the headsup.

[damiensellier]

Oh okay you wanted to change the whole content background color. I thought you where asking for the little tab on top.

[Ted-juh]

uiTabsTabContentBackgroundColour = To specify the color of the "content" area where you put the modulators.
uiTabsTabsTabBackgroundColour = To specify the color of the little tab on top.

Either way, the procedure remains the same.

[damiensellier]

@DnaldeT yeah for sure, I suggested to replace the tabs by buttons for more control on the design, but in this case, it was totally out of topic :)

[bda65hp]

Thanks you so much :). That work perfectly.