FIMP Skin Support

As of build 52002, FIMP supports a rather limited skinning system. I don't even have all of the elements skinnable yet, but I'm working on it. ATM, I just want to present you with the possibilities. As a simple demonstration, I've thrown most of the buttons around and switched up the background image in a test skin definition file.

Here is the example -> http://fimp.flaredomain.net/player.asp?skin=test
Compared to the original -> http://fimp.flaredomain.net

Now is the time for anybody interested in skinning to let me know. I hope to have the skinning system completed soon and it's not very complicated at all to create a skin.
Allow me to explain the way I've set it up... Located under the webroot is a skins dir. Within that directory are other individual directories that house all of the necessary files for each separate skin. Among those necessary files is one that stands as the most important: def.fts, which is the skin definition file that sets up the layout and customizes many of the components. The filenames of all the images used for the buttons are predefined. You create images for most of the elements of the player and save them under your skin's directory with the predefined filename relating what they are.
When a skin is requested, the player looks for the specified skin's def.fts file, loads that and then loads all the images it finds in the same directory where it found def.fts. If no skin is specified, it loads the default skin, which is what you regularly see.

I know it may sound complicated, but really...it's very very simple. I want to work on the skin system just a little bit more and then I'll release the schematics to anybody interested in developing some skins. Also, I've added support for local skins. So developers can test the skins directly from their own hard drive. Just set up a folder on your hard drive in the same way you would in the skin's directory on the server

Let me know, guys...

- FLaRe

PS: I'm also going to be adding multilingual support soon. So, I'll be looking for anybody interested in translating to other languages.

[Nezzar]

Ooh, ooh, I want to be the translator for the german version.

__________________
Bred for its skills in magic

[Thorgal]

Sure, count me in! You have about 11 days to further develop the skinning system while I'm workin' on my exams So I guess that makes early June.. can't wait to finally mess around in photoshop again, it's been too long since the last time I did that.

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!

Originally posted by Nezzar
Ooh, ooh, I want to be the translator for the german version.

It'll be a while before I actually have the player ready for translation. I was just giving everybody a heads up. Thanks for volunteering, Nezzar. You can handle the German translation. When the time comes, I'll be sure to let you know.

Originally posted by Thorgal
Sure, count me in! You have about 11 days to further develop the skinning system while I'm workin' on my exams So I guess that makes early June.. can't wait to finally mess around in photoshop again, it's been too long since the last time I did that.

Great! Looking forward to seeing a skin from you, Thorgal.
Good luck on those exams...again

[Neojag]

Why not? count me in mate

__________________
*sig removed. hosted on infected site*

[Nezzar]

Maybe I'll try a skin as well (tho I suck at designing things, but it's worth a try, I think)

__________________
Bred for its skills in magic

Okay, I've been typing up an overview of the schematics for FIMP's skinning-system and should either have them done sometime tonight or tommorrow. So, I'll keep you guys posted.

Sorry it took so long guys, I had some personal things going on that kinda kept me away from getting this done on time. However, I promised I'd get it out to you and here it is. I've created an overview of the skinning system for anybody interested at http://fimp.flaredomain.net/dev/skinning.asp

*Edit: I also wanted to let everybody know that I just finished uploading some new media and I've updated the test skin as well to reflect the system's versatility:
http://fimp.flaredomain.net/player.asp?skin=test

---

Last edited by ShADoWFLaRe85; May 29th, 2002 at 08:27..

[Thorgal]

Ha! Just in time, my exams ended like 10 hours ago I'll have to catch up the lack of sleep from the last 2 weeks, I'll check it out tomorrow afternoon though

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!

[Mr Urt]

I like the cursor, how do u do that¿

btw, is the skin supposed to look like this¿

Attached Images

untitled.jpg (89.6 KB, 132 views)

Originally posted by Mr Urt
I like the cursor, how do u do that¿

btw, is the skin supposed to look like this¿

Yup, exactly like that
I didn't feel like putting in the effort to create a totally new skin. That's the skin developers' job. All I'm demonstrating is the versatility of my skinning system. I wanted to show how everything can be moved around and changed. It's just a test skinning, making sure everything works

