Remote "NowPlaying" Display

[MillmoorRon]

	// Repeat Status Icon

	SqueezeJS.UI.RptStateIcon = Ext.extend(SqueezeJS.UI.Component, {

	onPlayerStateChange : function(status){

	var myImage=document.getElementById('repeaticon');

	if (status["playlist repeat"] == 1)

 	 myImage.src="icons/repeat.png";

	else

	if (status["playlist repeat"] == 2)

 	 myImage.src="icons/repeat_all.png";

	else

	 myImage.src="icons/no_repeat.png";

	this.el.update(myImage.src);

	}});



	new SqueezeJS.UI.RptStateIcon({el: 'repeaticon', noLink: true});



	// Shuffle Status Icon

	SqueezeJS.UI.ShflStateIcon = Ext.extend(SqueezeJS.UI.Component, {

	onPlayerStateChange : function(status){

	var myImage=document.getElementById('shuffleicon');

	var shufflestate;

	if (status["playlist shuffle"] == 1)

 	 myImage.src="icons/shuffle1.png";

	else

	if (status["playlist shuffle"] == 2)

 	 myImage.src="icons/shuffle2.png";

	else

 	 myImage.src="icons/no_shuffle.png";

	this.el.update(myImage.src);

	}});



	new SqueezeJS.UI.ShflStateIcon({el: 'shuffleicon', noLink: true});

I have set a breakpoint on the 2 lines above which state:

onPlayerStateChange : function(status){

But nothing happens for either even though the icons change when 'shuffle' is picked.

Is this correct?

[mherger]

Remote "NowPlaying" Display

> I have Firebug but I'm not sure exactly where to find that event. Could
> you please explain in more detail.

onPlayerStateChange methods are called whenever a player state has
changed. Eg. shuffle, new track, repeat etc. You could use firebug to
set a break-point in those methods to see who is called and who is not.
Setting a break-point would interrupt the script execution whenever you
hit that line.

--

Michael

[MillmoorRon]

Michael,

Thanks for your quick response.

I have Firebug but I'm not sure exactly where to find that event. Could you please explain in more detail.

The HTML does change correctly when 'shuffle' is picked but not for 'repeat'.

Paul

[mherger]

Remote "NowPlaying" Display

> I have noticed that the 'repeat' status icon will not update on its own,
> only after some other event (pause, shuffle, etc.) is fired.
>
> Can anybody see anything wrong in my html syntax (in zip file) or is it
> a bug with the server?

I'm seeing nothing obvious. Can you check with firebug or similar
whether its onPlayerStateChange is even called when you change the
shuffle setting?

--

Michael

[MillmoorRon]

Mine is designed for my TV so no buttons.

Things I've been playing with:
Status icons for power, playing, shuffle and repeat.
Non-Flash Clock with only hh:mm so less annoying flicker.
Custom font for the clock (not working remotely!)
External style sheets for different devices.

[ATTACH]14874[/ATTACH]

I've done so much cutting and pasting between different versions that all comments and credits have been lost - apologies to those whose work I used!

I have noticed that the 'repeat' status icon will not update on its own, only after some other event (pause, shuffle, etc.) is fired.

Can anybody see anything wrong in my html syntax (in zip file) or is it a bug with the server?

I'm using Logitech Media Server Version: 7.7.3.

[Viragored]

Now here's an oddity. My "Now playing" html file is running quite nicely (but you'll see I haven't changed much since my previous posts). But the way the screen is drawn seems to vary depending on how the source file is addressed by the web browser. I've attached two pictures of the html file running in Google Chrome - one addressed via the "Vortexbox:9000" path, the other via the router's path starting "192.168". So what I'm seeing is the same file, from the same Linux machine, at the same time but being drawn noticeably differently by Google Chrome on my Windows PC depending on the path followed to find the file. Frankly, I'm confused, bemused, bewildered....

(The taller image is delivered via 192.168; the letterbox image via Vortexbox:9000)

[MillmoorRon]

Mine is designed for my TV so no buttons.

Things I've been playing with:
Status icons for power, playing, shuffle and repeat.
Non-Flash Clock with only hh:mm so less annoying flicker.
Custom font for the clock (not working remotely!)
External style sheets for different devices.

NowPlaying.zip

I've done so much cutting and pasting between different versions that all comments and credits have been lost - apologies to those whose work I used!

[mherger]

Remote "NowPlaying" Display

Check out the sources for HTML/Default/Main.js and HTML/EN/UI.js.

> 1) identify the file type that is playing (eg flac, mp3) and display
> it as 'codec'

SqueezeJS.UI.Bitrate would give you the bitrate and format (if known), as
shown in the default skin.

> 2) add a 'pause' button to the controls

SqueezeJS.UI.Buttons.Play gives you the play/pause button.

