Designers wanted

[t4nk]

Posting in this forum (and not dev forum) for better visibility. I assume most players dont read dev forum.
So, I'm doing the menus for new ui:

https://postimg.org/image/rne10v7ad/

https://postimg.org/image/i2k43mvnx/

https://postimg.org/image/fvbsxdtw9/

If you have some ideas about how to design these menus, go ahead! If you have some pictures of how Angband's menus should look like, post them! (or you can "draw" these menus in CODE tags...)
Maybe some want to ask "what's wrong with old menus"? Well, they're ugly, for one thing They just don't look good when they have borders, for example.
Note that this thread is not about new features, but about how to display contents of existing menus, textblocks, panels. For example: inventory, equipment, spell books, player info (the 'C' command), knowledge screens, side bar, etc.
Also note that I call the new ui "text ui 2" and it's very much a text ui - all menus consist of text and nothing else (just like the old ui).
If you don't have any suggestions, I'll do everything how I like it and then you'll have to blame only yourselves

[takkaria]

If you have some ideas about how to design these menus, go ahead! If you have some pictures of how Angband's menus should look like, post them! (or you can "draw" these menus in CODE tags...)

Maybe some want to ask "what's wrong with old menus"? Well, they're ugly, for one thing They just don't look good when they have borders, for example.

Some thoughts:

I'd suggest switching from using '=' and '|' to using an actual line drawn as non-text. The two bars of '=' is visually distracting IMO.

I'd say that generally the padding around the pop-up terms is off. I don't know if it's using the width/height of one character as padding but I think it should be reduced. The spell book display seems to have a line of padding at the top and bottom, but the knowledge screen doesn't, and the inventory just has one at the bottom. That takes up unnecessary screen space; it needs to be some fraction of a normal character's size I think.