As for the cursor, it's just a simple piece of CSS code that only IE6 and any later versions that may come support:

body {
cursor : url("cursor.ani"), url("cursor.cur"), pointer;
}

Plop that into a STYLE tag and place a cursor called cursor.ani or cursor.cur in the same directory. It will load whichever one it finds and if it doesn't find any, it will use the default pointer.

[Mr Urt]

Originally posted by ShADoWFLaRe85
body {
cursor : url("cursor.ani"), url("cursor.cur"), pointer;
}

Plop that into a STYLE tag and place a cursor called cursor.ani or cursor.cur in the same directory. It will load whichever one it finds and if it doesn't find any, it will use the default pointer.

sweet! that's cool! I'll have to try that. thx.

[Thorgal]

Hrmm, I think I may have found a bug. The i-net connection detect feature used to work correctly for me, but now it says "0 - LAN connection". And although I am in fact connected through a HUB, I wonder why it doesn't just say "broadband connection" as it used to...

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!

[Thorgal]

Alright, I just checked out the skinning overview and the standard def.fts, and I must say it looks very nice Powerful, and relatively simple... I'll try and mess with skin parts that aren't included in the def.fts as well

[edit]
Alright, while skinning I've come up with a couple ideas for future versions of FIMP:

- please include the autoplay etc. options in the ASP/script engine; this way, it looks more like a feature-rich player Also, it saves the mess below the skin.

- one other thingie: maybe you should change the engine in such a way, that if it doesn't find the play_over.gif and/or play_on.gif for example, that it simply uses the play.gif image for the over and on status. That way, when skin developers want to see how it looks but haven't yet made these rollover-images, they can still check it out in practice (in this case, without having to duplicate play.gif twice and rename them for the other 2).

- last one, I know it's probably not possible but I'll mention it anyway. I'd like to see the visualisation object transparent/invisible when no song is being played. That way, a skin won't consist of 60% black right at the start. Besides, I got a kickass background for the vis. area and it'd be a shame not to use it
Maybe it's possible with the CSS 'visibility: invisible', not sure.


Well, that's it.. keep up the good work!


[edit]
Hrmm, found a couple of bugs/quirks in the skinning system:

- I can change the marquee text color to white, but whenever I hover over an image, it turns back to default black;

- I know the timer hasn't been positioned yet, but I can't seem to get it within the skin area rather than below it. Even when I have it positioned at 0,0 it shows up below. Also, the width attribute doesn't work; it sticks with the default 35, even if you change it.

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!

---

Last edited by Thorgal; June 1st, 2002 at 01:40..

Okay, I just updated the build to 60102, which should solve a lot of the issues you have described, Thorgal. The only thing I'm not going to be able to fix for the time being is the bandwidth detection, because, it's really not incorrect. Your browser is caching the media and when you go to play it a second time on another visit to the site, it doesn't have to download and plays the file locally, which is detected the same way a LAN is. I'm trying to work out a solution to this problem and I'll be sure to come up with something as soon as possible. For now, clear your temp internet files and just try again...it should report correctly.

I fixed both bugs and added one of the features you suggested in this build. At least, I hope I did...I haven't got time for extensive testing. The problem with the status text was an embarrassing piece of leftover code that was indeed set to change the text color back to black on a mouseover. This had something to do with the old way I was snapping the status back when it wouldn't have to scroll. I would first change it to background color of the status to make it appear less jumpy and then swap it back to black when the snap was done. Well, black happened to be hard-coded into the player, making it difficult to skin, even though I removed the color change to the background color, somehow the change back to black remained.
The timer wasn't really ready for skinning yet. Though, I shouldn't have suggested anybody try abs pos because I knew it wouldn't work. The timer was still being defined outside of the player's division, which caused it to setp on the outside. To solve this problem, I have defined it within the player's division and told it to position outside, instead. So, now you can stick it in the player, if you wish.
The visibility change was actually a very good idea. I've implemented it so that visualizations display whenever the player is playing or is in pause mode. Once you stop it, it dissappears.

