Feature: Multi-Column List Widgets

[jitspoe]

Right now things like the serverlist and scoreboard are just single-column lists hacked to look like multi-column lists, but without the flexibility.  For some of the features requested, we need true multi-column lists with the ability to sort columns, etc.

http://dplogin.com/dplogin/featurevote/feature.php?id=10040

[Cobo]

depends on new menu format?

[webhead]

oh man. 100% for this feature.
jits, are you remembering to vote for the features you suggest?

[jitspoe]

oh man. 100% for this feature.
jits, are you remembering to vote for the features you suggest?

I made this because another feature depends on it.  I don't think it's critical for the immediate future.

[webhead]

yep, now that you started that "save my sanity" thread, i decided to remove my vote for this feature.

[jitspoe]

Well, I don't care about the votes so much as the requests to add features into the system.

[webhead]

but still, i suppose it would help if people only voted for items they see as most critical. right?

[Zorchenhimer]

but still, i suppose it would help if people only voted for items they see as most critical. right?

Or vote down the ones they don't see as critical.

[xav93]

I made this because another feature depends on it.

which feature is it that relies on the multi-column list?

[Zorchenhimer]

|| Required for ||

    * #10041 Improved In-Game Server List

[xrichardx]

Well, I don't want to give anyone any hope, but this:

Code: [Select]

widget
type listview
begin rows 6
-2 5 6 4 7 2 5
-1 "5" "6" "4" "7" "2" "chars"

0 "a" "b" "c" "d" "e" "fooo"
1 "g" "h" "i" "j" "k" "lmao"
2 "-----" "------" "----" "-------" "--" "-----"
3 "Hey" "there" "!" "multi " "co" "lumn."
end

currently gives me this


Well, it doesnt have any callbacks or functionality like selecting an entry, sorting, scrolling or automatic text truncation, but



If I feel like working on this, I might add some functionality and maybe even an implementation for the serverlist. Patch file for current status attached.

Edit: removed attachment. See later posts for more current progress.

[jitspoe]

Nice!  This could be really useful for the scoreboard.

[xrichardx]

I can't resist your enthusiasm right there  

current progress:
-click callback / selecting / executing an assigned command ✓
-vertical scrolling ✓
-text truncation ✓
-sorting for text ✓ (for numbers I need to change the comparation function a little bit as strcmp() says that "25" is bigger than "100")

todo: (Edit: sorted by priorities)
likely:
-scores, serverlist, maplist implementation
-cleanup
-make hover image stretch over all elements in the hovered row

less likely:
-horizontal scrolling
-resizing of individual columns?
-other widgets as items? (like pictures, checkboxes, binds etc.)
-give the possibility of having a single item select and a full row select mode? I really can't imagine a situation where you would need that.

Code: [Select]

widget
type listview
yrel 32
xcent -10
begin rows 4
-2 9 9 9 9
-1 "column 1" "column 2" "column 3" "column 4"
"row 1" "a" "g" "e" "d"
"row 2" "b" "f" "f" "c"
"row 3" "c" "e" "g" "b"
"row 4" "d" "d" "a" "a"
"row 5" "e" "c" "b" "g"
"row 6" "f" "b" "c" "f"
"row 7" "g" "a" "d" "e"
end
rows 7
cvar listview_cvar
command "echo $listview_cvar$ clicked"

gives

[jitspoe]

I'm not sure if things like horizontal scrolling, other widget support, and resizing are necessary.  Just having separate columns is a huge step.

Also, I don't know if you saw any of the bpic (border pic) stuff I added for the fancier button borders.  It basically lets you use a single image and specify different parts of it for all the borders (and it stretches to fit).  It may or may not be useful.  At some point, I plan to revamp the existing menu widgets to use this, so they're more efficient and look nicer.

Keep up the good work!

[xrichardx]

Progress update:
basic "listsource serverlist" implemented.

Code: [Select]

widget
type listview
listsource "serverlist"
name "serverlist"
yrel 32
xcent -250
begin rows 4
-2 40 5 15 7
-1 "Server Name" "Ping" "Map" "Players"
end
rows 15
cvar listview_cvar
command "echo $listview_cvar$ clicked"

gives (this is sorted for players)

[xrichardx]

