Author Topic: GMenuNext - Let's make GMenu great again!  (Read 20446 times)

m1024 (OP)

  • Posts: 106
GMenuNext - Let's make GMenu great again!
« on: April 12, 2018, 11:35:08 am »
While making the PS4 and OldBoy skins I already noticed that the UI looks and feels old fashioned and somehow geeky. The new CFW even supports preview images or cover art, but the result is far from polished.

Most people (including me) would like to have a complete new menu or a port of emulation station, but the underlying structure with sections and links is still a good concept and reinventing the wheel is not always required...

I made a mockup of the main menu and the file browser. Everything in the mockup (but the favourites feature) can be implemented in the current version of Stewards fork of gmenu2x by changing some paint methods. Basically its the same UI elements drawn at different positions. There are no new graphical elements and all icons, themes, screens and dialogs could be used directly without any new config or theme files. You could even use custom backgrounds instead of light gray and the colors specified by the skins.

Why only a mockup?
Right now I don't have the environment ready to olay with the code myself. I haven't done any C++ for a decade and would have to get into Linux and SDL first. Doing this as a pet project is on my todo list, but it'll take some time... Until then I just want to share this mockup with other people as inspiration  ;)

Is there anybody who has the dev environment ready to try this out?

Update

There actually was someone with a kind soul who brought this design concept to life! Thanks @pingflood  ;)

New GMenuNext release is out:

2018.07.02 (Codename: Blast Processing.)

Fix memory address register:
Fix SetCPU not setting CPU clock;
TV-Out working among SetCPU;
Do not use inputCommonActions in MessageBox:
Prevents power button bounce;
Prevents entering in suspend mode while a messagebox is on screen;
Updated compiler flags (optimize size and performance);
UDC autodetect mount point when booting on external SD;
Simplify Link and LinkAction classes;
Use memregs to get UDC status (faster than system function);
Releases will bundle only default GMenu2X assets:
Cleaned up default assets;
Allow to use icons/wallpapers/backdrops pack.

https://github.com/pingflood/GMenuNext/releases

Please report any bug or issue you find and I'll take a look as soon as possible.

After a lot of ideas, discussions and test versions there now is a running version of this menu design. You can basically try it out by replacing the gmenu2x executable with Commander or via SD card. As the code is based on Stewards code everything should be working just like before. All my skins on GitHub have been updated to work with both designs and there are two new skins to get that greyish emulation station look.

Please use this thread to share your opinions on this new menu style!

TL;DR: Jump to installation instructions and beta version download.

Previews below VVV
 
« Last Edit: July 11, 2018, 10:04:06 am by jutley »
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #1 on: April 12, 2018, 01:09:27 pm »
Nice concept.

Considering the vertical left bar, how do you imagine switch the category? Now, on top, L and R trigger make sense, but up and down?

How do you imagine the settings screens? (attached)

hiei

  • Posts: 169
Re: GMenuNext - Let's make GMenu great again!
« Reply #2 on: April 12, 2018, 02:54:53 pm »
I find it an extremely cool idea :D

m1024 (OP)

  • Posts: 106
Re: GMenuNext - Let's make GMenu great again!
« Reply #3 on: April 12, 2018, 05:58:08 pm »
Changing the section could be realized by right/left to toggle between sections and links. For this, some kind of highlight would be required to know where you are. L and R could still be kept as everyone is used to it.

Placing the sections above the links eats up too much space for a vertical list of links and a horizontal list lacks overview.

Regarding the skin config: Top bar could be renamed to sections and bottom bar to info. I wouldn't change the layout of the settings screens much - only the colors and consistent spacing between all elements.
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/

kapster

  • Posts: 108
Re: GMenuNext - Let's make GMenu great again!
« Reply #4 on: April 12, 2018, 06:54:40 pm »
If anyone wants to work on this and is trying to get the dev toolchain setup, I?ve posted instructions here: https://boards.dingoonity.org/ingenic-jz4760-devices/rs-97-developers-toolchain-setup/

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #5 on: April 12, 2018, 08:30:42 pm »
Changing the section could be realized by right/left to toggle between sections and links. For this, some kind of highlight would be required to know where you are. L and R could still be kept as everyone is used to it.