I'm afraid your other suggestions really won't matter in the future. I don't plan to have everything located underneath as it is. The player will be windowed and I'm going to have a drop down context menu that will allow the user to access all kinds of different settings and other things giving them the abilitity to manipulate the player. These settings will act like windows, appearing in popups and reporting the new settings back to the player page that spawned them. I'm not ready to make such a move because I don't have it as configurable as I'd like it, yet.
My next move, though, will be to setup some network statistics. This will allow the user to view the % downloaded of the file, lost packets, the protocol they're using, etc...

Anyway, thanks a ton for letting me know about those, Thorgal. I hope I've made things easier for you now You shouldn't have to change anything except add your abs pos to the timer.

- FLaRe

[Mr Urt]

where do u get ur cursors, I searched on google, but couldn't find ne sites that I could dl them from. thx!

btw, great work on fimp! what exactly does the "debug" button do neways¿

[Thorgal]

Alrightey! Thanks for fixing/changing everything so quickly... my skin looks a lot better already Have to add the control buttons though, but most of it is finished.. I'll try to have it finished by tomorrow. Might set a good example for the other skinners

Anyway, I have a couple of other remarks:


- " I'd really like to see somebody try and animate some of the components and the def.fts file is standard CSS. So, I'm sure people could do a lot more then I've set example for." - Correct me if I'm wrong, but the only parts that I could animate are the images that have been defined in the skinning engine. I don't think there's much use in animating the control buttons, to name an example. Until there's a way to add non-standard images (which can then be animated), I'll stick with the default possibilities for now.


- "The player will be windowed and I'm going to have a drop down context menu that will allow the user to access all kinds of different settings and other things giving them the abilitity to manipulate the player. These settings will act like windows, appearing in popups and reporting the new settings back to the player page that spawned them. " - A couple of things: what do you mean by 'windowed' exactly, a popup, or..? I thought about a popup myself at first, but since the browser would first have to load a normal window which would then launch the popup, you'd have 2 windows instead of 1.
Also, which place did you have in mind for the drop-down menu? Hopefully not in the skin area, since it'd be too crowded and ugle imho.

Since the popup thing wouldn't work, I guess FIMP could just as well use the available browser space. That's why I thought about putting a top-frame above FIMP, with buttons that launch setting windows. When FIMP's more configurable, I assume you'd categorise the options. You could then make buttons for these categories, and they're easily accessible via the top-frame. In the same frame, you could also put stuff like how many users are listening, the WMP button, network statistics, etc.

That, or implement a 'settings' button in the skin area, which would launch a popup with all the configurable settings, categorised a la winamp with the categories in a left-frame, the actual config area in the right-frame.


