Aspect Ratio

[blablub]

Hi,

I'm new to this Unified Coordinates. I have a StaticImage. The picture displayed has originally an aspect ratio like 1:1. But If I change the unified coordinates of the container(!) of the static image, the static image gets logically resized itself - and with it the picture get's streched out of the aspect ratio, that then is display like for exampel 1:2 (if I double the width of the static image by doubling the width of the container).

How can I keep the absolute aspect ratio of an static image if it's resized?

[AlexThomas]

Hmm.. I'll see if I can work up something like this in my project and pass on the code. You're going to need to script the "Sized" event a little bit, and most likely have a container window which provides the maximum dimensions for you (and on which you are checking the sizing), and then a StaticImage child window that you can dynamically size based on the shorter edge. I thought maybe just switching around the formatting would do the trick, but after further thought I don't think it will.

Alex

[blablub]

Thanks for the answer. But I think wasn't clear enough. By "resizing" I didn't mean "live at runtime". I meant at design time in Notepad++. So the event handler isn't very useful here.

Like this: I create a textbox (StaticText) with and icon (StaticImage) on it's left. The StaticImage is a child window of the StaticText. If I resize the textbox (by changing the number in an XML editor), the imagebox gets relativly resized to - and with it the displayed picture will be strecthed.

I want my Layout to behave like this: The StaticImage aspect ratio is fixed (x and y scale together), the StaticTextbox is not fixed (x and y scale indepentently).

[AlexThomas]

I'm relatively certain that what you're asking for cannot be achieved by layout alone. You can keep the ratio static by keeping the dimensions static (eg. not using the scale variable, only using the offset) but it doesn't sound like that's what you're looking for. But if the ratio is 1:1, isn't it just a matter of setting the image's width/height to the same as the shorter of the two of the parent?

Consider a layout like the following:

Code: Select all

<Window Type="StaticText" Name="Parent" >
 <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{0,50},{0,100}}" />
 <Window Type="WindowsLook/StaticImage"  Name="Child">
  <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{0,50}}" />
  <Property Name="HorzFormatting" Value="Stretched" />
  <Property Name="VertFormatting" Value="Stretched" />
 </Window>
</Window>


So if I change the width of parent to 75, I just need to change the height of Child to 75 as well? I suppose that additional tree structure up from parent complicates these things, but this is essentially what you're trying to accomplish?

[blablub]

Parent-child structure isn't essentially, I only thought it's the easiest way of getting together what semantically belongs together. Is there a way to group elements without child-parent structure? The goal is to create several a textboxes that will later hold different numbers - and to identify them they should come with an icon attached to them.
On other resolutions or if I change the layout for testing (early development phase) the icon should scale with the button, but keep it's aspect ratio.

[AlexThomas]

I think I understand what you're trying to do.

You'll probably want to create a new IconButton (that name may be taken) widget in your looknfeel. You can then give it a property "IconSize" which you can assign to the height of the button and the width and height of the icon alike (each modified slightly as necessary). I mostly tinker when I go into looknfeels so I won't attempt an example here, but I'll give you something I think is similar that I patched together.

This is basically an ItemEntry that is preceeded by an Icon. I give both the Icon Height and Width because I want the flexibility, but if they're always the same you could just make the same property for yourself. Ignore the IconOffset Property, that's merely so I can indent in order to give myself a treeItem.

