Finish flatui theme for xmb menu

[gouchi]

Icons needed to release flatui theme for xmb menu

https://docs.google.com/spreadsheets/d/1omEsTRa-wLSgWlALHpOsBDLax1-yyfYLGkfWVKu3BPU/edit?pref=2&pli=1#gid=0

[CoalaJoe]

I don't know what to do about the buttons. They don't have enough contrast to the controller itself.

And should I do the icons on the power and home button, color them in or paint them as the other buttons?

[L-A]

@CoalaJoe You can use schematization over realism. If you darken the buttons (or their surrounding inset), it'll help without "lying" about wii colours.

[CoalaJoe]

@L-A Can you give an example, I don't quiet get it.

[CoalaJoe]

OR

[L-A]

@CoalaJoe Sure!

Schematizing is going away from realism in the name of representing things as we picture them in our head. Think of people drawing stick figures to represent how a person looks.

In the case of the Wiimote, you can change numbers and symbols for colored dots, and use proportions that are not strictly realistic, but allow you to characterize the Wiimote's distinguishing traits. You can colour the inset around the buttons to give them depth and contrast.

Quick example:

[CoalaJoe]

@L-A Wow. That looks awesome! And also, I learned something.

[CoalaJoe]

Here it is:

I also tried with more of the schematisation, but it looked kinda off. Also, I made a grid as a layer, so @Kivutar doesn't have to worry about that.

[RobLoach]

Pretty...

[CoalaJoe]

@RobLoach Looks blury AF. I tried to fix that, but it made it worse. Anyone a recommendation or a fix?

[L-A]

@CoalaJoe Are your elements aligned to 4px or 8px increments on the grid?

Edit: Also, you can only have crisp strokes if they're 1px wide at 64x64.

[CoalaJoe]

@L-A Doen't it has to be centered? Looks like I have to change my tool...

[RobLoach]

Feature Icons popped up in my feeds. Open source icons, that we could use for anything missing.

[sergioad]

Hi there, I love FlatUi but it is incomplete so here are my notes: by now FlatUI has many recicled icons from Monochrome in the quick menu, the add favorite icon is missing and also the close content icon is way too big compared to the allready themed RetroAchievements icons, it needs a rescaling

I hope make your work a little bit easier

[ofry]

Missing some icons:

[WARN] [XMB] Asset missing: assets\xmb\flatui\png\movies.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_room.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_room_lan.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_room_relay.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\wifi.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\zip.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\movie.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\key.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\key-hover.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\dialog-slice.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_achievements.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_audio.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_exit.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_frameskip.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_info.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_help.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_network.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_power.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_saving.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_updater.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_video.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_record.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\Libretro - Pad.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_mixer.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_log.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_osd.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_ui.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_user.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_privacy.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_latency.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_drivers.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_playlist.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_quickmenu.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_rewind.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_overlay.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_override.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_notifications.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_stream.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_shutdown.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-U.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-D.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-L.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-R.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-U.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-D.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-L.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-R.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-P.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_SELECT.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_START.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-U.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-D.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-L.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-R.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_LB.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_RB.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_LT.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_RT.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_check.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_add.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_brightness.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_pause.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_apply_toggle.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_apply_cog.png

[ofry]

@alfrix Thank you for fixing it.

[baxysquare]

So I've been toying with the idea of merging or adapting the Retroactive icons to the FlatUI color palette to contribute to and possibly complete the set. I went into 2600 Controller and noticed there are colors there that are not on the palette at FlatUI Colors. So I'm wondering if we're using some sort of expanded palette like the one I found on another GitHub project. Any insight would be appreciated.

---

[alfrix]

i used the first one when i did the update, and it seems that i updated the pngs of the 2600 but didn't update the svg

[RobLoach]

I like the FlatUI feel, and would love to see it expand. Merging RetroActive and FlatUI could make sense, since the icons and goals are similar.

[baxysquare]

I like the FlatUI feel as well, but would prefer to use the expanded 40 color palette over the 20.

These days, I just don't feel like I have time to maintain 4 themes plus contribute to Monochrome. At this point, I tend to favor of fuly maintaining Systematic and Automatic, while "retiring" or very lightly maintaining Retroactive and Neoactive.

