Recoding the GUI!

[Matoking]

I was just wondering if anyone else has thought about recoding the gui for WiiMC?

I have a customised version I am using (still a work in progress) and wanted to know what others thought about it, constructive criticism is appreciated. I plan to add a couple more things, but need to figure out a little bit more what is going on in the app (never really dealt with threads much before).

Would like to do:
Put the weather (small icon and temp) in the top right
Use the right pane to display information about the video highlighted, using some naming convention for the files.

Mainscreen

In video

[rodries]

Glad to see you have an interest in the GUI. I have quite a lot of opinions in this area, but I’ll give you one suggestion. Layout changes should be added as options – as in, make the layout configurable – rather than just replacing the existing layout. I see the value in adding things like preview images, cover art, etc. but only if they’re done properly. This might mean things like downloading data from some source on the internet, caching and reading cached file data, etc. This would be a challenging task and all aspects of it would need to be considered.

As for specific design ideas, I’d suggest to look carefully at other media apps handle things and draw some inspiration from that. 🙂

[Matoking]

Hey Tantric, I am actually thinking of compartmentalising alot of the onscreen stuff. In addition to making recoding simpler, it would also allow for customisation via an external config file. Right now I am trying to go through the code and make sure I know what is going on under the hood before I start to go about it.

What are your thoughts on the config file options for display layouts? By the way any tips, pointers, or quirks that I should watch out for in the code?

[ridger81]

Some nice ideas here! The original design was created in a 4:3 aspect ratio, but now that it’s in widescreen some of these ideas are possible. Didn’t really think about a menu at the top of the screen, but it’s an awesome idea if there’s any buttons we can’t fit in the bottom control panel.

Tantric, I’d be happy to work on some updates of the GUI design alongside this, if you’d like.

[Matoking]

Here are a few mockups I put together for some parts of the app, it is enough to get a general feel for the gui. I still want to put together a few more for screens like settings and the alert/dialog screens. The archive contains both widescreen and “slim” mockups.

http://dl.dropbox.com/u/4804818/wiimc/new_layout/new_layout.tar.gz
The file is hosted on dropbox so any updates I make will auto-magically be integrated into the archive.

*As a couple people have asked me this, the episode titles are made up on the images and do not correlate to actual shows. The product of too much coffee and not enough sleep. 😆

[rodries]

boondoklife, do these screenshots represent actual features to be added? You have weather/phone/email icons, is it realistic to add those features? If so how do you intend to?

For episode descriptions, other info, and images, how are you proposing those be stored/retrieved/etc? I think the technical hurdles need to be addressed (and possibly coded) before we ask Sam M. to start adding new things to the GUI.

Regarding the menu/icons in a video to allow scaling, resizing, changing subs, audio stream, etc, I think that idea would need to be fleshed out (ie: how does changing each of these settings actually look like from a UI perspective) and then it could be implemented.

[Matoking]

Good questions.

As for the weather and and meta data, I was thinking a http call to an online service like tvdb (banners), imdb (meta), and weather. The weather would only need to be fetched say every 15 mins (or more) and meta only when needed. An ideal situation would be to have a php server gather info and return wiimc a structured output, but in its absence parsing of output from the pages could be done. (I wrote a bash script a while back that manages my tv show file names in such a manner using wget and tmp file.) Now the only catch would be to get the meta data (correctly), the end users files have to be named reasonably “filename.s##e##.avi” or similar. Again I have some logic that might help on this topic in a bash script that is suited to strip fluff added by releases and what not. If the names are just unreasonable or no data could be found then the meta pane could be hidden and the file browser stretched.

As for the phone and email, I was thinking wiimc could listen on a port for a simple data stream. it would only include a digit for the icon to show and the string for the message (optional). This feature would be used to have a more connected experience, allowing for alerts to be sent to your screen from other devices. What devices depends on what we and the community want. For example I would be throwing together a app to run on my nas and alert me of file downloads, voip calls coming in, and new email. Again all that the client would need to specify is an icon numer and the message to send. I have no problem contributing my down time to coding these into the app. I do realize some people do not have the wii connected to the internet however, I think the layout has merit even with out those ever being implemented. 🙂

I plan to put together a few mockups for the on screen settings. I would imagine sliders, , and d-pad interactions should cover most of the settings.

[ridger81]

Metadata and time sounds awesome. However maybe notifications/weather should remain optional? Most of the people I know using WiiMC would probably have no use for notifications, however the weather could come in handy.

Tantric, is it possible to change the layout width from 4:3 to 16:9 depending on the Wii’s widescreen settings? (Maybe WiiMC already does this, can’t test as I’m not home at the moment). It would be much easier (from a GUI design perspective) to have a basic, uniform design, and simply resize controls/lists depending on the aspect ratio.

TVDB works great for converters and the like. Don’t think we should completely hide the meta pane though if WiiMC can’t get a suitable match for one show though… it would probably get a little too confusing scrolling through the list and seeing the sidebar appear and disappear. There should definitely be an option to disable the pane altogether if the user chooses.

I’ve made a simple mockup based on your original design (just refining the look, more along the lines of the current WiiMC style, but a little sleeker. Placement is generally the same) – I’ll upload it when I get home.

Is it possible to have the controls fade/slide in when you bring them up? Not important, but would be a nice touch.

[Matoking]

Due to the fact that network connection is not a given, I think anything that relies on a connection should be optional. For the metadata, I was suggesting hiding the pane if nothing is available as if you do not there will have to be some sort of a notification that nothing could be found. Here is what I was thinking about the meta pane.

When a file is selected the meta pane is populated with the throbber, to show it is working on it, and then populate it when the data is ready. If no data is found, in-lue of showing a blank pane or “un-known”, the pane could slide to the right and leave the open space for the file name to populate across. Just an idea of course and I could see the sliding back and forth getting annoying if the end user does not have a real naming convention they stick to.

