It is currently Mon Mar 08, 2021 2:12 am



Post new topic Reply to topic  [ 4 posts ] 
Author Message
Member
 

Team: Dark Traders
Main: Aredes
Level: 2142
Class: Shield Monkey

Joined: Tue Apr 27, 2010 5:15 pm
Post Chat Bar Issues.
So in my goal to make a resizable/movable chat bar that doesn't have to take up your whole screen for the lower resolutions, I encounter some issues that might be relevant to bug fixes in the future.

First I, like others will point out, hate the tab system on the chat bars, as it is not intuitive and results in several misplaced messages.

1) There appears to be no binding (that I could find) that saves positions based on resizing! Although I have a feeling this exists somewhere and simply hasn't been documented.

2) Unsure of the exact reason, but it appears the width of the resizing border regions conflicts with elements inside that take have 100% length/width! A temp. solution was to make it only 99.9%~ the width/height of it's parent window.

3) Now onto the big problem. The issue with this method (the only method as far as I know) is that in order for the chat bar to dynamically resize, its' percent has to remain at 0,0,1,1 (100% of the container it's in). This is fine and all, except for the fact that there's a second rectangle included in the chat which is mandatory for it the chat to work, the tab layout rectangle.

From what I could tell, this was designed to work so that it would be below the initial chat bar, then go up 37~ pixels from the bottom. The problem with this method is shown below:

Attachment:
1.jpg

What you are seeing here is an overlap of the tabs with the chat box, and to make matters worse, it's also where the chat entry box shows up as you hit enter.

Okay! The solution is simple! Make the chat box rectangle (the blue one) say from 0% to 90% of the height, and the tab rectangle (the red one) from 90% to 100%, at the bottom (instead of being at 100%-110%~ and being brought up) Applying the code, you get this:
Attachment:
2.jpg


Not exactly what I was expecting... Apparently the chat box doesn't play well with others?

Now some of you are asking, why not just bring it up those -37 pixels again? You must remember that this is intended to be scaling to the size of the window at all times! So raising the chat box bottom by 10%, and bringing up the tabs 37 pixels is only going to work when the chat panel is 370 pixels high!

Something needs to change to make this work! Something might already be in game but since there's limited documentation, there's no way to find out! But as of right now with what I've seen, it would be a severe limitation to the UI if things cannot be scaled dynamically.

That and the tabs like to do their own thing, apparently?

NOTE: I understand that the chat is a work in progress, but I think this is still important to point out, even if it's just for future reference.

Code:
<element type="customWindow">
   <!-- Container -->
   <attributes>
      <string name="IdName" value="_chatContainer" />
      <rect name="Rect" value="0, 0, 0, 0" />
      <rectf name="PercRect" value="0.25, 0.25, 0.75, 0.75" />
      <int name="Flags" value="0" />
      <int name="ResizeBorderWidth" value="3" />
      <bool name="TopResizable" value="true" />
      <bool name="RightResizable" value="true" />
      <bool name="BottomResizable" value="true" />
      <bool name="LeftResizable" value="true" />
      <bool name="Movable" value="true" />
      <bool name="DrawBackground" value="true" />
   </attributes>
   <bindings>
      <signal name="moved" slot="DialogMoved" id="LogicManager" />
   </bindings>

   <element type="chat">
   <!-- Chat Box -->
      <attributes>
         <string name="IdName" value="spaceChat" />
         <rect name="Rect" value="0, 0, 0, 0" />
         <!-- Off by 0.01% allows the window to resize more fluidly? Related to the resize border widths likely.  -->
         <rectf name="PercRect" value="0.0001, 0.0001, 0.9999, 0.9000" /> <!-- to 90%, to make room for the tab rect below it -->
         <rect name="TabLayoutRect" value="0, 0, 0, 0" />
         <rect name="TabLayoutPercRect" value="0.0, 0.9000, 1, 1" />
      </attributes>
      <bindings>
         <slot name="ChatActivateInput" signal="key_pressed_enter" id="DeviceKeyboard" />
      </bindings>
   </element>

</element>


