FleetWnd: Adding divider between data panels

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

Moderator: Committer

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

FleetWnd: Adding divider between data panels

#1 Post by neuro »

Hey all!

Working on my 2nd fix:
* Figure out a good way to move up and down the partition between the top third of the panel that shows fleets and the bottom panel that shows ships within the selected fleet. Some way to drag a partition would be appropriate. This needs to work whether or not there is a new fleet drop target in between the two.

I shared this with Geoff, but essentially:
My "solution" involves 4 steps:
  • Rearrange the UI of FleetWnd to put the "New Fleet" section at the bottom (easier to setup a divider between the two data ListBoxes : fleet + detail; also, useful to use bottom of window as a place for any kind of controls)
  • Create a Divider class (based on Scoll Class: already has lot of the structure needed.) http://gigi.sourceforge.net/doxygen/cla ... croll.html
  • Place Divider class between the two ListBoxes.
  • Setup an event listener for when the user clicks-drags-releases the Divider. On drag, update the height of the two ListBoxes and refresh the layout (essentially re-draw the window view). On release, detach the listener.
My recommendation for a "divider" class comes from my Flex UI experience, i.e. HDividedBox or VDividedBox.
http://livedocs.adobe.com/flex/3/html/h ... ts_07.html
http://blog.flexexamples.com/2007/10/09 ... -container

My recommendation for moving the UI actionable elements to the bottom comes from a UI/UX concern. Any "hotspot-actionable" areas should really be put together in a way that's not in the way of data-display areas... i.e. put all "menu/action items on the top or bottom" and all "content/data" in grouped collection. For a user's experience, you want to be able to scan the page, top-bottom, and then make actionable decisions based on that data. i.e. select from the list, drag to the "action" portion; check off who to scrap, and action the rest into a new fleet. Making it move in-between is a little... uncohesive.

Geoff's given me some thoughts, and recommended I share with the community. Let me know what your thoughts are. I'd really dig getting this one figured out and coded.

Proposed new view (already re-layed out the UI FleetWnd.cpp)
Image

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

#2 Post by pd »

I appreciate this change a lot, very nice work! The devider could be made more obvious, by doing something like this:

Image

You seem to have changed the colors as well. Personally, I prefer the previous(as in my screenshot) version - better contrast.

Tell me if you need a png for this. In case you want to draw this by code, I've provided a zoomed in cutout.

Something else I noticed with the current fleet window: You can't drag items, when you click on the meter icons or numbers. Does this have to do with the tooltips? Can it be changed?

I'm also thinking about putting buttons for scrap, rename, etc at the bottom, probably below the new fleet drop area - not sure if it's necessary though.

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

#3 Post by Geoff the Medio »

pd wrote:You seem to have changed the colors as well. Personally, I prefer the previous(as in my screenshot) version - better contrast.
The colours are all set by options on the options screen Colors tab. The sceenshot neuro posted appears to be using the current defaults.

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

#4 Post by pd »

That's odd, I've never changed them.

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

#5 Post by Geoff the Medio »

If you have an old config.xml, the old defaults might still be stored in it.

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

#6 Post by pd »

Indeed, thanks for the hint. I've dabbled a little with the color settings. I'm ashamed to say, I had no idea to this day of how flexible and powerful those color switches and the entire UI are.

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

#7 Post by Geoff the Medio »

Another hint is to right-click on the colour selectors in the options wnd and click the resulting popup to reset to the default colour for that option.
pd wrote:Something else I noticed with the current fleet window: You can't drag items, when you click on the meter icons or numbers. Does this have to do with the tooltips? Can it be changed?
I've noticed this as well several months ago, and tried unsuccessfully to fix it, and mentioned it to tzlaine, but it didn't get any attention. It initially was tooltip related, although things have changed significantly since then so that I'm not sure whether it depends on tooltips being added to the statistic icons.

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

#8 Post by Geoff the Medio »

neuro in a pm wrote:
How is Divider different from GG::Scroll? Just the rendering?
Divider's whole body is a "tab", that's selectable. It's basically a selectable box that has a top/bottom range. I'm just using the Scroll class as a starter, not as the base, since it shares some of the same properties (top/bottom bounds, updates on drag, etc.) It'll be a custom new class possibly.
What do you mean by selectable? Why would a user want to "select" a draggable tab, rather than just drag it?