[jstolarek]

I'd like to thank everyone who has so far contributed to flatUI theme - it is fantastic! I would really love to see the whole icon set getting finished. Right now I'm adding the missing icons from other sets as a stop-gap solution.

[baxysquare]

We had discussed the possibility of merging RetroActive and FlatUI into a single theme. I've opted to work on other projects for now. That said, the RetroActive icons are an ideal foundation to work from. You'd need to remove the translucent border and down-convert to the FlatUI 20 color palette and populate the theme with the missing icons.

[baxysquare]

I've just submitted #421, which is known as the FlatUX theme. I have taken RetroActive, removed the translucent borders and applied the expanded 40 color FlatUI color palette to every icon. When possible, I tried to integrate design elements from the original FlatUI set. It's meant to serve as the first step toward merging the two themes as has been discussed over the last few years.

Keep in mind, this theme is not active at this time. It's supposed to lay the groundwork for universal themes as discussed on #341. That means FlatUX will not debut until universal themes become the new standard format. There's plenty of time for anyone to update, make changes and contribute to this theme in the meantime, and anyone who wishes to is encouraged to do so.

Once universal themes roll out and FlatUX is made live, RetroActive and NeoActive will be officially retired and will not be converted to universal themes. Whether FlatUI is officially retired in favor of FlatUX is up to the community.

[shibenb]

Hello, flatui xmb was missing Nintendo - Family Computer Disk System-content.png so I made one, taking monochrome as base. please see if you guys like it.

[baxysquare]

It looks nice. For FlatUI media, the labels are set to "Peter River" blue and any flourishes that may have been a part of the label design are removed. Here's the FlatUI version of the NES and Super NES Game Paks as examples:

EDIT: I took a second look and noticed the icon doesn't adhere to the FlatUI 20 color palette as discussed above. The yellows would need to be converted to Sunflower and Orange. The blacks you would convert to Wet Asphalt or Midnight Blue and the white would need to be changed to Clouds.

I quickly worked it up in Photoshop so you can see what I mean.

[shibenb]

I love it! In case you didn't work in scratch mode, will you be able to pass me the png file if you still have it?

Another thing that I worked on is Nintendo - Game Boy Color asset, which is oddly a purple themed when that is more of a GBA's known color. GBC pop-culture known color is yellow. So here's my take on it:

Can you point me to where to see the color pallette of Flat UI?

EDIT: Found it! Right above: https://github.com/libretro/retroarch-assets/issues/17#issuecomment-522041863

But that's a lot of different set of generic flat ui palettes. Which one are we following for particularly retroarch flat ui theme?

[baxysquare]

The only file I saved was the file that you see on the post.

For FlatUI, you use the 20 color palette, officially called FlatUI Palette V1.

As an aside, at this point, nobody seems to care if we replace FlatUI with FlatUX, even though it's complete and ready to roll out. I'm thinking I'll replace RetroActive with FlatUX via Pull Release. FlatUX uses the 40 color palette and is a fully fleshed-out, expanded version of FlatUI.

[shibenb]

Thanks for pointing to the right palette.

Yes I see the comments above about flatui 20 colors being limiting. About FlatUX, my take it much outside. I believe there are quite a few similar looking themes, most looking like monochrome and flatui. I feel there should only be 4, packaged with the download, giving people a good ranged variety: 1. monochrome, 2. flatui (or flatux), 3. pixel, and 4. semi-realistic (mac/xp/vista/iphone1 style). All other themes can be downloadable content. But I know I am thinking waaaaay out of the box.

For FlatUI, I will be posting fds-content (missing), gbc (with the usual gbc yellow instead of the gba purple), scummvm system and content (both missing).

[baxysquare]

Thanks for your perspective and feel free to contribute to FlatUI. I would encourage you to seriously consider making your own theme design. It's a lot of work, but it's amazing when it all comes together.

Rather than ship with four or even two themes, I'd say ship with only monochrome and make the rest downloadable via a themes menu. Perhaps that would make all the others more discoverable, plus it would cut down on the bloat in the mainline download.