Code: Select all

  <WidgetLook name="WindowsLook/IconItemEntry">
    <PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" />
    <PropertyDefinition name="IconHeight" initialValue="25" redrawOnWrite="true" />
    <PropertyDefinition name="IconWidth" initialValue="25" redrawOnWrite="true" />
    <PropertyDefinition name="IconOffset" initialValue="2" redrawOnWrite="true" />
    <PropertyDefinition name="ItemWidth" initialValue="1" redrawOnWrite="true" /><!--Disables horizontal scrollbars-->
    <PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
    <PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:MultiListSelectionBrush" redrawOnWrite="true" />
    <PropertyDefinition name="SelectionColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
    <Property name="Selectable" value="True" />
    <NamedArea name="ContentSize">
      <Area>
        <Dim type="LeftEdge" >
          <AbsoluteDim value="0" />
        </Dim>
        <Dim type="TopEdge" >
          <AbsoluteDim value="0" />
        </Dim>
        <Dim type="Width" >
          <PropertyDim name="ItemWidth" />
          <!--<FontDim type="HorzExtent" padding="6" />-->
        </Dim>
        <Dim type="Height" >
          <PropertyDim name="IconHeight" >
           <DimOperator op="Add" >
                <AbsoluteDim value="2" />
              </DimOperator>
            </PropertyDim>
        </Dim>
      </Area>
    </NamedArea>
    <Child  type="WindowsLook/IconButton" nameSuffix="__auto_icon__">
      <Area>
        <Dim type="TopEdge">
          <AbsoluteDim value="1" />
        </Dim>
        <Dim type="LeftEdge">
          <PropertyDim name="IconOffset" />
        </Dim>
        <Dim type="Width">
          <PropertyDim name="IconWidth" />
        </Dim>
        <Dim type="Height">
          <PropertyDim name="IconHeight" />
        </Dim>
      </Area>
      <VertFormat type="Stretched" />
      <HorzFormat type="Stretched" />
      <Property name="IconImage" value="" />
    </Child>
    <ImagerySection name="label">
      <TextComponent>
        <Area>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="LeftEdge">
            <PropertyDim name="IconWidth" >
              <DimOperator op="Add" >
                <PropertyDim name="IconOffset" >
                  <DimOperator op="Add" >
                    <AbsoluteDim value="2" />
                  </DimOperator>
                </PropertyDim>
              </DimOperator>
            </PropertyDim>
          </Dim>
          <Dim type="RightEdge">
            <UnifiedDim scale="1" offset="-3" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
            <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
        </Area>
        <VertFormat type="CentreAligned" />
      </TextComponent>
    </ImagerySection>
    <ImagerySection name="selection">
      <ImageryComponent>
        <Area>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge">
            <UnifiedDim scale="1" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
            <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
        </Area>
        <ImageProperty name="SelectionBrush" />
        <ColourProperty name="SelectionColour" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>
    <StateImagery name="Enabled">
      <Layer>
        <Section section="label">
          <ColourProperty name="TextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Disabled">
      <Layer>
        <Section section="label">
          <ColourProperty name="TextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="SelectedEnabled">
      <Layer>
        <Section section="selection" />
        <Section section="label">
          <ColourProperty name="SelectedTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="SelectedDisabled">
      <Layer>     
        <Section section="selection" />
        <Section section="label">
          <ColourProperty name="SelectedTextColour" />
        </Section>
      </Layer>
    </StateImagery>
  </WidgetLook>

[blablub]

Ah, creating a new contol. That sounds indeed clever.
Never did that before, so thanks for the code, I will have alook at it.

Does this work like classes? So, can I create a new control that inherits all Properties from another one and then add my own stuff?
Like making a "LabelWithIcon" that already has everything from "StaticText"?

[AlexThomas]

As mentioned, the code I provided is for an ItemEntry and not for a Button, but it'll probably help with the questions you have when you go into your looknfeel and convert the Button entry that is there.

As for classes and inheritance, the answer is "kinda". In this case, this widget was added to the game with the following scheme xml:

Code: Select all

<FalagardMapping WindowType="WindowsLook/IconItemEntry" TargetType="CEGUI/ItemEntry" Renderer="Falagard/ItemEntry"   LookNFeel="WindowsLook/IconItemEntry" />

As you see, this takes the LooknFeel (what I defined) and maps it to a CEGUI C++ class (ItemEntry) and a Renderer (also ItemEntry) and associates that with a name (generally the same name as the LooknFeel.)

So, in your case, you probably want to map it more like the traditional button in the given scheme file, which is given as:

Code: Select all

   <FalagardMapping WindowType="WindowsLook/Button"      TargetType="CEGUI/PushButton"  Renderer="Falagard/Button"       LookNFeel="WindowsLook/Button" />


Thus, your button will have all the properties and c++ class behaviors and characteristics of a Button. You'll be able to cast it to a button, use button properties, etc etc. And you'll be able to add new properties using the propertyDefinition tags, as mentioned. However, that's the end of the line for it. The XML LooknFeel is a means to describe how the button looks. There's no extending those looks you've defined into a new window. In other words, if you created "MyButton" and added property "MyProperty", you won't be able to create "MyOtherButton" which extends "MyButton". Instead, "MyOtherButton" will be a CEGUI/PushButton just like MyButton and you'll have to build it from scratch (or just copy the XML). So in that way, this process is not like inheritance. There is a process for doing that however (http://www.cegui.org.uk/wiki/index.php/Create_a_CheckListboxItem) but in my experience it is rarely necessary - only in the event that you need completely custom behavior.

Also, for more about skinning, see the following tutorials (although i generally just reference the provided looknfeel examples):
http://www.cegui.org.uk/wiki/index.php/The_Beginners_Guide_to_Falagard_skinning_-_Part_I
http://www.cegui.org.uk/wiki/index.php/The_Beginners_Guide_to_Falagard_skinning_-_Part_II

