Page 1 of 1

Tile your window frames

Posted: Thu Apr 24, 2008 15:36
by fezztah
Windows are defined in the look and feel consisting of 4 corner images (TL,TR,BR,BL), 4 edge images (T,R,B,L) and a background image (Bg).

As shown here about half way down:
http://www.cegui.org.uk/wiki/index.php/ ... _-_Part_II

This is all specified in a frame component like this:

Code: Select all

<FrameComponent>
       <Area>
           <Dim type="LeftEdge">
               <AbsoluteDim value="0" />
           </Dim>
           <Dim type="TopEdge">
               <AbsoluteDim value="0" />
           </Dim>
           <Dim type="RightEdge">
               <UnifiedDim scale="1" offset="0" type="RightEdge" />
           </Dim>
           <Dim type="BottomEdge">
               <UnifiedDim scale="1" offset="0" type="BottomEdge" />
           </Dim>
       </Area>
       <Image type="TopLeftCorner"     imageset="MyImages" image="EditboxTL" />
       <Image type="TopEdge"           imageset="MyImages" image="EditboxT" />
       <Image type="TopRightCorner"    imageset="MyImages" image="EditboxTR" />
       <Image type="RightEdge"         imageset="MyImages" image="EditboxR" />
       <Image type="BottomRightCorner" imageset="MyImages" image="EditboxBR" />
       <Image type="BottomEdge"        imageset="MyImages" image="EditboxB" />
       <Image type="BottomLeftCorner"  imageset="MyImages" image="EditboxBL" />
       <Image type="LeftEdge"          imageset="MyImages" image="EditboxL" />
       <Image type="Background"        imageset="MyImages" image="EditboxBg" />
       <VertFormat type="Stretched" />
       <HorzFormat type="Stretched" />
   </FrameComponent>


By default the images referenced in T,L,B,R are stretched. So normally you would want a single colour pixel or slice that gives you a simple streched edge. If you want something a little more fancy it would be nice to be able to tile the T,L,B,R edges instead of stretching. That way you could use larger image elements and get a nice patterned edge.

So the question is how do you do that?

I was thinking there would be something like this available:

Code: Select all

<Image type="TopEdge"           imageset="MyImages" image="EditboxT" vertFormat="Tiled" horzFormat="Tiled" />


but didn't find any mention in the wiki or from scanning the source.

So now I'm thinking only the background of a window supports tiling and stretching. So if that's true then maybe I need to do it via the looknfeel.

1. create 4 new entries in the imageset that exactly match the old TLBR dimensions, but are on a totally transparent part of the texture. This keeps your frame corners lined up nicely.

Code: Select all

   <Image Name="WindowLeftEdge" XPos="322" YPos="18" Width="18" Height="4" />
   <Image Name="WindowRightEdge" XPos="341" YPos="18" Width="19" Height="4" />
   <Image Name="WindowTopEdge" XPos="340" YPos="0" Width="4" Height="18" />
   <Image Name="WindowBottomEdge" XPos="340" YPos="19" Width="4" Height="21" />
   <Image Name="EmptyTop" XPos="330" YPos="42" Width="4" Height="18" />
   <Image Name="EmptyBottom" XPos="330" YPos="42" Width="4" Height="21" />
   <Image Name="EmptyLeft" XPos="330" YPos="42" Width="18" Height="4" />
   <Image Name="EmptyRight" XPos="330" YPos="42" Width="19" Height="4" />


2. set the T,L,B,R elements of the frame to use this image. The result being the T,L,B,R elements disappear.

Code: Select all

        <ImagerySection name="notitle_frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
            <Image type="TopEdge" imageset="TaharezLook" image="EmptyTop" />
                <Image type="TopLeftCorner" imageset="TaharezLook" image="WindowTopLeft" />
                <Image type="TopRightCorner" imageset="TaharezLook" image="WindowTopRight" />
                <Image type="BottomLeftCorner" imageset="TaharezLook" image="WindowBottomLeft" />
                <Image type="BottomRightCorner" imageset="TaharezLook" image="WindowBottomRight" />
                <Image type="LeftEdge" imageset="TaharezLook" image="EmptyLeft" />
                <Image type="RightEdge" imageset="TaharezLook" image="EmptyRight" />
                <Image type="BottomEdge" imageset="TaharezLook" image="EmptyBottom" />
                <Image type="Background" imageset="TaharezLook" image="ClientBrush" />
                <VertFormat type="Tiled" />
                <HorzFormat type="Tiled" />
            </FrameComponent>
        </ImagerySection>


