Non square button caps with Falagard button.

[d-Pixie]

Hi again.

In the process of rewriting the default skin, which is going well all-in-all, I came across a problem that I have not been able to find the solution for in the forums.

I have made new graphics for the standard button and in the course of this the button caps (left and right ends) became wider than their originals. I figured that was no problem and just adjusted the imageset accordingly. But it seems I was wrong. No matter how I try to change the size of the images in the imageset it squishes them until they are squares. I even tried fiddling with the auto resize options but no luck.

So, is this a fixed ratio in the button layout engine or can you add XML properties to the looknfeel to tell it how much space you need for the caps? I looked but could not find any XML that seemed to fit the bill for this job.

Additional information: I load all my layout and resources from Lua, so I'd like solutions in XML or Lua if you can. I'll take C-code as well though ;o) I can always do the same from Lua, but I'd rather not ...

[Jamarr]

I am not that familiar with the layout/skinning system, but I am fairly certain (70%) that this should not be a problem. What is the "default skin" that you are referring to? There are several "default skins" provided with the SDK. Also, can you provide the rewritten .looknfeel xml for the widget in question?

[d-Pixie]

Sorry for that, I should have said. I'm basing my looknfeel on TaharezLook. My button looknfeel looks like this right now:

Code: Select all

<WidgetLook name="Anakha/Button">
   <PropertyDefinition name="VertLabelFormatting" initialValue="CentreAligned" />
   <PropertyDefinition name="HorzLabelFormatting" initialValue="CentreAligned" />

   <PropertyDefinition name="VertImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
   <PropertyDefinition name="HorzImageFormatting" initialValue="Stretched" redrawOnWrite="true" />

   <PropertyDefinition name="ButtonBackgroundColour" initialValue="FFbbbbbb" redrawOnWrite="true" />
   <PropertyDefinition name="DisabledTextColour" initialValue="FF666666" redrawOnWrite="true" />
   <PropertyDefinition name="ButtonTextColour" initialValue="FFe5cf85" redrawOnWrite="true" />
      
   <PropertyDefinition name="NormalImage" initialValue="" />
   <PropertyDefinition name="HoverImage" initialValue="" />
   <PropertyDefinition name="PushedImage" initialValue="" />

   <ImagerySection name="Label">
      <TextComponent>
         <Area>
            <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
            <Dim type="TopEdge"><AbsoluteDim value="1" /></Dim>
            <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
            <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
         </Area>
         <VertFormatProperty name="VertLabelFormatting" />
         <HorzFormatProperty name="HorzLabelFormatting" />
      </TextComponent>
   </ImagerySection>

   <ImagerySection name="Normal">
      <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="LeftEdge" imageset="Anakha" image="ButtonLeft" />
         <Image type="RightEdge" imageset="Anakha" image="ButtonRight" />
         <Image type="Background" imageset="Anakha" image="ButtonBackground" />
      </FrameComponent>
      <ImageryComponent>
         <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>
         <VertFormatProperty name="VertImageFormatting" />
         <HorzFormatProperty name="HorzImageFormatting" />
      </ImageryComponent>
   </ImagerySection>
   <ImagerySection name="Hover">
      <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="LeftEdge" imageset="Anakha" image="ButtonLeft" />
         <Image type="RightEdge" imageset="Anakha" image="ButtonRight" />
         <Image type="Background" imageset="Anakha" image="ButtonBackground" />
      </FrameComponent>
      <ImageryComponent>
         <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>
         <VertFormatProperty name="VertImageFormatting" />
         <HorzFormatProperty name="HorzImageFormatting" />
      </ImageryComponent>
   </ImagerySection>
   <ImagerySection name="Pushed">
      <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="LeftEdge" imageset="Anakha" image="ButtonLeft" />
         <Image type="RightEdge" imageset="Anakha" image="ButtonRight" />
         <Image type="Background" imageset="Anakha" image="ButtonBackground" />
      </FrameComponent>
      <ImageryComponent>
         <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>
         <VertFormatProperty name="VertImageFormatting" />
         <HorzFormatProperty name="HorzImageFormatting" />
      </ImageryComponent>
   </ImagerySection>
   <ImagerySection name="Disabled">
      <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="LeftEdge" imageset="Anakha" image="ButtonLeft" />
         <Image type="RightEdge" imageset="Anakha" image="ButtonRight" />
         <Image type="Background" imageset="Anakha" image="ButtonBackground" />
      </FrameComponent>
      <ImageryComponent>
         <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>
         <VertFormatProperty name="VertImageFormatting" />
         <HorzFormatProperty name="HorzImageFormatting" />
      </ImageryComponent>
   </ImagerySection>
   <StateImagery name="Normal">
      <Layer>
         <Section section="Normal">
            <ColourProperty name="ButtonBackgroundColour" />
         </Section>
         <Section section="Label">
            <ColourProperty name="ButtonTextColour" />
         </Section>
      </Layer>
   </StateImagery>
   <StateImagery name="Hover">
      <Layer>
         <Section section="Hover">
            <ColourProperty name="ButtonBackgroundColour" />
         </Section>   
         <Section section="Label">
            <ColourProperty name="ButtonTextColour" />
         </Section>
      </Layer>
   </StateImagery>
   <StateImagery name="Pushed">
      <Layer>
         <Section section="Pushed">
            <ColourProperty name="ButtonBackgroundColour" />
         </Section>
         <Section section="Label">
            <ColourProperty name="ButtonTextColour" />
         </Section>
      </Layer>
   </StateImagery>
   <StateImagery name="PushedOff">
      <Layer>
         <Section section="Hover">
            <ColourProperty name="ButtonBackgroundColour" />
         </Section>
         <Section section="Label">
            <ColourProperty name="ButtonTextColour" />
         </Section>
      </Layer>
   </StateImagery>
   <StateImagery name="Disabled">
      <Layer>
         <Section section="Disabled">
            <Colours topLeft="BB666666" topRight="BB666666" bottomLeft="BB666666" bottomRight="BB666666" />
         </Section>
         <Section section="Label">
            <ColourProperty name="DisabledTextColour" />
         </Section>
      </Layer>
   </StateImagery>
</WidgetLook>


It's fairly normal. I have cut a few declarations since I only use one set of images for my button and animate the transitions. But It doesn't scale the caps proportionally. I have found a size that gives me the look I want, but that is a bit to static fo my taste. I'd like to have them relatively scaled and not fixed pixel size...