I would love to see a thriving community of theme developers and end users, similar to what has occurred with Emulation Station development. But the reality is there doesn't seem to be much interest in the forums, on Discord, or in this repository, and I'm not quite sure why that is.

Of the handful of people that are interested in themes, most of them prefer to contribute to existing themes, rather than create their own end-to-end design. The fact that XMB was replaced as the default by Ozone, without an easy way to change the theme design, further complicates the matter. I was hoping that the Universal Theme proposal might spark interest, but there doesn't seem to be much interest in pushing the user experience beyond where it currently is.

The reality is, most people have no idea any of the other theme designs other than monochrome exist. It leaves the remaining themes hiding in the shadows. As an artist it makes me a bit sad. But I'm not a programmer, so there's not much I can do to help make things better.

[shibenb]

I never understood the decision to replace xmb with ozone. Back in the day I remember making sense of xmb UI (the whole idea of downloading cores and then loading your content) on my own and somehow it was intuitive. I have seen a lot of people new to RA not able to follow ozone and leave disgruntled feedback about RA on forums etc.

Well anyway, there must be good reasons. Universal Themes Proposal seems like a good idea. Let's hope that brings in people to create themes and all, like you said. Would be fun to see!

I quite agree with shipping the application with 1 theme only. And may be add an automated option which can download the themes user wants, similar to how cores and shaders are downloaded. I wonder why it is not done for wallpapers either.

I have considered making a theme, at least for myself, then I saw the number of icons in the png folder and then I got intimidated lol. But I totally get what you are saying, it must be quite gratifying. I like to tinker but I am not an artist though.

Just for fun, let me share my "Contra Games" playlist+content pngs, haha. I know, I know, no where close to flatui palette with its gradients and all. But I don't mind it as long as it collects my fav Contra games in one place.

[baxysquare]

I see the need for Ozone, but I think the user should be able to choose their UX on initial startup. For example, Ozone lends itself better to Android or other handhelds, while XMB looks better on a TV or Computer Monitor. As someone who also uses a MiSTer and Batocera, there's definitely room for diversity in UX.

On the theme thing, I can see why it would be intimidating. But if you work on it a bit here and there, before you know it you'll have a fully functional set. You can always put monochrome icons in as place holders, so the function is there, but it give you a better sense of what needs to be prioritized.

[shibenb]

Hey @baxysquare bro, thanks for your encouragement, I discovered inkscape and it is fascinating! (I did not know about the svgs, was working in ps like an idiot lol). I did the icons I was talking about, with a starting point from some flatux icons, followed the palette you mentioned. Should I create a merge request? Or is flatui getting nuked and getting replaced by flatux?

[baxysquare]

Those are nice designs. Vector-based apps like Inkscape, Illustrator, Affinity Designer, CorelDRAW, etc. are the preferred apps for creating icons for this repository. We've talked about requiring all submissions to be SVG, so that they can be rendered into PNGs via scripts. That would cut down the size of the repository and make it more agile for project use. Photoshop is a fine place to start, but I'm glad you found your way to Inkscape. You're definitely on the right track.

You're welcome to submit your contributions as a Pull Requests. Admins will review and approve the merge. I believe @fpscan handles most of the merges these days, if you look through the history of merged pull releases.

As for FlatUI getting nuked and replaced by FlatUX, that decision should come from the admins and the community. Personally, I feel FlatUI and FlatUX are both so similar, I don’t see much point in keeping them both. But if there's interest in keeping both themes and making both available, I don't want to stand in the way of those efforts.

I’m at the point where I’d like to see people using FlatUX instead of having it buried in the repository as an easter egg, so I’m thinking I’m going to get it moved into position to replace RetroActive, and I’ll remove NeoActive entirely. That will make it usable in XMB and people can decide whether to use FlatUX on the XMB. What do you think?

[shibenb]

Thanks Baxy, I will connect with @fpscan to understand the merge process of the project. I like flatui but after exploring your FlatUX designs, I would really want to try it out in xmb. I can always simply clone that repo and do so, but flatux definitely should officially be available on xmb whichever existing theme it replaces.

[shibenb]

Dear @fpscan and @baxysquare can you please take a look at the merge requests #450 #451 and #452