I'd also suggest reimplementing some kind of off-centre display so that the menus don't open over the middle of the screen (which is where the player is likely to be and thus the situation they're in the middle of).

For headers and footers, e.g. 'Inventory' / 'Knowledge - known objects' / the line where what keys you can press are listed, I'd suggest drawing them with a gray background in the frontend side of things, and then have a narrower gap between that line and the following one.

Something like these:

https://imgur.com/a/3gzzD

https://imgur.com/a/QeJSq

I'd say the padding was better on the first one, but you get the idea!

[t4nk]

Some thoughts:

I'd suggest switching from using '=' and '|' to using an actual line drawn as non-text. The two bars of '=' is visually distracting IMO.

That's right, in fact the spell book menu is really ugly and was the main reason for posting this thread! I do plan some simple drawing API ("draw a line from point a to point b" - the main user of it is likely to be the 'i' command), but the problem is with ncurses... Well, it can just ignore it, or maybe try to do something with pseudographics (along the lines of window_make(), perhaps using more suitable chars instead of the ASCII ones).

I'd say that generally the padding around the pop-up terms is off. I don't know if it's using the width/height of one character as padding but I think it should be reduced. The spell book display seems to have a line of padding at the top and bottom, but the knowledge screen doesn't, and the inventory just has one at the bottom. That takes up unnecessary screen space; it needs to be some fraction of a normal character's size I think.

Doing it (padding) on the frontend's side is reasonable... like this, perhaps?

https://postimg.org/image/vev51hz6b/

https://postimg.org/image/fxtbdhewh/

I guess ncurses can do it like in Angband currently, which looks alright, because ncurses won't draw any borders anyway.

I'd also suggest reimplementing some kind of off-centre display so that the menus don't open over the middle of the screen (which is where the player is likely to be and thus the situation they're in the middle of).

They are already at the top of the screen! (well, the small ones - spells, etc. The knowledge screen/options/the 'C' screen are in the center). Dungeon Crawl opens all menus in the center, and I've never heard anyone complaining about this. It doesn't open spell menu by default, but Angband's spell menus are not big (and kind of a pain to use without macros anyway).

For headers and footers, e.g. 'Inventory' / 'Knowledge - known objects' / the line where what keys you can press are listed, I'd suggest drawing them with a gray background in the frontend side of things, and then have a narrower gap between that line and the following one.

Something like these:

https://imgur.com/a/3gzzD

https://imgur.com/a/QeJSq

Well, gray background can be done in the text ui (or any other background), but that looks like multiple windows again.. I'd rather avoid this. Users - the ones that don't play Angband, that is - generally hate multiple windows (just look at all other games, or software in general). And if this style is to be used at all, it should be used consistently (all menus, knowledge screen, options, etc).

[Zireael]

I would prefer the background to be not black, to better differentiate from playing area.

Whether it's gray or some sort of a dark brown/blue/green/whatever doesn't really matter as long as it's not black (i.e. not the empty square color)

[takkaria]

Doing it (padding) on the frontend's side is reasonable... like this, perhaps?

https://postimg.org/image/vev51hz6b/

https://postimg.org/image/fxtbdhewh/

I guess ncurses can do it like in Angband currently, which looks alright, because ncurses won't draw any borders anyway.

Yeah, that looks OK to me, though I think I'd tend towards a bit less padding.

They are already at the top of the screen! (well, the small ones - spells, etc. The knowledge screen/options/the 'C' screen are in the center). Dungeon Crawl opens all menus in the center, and I've never heard anyone complaining about this. It doesn't open spell menu by default, but Angband's spell menus are not big (and kind of a pain to use without macros anyway).

Ah sorry, I should have been clearer - I meant offset to the right (or left, but I was thinking right) a bit, as well as opening from the top. This has been the historic behaviour of Angband in-game menus and I think it's worth retaining.

Well, gray background can be done in the text ui (or any other background), but that looks like multiple windows again.. I'd rather avoid this. Users - the ones that don't play Angband, that is - generally hate multiple windows (just look at all other games, or software in general). And if this style is to be used at all, it should be used consistently (all menus, knowledge screen, options, etc).

I'm a bit confused by this - on the one hand, yes, I agree, avoiding using separate windows where possible is good (and a reason I really like the term interface over e.g. AngbandTk and NPP's Qt frontend), but on the other hand, textui2 is introducing a much more windowed model of UI, where windows are layered upon each other rather than taking over the whole display region by erasing previous contents.

I guess my sense of why windows are bad is because 1. they can add unnecessary complexity - like pop-ups for yes/no answers that could be just on Angband's prompt line; 2. you have to manage them yourself -like in old-school bad MDI interfaces, or 3. (e.g. in browsers before tabs) the OS provides an inadequate way to see and manipulate multiple windows. I don't think these issues apply to any of Angband's windows/menus.

I'm also not sure that I buy that using different background colours for headers/footers necessarily makes them seem more window-y than they already do, as well as not being sure that being window-y in the way they are is bad.

I guess if you don't have typography, or any graphical elements, you are kind of stuck with just changing the colours of things or drawing lines. It sounds like maybe you have something in mind though on how they should be different?

Some thoughts on spells... I think it would make sense to move away from book-centric casting, so 'm' just brings up a list of all available spells. They could be given fixed letters, removing the need to inscribe spellbooks at all. The problem is that there are too many spells to fit on the screen at once. This is one of those annoying cases where UI design and game design are really the same thing, so it's hard to imagine this working well without a reduction in the number of spells (which Nick might have on the cards?)

I guess spellcasting could be a two-pane affair, with the left list being the spellbooks and the right list being the spells in that book.

The spell menu is the most tabular menu in the game, but I can't imagine any of the design tools I can think of for tabular data being useful (alternating background colours for different rows wouldn't work because of the text colours changing; adding more vertical lines makes it look like a spreadsheet). Maybe the spell line colours don't have to be as variable as they are right now, though I do think they makes sense visually. The level of a spell is mostly irrelevant when casting, so maybe that could not be shown in that context.

With inventory, I guess the text could be something more like a tag on the top so it didn't look like a title bar:

https://imgur.com/a/eJXE6

Though this wouldn't work for the spells menu. Thinking about it, you could basically have mini tabs on the top of the object list like so, which is less windowy - but also outside the scope of textui2:

https://imgur.com/a/UgLzh

I'm imagining left/right would move between tabs, maybe / and | could be displayed in the tabs for equipment and quiver respectively.

</brainfart>

[t4nk]

I would prefer the background to be not black, to better differentiate from playing area.