This will need a lot of work. First, because current implementation of gmenu is a mess regarding this section/links thing. Second, because there is no easy way to highlight icons like you did in the mockup. Currently it will highlight *under* the icon (backlight, then?  :P)

Also, this will face a huge resistance for those who likes the current GMenu2X, as it will break compatibility with skins, etc..
Are you guys willing to break relations with the old GMenu2X?  :P :P

m1024 (OP)

  • Posts: 106
Re: GMenuNext - Let's make GMenu great again!
« Reply #6 on: April 12, 2018, 09:47:46 pm »
I already looked at some of the paint methods and you are right about the messy code - I'd call it potential for optimization  ;)

The mockup just uses transparency to make the icons active or inactive. This should be possible by alpha blending an image/texture in SDL: active 100% and inactive 50%. So instead of drawing a rectangle under the icon, the icon is drawn transparently or opaque.

I'll try to setup the toolchain and try it myself some day, but I think others would also be happy when some of the 'grown code' gets cleaned up this way. At the end of the day this could still be compatible with the current skin system. Only the skin images for the top/bottom bar and selection would'n be compatible. The colors and wallpaper could all be taken from the skin config.

Perhaps we should see it more as an optimization process than a break up  :)
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #7 on: April 12, 2018, 09:55:30 pm »
I already looked at some of the paint methods and you are right about the messy code - I'd call it potential for optimization  ;)

I think if we decide to fork and modify the GMenu2X with no fear of breaking legacy compatibility, first we will mess more and later we will optimize.

I forked @Steward_Fu github repository to work on his code (omg.. had to download 3+ GB just to extract GMenux ???) and started messsing with it.

<a href="https://www.youtube.com/watch?v=BikZJwTzvsc" target="_blank">https://www.youtube.com/watch?v=BikZJwTzvsc</a>

I'm considering to order a RS-97 just to play with this.  :P

m1024 (OP)

  • Posts: 106
Re: GMenuNext - Let's make GMenu great again!
« Reply #8 on: April 12, 2018, 10:18:47 pm »
OMG, that was quick! So cool to see this idea in motion  :o ;D
« Last Edit: April 12, 2018, 10:21:25 pm by m1024 »
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #9 on: April 13, 2018, 02:50:55 pm »
OMG, that was quick! So cool to see this idea in motion  :o ;D

Don't get so excited.. GMenu is a "cat's cradle".. You change a bit, you break something somewhere else very unexpectedly.  :P

Today I'm trying to replicate your selector dialog concept:

<a href="https://www.youtube.com/watch?v=4i1tQzNlLbc" target="_blank">https://www.youtube.com/watch?v=4i1tQzNlLbc</a>

Unfortunatelly there are a lot of limitations regarding font customisation.


If you could please share your icon pack, I'm sure it will help to make it look better.

ruffnutts

  • Posts: 2653
Re: GMenuNext - Let's make GMenu great again!
« Reply #10 on: April 13, 2018, 03:02:53 pm »
This looks well cool, great work ;)

m1024 (OP)

  • Posts: 106
Re: GMenuNext - Let's make GMenu great again!
« Reply #11 on: April 13, 2018, 09:30:51 pm »
I already published my skin pack on github: PS4 skin, but aren't you using the icons of this skin already? The link icons are from the default skin.

The selector looks very good - you even added a fade in effect for the preview? Nice little detail.
I think you have already proven my point that we don't have to replace GMenu completely to get a clean and modern looking UI  ;)

What do other people think? Would you use this instead of the current menu and selector?
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/

onthebridge

  • Posts: 110
Re: GMenuNext - Let's make GMenu great again!
« Reply #12 on: April 13, 2018, 11:03:20 pm »
Maybe you can consider working with jack83? His retropie lookalike looks awesome but it could use your selector dialog. In my opinion both together would be perfect

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #13 on: April 14, 2018, 12:06:30 am »
I already published my skin pack on github: PS4 skin, but aren't you using the icons of this skin already? The link icons are from the default skin.

Yes, I did copy your PS4 icon pack. When I asked, I was thinking about the link icons.

If in this skin we will use a light background for links, I think that some darker icon set will fit better. Do you have any suggestion?



m1024 (OP)

  • Posts: 106