[AlexThomas]

Also, it occurs to me that in your looknfeel you could most likely get the widget's native height (meaning the height that you would set by any other means) and then set the width/height of your icon to something slightly below that. This would avoid unnecessarily creating a property for something that is already defined. I'll tinker around a little bit and see if I can come up with some sample code. Sorry, I'm not really very good with the looknfeel stuff - I should have thought of this before!

[AlexThomas]

Here's approximately what I think you're looking for. You'll need to change the imageset/image names to match your button frame images, but the icon aligns left and scales as discussed. This was a good learning experience for me, so the challenge is appreciated!

Code: Select all

<!--
    ***************************************************
        WindowsLook/IconTextButton
    ***************************************************
    -->
  <WidgetLook name="WindowsLook/IconTextButton">
    <PropertyDefinition name="NormalTextColour" initialValue="FF000000" redrawOnWrite="true" />
    <PropertyDefinition name="HoverTextColour" initialValue="FF000000" redrawOnWrite="true" />
    <PropertyDefinition name="PushedTextColour" initialValue="FF000000" redrawOnWrite="true" />
    <PropertyDefinition name="DisabledTextColour" initialValue="FF333333" redrawOnWrite="true" />
    <PropertyDefinition name="IconImage" initialValue="" redrawOnWrite="true" />
    <ImagerySection name="icon">
      <ImageryComponent>
        <Area>
          <Dim type="TopEdge">
            <AbsoluteDim value="3" />
          </Dim>
          <Dim type="LeftEdge">
            <AbsoluteDim value="3" />
          </Dim>
          <Dim type="Height">
            <UnifiedDim scale="1" offset="-6" type="Height" />
          </Dim>
          <Dim type="Width">
            <UnifiedDim scale="1" offset="-6" type="Height" />
          </Dim>
        </Area>
        <ImageProperty name="IconImage" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>
    <ImagerySection name="label">
      <TextComponent>
        <Area>
          <Dim type="LeftEdge">
            <UnifiedDim scale="1" offset="-6" type="Height" />
          </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>
        <VertFormat type="CentreAligned" />
        <HorzFormat type="WordWrapCentreAligned" />
      </TextComponent>
    </ImagerySection>
    <ImagerySection name="frame-normal">
      <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="WindowsLook" image="ButtonNormalTopLeft" />
        <Image type="TopEdge"           imageset="WindowsLook" image="ButtonNormalTop" />
        <Image type="TopRightCorner"    imageset="WindowsLook" image="ButtonNormalTopRight" />
        <Image type="RightEdge"         imageset="WindowsLook" image="ButtonNormalRight" />
        <Image type="BottomRightCorner" imageset="WindowsLook" image="ButtonNormalBottomRight" />
        <Image type="BottomEdge"        imageset="WindowsLook" image="ButtonNormalBottom" />
        <Image type="BottomLeftCorner"  imageset="WindowsLook" image="ButtonNormalBottomLeft" />
        <Image type="LeftEdge"          imageset="WindowsLook" image="ButtonNormalLeft" />
        <Image type="Background"        imageset="WindowsLook" image="ButtonNormalBackground" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </FrameComponent>
    </ImagerySection>
    <ImagerySection name="frame-hover">
      <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="WindowsLook" image="ButtonHoverTopLeft" />
        <Image type="TopEdge"           imageset="WindowsLook" image="ButtonHoverTop" />
        <Image type="TopRightCorner"    imageset="WindowsLook" image="ButtonHoverTopRight" />
        <Image type="RightEdge"         imageset="WindowsLook" image="ButtonHoverRight" />
        <Image type="BottomRightCorner" imageset="WindowsLook" image="ButtonHoverBottomRight" />
        <Image type="BottomEdge"        imageset="WindowsLook" image="ButtonHoverBottom" />
        <Image type="BottomLeftCorner"  imageset="WindowsLook" image="ButtonHoverBottomLeft" />
        <Image type="LeftEdge"          imageset="WindowsLook" image="ButtonHoverLeft" />
        <Image type="Background"        imageset="WindowsLook" image="ButtonHoverBackground" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </FrameComponent>
    </ImagerySection>
    <ImagerySection name="frame-pushed">
      <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="WindowsLook" image="ButtonPushedTopLeft" />
        <Image type="TopEdge"           imageset="WindowsLook" image="ButtonPushedTop" />
        <Image type="TopRightCorner"    imageset="WindowsLook" image="ButtonPushedTopRight" />
        <Image type="RightEdge"         imageset="WindowsLook" image="ButtonPushedRight" />
        <Image type="BottomRightCorner" imageset="WindowsLook" image="ButtonPushedBottomRight" />
        <Image type="BottomEdge"        imageset="WindowsLook" image="ButtonPushedBottom" />
        <Image type="BottomLeftCorner"  imageset="WindowsLook" image="ButtonPushedBottomLeft" />
        <Image type="LeftEdge"          imageset="WindowsLook" image="ButtonPushedLeft" />
        <Image type="Background"        imageset="WindowsLook" image="ButtonPushedBackground" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </FrameComponent>
    </ImagerySection>
    <ImagerySection name="frame-disabled">
      <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="WindowsLook" image="ButtonDisabledTopLeft" />
        <Image type="TopEdge"           imageset="WindowsLook" image="ButtonDisabledTop" />
        <Image type="TopRightCorner"    imageset="WindowsLook" image="ButtonDisabledTopRight" />
        <Image type="RightEdge"         imageset="WindowsLook" image="ButtonDisabledRight" />
        <Image type="BottomRightCorner" imageset="WindowsLook" image="ButtonDisabledBottomRight" />
        <Image type="BottomEdge"        imageset="WindowsLook" image="ButtonDisabledBottom" />
        <Image type="BottomLeftCorner"  imageset="WindowsLook" image="ButtonDisabledBottomLeft" />
        <Image type="LeftEdge"          imageset="WindowsLook" image="ButtonDisabledLeft" />
        <Image type="Background"        imageset="WindowsLook" image="ButtonDisabledBackground" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </FrameComponent>
    </ImagerySection>
    <StateImagery name="Normal">
      <Layer>
        <Section section="frame-normal" />
        <Section section="icon" />
        <Section section="label">
          <ColourProperty name="NormalTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Hover">
      <Layer>
        <Section section="frame-hover" />
        <Section section="icon" />
        <Section section="label">
          <ColourProperty name="HoverTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Pushed">
      <Layer>
        <Section section="frame-pushed" />
        <Section section="icon" />
        <Section section="label">
          <ColourProperty name="PushedTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Disabled">
      <Layer>
        <Section section="frame-disabled" />
        <Section section="icon" />
        <Section section="label">
          <ColourProperty name="DisabledTextColour" />
        </Section>
      </Layer>
    </StateImagery>
  </WidgetLook>


