Not logged in. · Lost password · Register
Forum: Skins RSS
Xml Skin Update
Page:  1  2  next 
Keefy #1
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Hi All,

OK, I've been working slowly on this due to other commitments. Like the best weather we've had for a while around here.  :-D

I attach the next version of the XML skin I've beta'd before here. This one is much more functional, it should be fully usable now. I hope you'll like it.

Simply unzip into the usual place on a BrowseAmp 2 Beta 3 installation, select it as the active skin, then point a browser to it.

Things you may be interested in:

Timer

The timer works by grabbing the current track position and length from Winamp. These are then fed into javascript Date objects. After a little bit of mind-bending mangling, you can work out the current time on the track, provided it's still playing. A check is made to see if it's actually paused. Click on the time to toggle between position/remaining.

The countdown timer is also used to schedule an automatic refresh when the track ends. Neat, thanks go to Wal-Mart's post in the Skins area for the inspiration to do this, where he did a similar idea with a completely different method.

The time is updated any time the "CurrentTrack" XML is retrieved. Which is on just about any event you do, so it should remain pretty accurate.

Look and feel

Yes, it sucks. I'm not a web designer. You may recognise some of the icons as being screen grabs from a certain web browser.   :whistling:

Of course, this is all 100% skinable, and offers to help out are always welcome!

Why "Song Queue" and not "playlist"?

This isn't meant to be a front end to Winamp. It's a front end to a music system, aimed at making it real easy to use and understand. I work in software development and un-intiative GUIs piss me off. Anyone should be able to use this with very little thought.

Problems that you need to be aware of (and how to avoid them)

I hit a major snag. A huge one. Basically, I could not find a way to allow track names to contain all sorts of weird characters. Henry helped out by allowing URL-encoded tags as an output of BrowseAmp, however that was only half the battle.

Characters like ' and " did not play well in the Javascript and the XML. They would either be interpreted as the script itself (breaking it completely), or I would replace them with other characters, breaking the links they represented. All of the HTML that comprises each panel must be capable of being stored in a JS variable, because of the myObject.innerHTML = variable method used to update the panel.

This was really really difficult to pull off. I got there in the end by doing some custom character replacements in the data before it is presented to the browser. For example, instead of working with ' characters, I replaced them with `. That was the breakthrough that enabled it to work, as it allowed me to use ' characters in the script without fear of getting one from Winamp.

Panels

There are a few panels on the page. The most obvious ones are: CurrentTrack, Controls, Playlist and Browser. Each one is associated with an XML file retreived from the server. You don't have to do it this way, but it makes things pretty efficient in terms of data transfers as well as making it easy to play around with.

The panels are interfaced with using two main functions:
   winamp(panel, command)
   update(panel)


The idea is that the HTML onclick events drive these. So, for instance, consider adding a track from the browser to the playlist. This starts with a command to the Playlist panel, telling it to send the relevant BrowseAmp command (100% Browseamp syntax). This carries an implicit update to the playlist panel, why is why we use that as the panel in the Winamp function call. Also, as the "playaddedifnotplaying" option is used, this could potentially change the current track, so we will need to update CurrentTrack as well. The code on the "onclick" would be:

<a href="#" onclick='winamp(xapos;Playlistxapos;, xapos;addMYTRACK&playaddedifnotplayingxapos;);  update("CurrentTrack");'>MYTRACK</a>

The problems mentioned later in this post are the cause of the strange strings above. The xpos; will get changed to ', and & will undergo the usual conversion. I had to use "xpos" because the track data in the XML could also potentially contain an apostrophie as "&apos;", so I first change all of them to back-quotes (`), then change the xpos entries to proper apostrophies that the Javascript will understand.

So, in an easier to comprehend way, here's what that'll look like after the change.

<a href="#" onclick='winamp("Playlist", "addMYTRACK&playaddedifnotplayingx"); update("CurrentTrack");'>MYTRACK</a>
Which will really run the following code when clicked:
winamp("Playlist", "addMYTRACK&playaddedifnotplayingx");
update("CurrentTrack");'
Note that adding a track from the Browser to the Playlist doesn't require a Browser update. Contrast this with the command used to change directory in the Browser.

Any questions, just ask. The finished version will be fully documented and will explain the above in a better way...still at beta remember!
The author has attached one file to this post:
XML.zip 29.7 kBytes
You have no permission to open this file.
Avatar
Henry (Administrator) #2
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
Seems not to work with IE5. I'll check this out with IE6 (needs a reboot...). Back in a few minutes!

ps: the server variable can be found in \client\winamp.js ...
Keefy #3
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Thanks for that, I've been working with IE6 myself. What is the problem seen on IE5? Is it 5.5 you have?