3. add 4 new layers to my frames StateImagery. So I still the usual frame section first, but I'm adding the T,L,B,R images back in myself.

Code: Select all

        <StateImagery name="ActiveNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame" />
            </Layer>
            <Layer>
                <Section section="top_middle" />
            </Layer>
            <Layer>
                <Section section="bottom_middle" />
            </Layer>
            <Layer>
                <Section section="left_middle" />
            </Layer>
            <Layer>
                <Section section="right_middle" />
            </Layer>
        </StateImagery>


4. specify 4 new imagery sections that match the T,L,B,R images and tile as I want. This is just the first.

Code: Select all

        <ImagerySection name="top_middle">
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" >
                  <AbsoluteDim value="0" >
                     <DimOperator op="Add">
                        <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" />
                     </DimOperator>
                  </AbsoluteDim >
               </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
               <Dim type="Width" >
                  <UnifiedDim scale="1" type="Width" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowTopEdge" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Tiled" />
            </ImageryComponent>
        </ImagerySection>


I hacked a quick test looknfeel together and it seems to work, but I just want to check this is the correct way to go about it. I'm hoping I've just missed the parameters needed to specify the tiling directly. If nothing else I've learned a lot about looknfeels :)

Posted: Thu Apr 24, 2008 18:55
by CrazyEddie
Hi,

Yeah you are correct that there is currently no way to specify any formatting for the edges defined in a FrameComponent.

Generally the solution is to define your own parts as ImageryComponents as you have done. I will, however, make the following observations - feel free to ignore :)

- Keeping the FrameComponent for the background and corner images may be a waste, it would probably be better to just use ImageryComponents to define those parts also.

- Unless you have some other compelling reason to have things arranged as they are, there is no need to have a separate ImagerySection for each ImageryComponent; they can all be put in the same ImagerySection (including the FrameComponent too, if you like).

- There is no need to specify the multiple Layer definitions; since they all have the same priority (default =0), the effect is the same as having all the Sections put in a single Layer.

I find the idea of specifying image formatting as attributes interesting. There would be some potential consistency issues to work through, but it's something I'd be willing to consider adding at some later stage :)

CE.

Posted: Fri Apr 25, 2008 10:46
by fezztah
Thanks for the feedback, here's version2 of "TiledFrameWindow" taking your suggestions on board. I left the auto_titlebar and auto_closebutton in as they seem to be a requirement, but they aren't used.

Seems to work ok :) What do you think?