I totally agree that ALL of these options should have an option to be disabled/enabled, as you mentioned not everyone will use them.

Even if the notification feature is not needed/wanted, could the design be made in mind with this possibly being added later? The reason I ask is I will be coding this feature, in my own fork if need-be, as it is a great feature and would be of great use in quite a few places I use this app.

The screensize can be taken into consideration when defining sizes and what not. Looking forward to seeing the mockup!

[ridger81]

Okay, I see your point with the meta pane. Maybe we should wait and see how it works in practice – then we can test and see if the sliding becomes an issue 🙂 Any plans on caching the metadata? It would probably ease up on the network but could turn into a storage problem… I think it’s a good point to consider, regardless.

I’ve got no problems with leaving a space for notifications, even if they don’t show up in the final versions 🙂

Here’s the initial mockup of the new video controls. I took a few cues from your initial “fading in” style to make the controls seem kinda borderless.

View full size

Here’s a new idea – a dragable progress bar. i.e. when you roll over the timeline, the control appears and you can click and/or drag it to fast-forward/rewind. When you roll out, the control disappears. Let me know if this is possible – it could be a big jump in usability.
Mockup of controls with dragable progress bar
(this also shows what the controls would look like without the metadata)

Alternate views:
With notifications
Controls on black background
Controls on white background (still easy to read)

These mockups are all only widescreen for now – 4:3 TV’s would just show less metadata and have a smaller progress bar.

[Matoking]

I must say, I like your use of the rounded fade at the bottom for the controls! How big is the fade effect, in terms of a png file size, on its own? Since it is rounded it will not lend well to the tiling effect used for most of the backgrounds and will have to sit in memory as a single image.

What do you think about giving the progress bar a little more of a glass look? I did not round it, though it would prolly give a better effect, as when it is chopped up to be tiled the rounded overlay would not play well.

Or maybe even a bit of a reflection.

I like the dragable image, but if that is done I would make the progress bar a little shorter (height-wise) so the slider does not have to be a gigantic eye-sore.

As for caching the meta, I thought about this myself and the simplest solution might be to give the end user the option as to if they want to cache it or not. I would suggest having two settings; Caching:

This way if the user has space for it, they could keep all meta data in a local cache. For those that are running it from an SD with no free room, or they don’t wont to allocate room for it, then they could opt out of the full blown caching in favour of only caching say 5-10 entries at a time.

[ridger81]

The glass doesn’t look too bad at all! I didn’t use it in the first place though cause there’s not really anything in WiiMC that looks glassy. I’ll have a go and see if I can get it looking awesome.

When you refer to the rounded overlay, do you mean the glass? I can see what I can do by fitting it into the endcap area.

Not too attached to the reflection, though… it kinda makes the bar seem “grounded”, if that makes sense? It would probably look kinda strange when it’s overlaid over the video.

We could definitely make the progress bar shorter height-wise, but we have to keep in mind that people aren’t going to use the drag control every time – some will want to jump straight to a certain point. Therefore we can’t make it too small as users should be able to comfortably point and click on the bar without issues.

I’ll have to check how large the fade PNG is when I get home – what’s the approximate size limit?

Your implementation of cacheing sounds great, I use a 2GB SD card with nothing really on it so that should be plenty of space.

[Matoking]

I was referring to the gradient you are using at the bottom for a back drop. I don’t think it would be an issue as one large image but if it can be broken up into rounded ends and a flat middle it would be smaller. Really it looks nice rounded so the best bet may be to just cut the bottom gradient in half horizontally and store it in memory that way. I think libwiigui can do image flipping, so it could be flipped horizontally and used for both sides with half the memory hit (If I remember correctly that is, I’m not at home to check it but will when I get back).

I threw the reflection in there as it made it look like it was sitting on that blue gradient a bit. Thought it looked neat and wanted to share. 😛

Do you have this in a PSD or XCF format? Could you post it up or PM me a link? It would make it easier to describe somethings if I have the layers separated.

Edit: Sorry just noticed where I used the word overlay, the same issue would apply to rounding the glass effect. That was my reasoning for making it flat. If the end caps had a rounded glass effect, that would be great as they do not get tiled.

[rodries]

A couple quick things:

@sm – yes we have two different layout configurations, one for 4:3, one for 16:9, with the widths/heights/positions of elements adjusted to fit

@sm – your images look great. I would personally not use a glass effect. I think simpler is better in this case

-caching is a must if the feature is used – I don’t see the point in having this optional. If someone has enough storage for a 350MB episode, and wants to view the episode image+data, they can suffer with another 0.5MB being used. Always loading these on the fly is a silly option IMHO.
-a cached format can be determined now (eg: XML files named to match episode, with image file also matching, in a folder called “cache”)
-it can be populated with sample data for testing purposes. then you can figure out how to retrieve missing data from the GUI
-I would suggest someone to find (or write) an application that will download the cached meta data/images so someone can do this without requiring their Wii be online. We could (potentially) use the same format as some other media center app uses – someone will need to investigate and weigh the pros/cons
-don’t forget some effects (eg: lens flare, shadows, etc) can be done with GX. I personally don’t know how to do them, but this is a possible alternate to large images.
-that’s all I can think of for now.

[Matoking]

I agree there should be some degree of caching no matter what (assuming the metadata option is enabled.) However, the degree of caching should be optional. I think that the user should be able to set an amount of space (or maybe records) to be used at max.

• This would allow people that have large drives connected to their Wiis to utilize that space and minimise internet usage.
• At the same time people with smaller drives or SD cards can limit the space used for caching

[Author]

Posts