What will Divider do that a differently-rendered Scroll wouldn't?
I imagine you could put a Scroll-like object behind the two lists (and/or the new fleet panel) that extends the whole height of the FleetWnd, and just have the scroll's tab be in between... That way, the range of the scroll constrains the range of the tab nicely.
Wow...that's kind of a cool way. I would feel odd about having an object behind the other objects for fear of overlap. But that might work, a long horizontal tab that's selectable/draggable, and updates the layout.
The Scroll, or a customized version of it, could be made to not render anything except its draggable tab.
I was thinking that if there is a new fleet panel in place, the draggable tabs for layout adjusting could be above and below it, or just below it, between the new fleet panel and the ships list.
Right, normally, I'd agree, and this "draggable tab" is the "Divider" class I'm proposing. But if it's just resizing one window, it would just change the size of one panel view, instead of adding more to one, and subtracting from the other. Why would you resize the "New Fleet Panel / Add a Fleet hit area? Doesn't show any more data, just changes the hit area which isn't good ui. But a divider tab could use the same screen area, with two or more windows, and dynamically resize based on its position relative to the whole.
I don't think you understand what I mean, and I definitely don't understand what you mean.

To hopefully clarify my meaning, I was suggest that if the new fleet drop box was left where it is now (which I don't necessarily think needs to be the case), then there could be areas above and below it - between it and the list above it and between it and the list below it - that can be dragged, which would not resize the new fleet drop box, but would resize the two lists. Essentially you'd be dragging around the new fleet box, with the list above or below it resizing to fill in the space between the top of the fleetwnd and it or the bottom of the fleetwnd and it.

Alternatively, there could just be a draggable spot below the new fleet drop box, and draggin this would shift the new fleet drop box around without resizing the drop box, but resizing the two lists to fill the space above and below the drop box.

tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

Re: FleetWnd: Adding divider between data panels

#9 Post by tzlaine »

neuro wrote:Hey all!

Working on my 2nd fix:
* Figure out a good way to move up and down the partition between the top third of the panel that shows fleets and the bottom panel that shows ships within the selected fleet. Some way to drag a partition would be appropriate. This needs to work whether or not there is a new fleet drop target in between the two.

I shared this with Geoff, but essentially:
My "solution" involves 4 steps:
  • Rearrange the UI of FleetWnd to put the "New Fleet" section at the bottom (easier to setup a divider between the two data ListBoxes : fleet + detail; also, useful to use bottom of window as a place for any kind of controls)
  • Create a Divider class (based on Scoll Class: already has lot of the structure needed.) http://gigi.sourceforge.net/doxygen/cla ... croll.html
I think this is a suboptimal choice. You'd be hammering that square peg into that round hole pretty hard -- Scroll is not well-suited to what you want to do. I think you'll be better off making a completely new GG::Splitter class. It should accept N GG::Wnds, and place a splitter bar between each. It could use a top-level GG::Layout that would do all the heavy lifting. For extra credit, make it work for horizontal or vertical. Thanks for taking this on!

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

Re: FleetWnd: Adding divider between data panels

#10 Post by neuro »

Hey! Sooo sorry not replying sooner. I was wondering why no one responded to my post and just checked. Turns out I didn't turn on my notifications and an awesome discussion broke out! Bawesome.

Ok, first thanks a lot for helping me with this!
Next, here are my responses, in order of post:

pd:
Tell me if you need a png for this. In case you want to draw this by code, I've provided a zoomed in cutout.
Yep, could use a png. That'd be helpful. I was going to just use a color background until something else came along. That'd be most helpful, thank you! The only issue I can think is that this image needs to be rescalable for say windows of a different width size. Basically, it'd be nice to have a class you can drop into any window to partition them. So the "divider" draggable element needs to have a bit of logic to make that middle piece stay in the middle and not squish it.

Any png you give me I can slice to do that, I imagine. That design is awesome: 3 dots, a nice color bkrd. :)
Something else I noticed with the current fleet window: You can't drag items, when you click on the meter icons or numbers. Does this have to do with the tooltips? Can it be changed?
Is this a bug? Can it be put on the list of Programming Tasks? I could tackle this next, based on what the priority is, or what Geoff / Tzlaine says.

Geoff the Medio:
What do you mean by selectable? Why would a user want to "select" a draggable tab, rather than just drag it?
What will Divider do that a differently-rendered Scroll wouldn't?
Select+Drag = Draggable. I use "select" as language to indicate the user can click on it. I meant what you mean about "Draggable".
"differently-rendered Scroll" is the key. I don't believe the Scroll class can be stretched to do this. It's pushing what a "scroll" is meant to do outside the bounds of a Scroll, in my assessment of the language... Scroll is meant to be able to scroll through data that overflows a container. Whereas this "Divider" class is meant to allow a user to rearrange 2 views, to show / hide more of the view (which will trigger their "Scroll" elements to show in the ListBox.
Alternatively, there could just be a draggable spot below the new fleet drop box, and draggin this would shift the new fleet drop box around without resizing the drop box, but resizing the two lists to fill the space above and below the drop box.
Ah... I think I understand. In your solution, dragging to "shorten" or "lengthen" a window would cause the entire window to resize by either:
a) resizing the entire window to shrink / grow, or
b) shrink / grow another window element, i.e. the two list boxes

So option (b) maps this dragger to cause this shrink / grow two window elements. That's cool if you wanted to hard-code it to work JUST for this FleetWnd.cpp.