Whether it's gray or some sort of a dark brown/blue/green/whatever doesn't really matter as long as it's not black (i.e. not the empty square color)

That's not specific enough! Tell me which color exactly (red, green, blue, alpha values) and then I'll post a screenshot and we can discuss how it looks.

Ah sorry, I should have been clearer - I meant offset to the right (or left, but I was thinking right) a bit, as well as opening from the top. This has been the historic behaviour of Angband in-game menus and I think it's worth retaining.

Well, in old ui item menus are to the left (at COL_MAP) and spell menu is to the right. Maybe move them all the way to the left, so that they're directly under the prompt string?
I think I'll just add more "TERM_POSITION" things, and then we can experiment with it.

I'm a bit confused by this - on the one hand, yes, I agree, avoiding using separate windows where possible is good (and a reason I really like the term interface over e.g. AngbandTk and NPP's Qt frontend), but on the other hand, textui2 is introducing a much more windowed model of UI, where windows are layered upon each other rather than taking over the whole display region by erasing previous contents.

That was just a "knee-jerk reaction" (I think that's what it is called ). When I started hacking on Angband, I just wanted to change the colors of SDL1 interface and remove headers of its subwindows, so that they wouldn't actually look like windows Then I decided that SDL1 is obsolete anyway, and I might as well use SDL2 while I'm at it...

I guess my sense of why windows are bad is because 1. they can add unnecessary complexity - like pop-ups for yes/no answers that could be just on Angband's prompt line; 2. you have to manage them yourself -like in old-school bad MDI interfaces, or 3. (e.g. in browsers before tabs) the OS provides an inadequate way to see and manipulate multiple windows. I don't think these issues apply to any of Angband's windows/menus.

I think it's something psychological. GIMP (the GNU Image Manipulation Program) is a relatively well known example. Its windows don't take additional space and offer some advantage to people with multiple monitors - but users were constantly asking for "docked" mode, with just one big window! So now it has "single window mode".

I guess spellcasting could be a two-pane affair, with the left list being the spellbooks and the right list being the spells in that book.

That's an interesting idea. The books then could be given fixed letters or numbers for selection ("fixed" means that, for example, "Magic for beginners" is always selectable by "a" or "1", and if it gets destroyed, then "a" or "1" does nothing). I'd really like to minimize the need for inscription...

https://imgur.com/a/UgLzh

That looks really good! I'll have to think about that...

[Zireael]

Tell me which color exactly (red, green, blue, alpha values)

I would try 96, 96, 96, 0 for a dark gray
0,76, 153,0 for dark blue
0,153,76, 0 for dark green (or maybe 0,102, 51, 0)
Dark brown: 153,76,0,0 or 102,51,0,0


And I second that two-panel idea for spellcasting.

[t4nk]

Though this wouldn't work for the spells menu. Thinking about it, you could basically have mini tabs on the top of the object list like so, which is less windowy - but also outside the scope of textui2:

https://imgur.com/a/UgLzh

Hm, so, for example, one "tag" (non-interactive):

https://postimg.org/image/9fnkvuzxz/

I might go with it... what do you think?
Here's the variant with COLOUR_SHADE:

https://postimg.org/image/6zt0ytish/

I would try 96, 96, 96, 0 for a dark gray
0,76, 153,0 for dark blue
0,153,76, 0 for dark green (or maybe 0,102, 51, 0)
Dark brown: 153,76,0,0 or 102,51,0,0

Keep in mind that currently Angband has uses 29 colors and people talked me out of adding more!
All of these colors are very bright:

https://postimg.org/image/p28jogh7x/

https://postimg.org/image/6l35uhfbn/

Also, alpha 0 means "completely transparent" (that is, invisible)

[takkaria]

Well, in old ui item menus are to the left (at COL_MAP) and spell menu is to the right. Maybe move them all the way to the left, so that they're directly under the prompt string?
I think I'll just add more "TERM_POSITION" things, and then we can experiment with it.

Ah, that's interesting. I knew the spell menu opened to the right (I think I coded that behaviour?) but I just kind of assumed that other menus did too.

That's an interesting idea. The books then could be given fixed letters or numbers for selection ("fixed" means that, for example, "Magic for beginners" is always selectable by "a" or "1", and if it gets destroyed, then "a" or "1" does nothing). I'd really like to minimize the need for inscription...

Yeah, and especially with spells because spellbooks shift around and that's crap. Now the command system is fully functional, there's no reason that keymaps couldn't be specified as {QUAFF,"Cure Light Wounds"} for example, instead of q4. Would require a bit of extra logic but not tonnes.

Now I've written that, I'm tempted to code it...

That looks really good! I'll have to think about that...

You could use the same thing perhaps for different spellbooks (though you'd only be able to fit 1/2/3/4/5/6/7/8 in the tabs instead of the names), character screen (for the two view modes) etc.

[Zireael]

Keep in mind that currently Angband has uses 29 colors and people talked me out of adding more!
All of these colors are very bright:

https://postimg.org/image/p28jogh7x/

https://postimg.org/image/6l35uhfbn/

Also, alpha 0 means "completely transparent" (that is, invisible)

That's me goofing, as I usually use rgb without a at all and the game simply subs the correct alpha.

Are there no darker colors in Angband at all?

[takkaria]

Hm, so, for example, one "tag" (non-interactive):

https://postimg.org/image/9fnkvuzxz/

I might go with it... what do you think?
Here's the variant with COLOUR_SHADE:
https://postimg.org/image/6zt0ytish/

Yeah that's lovely! Mm-mm.

[t4nk]

So, what needs to be done:
1) Some changes to the frontend code, to display several "tabs" and listen to mouse actions on them
2) New field in term_hints (.tabs = true), so that frontend could add a bit of space for the tabs
2) Term_add_tab(int index, const char *label, bool highlight) function (if it's called several times, tabs are added one after the other, left to right)
3) Some changes to Term_mousepress() and struct mouseclick
5) Menu code should handle that in menu_handle_mouse()
6) And then the ui will be able to add highlighted (currently selected) and not highlighted tabs and handle clicks on them.

