strange behavior with console and panel


31-12-2007 16:26:00


atm i am creating the inventory visuals for our client. I decided to take a panel as the base for the listed items.
The items are made from an image on the left, and a console on the right as infofield.

3 things:
1. how can i reduce the space between the lines in the console. (i don't can set the mItemHeight directly from the console widget)

2. i have a problem if i disallow the scrolling with (allowScrolling( false)) i get an crash from the inside of quickgui...

3. if i have some more items for testing in the panel i got a clipping problem with the items. The images are clipped very well but the console didn't clip at the panel borders.
I think the difference is that the image is directly created from the panel and the consel too, but has created some own widget (possible not from the parent?)

here is the code

// First create a unique name
string strName = "bt";
strName += pItem->cName;
strName += StringConverter::toString( m_ulUniqueID );

// Create the button on the left
QuickGUI::Image* pImage = m_pPANEL_Inventory->createImage( strName );

// Save the spacesettings between the images
UINT uiYSpace = m_rIM_ItemImage.y;

// calculate the position based on the size of the inventory vector
m_rIM_ItemImage.y = (m_rIM_ItemImage.height * m_vInventory.size()) + uiYSpace;

// set the dimension
pImage->setDimensions( m_rIM_ItemImage );

// set the image
strName = "0/";
strName += pItem->cName;
pImage->setMaterial( strName );
LogManager::getSingletonPtr()->logMessage( "--------------------> " + strName );

// Create the InfoBox on the right side of the image

// Create the unique name
strName = "co";
strName += pItem->cName;
strName += StringConverter::toString( m_ulUniqueID );
QuickGUI::Console* pCO = m_pPANEL_Inventory->createConsole( strName );
//pCO->allowScrolling( false );
//pCO->setHorizontalPixelPadWidth( 10 );

// Use the same position as the button
m_rCO_ItemInfo.y = m_rIM_ItemImage.y;

// Set the dimensions
pCO->setDimensions( m_rCO_ItemInfo );

// Write the information
strName = "Name: "; strName += pItem->cName; pCO->addText( strName );
strName = "Weight: "; strName += StringConverter::toString( pItem->sWEIGHT * 100 ) + " g"; pCO->addText( strName );
strName = "Price: "; strName += StringConverter::toString( pItem->uiPRICE_BUY ) + " Cr"; pCO->addText( strName );

here is a screenshot :)


01-01-2008 00:33:05

Wow, nice screenshot, its great to see some more advanced use from the library! (although there are some obvious issues that need to be fixed. :wink: )

1: I'm not at my dev machine, so I will look into this. I believe there is a function to set the amount of pixel space between items, but you're probably right that its not exposed to the console, I will add it.

2: I never really addressed the allowScrolling(false) in an elegant way, I'll need to review and make it work.

3: The functionality is there for clipping, it looks like I need to make sure everything is set properly. It seems the borders, scroll bars, and text is being incorrectly clipped.

Also as a suggestion, you might consider using Lists or the LabelArea widgets instead of the Console. In the future, the ListBox will support more widgets, in addition to the currently supported MenuLabel and TextBox.

I'll try to get back to this as soon as I can, the holidays are really busy for me. :)


01-01-2008 13:16:12

Happy new year :)

First i played around a bit with the LabelArea and some Textboxes. But i did not managed to deal correct with the textboxes i have to add to the 'Multiline'LabelArea.
The setText sets 1 line and therefore i looked into the code of the console and found that it is easier for me to use the console instead of reprogramming the addText as a multiline function.

3. the master/parent is the panel and i think that not only the border, scroll bars and text is clipped correctly i think that every widget that is not directly created out from the (MyPanel->create*()) function is not clipped correctly?


01-01-2008 18:20:25


now i have nested all the labels directly onto the panel and it works fine...

At the moment i am thinking about the item selection. The Details at the top of the inventory is a 'fake'. it is always the first item from your inventorye shown.

Eventually i will create a smal panel under all the labels and image over the Itemlisting panel using the Z Order feature. Add the mouseclick events and the highlighting on mouse over!?
Do you have better ideas?

A new screen :)


