CEGUI (Crazy Eddie's GUI) Forums

Posted: **Tue Aug 04, 2009 22:34**

The default progress bar has a background and then the bar overlaid on top. I'd like the background to become the foreground, with some nicely shaped alpha cut out slot and then the bar underneath would appear to fill this up. I thought this was a simple switcheroo in the looknfeel.

Now, within a "stateimagery" section you have a "layer" and then the order you add "section" images defines the order they render. However, the progress bar has two seperate "stateimagery" sections, one for background called "Enabled" and one for the bar called "EnabledProgress". Whatever order these sections are placed in the looknfeel the bar always comes out on top.

I need the bar underneath - not sure what to do?

Posted: **Wed Aug 05, 2009 08:37**

I have a recollection that we had this at one stage, but anyway, now we don't (I think it's something we should add for all windows though, so I'll add it to my Falagard wish-list if it's not already on there!). The solution is to have another window of some type attached to the progress bar that handles the 'overlay' parts of the imagery.

HTH

CE.

Posted: **Thu Aug 06, 2009 22:29**

Thanks for that. Seems to work fine, here is what I did in case anyone else is looking.

Add 3 images to my gui sheet:
1. a background for the loading bar
2. a little slice of loading bar that can be stretched horizontally
3. a front for the loading that has a slot alpha cut into it
I need them drawn in that order so the bar can fill the slot nicely.

The existing progress bar has a background and a bar so that covers items 1 + 2. To add the front I need a child widget to sit on top. So I open my scheme file and add:

Code: Select all

  <FalagardMapping WindowType="TaharezLook/ProgressBarFront"      TargetType="DefaultWindow" Renderer="Falagard/StaticImage" LookNFeel="TaharezLook/ProgressBarFront" />

So I'm just copying a static image definition.

Then in the looknfeel I add the new front widget.

Code: Select all

    <WidgetLook name="TaharezLook/ProgressBarFront">
      <ImagerySection name="image">
        <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>
          <Image imageset="TaharezLook" image="LoadingBarFace" />
          <VertFormat type="Stretched" />
          <HorzFormat type="Stretched" />
        </ImageryComponent>
      </ImagerySection>
      <StateImagery name="Enabled" >
        <Layer>
          <Section section="image" />
        </Layer>
      </StateImagery>
    </WidgetLook>

And modify the existing progress bar to attach the new child and mvoe the progress bar into the middle.

Code: Select all

    <!--
    ***************************************************
        TaharezLook/ProgressBar
    ***************************************************
    -->
    <WidgetLook name="TaharezLook/ProgressBar">
      <NamedArea name="ProgressArea">
          <Area>
            <Dim type="LeftEdge" >
              <AbsoluteDim value="15" />
            </Dim>
            <Dim type="TopEdge" >
              <AbsoluteDim value="10" />
            </Dim>
            <Dim type="RightEdge" >
              <UnifiedDim scale="1" type="RightEdge">
                <DimOperator op="Subtract">
                  <AbsoluteDim value="15" />
                </DimOperator>
              </UnifiedDim>
            </Dim>
            <Dim type="Height" >
              <UnifiedDim scale="1" type="Height" >
                <DimOperator op="Subtract">
                  <AbsoluteDim value="20" />
                </DimOperator>
              </UnifiedDim>
            </Dim>
          </Area>
      </NamedArea>
      <Child  type="TaharezLook/ProgressBarFront" nameSuffix="front" >
        <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>
      </Child>
      <ImagerySection name="progress_lights" >
          <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>
              <Image imageset="TaharezLook" image="LoadingBarSegment" />
              <VertFormat type="Stretched" />
              <HorzFormat type="Stretched" />
          </ImageryComponent>
      </ImagerySection>
      <ImagerySection name="background">
        <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="Background" imageset="TaharezLook" image="LoadingBarBackground" />
        </FrameComponent>
      </ImagerySection>
        <StateImagery name="EnabledProgress">
            <Layer>
                <Section section="progress_lights" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledProgress">
            <Layer>
                <Section section="progress_lights">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
      <StateImagery name="Enabled">
        <Layer>
          <Section section="background" />
        </Layer>
      </StateImagery>
      <StateImagery name="Disabled">
        <Layer>
          <Section section="background">
            <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
          </Section>
        </Layer>
      </StateImagery>
    </WidgetLook>

Hopefully that is a sensible approach

Posted: **Sat Aug 08, 2009 07:47**

Glad it's working. And yes, your solution is the all signing, all dancing "CEGUI way" of doing it - there were numerous hacks you might have employed to do this, so kudos on doing it the right way

One minor suggestion would be to name your child "__auto_front" rather than "front" since that way if you use the CELayoutEditor or built in XML writing the child is correctly excluded from the layout (as it's automatically created in the skin).

CE

CEGUI (Crazy Eddie's GUI) Forums

Progress bar sort order

Progress bar sort order

Re: Progress bar sort order

Re: Progress bar sort order

Re: Progress bar sort order