The VideoLAN Forums

Hi guys

As I want to become a UI-Designer one day (no not web but UI in general and not just the graphics the whole usability stuff too) I thought to myself, that doing a vlc skin would be the perfect practise

So here we go mockup:
clicky

up to now I have done the mockup for the main window. some playlist goodness will follow till the end of this week.

my goal is to deliver a fully working skin till the middle of july

c&c are very welcome

UPDATE: 04.07.2007
- finding a name - done -> Valencia (thanks CloudStalker)
- finish mockuping - done
- skinning - in progress

current skinning status:
04.07.2007: basic window is done, play/pause open buttons are already working, timeslider is working, resizegrip in the right corner is working

06.07.2007: volumeslider working, mute button, window actions, skip ffw etc working, EQ/PL button integrated but not working

11.07.2007:
I started adding the dropdown functionality and three problems struck ruthlessly
Problem no.1: The actual Video is always on top, which is somehow logical as video is a overlay by the graphicscard. So the dropdowns appear always behind the video and not as intended over it.

29.09.2007:
found some time and motivation and started implementing the playlist

Problem no.2: In order to achieve Dropdowns I have to change the Layout which screws up the video and VLC partly crashes -> window disappears, sound keeps playing...

Problem no.3: i can't control which layout is shown when you load the skin so sometimes one of the dropdowns is already open :/

I hope you have any suggestions how i could solve these problems. The only thing I could come up with is leaving the dropdowns away or start from scratch

nighty download is available for all the daredevils out there
download here

Cool. If this one is as usable as it seems to be, I love it. I just hope the playlist will be great.

Btw, no menus ?

hi

thx for the positive response

I am currently analyzing all the other skins that where alredy done and working through the skinning guide in order to get a feeling what the skin2 engine is capable of and what can be realized. So until now i have just done all the basic stuff that will surely find its way into the final skin

menus for example are a point I am not that shure about how they can really implemented so I will check some skins and how they do it

I am also thinking about integrating all the stuff like play,pause,etc into the playlist window. So if you want to use vlc as a music player you won't have to open a dozens of windows

so stay tuned

hi

a little update:
Playlist!
I have thought up two possible realisations:
a, playlist attached to main window
b, playlist independent window

I personally like b best. Maybe both will make into the final skin so you can choose which kind of playlist you prefer

http://bubblebird.at/cg/vlc_skin_2.png

all the fonts except the ones in the buttons will propably change

I think I like it separated.
Since you are interested in the GUIs, do you know that we are updating the main GUI ?

yeah i already read in some threads
If you want you can use some elements from my mockup

Unfortunately for a playlist attached to the main player...
If you want to switch layouts to show the playlist or the current playing media, VLC has a major bug that stops the video playback, breaks the video window out from the skin, and does other strange stuff.

It seems this bug is not going to get fixed, so a separate playlist may be your only reliable option.

Have you tried a recent nightly build? there's a small preview video window that appears under the playlist (embedded) and you can still browse through the playlist, unless we're not talking about the same thing.

Yes, the default nightlies interface is awesome. But when you switch to skins mode and use a custom skin, that old annoying bug is still there.

The good news is, I like the new interface so much, I don't know if I'll be using skins mode in the future.

Yes, the default nightlies interface is awesome. But when you switch to skins mode and use a custom skin, that old annoying bug is still there.

The good news is, I like the new interface so much, I don't know if I'll be using skins mode in the future.

Hmm I hear ya, but I thought that I read something, somewhere on this forum that said that maybe, possibly there might be some improvement between the QT4 interface and the skins2 interface. Grrrrr. It's somewhere in this forum but I cant find it.