01-01-2008 23:17:23

The way clipping works is that a widget is set as the clipping widget, and the widget is always clipped according to this clipping widget. I should probably revisit this, so that clipping is a recursive process. That is, the widget clipped according to the sheet dimensions, and then the next parent, and so on. I will add this to the TODO list.

For the implementation of your inventory window, I would probably try something like:

- Panel p0 at top
p0 has an image
p0 has a list
- Panel p1 below p0. (the container for all your inventory items)
p1 has 0 to many panels (1 per item) with the same structure as p0.

The recent revision of the enter/leave events should make it possible to easily determine when you enter/leave a item panel.

Happy New Year!


02-01-2008 00:20:17


your solution is currently implemented (right after i have posted the image i tried this out) If you revisit the code this seem to be the best solution :)

One thing to our beloved console :D
On the left side at the bottom of the window there is my chat widget. it is primaly a console with the necessary network code.

In every game (ok most games :) ) you have keys for some things like inventory, movement and so on. If you chat and type your word into the input of the console, then every (GAME) Widgets like Inventory, Tradepanel, Menue etc will open and close on the bound keys.

So i must set the GAIN_FOCUS and LOSE_FOCUS on the console and especially on the inputbox and this is my problem. I solved this with an workaround: changed the mInputBox from protected to public and added the necessery events.

One way out can be something like the addOnEnterPressedEventHandler !?

what do you think?


02-01-2008 00:41:56

I'm not sure I understand. There is already a Console::addOnEnterPressedEventHandler function.

Regarding the use of game keys and GUI text input, I don't see where QuickGUI fits in. I would imagine your logic should be something like this:

// handle key pressed

So basically if you inject a key event into the gui, it will return true if it has been handled, false if it there are no handlers for it. For example, if your Sheet was in focus, and you injected key up 'W', it would return false, and then you can handle this in your own application. (move forward)

If you click on the console and type text, it will be consumed. If you want to be able to use keyboard keys to do non-gui functionality, set focus to a widget that has no event handlers for key events.


02-01-2008 07:40:25

hmm sorry for my bad english :| ...

In my application i have a big structure called STATE_S it has some states (what else :) ) one is the bMousePicking and is set by every widget when the mouse enters it and is set to false if it leaves it. Therefore i can decide if the user is with the mouse in the world for picking or over the gui :)

And like this state i have the bBlockKeyControls it is set by anywhere in the application if i don't want to react on the keyboard input.
The state is currently set by GAIN_FOCUS on the mInputBox and is unset by LOSE_FOCUS on the mInputBox in the console.
Because of the protection of the varialbe mInputBox in the console i had to move it from protected to public. But a better way can be a function like the (addOnEnterPressedEventHandler) in the console. the name can be (addOnGainFocusOnInputBox and addOnLoseFocusOnInputBox).


02-01-2008 09:38:45

I will think about it, I don't think there would be any problems adding the 2 functions you requested.


02-01-2008 22:08:47

Now i have implemented the 3d RTT on the top left of the detailview. i have implemented the solution you told above, but i think i have to tweak it a little bit. i have to play around with the zorder. at the moment you can only click on the image to change the detail information on the top of the widget.

here is a screen :)


04-01-2008 20:01:12

Just a heads up on the clipping issues. I've been wanting to clean up my use of Quads for some time now, but couldn't think up a good design for it. I've recently planned out how to do this, partly due to fixing the clipping problem. Its another big internal change, so it will take some time. Hopefully I can successfully implement my ideas. :)


04-01-2008 23:01:28

ok... i think i can work with this workaround a while...


17-01-2008 06:27:56

Hey Qbound, sorry its been a while. I've been taking baby steps to fix the clipping issues once and for all. What I hope to accomplish is to rename the QuadContainer class into a WidgetContainer class. If all goes well, this class will absorb the ScrollPane functionality as well.


26-01-2008 19:07:05

Its hard to make big changes to the library these days! I ended up scrapping what I was doing, it didn't want to work. So in the future when clipping is incorrect, we need to find the exact problem and fix it. I'm looking at the screenshot above, but I'd be interested to know what the text's clipping widget is.