Custom Image inside TabHeader (or Button)

Crystal Hammer

13-07-2013 19:26:55

Hi. I want to make a TabControl which has tabs (TabHeaders) containing an image.
I managed to add it in skin so far, but all tabs have the same image. I can't grasp how to change them.
Here is an image of this:
(the orange cones).
Is there a way to do it, just by adding more skins, or is it possible to get from code into sub-widgets and change image coords ?
Or is the only way to duplicate TabControl.cpp and add new code, which will create images for each TabHeader (and set coords based on some custom properties in layout) ?

For reference what I added in core_blackbluetemplates.xml:

<Resource type="ResourceLayout" name="TabHeaderButtonIcon" version="3.2.0">
<Widget type="Widget" skin="TabHeaderButtonSkin2" position="20 25 52 33" name="Root">
<Property key="FontName" value="Default"/>
<Property key="TextAlign" value="Center"/>
<UserString key="LE_TargetWidgetType" value="Button"/>
<Property key="FontName" value="font.19"/>
<Widget type="ImageBox" skin="ImageBox" position="2 2 28 28" name="TabImage">
<Property key="ImageCoord" value="0 128 128 128"/>
<Property key="Alpha" value="1.0"/>
<Property key="ImageTexture" value="gui_icons.png"/>
<Property key="NeedMouse" value="false"/>
<Resource type="ResourceLayout" name="TabControlIcon" version="3.2.0">
<Widget type="Widget" skin="PanelEmpty" position="5 5 89 80" name="Root">
<UserString key="LE_TargetWidgetType" value="TabControl"/>
<UserString key="ButtonSkin" value="TabHeaderButtonIcon"/>
<Widget type="Widget" skin="TabPanelSkin" position="0 21 89 49" align="Stretch">
<Widget type="Widget" skin="PanelEmpty" position="2 3 83 42" align="Stretch" name="TabItem"/>
<Widget type="Widget" skin="PanelEmpty" position="7 0 78 33" align="HStretch Top" name="HeaderPlace">
<Widget type="Widget" skin="TabHeaderEmptySkin" position="52 0 26 33" name="Controls">
<Widget type="Button" skin="ButtonRightSkin" position="14 4 12 24" name="Right"/>
<Widget type="Button" skin="ButtonLeftSkin" position="1 4 12 24" name="Left"/>
<Widget type="Widget" skin="TabHeaderEmptySkin" position="0 0 52 33" name="Empty"/>