hi i digged a little deeper into the skinning api and missed something really important that would make the skinning way easier. (Maybe it is possible and I just didn't see it xD but anyway).

In one downloadable skin there are customized dropdown menus. But the creator had to make a Layout for each of those dropdowns. So the xml is really pumped up with loads of unnecessary repeating lines of code.
If you could show/hide groups like divs in html you woudln't have to do that because you could just view/hide the part of the layout you currently need. That would make the process of creating a skin much easier and I bet it would even decrease the time needed to load and render a skin.

just some thoughts. Mockup update will follow tomorrow ;D

update:

http://bubblebird.at/cg/vlc_skin_3.png

sorry had a lot to do the past few days :/

I going to take a centeraligned approach for the dropdowns. I hope ya like it

i like your design... nice, clean and simple

keep up the good work

- Asim

Looks very neat. I like it very much

hi

justed wanted to let you guys know, that I ain't dead yet ;D

I'll start with the real skinning next week. Maybe i'll post a little mockup update for the button states this weekend.

still thinking of a good name for the skin xD

already found some possible names:

• avalon
• sunus
• vienna
• polar
• unichorn
• minastirith
• blanc
• sober
• brittle
• forgodssakewhydoesaskinneedaname

I like
avalon,
unichorn,
vlcisagoodmediaplayeruseitordie,

arhelmaninquë or arhelmalossë

How about a name with the letters V L C in it, like: VaLenCia (Valencia, Spain). Well my work here is done.

hi

i really like your valencia idea cloudStalker. i'll think about it ;D

http://bubblebird.at/cg/vlc_skin_buttonstates.png

here are some rough drafts of how the buttons states could look like always from left to right normal - over - down

I also started to plan a black version of the skin that will basically use the same skin file just with other images. So when this skin is pretty much finished porting it too black shouldn't be much of a hassle

hi

today I started with the actual skinning an HERE is the proof ;D

not much yet but I am getting into it.
I'll stick with the name Valencia(thanks for that again cloudStalker).

hi

from now on you can download the latest version from HERE

for the current skinning status please go to my first post

11.07.2007:
I started adding the dropdown functionality and three problems struck ruthlessly
Problem no.1: The actual Video is always on top, which is somehow logical as video is a overlay by the graphicscard. So the dropdowns appear always behind the video and not as intended over it.

Problem no.2: In order to achieve Dropdowns I have to change the Layout which screws up the video and VLC partly crashes -> window disappears, sound keeps playing...

Problem no.3: i can't control which layout is shown when you load the skin so sometimes one of the dropdowns is already open :/

I hope you have any suggestions how i could solve these problems. The only thing I could come up with is leaving the dropdowns away or start from scratch

1. It sure would be nice if we had z-order capability with alpha transparency. We've talked about this in the past, wanting on-screen controls and other niceties.

2. Welcome to the headache... I don't even understand why different layouts are included in the skin DTD, because this show stopping bug completely destroys any use of it whatsoever. Unfortunately, it has been stated this bug will not be fixed.

3. We've talked about user defined variables as well. ipkiss even thought it was a good idea, but as you may have read, has no time to work on new features.

Best of luck...

1) There is an implicit z-order: controls are stacked in the order of their definition in the XML (for a given Layout). So make sure that your images are defined after the Video control. It may still not work for the Video control though, as this one is treated very differently than other controls.

2) It would be nice to give it another try after the Vout rework. As this bug really annoys many people (including me ), I hope it will be dealt with one day (the question is when...)

3) What about adding an action to change the layout just before vlc.quit(), when you are in one of the menu layouts?

BTW, instead of changing the complete layout when opening a menu, did you consider using a separate window (which would have to be moved all the time with the main one, so anchored) to display only the menu? It looks like a solution to the code duplication in the XML, and a work-around to the Video control bug. This may require the notion of z-order for windows, though.

mh i like the window idea! i'll try it this evening after work
i already tried putting the video under the images by putting the video tag over them but didnt work :/ just like ipkiss said the video is handled differently.
regarding the z-order problem with the windows some kind of onFocus or onKillFocus attribute for the window would be nice :/ so you can fire an action when the focus lost or gained

EDIT:
Okay that won't work either because the new window doesn't "know" where the main window is positioned. :/

i already tried putting the video under the images by putting the video tag over them but didnt work :/ just like ipkiss said the video is handled differently.

the video tag should be _above_ the images if you want the images on top of the video.

regarding the z-order problem with the windows some kind of onFocus or onKillFocus attribute for the window would be nice :/ so you can fire an action when the focus lost or gained

This was not my point. I was simply saying that the z-order might be a problem because when displaying the "new" window (click on a menu), it could appear below the main window (but I'm not sure, just test it).

Okay that won't work either because the new window doesn't "know" where the main window is positioned. :/

If the new window is anchored to the main one, it will follow it, even if the new window is not displayed. So the positioning shouldn't be a problem.