- Ok, I found out FIMP is actually able to use Winamp playlists. PLAYLISTS! This opens up a whole new world. One could run a server at home, go to work, download his playlists from there, and play the mp3s that are on his HD at home. That is possible, right?
Anyway, for me this is reason enough to put the prev/next buttons and a random function somewhere at the top of the priority list (I tried shuffle, but it didn't seem to work).

Also, it would be even cooler if FIMP could list the songs of the playlist, like a playlist editor without the edit functions (well, those would be nice, but not absolutely necessary).

This made me think about the remote media select list: why still have it? You could put a window next to the player area, with a horizontal divider somewhere in the middle, splitting it into 2 smaller windows. In the top window, you could put the list of remote media. In the bottom window, you could load local media, which would naturally also function as the playlist area which I mentioned earlier. I'll try and make a sketch of all this later on, as soon as I've finished my skin.

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!

---

Last edited by Thorgal; June 1st, 2002 at 16:19..

Well, what I meant by animation is possibly something for the buttons on the mouseover effects. Keep in mind that it's possible to only loop an image once. Maybe, you could have the button materialize or something similar. I'm just suggesting things, but I realize that, since the image names are fixed, it's difficult to animate certain things such as the player's body. I assure you that I'm trying to work on a solution for this. However, it's difficult, because it would have to mutually work for local skins and the remote skins alike. I could easily put in an ASP solution for checking the files on the server, but there aren't enough permissions to access the user's HD in such a way.

I don't plan on player.asp being the home page. The way I hope for things to work in the future is turning FIMP more into a site instead of just the player itself. I've already worked on gathering lyrics, album covers, and other such content for this. I also wish to include news about the artists, the music industry, etc... A lot of this is undecided atm, but I do know that I want the player to be launched in a new window, sized proportionate to the skin area.

I'll probably have either a menu at the top or one that appears when you right click. My goal has been to design this in such a way where it acts similar to an actual application. So, you'll probably have your regular file, edit, view, configure, help and such menus at the top of the newly created player window. Also, since the new window will not use IE's menu, I hope to make this one seem to take its place. The new windows that appear for the settings won't really be windows. At least, I'm hoping I can take this route. If you notice what happens when you click the "About" button, you'll get an idea of what I'm trying to get at. Do you notice how it says "Web Page Dialog" in the titlebar and there's no taskbar icon for it? Also, you cannot access the player window without first closing the popup. This is what's called a modal window. The modals will pop up with the settings grouped by what they modify and will most likely be launched from the menu at the top of the window.
So, think of it like this. If you want to open a new file, you would go to the file menu and select open. A new window would popup with all the options for opening a file. I plan on having the ability to play local files, remote files, internet radio, etc... If you think about it, I can't possibly include all of that on one page. So, I feel that doing this heps to save on the clutter. Yes, btw, I also knew that it could use playlists, but not aware that winamp playlists worked. Thanks for pointing this out to me! I brought this up right now to demonstrate that this feature could be accessed via something like File > Load Playlist. See what I'm getting at here?
So, selecting media will change entirely by the use of modals. Such operations will get a new window, making it simpler to add flexibility and keep the player itself looking clean. I just keep the remote media selector there for easy access and currently it's the users' only means of changing songs other than what's on their HD. As more options come available, you have the ability, as a skin developer, to change the bar's CSS visible property to 'hidden,' if you wish for it to not be in your skin.
As for the shuffle feature, playlist support is really skimpy. So, I coded it to shuffle throughout all the tracks in the remote media selector. It ignores any playlists. I'll change this and I've already thought of creating a playlist editor. This will come as the feature comes.

Wooh..... That was a lot of typing. Thanks for all of the feedback, Thorgal. You're really helping me out here.

Mr Urt, the debug feature is there mainly for my use to determine what exactly is going wrong with the player. I can also ask users reporting problems to type a certain value in there and report the results back to me, once again, helping me to figure out what's going wrong.
Technically, the debug feature allows for any code to be executed in real-time, even while the player's running. So, I can check certain values at the time of the error and possibly change some values to see if it solves the problem.
Use this string in the debug prompt and see what happens :

MsgBox "Hello World"

Once again, thanks for all the help and feedback, everbody

*edit: Cursors can be found all over the place. I just looked for stuff like "cursor files," "cur files," "ani files," "cursor animations."

---

Last edited by ShADoWFLaRe85; June 1st, 2002 at 20:08..

[Thorgal]

FIMP fans, behold! The first custom skin is here, entitled "blue disco" I'm usually not much of a skinner, but the simplicity of FIMP's skinning system was tempting Shadowflare, you might want to upload 'n link this one on the FIMP site

I'll attach an image of how it looks in practice; the skin itself is attached to the next post.


NOTE: In case you think you've already read this, you're right :P Right after I posted it I discovered the pause button, which I never noticed before.. fixed.

Attached Images

fimp_bluedisco.jpg (43.3 KB, 100 views)

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!

[Thorgal]

... and here's the skin zipped up and ready for use.

[edit] Oh, btw, the only reason why the previous/next buttons don't work is because they're not implemented in the skinning engine yet The images for these buttons (including the _on and _over versions) are already included in the zip file.

Attached Files

fimp_bluedisco.zip (61.4 KB, 2 views)

__________________
- Thorgal // Design guru of NGEmu and Emuforums
AthlonXP2200+, 768MB DDR333, Radeon 9700Pro, LG 915FT+, 130gb HD

You think Emuforums looks a bit messy? Don't blame me!