8000 Redesign song menu · Issue #312 · Vocaluxe/Vocaluxe · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Redesign song menu #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 of 4 tasks
flokuep opened this issue Sep 11, 2017 · 22 comments
Open
2 of 4 tasks

Redesign song menu #312

flokuep opened this issue Sep 11, 2017 · 22 comments
Assignees
Milestone

Comments

@flokuep
Copy link
Member
flokuep commented Sep 11, 2017

Our song menu could get some improvements, because there are some feature requests that need some space...

We should first do some concept arts/mockups for this before start working. @Jiiniasu Do you have time and desire to work on this? ;)

Regarding options-menu: We could move song-options in something like a context menu, that popups at the song when clicking on it, the more general options could be moved to a options bar and stay visible all the time?

@Jiiniasu
Copy link
Member

I've got some ideas and I want to make changes. I'm just unsure how fast it will go. =P

Will probably need some assistance as I am lacking a bit in coding experience, but I could try make some rough mockups with the ideas and go from there.

@flokuep
Copy link
Member Author
flokuep commented Sep 11, 2017

Yeah, would be a good start... I can help you with coding I guess ;)

@hendrikbl
Copy link
Contributor

I think it would be nice to also have the ability to group songs by the #ARTIST or maybe even the #EDITION tag. Somewhat like music players do it with artists and albums (is there an #ALBUM tag?).
Then as an optional feature we could fetch artist images from last.fm and show them ingame.

@flokuep
Copy link
Member Author
flokuep commented Sep 13, 2017

Uh. You could sort them and set tabs to on in game config? Or do you mean something different?

I've seen #ALBUM in some songs, currently not sure i've we read this. But won't be a problem to add... But year and genre are more common.

@hendrikbl
Copy link
Contributor

Oh. Upsi. Didn't know this feature exists :D
To my defense, I think the name 'tabs' is a little misleading :p

@flokuep
Copy link
Member Author
flokuep commented Sep 13, 2017

Maybe we could rename it ;)

Providing sort options on songscreen would be nice, too?!

@flokuep
Copy link
Member Author
flokuep commented Nov 5, 2017

Someone on facebook requested to have an option to navigate through songs and select them automatically (like usdx)... Maybe we could think about it when redesigning our current song menu, but I guess this wouldn't work nice for chess/list option. Maybe for caroussel?

@AlecScudder
Copy link

I would like to see some of the changes mentioned as well (especially grouping by artist, showing high score/s). Also would like to see...

  • Sort by most recent date added (so recently added songs appear at the top of the list instead of the bottom)

  • Go to artist by letter but exclude "The". I had a bunch of artists with "The " starting their name, but they were all lumped in to the "T" section. Would prefer them by the rest of the name instead (e.g. P for The Police, W for The Who, B for the Beatles, etc.)

@daggeg
Copy link
Contributor
daggeg commented Jan 30, 2020

It sure would be nice to have the year at least. And it would be nice have the option to opt out the ”the” as mentioned by AlexScudder.

@Stefan1200-de
Copy link
Member

My idea was to put the song length to the left and add the year to the right of that song info box on the song screen. Someone against this idea? Someone have a better idea without to redesign the whole song screen?

@Stefan1200-de
Copy link
Member

@AlecScudder and @daggeg
That artist sorting without "the" stuff is already included, more or less. There is no automatic (maybe not so easy, if we think also about other languages than English).

If you add the following to the txt file of a song, it will do the trick:
#ARTIST-ON-SORTING:Beatles
It will be sorted by Beatles. Same for:
#ARTIST-ON-SORTING:Who
#ARTIST-ON-SORTING:Police

Same exists for the title:
#TITLE-ON-SORTING:What ever...

I just changed this for my songs and it is working good.

I just created a pull request #475, that this will also used on typing the first letters of the artist or title on the song screen (without using the search function).

@Stefan1200-de
Copy link
Member

#477 adds displaying song year to song screen.
The highscores of a song can be accessed directly from the song screen because of #464.
With #476 a song list can be filtered to the songs of a playlist, currently only by using a hotkey.

So the most stuff of this issue are now possible, maybe not as final implementation, but useful.

@Stefan1200-de
Copy link
Member

@flokuep With the last additions to the develop branch I would say this issue is done for a possible version 0.5 now. But I let this issue open for a real redesign of the song screen later (0.6+)?

@marwin89 marwin89 self-assigned this Jan 20, 2024
@marwin89
Copy link
Contributor

Hey all, here is a re-design of song screen. I made it with inkscape. Would be nice to get help from a coder to implement this / and or to get feedback of UI Desigers.

Screenshots

Status Quo

Image

Re-Design

Image

Re-Design (with Playlist overlay)

Image

@flokuep
Copy link
Member Author
flokuep commented Jan 22, 2024

I really like the new screen! We should keep two things in mind:

  • Keyboard navigation: should all elementes be accessible via keyboard? How to switch between the song menu and the buttons? A possible option could be two navigate only through songs and do everything else with commands. These should be visible within the UI (e.g. add (F3) to the search text). What to do with the buttons on the right side? Underline every first character and add "Ctrl + " beyond it to give a hint how this works?
  • As far as I remember correctly, there are two modes of the song menu: one without song context (currently adapted by the buttons on the right) and one with song context. Within the later one, you could start the song in different modes, add it to a medley, jump to it's scores etc. How would you achieve that in the your approach?

@marwin89
Copy link
Contributor
marwin89 commented Jan 23, 2024

Good points! 👍🏻 🙂

