I'm currently in the middle of coding my first VLC skin.
I hadn't found any reference to vlc skinning on this forum yet so I thought I'd start this thread, in case someone else came looking.
After some Googlin' and searching through the VLC sections on SourceForge and the VLC CVS tree trying to find more.
I've still only come across this one guide that covers the 'skins2' VLT doctype.
[ Link :: http://www.videolan.org/vlc/skins2-create.html ]
I've also looked over the code from skins2, chaos and void vlt's.
[ LINK :: http://videolan.org/vlc/download-skins2.html ]
These are pretty straight forward, as far as the basics of core functionality goes.
I've also come across these two[2] docs as well.
[ LINK:: http://www.videolan.org/vlc/skins-event.html * ]
[ LINK :: http://videolan.org/vlc/skins-create.html * ]
NOTE: These are based on the old skin format and are there purely for conversion reference from skins >> skins2.
I will follow up soon with the snags I've run into. As well as questions I have regarding the use of Id's on controls, that hopefully someone can answer.
-tFW
Skins2 / VLT skin Basics
-
theFuzzyWarble
- Blank Cone
- Posts: 18
- Joined: 20 Apr 2005 17:49
- Location: nyc
Skins2 / VLT skin Basics
'just because it goes gold doesn't mean it's still NOT beta' -tFW
-
theFuzzyWarble
- Blank Cone
- Posts: 18
- Joined: 20 Apr 2005 17:49
- Location: nyc
ROADBLOCKS!@#$@!#
The skin I'm working on is based on the Neuros Audio Computer [www.neurosaudio.com].
Skin Prototype:
My main goal in creating the skin was to not only pay tribute to the player's unique look but also the functionality of it as well.
Banking on the guess that anyone who would want to seriously download and use the skin would be someone who already owns a Neuros and is familiar with the Neuros' UI.
So, not going with a standard interface was an easy sacrifice to make.
The hard part was reproducing that.
Originally I tried doing this in a single Layout block.
The problem I had was that when the thumbpad state changed, the button images wouldn't match seamlessly anymore with the other four states.
SO, my next method was to try the same code but now with 'hidden / ALPHA masked' buttons.
No images on the buttons. Perfect! Should work right?!
Think again pal...
It turns out that..if a button uses an alpha image.. any part of that image that is alpha is also, untouchable. It just doesn't register the click action.
So it was back to square one.
Well, after a few hours of working out how to seamlessly mimic the Neuros thumbpad UI using VideoLAN's skins2 method, I've made some great progress!!
The thumbpad works nicely, with the images smoothly showing the action.
The only sacrifice was that I had to add a 'double-click' action to the thumbpad control, in order to set restore the image states. Small sacrifice but... it might not even matter now..
The method I used was to create 5 Layout blocks of the entire player.
One for each state of the thumbpad [default, thumb up - down - left and right ], then using a setLayout command on the appropriate buttons, I can toggle each state.
Since you can't have mouseout actions at all, I went with the 'double-click' method to return the Thumb pad to the center position.
So now that the thumbpad UI works. I'm at another roadblock.
It seems that only one event can be called from a button action.
So for example, to raise the volume, I'm using the setLayout function to call the thumbpad up Layout. BUT, now I can't call the vlc.volumeUp function to actually raise the volume.
I even tried calling the layout on the button click action, then calling the volumeUp function from the mainbody image action. Since it's only allowed to accept move and resizeSE commands.
So... back to square one!
As an added punch in the face..
After referring to the videolan site over and over the past few days... I JUST noticed the patent legilation warning in BIG RED letter up top...
so, I will give the VLC skins2 version another day or two[2] worth of attention, shoot an email to the devs as well, but i've already started reading the winamp skin model documentation. It seems like this is the next best alternative. I'd appreciate links to alternatives if anyone has any to recommend.
Skin Prototype:
My main goal in creating the skin was to not only pay tribute to the player's unique look but also the functionality of it as well.
Banking on the guess that anyone who would want to seriously download and use the skin would be someone who already owns a Neuros and is familiar with the Neuros' UI.
So, not going with a standard interface was an easy sacrifice to make.
The hard part was reproducing that.
Originally I tried doing this in a single Layout block.
The problem I had was that when the thumbpad state changed, the button images wouldn't match seamlessly anymore with the other four states.
SO, my next method was to try the same code but now with 'hidden / ALPHA masked' buttons.
No images on the buttons. Perfect! Should work right?!
Think again pal...
It turns out that..if a button uses an alpha image.. any part of that image that is alpha is also, untouchable. It just doesn't register the click action.
So it was back to square one.
Well, after a few hours of working out how to seamlessly mimic the Neuros thumbpad UI using VideoLAN's skins2 method, I've made some great progress!!
The thumbpad works nicely, with the images smoothly showing the action.
The only sacrifice was that I had to add a 'double-click' action to the thumbpad control, in order to set restore the image states. Small sacrifice but... it might not even matter now..
The method I used was to create 5 Layout blocks of the entire player.
One for each state of the thumbpad [default, thumb up - down - left and right ], then using a setLayout command on the appropriate buttons, I can toggle each state.
Since you can't have mouseout actions at all, I went with the 'double-click' method to return the Thumb pad to the center position.
So now that the thumbpad UI works. I'm at another roadblock.
It seems that only one event can be called from a button action.
So for example, to raise the volume, I'm using the setLayout function to call the thumbpad up Layout. BUT, now I can't call the vlc.volumeUp function to actually raise the volume.
I even tried calling the layout on the button click action, then calling the volumeUp function from the mainbody image action. Since it's only allowed to accept move and resizeSE commands.
So... back to square one!
As an added punch in the face..
After referring to the videolan site over and over the past few days... I JUST noticed the patent legilation warning in BIG RED letter up top...
so, I will give the VLC skins2 version another day or two[2] worth of attention, shoot an email to the devs as well, but i've already started reading the winamp skin model documentation. It seems like this is the next best alternative. I'd appreciate links to alternatives if anyone has any to recommend.
'just because it goes gold doesn't mean it's still NOT beta' -tFW
As i don't know how the Neuros Audio Computer behaves, i don't understand completely what you are trying to do. When you are clicking on a thumb, the thumb keeps its position?
If so, why? I would say intuitively that it comes back by itself on such a pad.
If not, why don't you use the "over" state to change how the control looks when the mouse is over?
Maybe it would be more clear if you could put the skin somewhere to be downloaded, so that we can understand the expected behaviour.
Anyway, if you want radio buttons (i.e. a group of buttons, only one of which can be selected at a given time), and/or the ability to execute several actions at the same time, it could be done rather easily.
If so, why? I would say intuitively that it comes back by itself on such a pad.
If not, why don't you use the "over" state to change how the control looks when the mouse is over?
Maybe it would be more clear if you could put the skin somewhere to be downloaded, so that we can understand the expected behaviour.
Anyway, if you want radio buttons (i.e. a group of buttons, only one of which can be selected at a given time), and/or the ability to execute several actions at the same time, it could be done rather easily.
-
Guest
Hey ipkiss
Well the real Neuros' thumb control does re-center itself.
But, when trying to recreate that in the skin, your limited in the fact that you can't define an 'action' on the 'state' parameters; e.g you can't do this over="dothisfunction()", you can only do this: action="dothis()".
The up, over, and down parameters seem to only accept a Bitmap Id name.
The reason I didn't go with the radio button method was because I wanted a more realistic look to the lighting and shading on the thumb controls when they are used. So if you pressed 'Up', the whole thumb control appears to be pushed up.. instead of affecting just the 'Up' button area of the control.
Here's my partial build with the multiple Layout setup:: http://www.fuzzywarble.com/neuros/neurosclassic.vlt
Well the real Neuros' thumb control does re-center itself.
But, when trying to recreate that in the skin, your limited in the fact that you can't define an 'action' on the 'state' parameters; e.g you can't do this over="dothisfunction()", you can only do this: action="dothis()".
The up, over, and down parameters seem to only accept a Bitmap Id name.
The reason I didn't go with the radio button method was because I wanted a more realistic look to the lighting and shading on the thumb controls when they are used. So if you pressed 'Up', the whole thumb control appears to be pushed up.. instead of affecting just the 'Up' button area of the control.
Here's my partial build with the multiple Layout setup:: http://www.fuzzywarble.com/neuros/neurosclassic.vlt
-
theFuzzyWarble
- Blank Cone
- Posts: 18
- Joined: 20 Apr 2005 17:49
- Location: nyc
Done. It should be available in the next nightly build (http://www.videolan.org/~videolan/).
Use ; to separate actions.
Use ; to separate actions.
-
theFuzzyWarble
- Blank Cone
- Posts: 18
- Joined: 20 Apr 2005 17:49
- Location: nyc
-
theFuzzyWarble
- Blank Cone
- Posts: 18
- Joined: 20 Apr 2005 17:49
- Location: nyc
Missing Function
[ LINK: http://www.videolan.org/vlc/skins2-create.html ]
I just noticed that this function is missing from the Skins2 'How-to' page, but should be added.
I found it in the 'Skins2' code and just wanted to make sure no others where missing that I might be able to utilize!
I just noticed that this function is missing from the Skins2 'How-to' page, but should be added.
Code: Select all
playlist.sort()'just because it goes gold doesn't mean it's still NOT beta' -tFW
-
theFuzzyWarble
- Blank Cone
- Posts: 18
- Joined: 20 Apr 2005 17:49
- Location: nyc
Glad to be of service!
also, submitted for your approval..
I've modified the screen.css file of my offline copy of the documentation.
It's really quick and dirty, but if someone else likes it, here's the code:
also, submitted for your approval..
I've modified the screen.css file of my offline copy of the documentation.
It's really quick and dirty, but if someone else likes it, here's the code:
Code: Select all
{margin: 0px; padding: 0px; width: 100%}
A {background-color: #cccccc; color: #000000; margin: 0 0 5 0px; padding: 0 0 5 0px}
A:link { background-color: #cccccc; color: #000000; TEXT-DECORATION: none; border: 1px solid #666666 }
A:active { background-color: #cccccc; color: #000000; TEXT-DECORATION: none; border: 1px solid #666666 }
A:visited { background-color: #cccccc; color: #000000; TEXT-DECORATION: none; border: 1px solid #666666 }
A:hover { background-color: #f5f5e7; color: #336699; font-size: 1.45em; font-weight: bold; TEXT-DECORATION: overline underline; border: 1px solid #000000 }
BODY { FONT-SIZE: .75em; MARGIN: 1em; COLOR: #000000; FONT-FAMILY: "Verdana", Georgia, Times; BACKGROUND-COLOR: #dddddd }
H1 { FONT-SIZE: 1.4em; MARGIN: 0em; color: #ffffff; background-color: #336699; width: 90% }
H2 { FONT-SIZE: 1.2em; MARGIN: 0em; background-color: #508DCB; margin: 0 0 0 10px; padding: 0 0 0 10px; width: 88% }
H3 { FONT-SIZE: 1em; MARGIN: 0em; padding: 0 0 0 20px; background-color: #336699; color: #ffffff; width: 87% }
H4 { FONT-SIZE: 18.5px; MARGIN: 0em; background-color: #CEDFF0; padding: 0 0 0 10px; border: 1px solid #000000; width: 87% }
H5 { background-color: #97A3AE; color: #ffffff; FONT-SIZE: 1.15em; padding: 0 0 0 10px; width: 90% }
P { background-color: #BDC5CD; FONT-SIZE: .90em; margin: 0px 0px 10px 30px; padding: 5px 5px 5px 15px; width: 85%; border: 1px solid #000000 }
.authorgroup {width: 100%; margin: 0px; padding: 0px;}
.note P {background-color: #f5f5e7; border: 0px}
.note H3 {background-color: #f5f5e7; color: #000000}
.title {margin: 0 0 0 30px; width: 87%}
TT { FONT-WEIGHT: bold; FONT-FAMILY: "Courier New" }
HR { HEIGHT: 1px }
.navheader { }
.revhistory TABLE { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 1em 0em; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none }
.revhistory TH { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none }
.revhistory TD { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none }
.note { BORDER-RIGHT: #cccc99 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #cccc99 1px solid; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 1em 0em; BORDER-LEFT: #cccc99 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #cccc99 1px solid; BACKGROUND-COLOR: #f5f5e7; width: 80% }
.caution { BORDER-RIGHT: #f6ea00 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #f6ea00 1px solid; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 1em 0em; BORDER-LEFT: #f6ea00 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #f6ea00 1px solid; BACKGROUND-COLOR: #ffffc9 }
.tipp { BACKGROUND-COLOR: #f5f5dc }
.important { BORDER-RIGHT: #f95e00 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #f95e00 1px solid; PADDING-LEFT: 0.5em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.5em; MARGIN: 2em 0em; BORDER-LEFT: #f95e00 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #f95e00 1px solid; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #f9cdb3 }
.screen { BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 0.5em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.5em; MARGIN: 2em 0em; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #999999 1px solid; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #ebebeb }
.programlisting { BORDER-RIGHT: #b2dbff 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #b2dbff 1px solid; PADDING-LEFT: 0.5em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.5em; MARGIN: 2em 0em; BORDER-LEFT: #b2dbff 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #b2dbff 1px solid; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #f0f8ff }
.important .programlisting { BORDER-RIGHT: #b2dbff 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #b2dbff 1px solid; PADDING-LEFT: 0.5em; FONT-SIZE: 1em; PADDING-BOTTOM: 0.5em; MARGIN: 2em 0em; BORDER-LEFT: #b2dbff 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #b2dbff 1px solid; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #f0f8ff }
.important .screen { BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 0.5em; FONT-SIZE: 1em; PADDING-BOTTOM: 0.5em; MARGIN: 2em 0em; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #999999 1px solid; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #ebebeb }
.informalexample { BORDER-RIGHT: #b2dbff 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #b2dbff 1px solid; PADDING-LEFT: 0.5em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.5em; MARGIN: 2em 0em; BORDER-LEFT: #b2dbff 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #b2dbff 1px solid; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #f0f8ff }
.emphasis { background-color: #ff3333; color: #ffffff; font-family: "arial"; font-size: 13px; letter-spacing: 2px; font-weight: bold; padding: 1px 5px 1px 5px; border: 1px solid #666666 }
'just because it goes gold doesn't mean it's still NOT beta' -tFW
Return to “General VLC media player Troubleshooting”
Who is online
Users browsing this forum: Majestic-12 [Bot] and 4 guests