> 4) display only the 'track artist', and not the album artist,
> composer and other names that are returned by the code (which originally
> came from Michael Herger's thread)

That'll be a bit harder. You'd have to re-implement the contributor
parsing as defined in Base.js (around line 670).

--

Michael

[Viragored]

A bit of progress

I've done a bit of work trying to understand what SqueezeJS and Javascript are all about, which has got me a quite nice wide screen 'now playing' display running in Google Chrome.

I found a thread where Michael Herger may have kicked off the idea in the first place - http://wiki.slimdevices.com/index.php/SqueezeJSTutorial

There are some things I'd like to do with the display, but haven't yet been able to figure out how to achieve them:

1) identify the file type that is playing (eg flac, mp3) and display it as 'codec'
2) add a 'pause' button to the controls
3) colour the control buttons to be black with text colour and size to match the rest of the display
4) display only the 'track artist', and not the album artist, composer and other names that are returned by the code (which originally came from Michael Herger's thread)

If anyone could point me to where I could learn the basics to achieve these things, I'd be most pleased (not to mention, happily occupied for a couple of evenings!)

[Viragored]

I don't know anything about the Remote display but LMS uses the Perl Template Toolkit which means each LMS html page is pre-processed by the toolkit before true html is available. The toolkit directive are enclosed by [% and %]. So the pages you have are waiting to be processed and as such not true html and I guess Dreamweaver is of no use.

See here for more info on Template Toolkit http://www.template-toolkit.org/about.html and specifically about [% PROCESS %] http://www.template-toolkit.org/docs...ection_PROCESS

Thanks, that explains why Dreamweaver is wrongly reporting errors. So much to learn.....

[bpa]

Can anyone tell me if there really is a syntax error on these lines, and if so how to fix it? Or is Dreamweaver mistaken? As you'll see from my earlier post, the html file does execute and display in Google Chrome on my PC.

I don't know anything about the Remote display but LMS uses the Perl Template Toolkit which means each LMS html page is pre-processed by the toolkit before true html is available. The toolkit directive are enclosed by [% and %]. So the pages you have are waiting to be processed and as such not true html and I guess Dreamweaver is of no use.

See here for more info on Template Toolkit http://www.template-toolkit.org/about.html and specifically about [% PROCESS %] http://www.template-toolkit.org/docs...ection_PROCESS

[Viragored]

I've never explored Javascript before, so please forgive me if I am coming up with dumb questions.

I just loaded the html file into Dreamweaver to take a look at it there, and find Dreamweaver is reporting a syntax error on line 10:
<script type="text/javascript">[% PROCESS html/vars.js %]</script>

I compared this line to 12, which is very similar, but had no error reported:
<script type="text/javascript">[% PROCESS html/SqueezeJS/Strings.js %]</script>

The easiest way I thought of to get rid of the syntax error (since I don't yet have any idea what constitutes correct syntax) seemed to be delete the line, which I did. Dreamweaver then reported a syntax error on line 12. Bah!

Can anyone tell me if there really is a syntax error on these lines, and if so how to fix it? Or is Dreamweaver mistaken? As you'll see from my earlier post, the html file does execute and display in Google Chrome on my PC.

I also loaded into Dreamweaver the file that sockenschlumpf provided in post #54, and got the same errors, which makes me think it's not really an error at all. But it would be nice to know.

(By the way, sockenschlumpf's file produces a better display on the wide screen monitor than the first one, and all this has made me put a Raspberry Pi on my birthday wish list. I can foresee hours of fun getting to grips with Linux and having this sort of thing showing up on screens round the house!)

[Viragored]

Well, more stuff to learn! I've been prowling around inside the html. The wacky clock time is coming from the code I quote below, it's actually 18 hours behind my time, being "MST", Mountain Standard Time in the USA. My time is GMT/UTC +12 hours.

The fix is easy - change MST to NZT and the clock now shows the correct time. I believe it will also auto-adjust for daylight savings.

Here's the clock code:
<td id="clockarea">
<script src="http://www.clocklink.com/embed.js"></script>
<script type="text/javascript" language="JavaScript">
obj=new Object;
obj.clockfile="5005-yellow.swf";
obj.TimeZone="MST";
obj.width=225;
obj.height=75;
obj.wmode="transparent";
showClock(obj);
</script>
</td>

[Viragored]

I have been monitoring this thread and wondering why it was so quiet. I thought that now that the Raspberry Pi is out in the wild this would be a popular application for it!

On my Ubuntu Linux the files go in '/usr/share/squeezeboxserver/HTML/EN/html/SqueezeJS' if that helps.

I will soon be posting my effort at modifying the html, if I can just sort one more seemingly minor (yet infuriatingly difficult) issue...

Neat! Thanks very much.

I followed that path on my Linux box (/usr/share/squeezeboxserver/HTML/EN/html/SqueezeJS) and found there were three .js files in SqueezeJS (Base.js Strings.js and UI.js) just waiting for nowplaying.html to arrive ;-)

I plan to run this on a widescreen monitor so am very much looking forward to you posting your script! Meanwhile here's a snip of what's playing now. (Wonder where it got the wacky time from, it's +6 hours on the time reported both by the PC it's running on, and the Linux box running LMS?)

[MillmoorRon]

Mine looks a bit like this at the moment - but I'm still playing!



Have very little knowledge of HTML/CSS/JavaScript so just Googling lots...