Keyboard navigation:

  1. Yes I vote for full keyboard support, as well as mouse and gamepad.
  2. How to switch with keyboard: enter to open "song options menu" and space to open "song button menu sidebar"
  3. I recommend switching categories with shift + arrow left / shift + arrow right (remove ctrl+1, ctrl+2...)

Song Options menu:

  • Correct, the one without song context is adapted by the buttons sidebar
  • The one with song context is displayed on the video, not vertical but horizontal (as the following mockup shows):

Image
Image

BTW: what does sing all songs mean exactly in songs option menu? Entire song collection or category? And sing all visible? Only visible tiles or the category? 🤔

@alexaf2000
Copy link
alexaf2000 8000 commented Jan 24, 2024

Good design! But why not pick up the best parts of the last SingStar version?

The home menu is perfect, but maybe we can mix both designs on songs list.

Sample:
https://youtu.be/hogJ7eLObJg?si=eIseZZ2aDgBKIH4B&t=28

@daggeg
Copy link
Contributor
daggeg commented Jan 24, 2024

Good design! But why not pick up the best parts of the last SingStar version?

The home menu is perfect, but maybe we can mix both designs on songs list.

Sample: https://youtu.be/hogJ7eLObJg?si=eIseZZ2aDgBKIH4B&t=28

That would be nice if there would be a choice to make in-game, but not at the cost of the present design. If you have a couple of thousand of songs in the game you don't want to scroll through the songs the way it was in SingStar. But as an alternative, sure.

@marwin89
Copy link
Contributor
  • Yes I agree with both of you: Would be cool if we have "song menu styles" to switch between via options. 👍
  • We definitely need "Tiles" for large collections (80% players have at least about 500 songs). And a stylish "Coverflow" (inspired by last singstar) would be a cool variant to give players the feeling they can customize the game. 🙂
  • There is already a possiblity in vocaluxe to switch between Tiles/List in Options > Game > Song Menu Style. So it we have a basis for adding a "Coverflow"-Style.
  • BTW: I'm not a big fan of the list view - but that's another topic.

I suggest making a seperate issue:

  • Add and build up a "Coverflow"-View for Song Menu (Type: New Feature - Estimation: Large - Value: Should-Have or Could-Have)

@alexaf2000 would you enjoy making this additional view? You seem to have experience with that already. I'm totaly tied up with the "tiles view" and already thinking about a mockup for statistic screen.
@flokuep / @daggeg : Is it okay for the code complexity to add a new view? The most important thing is of course a clean code. 💻 ✔

@flokuep
Copy link
Member Author
flokuep commented Jan 28, 2024

Nope, not that much complexity, because they are seperated in different files/class. But: If we add new features, they need to be added to all song menus. The more styles we have, the more code needs to be adjusted e.g. if there is a new options implemented for singing.

BTW: what does sing all songs mean exactly in songs option menu? Entire song collection or category? And sing all visible? Only visible tiles or the category? 🤔

Yep, I guess it's working that way.

The one with song context is displayed on the video, not vertical but horizontal (as the following mockup shows)

Okay, got it. I guess we should think more in different selection modes for at least keyboard navigation. If the song is selected and the song-menu is opened, coming back to the song navigation only works with hitting escape. That needs to be made clear to the user, e.g. with dimming the rest of the screen. Otherwise the use would expect to jump back to song selection with hitting the right-arrow button.

We should also take in concern, that there are more buttons necessary as soon as #627 and #625 are implemented. Same goes for the implementation of game modes (#181). What about reducing that to

  • Highscores

  • Add

  • Sing

The first two preferred displayed by a simple icon.

For the customizing of the next song, we could think about a new "global" button, that would lead to a new screen that shows all options for singing like the song length, game mode, audio mode etc. These options could be persisted within the configuration file. Same goes for the profile selection, I suggest to add for that a global button, too. Both screens could provide an option to configure if that screen should be shown before a song starts or not. This would lead to a more simple ux-flow if you sing in a small group with people, all with a dedicated microphone, but also keeps in mind, that you want to change the profile or options before singing starts.

@marwin89
Copy link
Contributor

a) two views: Tiles / coverflow

good to know. So we can have these two views (tiles/coverflow) without complications.

b) song selection pop up

yes you're right. How about following solution then?
Image

c) song options and gameplay settings screen

totally agree with your suggestion (for gameplay settings and profile selection).
how about something like this screen?
Image

@marwin89 marwin89 added this to the v0.7 Release milestone Nov 5, 2024
@marwin89
Copy link
Contributor

d) controls

Vocaluxe song screen control:

Keyboard:

  • Shift + arrow (left/right): switch between categories year/genre/language/tags....
  • Shift + arrow (up/down): select within categories
  • arrows: select song
  • Esc: back
  • Enter: select
  • Tab: Menu >> sing all visible, sing random medley, highscore
  • +: Add pointed song to playlist
  • Ctrl+P: playlist menu toggle
  • Ctrl+C: category on/off toggle (not sure if we need that)
  • F3: search toggle
  • Ctrl+O: order sorting toggle

Gamepad:

  • D-Pad (left/right) = switch between categories year/genre/language/tags....
  • D-Pad (up/down) = select within categories
  • Analog (left) = select song
  • Analog (right) = select page
  • Circle: back
  • Cross: select
  • Triangle: Menu >> sing all visible, sing random medley, highscore
  • square: Add pointed song to playlist
  • R2: playlist menu toggle
  • L2: category on/off toggle (not sure if we need that)
  • R1 search toggle
  • L1: order sorting toggle

Sign up for free to join this conversation on GitHub. Al 521F ready have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants
0