Oh, and if you need to change the server manually (it's localhost:1234 at the moment), beware that there are two lines that set it in the  \client\winamp.js file, both in the first 10 lines. You'll need to change the last one.
Avatar
Henry (Administrator) #4
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
Yeah, works great with IE6! Really great job. Especially the weird characters work w/o problems so far.
And the pages are generated really fast!  :-D

Some thoughts
- I wonder why IE5 does not work. Your last beta did!
- Maybe you can set the default port to 80. better: read it from the browseamp.ini in an installer.
Avatar
Henry (Administrator) #5
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
The control panel (play, stop ...) works good. Everything else does not.

Here is a screenshot 'cause I don't know how to describe the problem (made with IE 5.00.3315.1000  ;)  , it's the default Win2k installation)
[Image: http://www.uni-ulm.de/~s_hthasl/tmp/XML.gif]
Keefy #6
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Looks like a problem with the character substitution stuff I had to do. I'll take a look at it tomorrow (hopefully), but I'm going to have to find an old installation of IE, 'cos I don't have 5.5 only any machines close at hand.

Mind you, I was considering reimaging an old system I have, onto Win2k. That's probably what I'll need to do...

Thanks for the screengrab, at least I know where to look. If you boot back to the 5.5 installation you have at some point in the next day or so, I would be very grateful if you could try this:

In the function "winamp()" inside Winamp.js, locate the following:
} else if (source == "Browser") {
        if(drawBrowser == true) {
      BrowserXML.load(url);
      returnString = urlDecode(BrowserXML.transformNode(BrowserXSL.documentElement));
      Browser.innerHTML = returnString;
      //alert(returnString);
        }

Change the line that contains the urlDecode function call, so that it passes a second argument, 'true'.

returnString = urlDecode(BrowserXML.transformNode(BrowserXSL.documentElement), true);

This will activate some debug alert boxes, one pre-urlDecode and the other post-urlDecode. You should get both of these when initially loading the page. A screen grab of each of these could be all I need to work it out.

Cheers,

K.
Avatar
Henry (Administrator) #7
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
here is it:

MessageBox #1
MessageBox #2
Keefy #8
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Brilliant, thanks!

Looks like my initial guess was way off, seems that the XSL transform isn't taking place, hence the <xsl:xxxxx> tags all over the place. Probably an issue with the XML namespace, the MSXML ActiveX object is a bit weird as it was written before the standard was finalised. I'll look at the namespaces in the original version I posted, hopefully I'll be able to get a potential fix in quickly.
Keefy #9
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
OK, this is becoming a major hassle. When reverting back a level on the XML parser in IE, you lose a lot of stuff. First, the alternate colour for each row is broken. Then, maths is impossible in XSL, so I can no longer have a transform that returns the total number of seconds for TrackPosition, so I need to do two, one for minutes and seconds.

Once I get all that working, I see something weird going on in the Browser, none of the links work. Seems like the XML transform is doing some more weird character stuff, probably buggy stuff from the old XML parse engine. I've played around, but it's looking like major changes are required. I think it's related the "/" & "\" feature request someone put in, looking at the links, the slashes are disappearing.

Question: How common is IE6? Could I get away with ditching 5.5 support? I could just be selfish on this, as I've got IE6 everywhere myself, but is this something that will basically render this skin useless for most users? I'm doing this for my own personal use at home, but I'd like to share everything back.

Of course, when I try to fit this into PocketIE, I might find the same issues there. Hmm, more work required...need to come back to this in a couple of days, got real paid-for work to do...  :angry:
Avatar
Henry (Administrator) #10
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
According to my website stats 78,1% of the visitors use IE6.x. So maybe you don't waste too much time on that...

I'm afraid to update my working Win2k system to IE6 and I use WinXP with IE 6 only for playing games  :-D
Keefy #11
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Doh! The "use full pathname" option had been selected, which was causing the problems I thought were due to the dodgy characters in my last post. Grrrr, I'll need to come back to that and figure out why it doesn't work on my skin. Probably the ":" characters, and the "/" vs "\" stuff.

I've got it all working in a form that should work in IE5.5. I've had to remove the alternate-row colour stuff from the XSL, as the primative parser in IE<5.5 doesn't support the required commands. Actually, it doesn't support much. It is simple enough to upgrade the XML processor in a browser, the problem largely arises from the fact that MS shipped their XML parser before the format was finalised. The namespace stuff in the XSL files is where the parser is selected. This is why some parts (e.g. CurrentTrack) worked before on IE5.5. I'm not sure if asking end users to update this is a good idea though, especially if they are working on web-dev stuff. Mind you, anyone working with this will probably already have done the upgrade. I'll come back to this at some point as well...

I also managed to implement the alternate row stuff in javascript. D██n, that's a neat language, I'm glad I took the time to play with it.

Anyway, the attached zip of the skin should work now. I've also followed Henry's suggestions on sensible defaults for the server IP:port setting, though in the final you will be prompted for this.
The author has attached one file to this post:
XML.zip 30.8 kBytes
You have no permission to open this file.
Avatar
Henry (Administrator) #12
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
Yes that's better! But I have to disable "use full pathname" for browsing (as you said...). Everything else works fine but it's very very slow...

Sometimes IE says: ')' expected in line ###
Maybe there is a typo somewhere.
Keefy #13
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Strange, I just loaded it up and yes it was very slow. I worked this out to be the "display other drives" option plus a wierd environment quirk I have on this laptop. It's normally connected to a domain, so when it's on my home network I get hidious timeouts when I open "My Computer". Looks like any app that tries to browse this dir is going to be flaky on my machine. Can't be helped...I won't be controlling a Winamp on here anyway, it's only for the development.

However, when I disabled the option (and no doubt when I'm back on the corporate LAN with that option back on), everything was super fast. Pretty modest machine this, processor is around the 900 MHz mark.

Could be an IE5.5 thing...
Keefy #14
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
Oh, and it looks like it doesn't like & in a track or folder name, yet another character that confuses the javascript. There may be more...need to work my way through them.
Guest_Pyrotherm (Guest) #15
No profile available.
Link to this post
Hey Keefy, I dabble in some web design myself, and i was wondering if you might want me to help you a little on the 'Look & Feel' aspect of your skin, i'm always here to help you guys in any way i can!  :smart:

if you wish to contact me via e-mail my address is [email protected]
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Page:  1  2  next 
Go to forum
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Page created in 234.9 ms (131 ms) · 105 database queries in 72.2 ms
Current time: 2018-08-19, 02:22:20 (UTC +00:00)