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: http://imgur.com/eR68cJv
(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"/>

			</Widget>

        </Widget>

    </Resource>

    <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>

            <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>

                <Widget type="Widget" skin="TabHeaderEmptySkin" position="0 0 52 33" name="Empty"/>

            </Widget>

        </Widget>

    </Resource>