FleetWnd: Adding divider between data panels

Programmers discuss here anything related to FreeOrion programming. Primarily for the developers to discuss.

Moderator: Committer

Message
Author
User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

Re: FleetWnd: Adding divider between data panels

#31 Post by Geoff the Medio »

neuro wrote:The background is black and the tab itself is "GG::Grey".
You shouldn't hard-code any colours. Splitter should have one or two constructor parameters that specify the colours to use, similar to GG::Scroll or GG::Button.
Geoff said make everything in GL but I'm not sure what that means.
I meant using OpenGL rendering commands, like is done for almost every GG GUI class in the Render function, either directly or by calling helper functions to render a rectangle or circle.
Might have to find an example somewhere that draws dots.
There's a FlatCircle function for circles in DrawUtil.h.

Edit: It occurs to me that there should be a distinction made between how the GG::Splitter renders itself, and how the Splitter used in the FreeOrion GUI renders. The default GG behaviour should be very minimal, like most default GG Controls' rendering. There can then be a FreeOrion-specific class derived from Splitter which implements something fancier to be more consistent with the rest of the FreeOrion GUI.

I was thinking that the splitter bar could have some parallel bars, similar to the bars at the bottom right of resizable windows, to indicate its draggability.
Attachments
Splitter with bars on tab to indicate its draggability, similar to the resize tab bars at the bottom right of windows.
Splitter with bars on tab to indicate its draggability, similar to the resize tab bars at the bottom right of windows.
FO_Splitter_Bars_On_Tab.png (33.77 KiB) Viewed 657 times

neuro
Space Squid
Posts: 74
Joined: Sun Mar 07, 2010 10:17 pm

Re: FleetWnd: Adding divider between data panels

#32 Post by neuro »

You shouldn't hard-code any colours. Splitter should have one or two constructor parameters that specify the colours to use, similar to GG::Scroll or GG::Button.
The class definition includes taking two arguments that set the background color and tab color property. They aren't hard-coded. And are exactly as you describe them.
Geoff the Medio wrote: Edit: It occurs to me that there should be a distinction made between how the GG::Splitter renders itself, and how the Splitter used in the FreeOrion GUI renders. The default GG behaviour should be very minimal, like most default GG Controls' rendering.
This echoes what I posted earlier: consider that this is a GG control, will be used in a variety of views, etc.
There can then be a FreeOrion-specific class derived from Splitter which implements something fancier to be more consistent with the rest of the FreeOrion GUI.
Sure? I'm open to whatever you guys want designed and can create an extended class on top to style the splitter. Honestly, after working with several GUI component frameworks in a variety of languages (e.g. Flex, iOS, Android, .net, etc.) there's usually a "default" component visualization implementation, with the assumption any app using the component can extend it to make it custom. I'd really recommend Tzlaine review the class first and the visualization: maybe the 3 dots/3 lines works for GG as a basic separator and we're just implementing the "default" version.

Or Geoff you can review the class to see if how it's defined makes it both extensible and safe. I'm not sure I'm coding as defensively as I'd like.

So immediate takeaways:

1. Let me know what visual we want : lines or dots
2. I'll pm the class to G and T if they have time to code review it.

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

Re: FleetWnd: Adding divider between data panels

#33 Post by Geoff the Medio »

neuro wrote:I'd really recommend Tzlaine review the class first and the visualization: maybe the 3 dots/3 lines works for GG as a basic separator and we're just implementing the "default" version.
tzlaine has final say, but my impression is that most GG classes' default Render is very minimal. Even the three lines or dots is probably something that would only appear in the FreeOrion variant. For GG internally, just a flat rectangle would probably suffice.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

Re: FleetWnd: Adding divider between data panels

#34 Post by pd »

Here is the original mockup:
Image


Here's something else, using bars.

Image Image

Notice that the splitter is lighter than the surrounding ui to indicate it's a different, movable element. What might further help with this is, that it's separated at its borders, see the detail on the right. Also, some mouseover action, similar to a button would be nice.

the entire splitter(not sure how to handle changing widths..)
Image


the double bars
Image


just one bar
Image


vertical:

Image

Image

Image

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: FleetWnd: Adding divider between data panels

#35 Post by eleazar »

neuro wrote:1. Let me know what visual we want : lines or dots...
Go with lines, that's more consistent with the corner-draggy thing.
window slider.png
window slider.png (34.82 KiB) Viewed 648 times
pd wrote:Here is the original mockup:
Notice that the splitter is lighter than the surrounding ui to indicate it's a different, movable element.
That's not necessary. I tend to notice the GUI of software i use, and i can't think of one that felt the need to highlight a movable divider so boldly. It also draws too much attention to itself. The symbol is sufficient, dots, lines whatever. Plenty of good interfaces don't highlight that a divider is moveable at all, except by the cursor change.

Just now i commited a "vertical-resize.png" to the cursors folder, to use whenever the cursor is over a draggle divider if you can.
vertical-resize.png
vertical-resize.png (532 Bytes) Viewed 648 times
Also as discussed earlier we don't need chopped up PNGs, these things are drawn as vectors by GG.

For the colors, we shouldn't need to define new colors. Existing colors definitions should work so that if the overall colors are tweaked, the divider will change with it.
The above example uses 4 colors found elsewhere in the standard GUI. Below i show where else in the GUI the same color definition is used. Can you work from that?
window slider-close.jpg
window slider-close.jpg (109.82 KiB) Viewed 648 times

neuro
Space Squid
Posts: 74
Joined: Sun Mar 07, 2010 10:17 pm

Re: FleetWnd: Adding divider between data panels

#36 Post by neuro »

Hey Guys,

I'm working on implementing these exact specs in OpenGL. It's... a bit trickier than anticipated.

Basically, I need the m_tab / button object because the user needs to be able to click and drag on SOMETHING to be able to resize and position the two windows.

If I remove the m_tab, then I'll have to calculate the middle area that the player clicks on, and drag it up or down / repositioning the two windows...which is a bit difficult.

If I keep the tab, I've got a tab on top of the two lines, even if they're rendered. I've been able to render the lines, but positioning them was odd, because the entire Splitter includes two windows... so they were actually covered by the windows and tab for a while (which lead to some befuddlement on my part, until I realized what was going on.)

If I keep the tab and try to "hide" it (change the color to match the background or some such), I still need to create / render these two lines to show up on TOP of the tab. Still looking into how this might work...basically set the alpha property of the tab but still have it enabled / selectable.

Otherwise, I'm looking into skinning up the tab to have the two lines on top of it, or rendered with it, by extending the m_tab button object and giving it a skin. In any case, uh, a little tricker to get that design.

But I made it 8px high! So that's a plus. When I figure out this skinning, I'll post and see what you guys think!

Post Reply