CEGUI (Crazy Eddie's GUI) Forums

Posted: **Mon Dec 31, 2012 15:27**

Hello,

I am wondering if there is a feature to allow easy colour replacement in themes.
I added support for colour properties, so that the entire look and feel of the Glossy Serpent theme can be modified via code, or via several search and replace operations in the looknfeel file.

E.g. A default, red colouring:

Code: Select all

        <PropertyDefinition name="GS_DarkerThemeColour" initialValue="FF940000" redrawOnWrite="true" />
        <PropertyDefinition name="GS_LighterThemeColour" initialValue="FFFF0101" redrawOnWrite="true" />
        <PropertyDefinition name="GS_MainThemeColour" initialValue="FFDC5F5F" redrawOnWrite="true" />
        <PropertyDefinition name="GS_ShineColour" initialValue="B0FFFFFF" redrawOnWrite="true" />

https://docs.google.com/open?id=0Byx-8I_NSC6-aDlENmhkcTdqdnc

An amber/brown colouring:

Code: Select all

        <PropertyDefinition name="GS_DarkerThemeColour" initialValue="FF7F4800" redrawOnWrite="true" />
        <PropertyDefinition name="GS_LighterThemeColour" initialValue="FFFF9A1A" redrawOnWrite="true" />
        <PropertyDefinition name="GS_MainThemeColour" initialValue="FFCD6417" redrawOnWrite="true" />
        <PropertyDefinition name="GS_ShineColour" initialValue="B0FFFFFF" redrawOnWrite="true" />

https://docs.google.com/open?id=0Byx-8I_NSC6-b01ERTVYRml0ZnM

A jade/green colouring.

Code: Select all

        <PropertyDefinition name="GS_DarkerThemeColour" initialValue="FF009400" redrawOnWrite="true" />
        <PropertyDefinition name="GS_LighterThemeColour" initialValue="FF01FF01" redrawOnWrite="true" />
        <PropertyDefinition name="GS_MainThemeColour" initialValue="FF57BD57" redrawOnWrite="true" />
        <PropertyDefinition name="GS_ShineColour" initialValue="B0FFFFFF" redrawOnWrite="true" />

https://docs.google.com/open?id=0Byx-8I_NSC6-cWttamd0Wmc3WjQ

The inconvenience currently is that I need to apply the properties to all widgets and to replace all of them takes some time. Maintaining several colours turns out not to be fun :-)

Is there an easier way to do this? (One that I have not yet discovered? Something like propertylinkdefs, but for global colours, not tied to widgets.)
Thank you,
dezGusty

Posted: **Wed Jan 02, 2013 13:02**

This has been requested before (by me if I am not mistaken :-D

). A way to do this is yet to be devised.

If you have any specific ideas please share them. At this point it is fairly unlikely to make it into CEGUI 1.0 though so it will be CEGUI 2.0 targeted.

Posted: **Wed Jan 02, 2013 22:03**

Hi Kulik, thanks for the reply.
I was only curious to see if something was already implemented and not documented

Then, for the time being, search and replace it is.

Posted: **Thu Jan 03, 2013 09:42**

I had Kulik's request on a TODO list of mods for the falagard stuff, from which I implemented everything except this feature

If we can get a mantis ticket for this, I think it can happen later on this year

Cheers.

Posted: **Sun Jan 06, 2013 18:53**

Hi, is this a possible implementation for the global colour definitions?
(It would imply modifying the XML schema and the handling of colours. I'm not sure what that means from an effort standpoint).

Basically, the only difficulty will consist of accessing the name of the ColourDefinition from the referencing properties.
I would envision using a prefix similar to "Link:" (the positive side is that the code could quickly and cheaply 0distinguish that this is a link and not a colour definition, as the first char in the string if outside the 0-9, A-F set. Instead of "Link:" other strings could be used, but I don't know how much of a performance impact it will have. (E.g. "ColourDef:")

Code: Select all

<Falagard version="7">
    <!-- A list of colour definitions. You can use these names directly -->
    <ColourDefinition name="GlossySerpent/MainThemeColour" value="FFFF0101" />
    <ColourDefinition name="GlossySerpent/SecondaryThemeColour" value="FFFFFFFF" />
    
    <!--A sample widget-->
    <WidgetLook name="GlossySerpent/SampleWidget">
        <!-- These properties can be overridden by the user -->
        <PropertyDefinition name="BackgroundColour" initialValue="Link:GlossySerpent/SecondaryThemeColour" redrawOnWrite="true" />
        <PropertyDefinition name="ForegroundColour" initialValue="Link:GlossySerpent/MainThemeColour" redrawOnWrite="true" />
        <PropertyDefinition name="GlyphImage" initialValue="" redrawOnWrite="true" />

        <ImagerySection name="caption">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" >
                        <OperatorDim op="Subtract">
                            <UnifiedDim scale="1" offset="-10" type="Width" />
                            <UnifiedDim scale="1" type="Height" />
                        </OperatorDim>
                    </Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <ColourProperty name="ForegroundColour" />
                <VertFormat type="CentreAligned" />
            </TextComponent>
        </ImagerySection>

        <ImagerySection name="main">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge"><ImageDim name="GlossySerpent/TitlebarBorder_L" dimension="Width" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><ImageDim name="GlossySerpent/EmptyGlyph24" dimension="Width" /></Dim>
                    <Dim type="Height"><ImageDim name="GlossySerpent/EmptyGlyph24" dimension="Height" /></Dim>
                </Area>
                <ImageProperty name="GlyphImage" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        
        <StateImagery name="Active">
            <Layer>
                <Section section="main">
                    <ColourProperty name="BackgroundColour" />
                </Section>
                <Section section="caption" />
            </Layer>
        </StateImagery>
        
    </WidgetLook>
</Falagard>

Posted: **Mon Jan 07, 2013 15:54**

Thanks for the suggested implementation - something like this seems it should be reasonably simple to implement. Could you add a mantis ticket with a link back here so this does not get lost.

Cheers.

Posted: **Thu Jan 10, 2013 19:23**

Hi,
I created a mantis item: http://www.cegui.org.uk/mantis/view.php?id=949
Thanks and have a nice day!

CEGUI (Crazy Eddie's GUI) Forums

Global colour definitions?

Global colour definitions?

Re: Global colour definitions?

Re: Global colour definitions?

Re: Global colour definitions?

Re: Global colour definitions?

Re: Global colour definitions?

Re: Global colour definitions?