[blablub]

Thanks for your work. I tried to test your Button. I renamed everything to fit with my definitons, added it the scheme file and changed to the correct imageset and added one instance in the layout file in the middle of the screen just to see it. It runs fine, BUT: The button simply is not displayed. No error, but also no button.

[blablub]

Sorry for double post. Maybe I reask my question in another way. Maybe my problem can be solved with the imageset. Imagest allow to set a native resolution and an "AutoScaled" switch. Is there some combination of these options so that I can change it so that pictures originally made for a 4:3 resolution stay "4:3" even on a 16:9 resoltution BUT are scaled up with the aspect ratio staying 4:3 even if using relative coordinates (like "{1,0}")?

What I'm basically looking for is a possibility to add a picture and define only ONE size (relative height {1,0}) and the other (width in my case) should be set dynamically while keeping the aspect ratio.

[CrazyEddie]

The short and easy answer to this is to say that, currently (and unfortunately), there is no built-in provision for maintaining the aspect of an image, though we would like to have something added to enable this for 0.8.0.

With this said, it is possible to create some Window subclass as an alternative StaticImage - maybe even getting away with just a new WindowRenderer subclass - that would maintain the aspect of the assigned image.

If the image is to be totally static (i.e the image is not 'settable'), you can even do it by getting tricky with looknfeel definitions - but this is a very inflexible approach.

Does this work like classes? So, can I create a new control that inherits all Properties from another one and then add my own stuff?
Like making a "LabelWithIcon" that already has everything from "StaticText"?

To answer the above point, this facility has been added for what will become the 0.8.0 release, but it's not in the 0.7.x releases.

CE.

[blablub]

Ah, OK, thanks for your answer.
I think I'll then do absolute pixel size icons with relative positioning instead of making everything relative. It seems, most games are doing it this way.

[AlexThomas]

Thanks for your work. I tried to test your Button. I renamed everything to fit with my definitons, added it the scheme file and changed to the correct imageset and added one instance in the layout file in the middle of the screen just to see it. It runs fine, BUT: The button simply is not displayed. No error, but also no button.

You'll also need to change the image names. Mine are nonstandard (sorry!)