I fixed some issues with the serverlist and implemented getting the scores as the listsource. The patch and the two modified menu files are in the attached zip file.

Also, I just realized I didn't answer to your comment on the bpic stuff. Currently, I'm creating one background widget for each column heading and one background widget for each column. To create them, I just use the create_background function you already used for the single list control, so I think I'm up to date there.

Still todo (probably I will only do these if someone really wants them):
- stretch the hover image over all columns? Could be nice but is not a must in my opinion.
- maplist implementation? I think the current list approach is OK here.
- horizontal scrolling? Could be useful to show longer servernames when the menu must still work in 640x480.
- column resizing? Could be useful, but for me it wont be necessary as there is enough space in higher resolutions.

Screens:

[xrichardx]

I thought about giving this a filter ability. I would add a widget property called "filtercvar" or similar so you could have this listview with "filtercvar serverlist_filter" and a textbox directly below which has "cvar serverlist_filter". Then, whenever someone enters text there, the server listview would only show columns that contain the filter. My question is: Would you rather save the filtered content as much as possible (AKA have another char ***listview_list and **listview_map to store filtered results in the widget struct) which results in higher RAM usage or would you rather apply the filter again everytime the widget is modified (AKA have these filtered list just locally where the subwidgets are created) which would result in higher CPU usage?

[xrichardx]

Alright I hope I got every edge case covered. I uploaded the current progress to the CVS. Commit message:

Multi column list widgets ("type listview"), supports listsource "scores" and listsource "serverlist".
Data should be present in a "begin multicolumn N ... end" block, where N is the number of columns. For each column, a cvar value followed by the captions for each field are expected. The first gives column should contain the width in chars for each column, the second one should contain the columns captions. Both are also expected to have a value for the cvar although it will never be set to make the block more uniform. Use the "rows" attribute so change the widgets height. See the forum thread for more examples including a scoreboard and a serverbrowser menu. Minimal example:

Code: [Select]

widget
type listview rows 7 cvar listview_cvar command "echo $listview_cvar clicked"
begin multicolumn 4
-2 9 9 9 9
-1 "column 1" "column 2" "column 3" "column 4"
"row 1" "a" "g" "e" "d"
"row 2" "b" "f" "f" "c"
end


More examples:
example for the menu play_joinserver.txt (instead of the old select widget):

Code: [Select]

widget
type listview
listsource "serverlist"
name "serverlist"
y 66
xcent 0
halign center

begin multicolumn 4
-2 25 4 12 5
-1 "Server Name" "Ping" "Map" "Plyrs"
end

rows 12
cvar menu_server

example for the menu scores.txt (instead of the old select widget):

Code: [Select]

widget
yrel 10
xcent 0
halign center
type listview
name "scores"
listsource "scores"
cvar menu_scores
rows 21
begin multicolumn 9
-2 1 1 20 3 3 3 3 3 4
-1 "F" "T" "Name" "Png" "Kl" "Dt" "G" "C" "Time"
end


random example to demonstrate sorting:

Code: [Select]

widget
type listview
yrel 32
xcent -10
begin multicolumn 4
-2 9 9 9 9
-1 "column 1" "column 2" "column 3" "column 4"
"row 1" "a" "g" "e" "d"
"row 2" "b" "f" "f" "c"
"row 3" "c" "e" "g" "b"
"row 4" "d" "d" "a" "a"
"row 5" "e" "c" "b" "g"
"row 6" "f" "b" "c" "f"
"row 7" "g" "a" "d" "e"
end
rows 7
cvar listview_cvar
command "echo $listview_cvar$ clicked"


If there is anything I did not think about and it gives any errors (which hopefully doesn't happen), just revert to the old versions of the files:
cl_scores.c (revert to 1.22)
cl_serverlist.c (revert to 1.34)
menu.c (revert to 1.36)
menu.h (revert to 1.95)

[Ace]

The two column lines near the "alive" and "team" look cluttered and kind of bad (not sure if changed since november screenies)

[xrichardx]

Listview widget attribute: "lvpadding" or "lvcolseppadding": Will change the padding around column separators in a listview widget.
"lvpadding 5" would look like this:




/Edit: I also fixed that horizontal aligning issue that you can see in these screenshots.