Page 1 of 1

Horizontal slider?

Posted: Wed Nov 12, 2008 00:42
by eugen
Is there a horizontal slider control (i know there is a vertical) or is there a way of transforming the vertical to horizontal?

Posted: Wed Nov 12, 2008 09:37
by CrazyEddie
Hi,

the slider supports both horizontal and vertical options - what you actually get will depend upon what's defined in the looknfeel skin file you're using. For example, TaharezLook has a vertical slider, while the WindowsLook has a horizontal one (both use the same underlying C++ components).

If you want to change a vertical slider to horizontal, you can do so by editing the looknfeel skin (you may need some appropriate imagery in the imageset also). The specific details of this will depend on how the current slider is defined in the looknfeel. If you let us know which slider it is (if it's one of our examples) or post the WidgetLook definition if it's a custom slider, and someone will likely be able to assist.

CE.

Posted: Wed Nov 12, 2008 12:27
by eugen
I'm using the default TaharezLook which comes with the CEGUI installment
Thanks!

Posted: Wed Nov 12, 2008 13:42
by CrazyEddie
Ok. This is how to convert the TaharezLook slider from a vertical slider into a horizontal one. Be aware that we're using the same imagery here, so while the thumb still looks semi-reasonable, the container/background element looks not-so-good. To get something that really looks good will require editing of the TaharezLook.tga imagery file and the TaharezLook.imageset xml.

Anyway, from a purely operational standpoint, this is how it's done:

Find TaharezLook/SliderThumb
This is in the looknfeels/TaharezLook.looknfeel file, in my copy it's around line 1369.

Change VertFree to HorzFree
Because we want the thumb to move in the horizontal direction, we have to edit the line:

Code: Select all

<Property name="VertFree" value="True" />

so that it reads:

Code: Select all

<Property name="HorzFree" value="True" />


Find TaharezLook/Slider
Again in the looknfeels/TaharezLook.looknfeel xml file. My copy has this around line 1426.

Set VerticalSlider property to false
Currently there is a property initialiser value that sets the "VerticalSlider" property to "True":

Code: Select all

<Property name="VerticalSlider" value="True" />

This should be set to false (or you could remove it entirely - non-vertical is the default):

Code: Select all

<Property name="VerticalSlider" value="False" />


Change area definition for Child "__auto_thumb__"
The Child component definition for the thumb can be considered in terms of size only, the thumb is automatically positioned within the thumb-track area by CEGUI. So here we need to adjust the Width and Height definitions. Currently the thumb width is set to be the full width of the slider, obviously this is no good because you'll not be able to move the thumb left or right - we will change this to use the width of the source thumb image instead. The height is currently set to the height of the source image, we will change this so that it fills the height of the slider (so basically, we're going to swap them around).

Currently, the __auto_tumb child definition looks like this:

Code: Select all

<Child  type="TaharezLook/SliderThumb" nameSuffix="__auto_thumb__">
    <Area>
        <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
        <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
        <Dim type="Width" ><UnifiedDim scale="1.0" type="Width" /></Dim>
        <Dim type="Height" ><ImageDim imageset="TaharezLook" image="VertSliderThumbNormal" dimension="Height" /></Dim>
    </Area>
</Child>

With our small modifications, it looks like this:

Code: Select all

<Child  type="TaharezLook/SliderThumb" nameSuffix="__auto_thumb__">
    <Area>
        <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
        <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
        <Dim type="Width" ><ImageDim imageset="TaharezLook" image="VertSliderThumbNormal" dimension="Width" /></Dim>
        <Dim type="Height" ><UnifiedDim scale="1.0" type="Height" /></Dim>
    </Area>
</Child>


And that's about it. There are other things you could adjust, though normally what exactly will depend on the imagery you want to use - because we do not have any suitable imagery, this consitutes the smallest set of changes to achieve the operational change from vertical to horizontal.

HTH

CE.

Posted: Wed Nov 12, 2008 14:55
by eugen
Thanks CE it works like a charm!

One other problem we have here is with the CheckBox from the TaharezLook. When we want to create a CEGUI/Checkbox type of window but we get this error message "'Window::setLookNFeel - There must be a window renderer assigned to the window 'GUICheckButton0' to set its look'n'feel". The thing is i believe it has the renderer assigned since is the default lookandfeel and scheme. What can it be, what should i be checking to have this working?

[edit]
It seems i can only create the check button if i create it as TaharezLook/CheckBox instead of CEGUI

Posted: Wed Nov 12, 2008 18:48
by Jamarr
eugen wrote:One other problem we have here is with the CheckBox from the TaharezLook. When we want to create a CEGUI/Checkbox type of window but we get this error message "'Window::setLookNFeel - There must be a window renderer assigned to the window 'GUICheckButton0' to set its look'n'feel". The thing is i believe it has the renderer assigned since is the default lookandfeel and scheme. What can it be, what should i be checking to have this working?

[edit]
It seems i can only create the check button if i create it as TaharezLook/CheckBox instead of CEGUI


That is because "CEGUI/Checkbox" is a window factory type, while createWindow() is looking for a window type like "TaharezLook/CheckBox". If you look in the TaharezLook.scheme file, you can see how a window is mapped to a factory, a look'n'feel, and a renderer. This page is a bit dated, but seems accurate: http://www.cegui.org.uk/wiki/index.php/ ... EGUI_0.5.X

Posted: Thu Nov 13, 2008 02:02
by eugen
Now i think i understand better, CEGUI has base target types defined (like push button for example) and we can use these to implement our own push button types as we please as long as it stays in the limits of a push button. So i can create for example a push button of my own, defining the look and feel for it and then what type of renderer to use for it which can be also custom defined (here falagard being an extension of the system) and then just instanciate a type of control i created.
Thank you for the information!