Sounds like a plan. As for keyboard controls, I think current controls for EVT_SWITCH should suffice.

Hmm, what to do with term sizes, though? Should they be resized when switching, say, between inventory and equpment? (the width of an item menu depends on the length of the longest object description, and height depends on the number of entries). Maybe they all should just have standard width? (80 chars).

edit: still not clickable:

https://postimg.org/image/52j40uk01/

edit: I completely forgot that I already have TERM_POSITION_EXACT

https://postimg.org/image/4pemowjqz/

edit: Decided to do it this way; COLOUR_SHADE is still too bright (it looks brighter in the game than in the screenshots, probably because the game is very dark, with black being by far the most used color).

https://postimg.org/image/45z5hyl7n/

If someone has more ideas (including what to do with other menus), go ahead!

[takkaria]

Hmm, what to do with term sizes, though? Should they be resized when switching, say, between inventory and equpment? (the width of an item menu depends on the length of the longest object description, and height depends on the number of entries). Maybe they all should just have standard width? (80 chars).

I think they should resize. As long as the tabs don't move I it should feel fine.

[Nick]

This thread is truly awesome. I have zero instinct when it comes to UI design, so please just keep going.

Some thoughts on spells... I think it would make sense to move away from book-centric casting, so 'm' just brings up a list of all available spells. They could be given fixed letters, removing the need to inscribe spellbooks at all. The problem is that there are too many spells to fit on the screen at once. This is one of those annoying cases where UI design and game design are really the same thing, so it's hard to imagine this working well without a reduction in the number of spells (which Nick might have on the cards?)

I guess spellcasting could be a two-pane affair, with the left list being the spellbooks and the right list being the spells in that book.

I have plans for a big reduction in spell numbers, but possibly not big enough - my first stab at it still had classes with around 30 spells.

[t4nk]

So, I remembered that there is EVT_BUTTON, which isn't used in current Angband, and is pretty much equivalent to EVT_KBRD. So it seems the easiest way to make tabs clickable is to make them act like keyboard (and not mouse) events. For example, clicking on tab "Equipment" is the same as pressing the '/' key, etc. I think that's how EVT_BUTTON is supposed to be used? Anyway, tabs do look like buttons to me...

edit: Haha, wow, that was easy. Now item menu tabs are clickable.