Re: GMenuNext - Let's make GMenu great again!
« Reply #14 on: April 14, 2018, 09:05:59 am »
If we say that the left bar uses the skin color of the current top bar and the right area is the background, then all skins should look ok by default: With the PS4 skin the right area would be dark blue (wallpaper) with white font/icons (this skin only contains the settings link icons) and the left area would be a transparent white (not so dark blue) with white section icons.

In theory all skins could be used with the new layout. To get that emulation station design, I'd rather make a new skin: top bar, icons and font in dark grey, wallpaper in light grey. I could even make the OldBoy skin compatible by replacing the top and bottom lines by a transparent color or image for the top and bottom bar, so that it works in both layouts.

What do you think about the current bottom bar? Reduce it and move it to the left bar (cleaner, less geeky, less info) or keep it at the bottom (takes space away from the link list, more clutter)?
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #15 on: April 14, 2018, 01:59:10 pm »
In theory all skins could be used with the new layout.

Yes, it is using the skin color and I'm trying to make possible to customize the bar/lists positions, width and height by skin.

I've made some adjusts, so current skins will work (considering limitations). See attached examples for OldBoy, PS4 and Next..

To get that emulation station design, I'd rather make a new skin: top bar, icons and font in dark grey, wallpaper in light grey.

I don't think that first prototype of ES design will be possible with the changes are being made for this. Not a big problem, though.


What do you think about the current bottom bar? Reduce it and move it to the left bar (cleaner, less geeky, less info) or keep it at the bottom (takes space away from the link list, more clutter)?

I don't know yet how to fit the bottom bar with your mockup and other screens. I think all screens should be cohesive in design.
For screens with actions (other than selector), bottom bar seems to make sense.

To understand, compare attached screenshots for different screens. If you could, try to design a mockup for the "Settings", "Wallpaper" and "About" screens that fits your concept (left bar, no bottom bar, etc), then we see if can be made with GMenu limitations..



pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #16 on: April 14, 2018, 01:59:54 pm »
With PS4 Skin

pingflood

  • Posts: 84
Re: GMenuNext - Let's make GMenu great again!
« Reply #17 on: April 14, 2018, 02:03:48 pm »
Next skin, with transparent color. (a lot of tweaks had to be done to not overlay transparencies. I'm not happy with that and will be reworked)

bartimeaus

  • Posts: 97
Re: GMenuNext - Let's make GMenu great again!
« Reply #18 on: April 14, 2018, 02:19:11 pm »
Are you just skinning right now or is the menu already working?

m1024 (OP)

  • Posts: 106
Re: GMenuNext - Let's make GMenu great again!
« Reply #19 on: April 14, 2018, 07:31:42 pm »
I'll post some mockups for the screens on Monday, but here are my first thoughts on this.

I see two different types of 'bottom bars':

1) Status info like battery, sd, cpu etc. This could be shown at the bottom or top of the right area in the main menu. This should not overlap onto the left bar. Depending on the skin settings it could even have a fully transparent background, where it would just 'float' like this.
Another idea would be to integrate this status info into the left bar at the bottom, like I did with the battery info. From bottom to top (3 rows with 2 cols each): battery, brightness, volume/sd

2) Context actions and buttons. Because of the limited resolution, I don't think we can be consistent over all screens. I really like the vertical list of context actions below the preview as this allows you to have the full height for the list on the right side. In other settings or about screens I favor a floating horizontal list with transparent background and low contrast to not distract from the main content.
Setting and about screens:
Even if it breaks the vertical bar design, a horizontal bar on top with the title and description would be pragmatic. To keep the light and clean design, the bottom bar should be fully transparent like I described above.

About the skin color usage:
Adding a new color setting (like you did?) to dim or brighten the wallpaper is a good idea. Most wallpapers make text in the current GMenu unreadable. This should be applyed to all screens including settings and about.

PS: You have to write a short tutorial some time on how to compile and emulate a fork of Stewards stuff  ;)
Make sure to update your skins (PS4, PSNext, PSNextDark, OldBoy and Zelda) with the latest version from time to time:
https://boards.dingoonity.org/ingenic-jz4760-devices/low-res-skins-for-gmenu2x-oldboy-zelda/