NOTE2: With the chatbox at 90%, and bringing the tabs up 37 pixels, everything works nicely. It just looks ugly at most sizes, or the tabs refuse to stay in the window.


You do not have the required permissions to view the files attached to this post.


Last edited by Deathdisguise on Mon Mar 07, 2011 8:11 pm, edited 1 time in total.

Mon Mar 07, 2011 8:06 pm
Profile E-mail
Site Admin / Dev Team
User avatar
 

Team: Eminence Front
Main: PhoenixSun2
Level: 1392
Class: Shield Monkey

Joined: Mon Jan 03, 2005 12:07 am
Post Re: Chat Bar Issues.
Let us know what you think the best solution for this is... ie, how the XML would look for this to work like you wanted and we can make the code to that, or at least the closest possible approximation.


Mon Mar 07, 2011 8:10 pm
Profile
Member
 

Team: Dark Traders
Main: Aredes
Level: 2142
Class: Shield Monkey

Joined: Tue Apr 27, 2010 5:15 pm
Post Re: Chat Bar Issues.
HAHA, I feel kind of stupid now. I just noticed a tiny (but damn important) error in the chat.xml code.
Code:
<element type="chat">
    <attributes>
      <string name="IdName" value="spaceChat" />
      <rect name="Rect" value="4, -170, 512, -36" />
      <rectf name="PercRect" value="0.0, 1.0, 0.0, 1.0" />
      <rect name="TabLayoutRect" value="4, -37, -600, 0" />
      <rect name="TabLayoutPercRect" value="0.0, 1.0, 1.0, 1.0" />
    </attributes>
    <bindings>
      <slot name="ChatActivateInput" signal="key_pressed_enter" id="DeviceKeyboard" />
    </bindings>
</element>

Should indeed be
Code:
<element type="chat">
    <attributes>
      <string name="IdName" value="spaceChat" />
      <rect name="Rect" value="4, -170, 512, -36" />
      <rectf name="PercRect" value="0.0, 1.0, 0.0, 1.0" />
      <rect name="TabLayoutRect" value="4, -37, -600, 0" />
      <rectf name="TabLayoutPercRect" value="0.0, 1.0, 1.0, 1.0" />
    </attributes>
    <bindings>
      <slot name="ChatActivateInput" signal="key_pressed_enter" id="DeviceKeyboard" />
    </bindings>
</element>
This should be replaced in the SVN, although by possibly pure luck it doesn't actually make a noticeable difference on the default UI, it was causing conflicts with elements around it when they were edited/removed.

While that explains why my test on bringing it down below turned into a horrible mess of puke and shit, it still doesn't fix all the problem at hand sadly.

--------------------------------------

1) Allow the binding <signal name="moved" slot="DialogMoved" id="LogicManager" /> to record dimensions aswell. The relevant file which this information is stored is currently .../res/dialogs.xml

2) Although it's an annoyance (and I still have yet to confirm if it is indeed the issue) reducing widths to 99% seems to take care of the issue at hand. More tests tomorrow to see if this is actually the case though!

3) With the code above now corrected, which is what my test code was based on, it gives me a better understanding at what's going on when rescaling. The issue still is with the tab rectangle, however now it's easier to see what it is.

In the below photo is the 'first run' appearance of the movable/scrollable chat. At first it looks good other than a little bit of bad fitting on my part (there's a fine line where it's not quite matched up)
Attachment:
Chat.jpg

Moving on, attempting to resize it vertically gives some pretty terrific glitches.
Attachment:
Chat2.jpg

Attachment:
Chat3.jpg

