Displaying images

For help with anything that CEGUI doesn't offer straight out-of-the-box, e.g.:
- Implementation of new features, such as new Core classes, widgets, WindowRenderers, etc. ...
- Modification of any existing features for specific purposes
- Integration of CEGUI in new engines or frameworks and writing of new plugins (Renderer, Parser, ...) or modules

Moderators: CEGUI MVP, CEGUI Team

Evenstar
Not too shy to talk
Not too shy to talk
Posts: 26
Joined: Tue Feb 28, 2006 23:14

Displaying images

Postby Evenstar » Fri Mar 10, 2006 23:29

Hi,

I am trying to develop a GUI using XML that will contain multiple windows each with its own image. The main window's image will be the background for its child window's transparent images. The child windows will be interactive in such a way as to allow the "sliding" of controls.

With the description of what I want to do out of the way, how can images be displayed on controls? I have tried adding static images to the CEGUI and specifying an Image property, but I'm uncertain as to what goes in the Image property. I tried to add a new <Imageset> section in my windowslook.imageset file. However, I wound up with an exception with this approach. I really don't have a clue as to how to proceed here. :?

Are there any examples of displaying images within a GUI and interacting with them? They would be extremely appreciated.

Thanks,
Brian

Evenstar
Not too shy to talk
Not too shy to talk
Posts: 26
Joined: Tue Feb 28, 2006 23:14

Postby Evenstar » Tue Mar 14, 2006 21:57

Well, after a little digging around, I have managed to get an image displaying properly. The problem that I am having now is trying to clamp the image to a window such that it displays the entire image.

For instance, a 512x512 image displayed in a 128x128 window would need to be scaled to fit.

Any ideas on how to do this?

Evenstar
Not too shy to talk
Not too shy to talk
Posts: 26
Joined: Tue Feb 28, 2006 23:14

Postby Evenstar » Wed Mar 15, 2006 00:32

I seem to be having a one sided conversation here, but I was able to finally get this to work.

When positioning an image, to get the image to always clamp to the window, use the code:

Code: Select all

<Window Type="WindowsLook/StaticImage" Name="MyStaticWnd" >
  <Property Name="Image" Value="set:MyImageset image:Background" />
  <Property Name="BackgroundEnabled" Value="False" />
  <Property Name="FrameEnabled" Value="False" />
  <Property Name="RelativeRect" Value="l:0.0 t:0.0 r:1.0 b:1.0" />
</Window>


The (l)eft, (t)op, (r)ight, and (b)ottom values are percentages based on the width and height of the window. The image itself will be fit to that window. To position the image in the center of the window, regardless of the size of the windwo, the following code can be used:

Code: Select all

<Window Type="WindowsLook/StaticImage" Name="MyStaticWnd" >
  <Property Name="Image" Value="set:MyImageset image:Background" />
  <Property Name="BackgroundEnabled" Value="False" />
  <Property Name="FrameEnabled" Value="False" />
  <Property Name="RelativeRect" Value="l:0.15 t:0.15 r:0.85 b:0.85" />
</Window>



If you want the image to be placed in a specific area, you can use code similar to:

Code: Select all

<Window Type="WindowsLook/StaticImage" Name="MyStaticWnd" >
  <Property Name="Image" Value="set:MyImageset image:Background" />
  <Property Name="BackgroundEnabled" Value="False" />
  <Property Name="FrameEnabled" Value="False" />
  <Property Name="AbsoluteRect" Value="l:0.0 t:0.0 r:1024.0 b:636.0" />
</Window>


My main window's dimensions are 320x150, so the above code ends up displaying the upper left corner of my image from (0x0) to (320x150).

Changing the code to

Code: Select all

<Window Type="WindowsLook/StaticImage" Name="MyStaticWnd" >
  <Property Name="Image" Value="set:MyImageset image:Background" />
  <Property Name="BackgroundEnabled" Value="False" />
  <Property Name="FrameEnabled" Value="False" />
  <Property Name="AbsoluteRect" Value="l:0.0 t:0.0 r:320.0 b:150.0" />
</Window>


will display the entire image fully within the window, whereas

Code: Select all

<Window Type="WindowsLook/StaticImage" Name="MyStaticWnd" >
  <Property Name="Image" Value="set:MyImageset image:Background" />
  <Property Name="BackgroundEnabled" Value="False" />
  <Property Name="FrameEnabled" Value="False" />
  <Property Name="AbsoluteRect" Value="l:160.0 t:75.0 r:320.0 b:150.0" />
</Window>


will display the image in the bottom-right corner of the window.

Incidentally, the imageset file contains the following code.

Code: Select all

<?xml version="1.0" ?>
<Imageset Name="MyImageset" Imagefile="imagesets/Image1.tga" >
   <Image Name="Background" XPos="0" YPos="0" Width="1024" Height="636" />
</Imageset>



Please feel free to correct any of the above info if it is wrong.

Thanks,
Brian

User avatar
baxissimo
Quite a regular
Quite a regular
Posts: 60
Joined: Tue Feb 22, 2005 08:04
Location: Tokyo, JAPAN
Contact:

Postby baxissimo » Wed Mar 15, 2006 01:40

Evenstar, that's great info. Maybe you can mirror it on the wiki for easy finding later?

Evenstar
Not too shy to talk
Not too shy to talk
Posts: 26
Joined: Tue Feb 28, 2006 23:14

Postby Evenstar » Wed Mar 15, 2006 15:48

baxissimo wrote:Evenstar, that's great info. Maybe you can mirror it on the wiki for easy finding later?

I'll wait and see if any corrections are needed before I do that, but yes, it would be a good idea.

User avatar
Dalfy
CEGUI Team (Retired)
Posts: 130
Joined: Tue Oct 11, 2005 16:13
Location: Paris, FRANCE
Contact:

Postby Dalfy » Wed Mar 15, 2006 20:34

You manage to get the correct result with an input image not square ?


Return to “Modifications / Integrations / Customisations”

Who is online

Users browsing this forum: No registered users and 6 guests