But I'm thinking a class that you can use anywhere, for any 2 windows. That brings me to tzlaine
I think this is a suboptimal choice. You'd be hammering that square peg into that round hole pretty hard -- Scroll is not well-suited to what you want to do. I think you'll be better off making a completely new GG::Splitter class. It should accept N GG::Wnds, and place a splitter bar between each. It could use a top-level GG::Layout that would do all the heavy lifting. For extra credit, make it work for horizontal or vertical. Thanks for taking this on!
Dude, that's exactly what I want the Divider class to do. Your Splitter = My Divider. I asked Geoff if I should ask ya about this, since GG is your realm, but that's the solution I'm thinking. If you checkout the flex links, that's almost how HDividedBox / VDividedBox work: they're actually a container that takes in any visual objects and puts a "divider" (similar to tab in Scroll) between. Dragging resizes the elements. I was thinking small, just a Divider that can handle taking in two window objects, and drag, with a bounds to it. But your Splitter box sounds like a more articulate version of what I'm talkin' about. Hence, looking at the Scroll class as guide: already has a draggable area (tab / divider).

And yeah, should have a parameter for layout... horiz / vert. Double Dig.

Sorry again for not responding. I didn't setup notifications for this post. This is awesome.

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

#11 Post by Geoff the Medio »

neuro wrote:
pd wrote:Tell me if you need a png for this. In case you want to draw this by code, I've provided a zoomed in cutout.
That'd be most helpful, thank you! The only issue I can think is that this image needs to be rescalable for say windows of a different width size. Basically, it'd be nice to have a class you can drop into any window to partition them. So the "divider" draggable element needs to have a bit of logic to make that middle piece stay in the middle and not squish it.

Any png you give me I can slice to do that, I imagine.
It would probably be simpler to render the divider in code, rather than stitching together multiple textures. The design shouldn't be complicated to code, and rendering in code makes it more flexible and resizable.

It's also, arguably, more "elegant" to have a code-rendered base version of the class that can be modified by making a derived class that uses textures to render itself. The base version won't require textures to be stored, but the derived version would have the option if required. If the base version used a texture, then a derived version that didn't need a texture would still have the base version's pointers to textures in it even though it doesn't need them.
Something else I noticed with the current fleet window: You can't drag items, when you click on the meter icons or numbers. Does this have to do with the tooltips? Can it be changed?
Is this a bug? Can it be put on the list of Programming Tasks? I could tackle this next, based on what the priority is, or what Geoff / Tzlaine says.
As far as I know it's a limitation of GiGi at the moment, which could be considered a bug. I suspect that fixing it will be difficult, as it might get into the guts of how clicks are processes and filtered by GiGi. If you can figure it out or tzlaine wants to explain it, then feel free to try, though...
I don't believe the Scroll class can be stretched to do this. It's pushing what a "scroll" is meant to do outside the bounds of a Scroll, in my assessment of the language... Scroll is meant to be able to scroll through data that overflows a container.
I'm probably mixing up GG::Slider and GG::Scroll, but in either case, the controls in my mind just provide a one-axis movable tab constrained to a certain range, and signals to indicate where and when it moved. What you do with those signals doesn't have any limits, and they can be derived from to modify their appearance quite a bit...

But it seems not to matter if you and tzlaine prefer Splitter or Divider that work via GG::Layout.
neuro wrote:Sorry again for not responding. I didn't setup notifications for this post. This is awesome.
Waiting one day to respond to a thread isn't something you need to apologize for...

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

#12 Post by eleazar »

greetings neuro!
it's great to see someone working on the GUI

There's the general GUI restylization thread which should be referenced.

Not much of it has been implemented yet , but it would be nice to aim for something consistent as various GUI bits are updated and expanded.

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

Re: FleetWnd: Adding divider between data panels

#13 Post by neuro »

Hey Guys!

I had a really great discussion with Tzlaine, about this new "GG:Splitter" class which will be able to:
  • start as empty (i.e. create a new splitter wnd)
  • add a wnd into it (if first window, just add wnd, if there already is a window, then add a separator tab, and the window
  • tabs will respond to drag events, update the drag position, and update the relative windows that the tab separates (e.g. tab 0 separates windows 0 and windows 1; tab 1 separates windows 1 and windows 2; etc.)
  • creating the splitter wnd obj include a parameter for HORIZONTAL or VERTICAL
That's it for v.1.0! After that, we can figure out how to draw it, style it, etc. and TEST TEST TEST it on windows horizontal + vertical.

Just thought I'd summate our discussion.

Dom

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

#14 Post by pd »

I'm wondering if there's progress made here? It started out quite promissing.

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

#15 Post by Geoff the Medio »

I talked to neuro a few weeks ago by pm. He said he does plan to work on this, but will probably be busy with other things until June.

Post Reply