You'll notice that the distance from the top of the window to the tabs is always the same. So I can only assume that somewhere in the hardcode it is giving an absolute value, or the initial height on startup is not being changed dynamically when the window is changed.
Code:
<element type="customWindow">
   <!-- Container -->
   <attributes>
      <string name="IdName" value="_chatContainer" />
      <rect name="Rect" value="0, 0, 0, 0" />
      <rectf name="PercRect" value="0.25, 0.25, 0.75, 0.75" />
      <int name="Flags" value="0" />
      <int name="ResizeBorderWidth" value="1" />
      <bool name="TopResizable" value="true" />
      <bool name="RightResizable" value="true" />
      <bool name="BottomResizable" value="true" />
      <bool name="LeftResizable" value="true" />
      <bool name="Movable" value="true" />
      <bool name="DrawBackground" value="true" />
   </attributes>
   <bindings>
      <signal name="moved" slot="DialogMoved" id="LogicManager" />
   </bindings>

   <element type="chat">
   <!-- Chat Box -->
      <attributes>
         <string name="IdName" value="spaceChat" />
         <rect name="Rect" value="0, 0, 0, 0" />
         <!-- Off by 0.1% allows the window to resize more fluidly? Related to the resize border widths likely.  -->
         <rectf name="PercRect" value="0.0001, 0.0001, 0.9999, 0.9000" /> <!-- to 90%, to make room for the tab rect below it -->
         <rect name="TabLayoutRect" value="0, 0, 0, 0" />
         <rectf name="TabLayoutPercRect" value="0.0001, 0.9001, 0.9999, 0.9999" />
      </attributes>
      <bindings>
         <slot name="ChatActivateInput" signal="key_pressed_enter" id="DeviceKeyboard" />
      </bindings>
   </element>

</element>


From what I understand about the rectangle percentage system is that in the above example the window element is to be divided into two regions.

The first region works correctly, and always covers the top 90% of the window completely.

The second region however (TabLayoutRect) is not correctly covering the bottom 10%, as it doesn't seem to stay within the remaining region.


You do not have the required permissions to view the files attached to this post.


Tue Mar 08, 2011 1:01 am
Profile E-mail
Member
 

Team: Dark Traders
Main: Aredes
Level: 2142
Class: Shield Monkey

Joined: Tue Apr 27, 2010 5:15 pm
Post Re: Chat Bar Issues.
So looking back at this, I think some of my code was immature (was still pretty green at understanding the syntax after all), but improving upon the code above I have put together a demo that should strongly show that the chat 'TabLayout' is still an issue.

In the below code, the main chat, [spaceChat], is set to take up 100% of the window holding it, [customWindow], and the bottom is raised 32 pixels from the bottom. This allows there to always be a 36 pixel gap at the bottom of [customWindow] regardless of size for the tabs to fit in. (this works)

In the same code, the tab rectangle, (TabLayout) is set to move down 100% of the [customWindow], and then go up 37 pixels. This allows the tabs to go upwards (and match up graphically) into the slot left by the main chat box. (this works)

The problem is that (TabLayout) doesn't 'notice' when the parent [spaceChat], or [customWindow] dimensions change, so when they do, it still remains the same distance from the top of [customWindow] as at initialization. You can visually confirm this by simply enlarging/minimizing the chat box vertically or horizontally.

Attachment:
zomgChatFixIt!.png
Code:
<element type="customWindow">
   <attributes>
      <string name="IdName" value="chatMobile_shell" />
      <rect name="Rect" value="0, 0, 550, 300" />
      <int name="Flags" value="0" />
      <int name="ResizeBorderWidth" value="2" />
      <bool name="TopResizable" value="true" />
      <bool name="RightResizable" value="true" />
      <bool name="BottomResizable" value="true" />
      <bool name="LeftResizable" value="true" />
      <bool name="Movable" value="true" />
   </attributes>
   <bindings>
      <signal name="moved" slot="DialogMoved" id="LogicManager" />
   </bindings>
      
   <element type="chat">
      <attributes>
         <string name="IdName" value="spaceChat" />
         <rect name="Rect" value="2,2,-2,-36" />
         <rectf name="PercRect" value="0,0,1,1" />
         <rectf name="TabLayoutPercRect" value="0,1,1,1" />
         <rect name="TabLayoutRect" value="2, -37, -2, -2" />
      </attributes>
      <bindings>
         <slot name="ChatActivateInput" signal="key_pressed_enter" id="DeviceKeyboard" />
      </bindings>   
   </element>
</element>


You do not have the required permissions to view the files attached to this post.


Sat Mar 12, 2011 4:56 pm
Profile E-mail
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB © phpBB Group.