Code: Select all

    <!--
    ***************************************************
        TaharezLook/TiledFrameWindow
    ***************************************************
    -->
    <WidgetLook name="TaharezLook/TiledFrameWindow">
        <Property name="TitlebarEnabled" value="False" />
        <Property name="CloseButtonEnabled" value="False" />
        <Child type="TaharezLook/Titlebar" nameSuffix="__auto_titlebar__">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="Height" ><FontDim type="LineSpacing" padding="8" /></Dim>
            </Area>
        </Child>
        <Child type="TaharezLook/SystemButton" nameSuffix="__auto_closebutton__">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="Width" ><AbsoluteDim value="0.1" /></Dim>
                <Dim type="Height" ><AbsoluteDim value="0.1" /></Dim>
            </Area>
        </Child>
        <NamedArea name="ClientNoTitleWithFrame">
            <Area>
                <Dim type="LeftEdge" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim imageset="TaharezLook" image="WindowTopEdge" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="TaharezLook" image="WindowBottomEdge" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="tiled_notitle_withframe">
            <!-- TOP LEFT -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" /></Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowTopLeft" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
            <!-- TOP RIGHT -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" >
                  <UnifiedDim scale="1" type="Width" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" /></Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowTopRight" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
            <!-- BOTTOM LEFT -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
               <Dim type="TopEdge" >
                  <UnifiedDim scale="1" type="Height" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomLeft" dimension="Height" />
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                    <Dim type="Width" ><ImageDim imageset="TaharezLook" image="WindowBottomLeft" dimension="Width" /></Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowBottomLeft" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowBottomLeft" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
            <!-- BOTTOM RIGHT -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" >
                  <UnifiedDim scale="1" type="Width" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
               <Dim type="TopEdge" >
                  <UnifiedDim scale="1" type="Height" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Height" />
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                    <Dim type="Width" ><ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Width" /></Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowBottomRight" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
            <!-- TOP MIDDLE -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" >
                  <AbsoluteDim value="0" >
                     <DimOperator op="Add">
                        <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" />
                     </DimOperator>
                  </AbsoluteDim >
               </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
               <Dim type="Width" >
                  <UnifiedDim scale="1" type="Width" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowTopEdge" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Tiled" />
            </ImageryComponent>
            <!-- BOTTOM MIDDLE -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" >
                  <AbsoluteDim value="0" >
                     <DimOperator op="Add">
                        <ImageDim imageset="TaharezLook" image="WindowBottomLeft" dimension="Width" />
                     </DimOperator>
                  </AbsoluteDim >
               </Dim>
               <Dim type="TopEdge" >
                  <UnifiedDim scale="1" type="Height" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Height" />
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
               <Dim type="Width" >
                  <UnifiedDim scale="1" type="Width" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomLeft" dimension="Width" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Width" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                    <Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowBottomEdge" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Tiled" />
            </ImageryComponent>
            <!-- LEFT MIDDLE -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge"> <AbsoluteDim value="0" /></Dim>
               <Dim type="TopEdge" >
                  <AbsoluteDim value="0" >
                     <DimOperator op="Add">
                        <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" />
                     </DimOperator>
                  </AbsoluteDim >
               </Dim>
                    <Dim type="Width" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" /></Dim>
               <Dim type="Height" >
                  <UnifiedDim scale="1" type="Height" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomLeft" dimension="Height" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowLeftEdge" />
                <VertFormat type="Tiled" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
            <!-- RIGHT MIDDLE -->
            <ImageryComponent>
                <Area>
               <Dim type="LeftEdge" >
                  <UnifiedDim scale="1" type="Width">
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
               <Dim type="TopEdge" >
                  <AbsoluteDim value="0" >
                     <DimOperator op="Add">
                        <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Height" />
                     </DimOperator>
                  </AbsoluteDim >
               </Dim>
                    <Dim type="Width" ><ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" /></Dim>
               <Dim type="Height" >
                  <UnifiedDim scale="1" type="Height" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Height" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Height" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                </Area>
                <Image imageset="TaharezLook" image="WindowRightEdge" />
                <VertFormat type="Tiled" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
            <!-- CENTRE -->
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" /></Dim>
                    <Dim type="TopEdge" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
               <Dim type="Width" >
                  <UnifiedDim scale="1" type="Width" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
               <Dim type="Height" >
                  <UnifiedDim scale="1" type="Height" >
                     <DimOperator op="Subtract">
                        <ImageDim imageset="TaharezLook" image="WindowBottomRight" dimension="Height" >
                           <DimOperator op="Add">
                              <ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Height" />
                           </DimOperator>
                        </ImageDim>
                     </DimOperator>
                  </UnifiedDim >
               </Dim>
                </Area>
                <Image imageset="TaharezLook" image="ClientBrush" />
                <VertFormat type="Tiled" />
                <HorzFormat type="Tiled" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="ActiveNoTitleWithFrame">
            <Layer>
                <Section section="tiled_notitle_withframe" />
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveNoTitleWithFrame">
            <Layer>
                <Section section="tiled_notitle_withframe" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledNoTitleWithFrame">
            <Layer>
                <Section section="tiled_notitle_withframe" >
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>

Posted: Mon May 05, 2008 07:30
by CrazyEddie
Hi,

It looks good. Big, but good :)

I think the possibility of specifying alignments for images specified anywhere would greatly simplify things. This is highly likely to be added at some stage, though I am tending towards something like...

Code: Select all

<Image imageset="TaharezLook" image="WindowTopEdge" >
    <VertFormat type="Stretched" />
    </HorzFormat type="Tiled">
<Image />

Instead of attributes; mainly because it's more in line with the rest of how the system is structured (and is more easily extended further later on).

CE.