PDA

View Full Version : Artwork Display



starfleetcommand
2008-10-19, 16:02
This is my first posting. I've been using Squeezebox now since 2003. I have the SqueezeBox version 2 and bought the Squeezebox 3 last year. Want to add another one. Anyway, on to my topic. I've read through the majority of the forum postings regarding the ability to display album art and song info on a remote LCD monitor. I would like to have a remote LCD monitor (perhaps coupled to a mini ITX system running DSL or some other small OS) to display the album art and song info of the song currently being played. While there are some good links in some of the forums, none really give a step by step how to. I know I can just point a browser to my squeezecenter server but that is too much info to casually display for the average person. Just thought another monitor would be really cool that just shows the "Now Playing" info with the Album artwork :-)

Anyone have any thoughts?

pfarrell
2008-10-19, 16:19
starfleetcommand wrote:
> This is my first posting.

Welcome.

> the majority of the forum postings regarding the ability to display
> album art and song info on a remote LCD monitor. I would like to have
> a remote LCD monitor (perhaps coupled to a mini ITX system running DSL
> or some other small OS) to display the album art and song info of the
> song currently being played.

If you run a browser, it will display the album art, and a bit of
information.

Just get a computer, fire up a browser and point it at your squeezecenter.

There is really nothing more to it.

--
Pat Farrell
http://www.pfarrell.com/

starfleetcommand
2008-10-19, 20:54
Yeah, I know but that is too much info to display on a remote monitor. Just want something simple like: Title/Artist/Album. Would like the album art as a back ground for the COOL factor. Or am I missing something? Can I point the remote browser to SqueezeCenter at a special URL and not get all of the stuff you typically see when going to http://mySqueezeCenter:9000?

pfarrell
2008-10-19, 21:04
starfleetcommand wrote:
> Yeah, I know but that is too much info to display on a remote monitor.
> Just want something simple like: Title/Artist/Album. Would like the
> album art as a back ground for the COOL factor.

Have you looked at all the skins? They vary a lot on what they show.
And if they are still too much, you can use the one that is closest and
hack away stuff. Skins are pretty eazy

They simply end up as HTML

JJZolx
2008-10-19, 22:00
Have you looked at the undocked Now Playing window from the Default skin? That might get you pretty close. Maybe you could fiddle with the skin to increase the artwork and font sizes and eliminate the buttons. The rest should be exactly what you need - cover, artist, track and album names.

A quick and dirty solution would be to install some kind of window zoom in your browser to increase the size of the whole window. The capture below is of Firefox with the PageZoom addon. It would take up the whole width of a 1024 pixel wide LCD. The artwork isn't particularly good, since it was crunched down to fit the original window, then blown up in size.

mherger
2008-10-19, 22:32
> Yeah, I know but that is too much info to display on a remote monitor.
> Just want something simple like: Title/Artist/Album. Would like the
> album art as a back ground for the COOL factor.

The code snippet from the SqueezeJS tutorial might give you a start:

http://wiki.slimdevices.com/index.php/SqueezeJSTutorial

Michael

JJZolx
2008-10-20, 00:56
The code snippet from the SqueezeJS tutorial might give you a start:

http://wiki.slimdevices.com/index.php/SqueezeJSTutorial

Michael, that's too cool.

Nothing fancy, but if you put it up on a 17" monitor you could probably read it from 20ft away:

elziko
2008-10-20, 08:57
Anyone have any thoughts?

There is always this:

http://forums.slimdevices.com/showthread.php?t=53722

but it doesn't seem to have generated much interest. Probably due to the fact that it's Vista only and requires hardware that supports it... or perhaps I just didn't describe it properly!

starfleetcommand
2008-10-20, 12:42
Michael, that's too cool.

Nothing fancy, but if you put it up on a 17" monitor you could probably read it from 20ft away:

This is exactly what I'm looking for. Thanks Michael and everybody. This gives me a few options to explore. I don't know much about HTML but I have a book.

starfleetcommand
2008-10-20, 15:32
There is always this:

http://forums.slimdevices.com/showthread.php?t=53722

but it doesn't seem to have generated much interest. Probably due to the fact that it's Vista only and requires hardware that supports it... or perhaps I just didn't describe it properly!

I actually saw this posting while do my initial research but I am not running Windows Vista. Great idea though and something to keep in mind when I do go to Vista.

starfleetcommand
2008-10-20, 18:01
Michael, that's too cool.

Nothing fancy, but if you put it up on a 17" monitor you could probably read it from 20ft away:

When I use the CompoundTitle attribute, I get the word "undefined" as in this example:

10. One By One undefined Enya undefined A Day Without Rain

Not familiar yet with how to attach pics into the forum :-(

JJZolx
2008-10-20, 18:15
JJolx, I was wondering how you got the artist name. I reviewed the SqueezeJS.UI attributes and only see the following available.

It's Contributors, although it gloms together both the album artist and track artist, that may be the best you can do. Seems to be the same thing that the default skin displays in the now playing window.

I'll post the template later tonight when I get home. You might need to adjust the font size depending on the size of the display, but that's easy to do.

One thing I was thinking would be nice to add was an "Up Next" section at the bottom, with smaller artwork and text.

Today I was looking at little Linux computers to implement this thing. Here's one that runs Firefox and has built in WIFI. Probably total overkill for this application - someone in another of the SD forums even wondered if it would make a good server. If size isn't an issue there are probably cheaper options. Then just pick up an old LCD monitor off of Craigslist and you're in business.

http://www.cherrypal.com/

starfleetcommand
2008-10-20, 19:57
It's Contributors, although it gloms together both the album artist and track artist, that may be the best you can do. Seems to be the same thing that the default skin displays in the now playing window.

I'll post the template later tonight when I get home. You might need to adjust the font size depending on the size of the display, but that's easy to do.

One thing I was thinking would be nice to add was an "Up Next" section at the bottom, with smaller artwork and text.

Today I was looking at little Linux computers to implement this thing. Here's one that runs Firefox and has built in WIFI. Probably total overkill for this application - someone in another of the SD forums even wondered if it would make a good server. If size isn't an issue there are probably cheaper options. Then just pick up an old LCD monitor off of Craigslist and you're in business.

http://www.cherrypal.com/

I found a really cool mini-ITX system complete with DSL (Damn Small Linux) that I'm thinking of using. It is fanless system that I'm going to attach a solid state drive to. No noise. Here's the link:

http://www.damnsmalllinux.org/store/Mini_ITX_Systems/533MHz_fanless_Mini_ITX_PC

I have an old LCD monitor already. It's kind of beat up but still works good. I was planning to rip it apart and build some sort of neat enclosure like a picture frame and put it on the wall and have the small ITX box on the floor behind the couch -- out of sight. It may be overkill but then again so is a cheap laptop that you would have noise and, possibly, overheating issues with.

I'd appreciate a template post. I sort of got my prototype to work. Just need some more tweaking of the HTML.

The idea of the "Up Next" sounds really cool. I did figure out that the "Contributors" is the Artist. Tried that right after I posted.

Here's an attachment: (Sorry for the poor quality)

mherger
2008-10-21, 00:13
> Also, when I use the CompoundTitle attribute, I get the word
> "undefined" as in this example:
>
> 10. One By One undefined Enya undefined A Day Without Rain

Did you include SqueezeJS/Strings.js? It defines the commonly used strings.

Alternatively I've added a new SqueezeJS.loadStrings() method in the
upcoming SC7.3. This can be used to load strings during initialization.

Michael

starfleetcommand
2008-10-21, 08:38
> Also, when I use the CompoundTitle attribute, I get the word
> "undefined" as in this example:
>
> 10. One By One undefined Enya undefined A Day Without Rain

Did you include SqueezeJS/Strings.js? It defines the commonly used strings.

Alternatively I've added a new SqueezeJS.loadStrings() method in the
upcoming SC7.3. This can be used to load strings during initialization.

Michael

Not being a programmer, I have no idea what you mean. I just took the demo file from the SqueezeJS Tutorial. Instead of using the CompoundTitle attribute, I am just using "Album", "Contributors", "Title". Works good. I just need to tweak the HTML to display the way I want now.

Also, I can't seem to find a whole lot of documentation on SqueezeJS other than what I found in the WIKI. Would be nice to get a list of available options/attributes. One thing I would like to add to my project is a method to monitor the Squeezebox state and somehow blank the LCD when the Squeezebox isn't playing. Looked at the SqueezeJS info on the WIKI and it hints at a way to monitor the Squeezebox state but, again, I'm not a programmer so I don't know how to do that. A little help, please.

JJZolx
2008-10-21, 11:09
Here's the template.

starfleetcommand
2008-10-21, 14:15
Here's the template.

COOL! I will give that a shot when I get home. Thanks!

mherger
2008-10-21, 23:23
> Not being a programmer, I have no idea what you mean. I just took the

Your file needs the following line in the header, before UI.js is loaded:

<script type="text/javascript">[% PROCESS html/SqueezeJS/Strings.js
%]</script>

> Also, I can't seem to find a whole lot of documentation on SqueezeJS
> other than what I found in the WIKI.

There isn't. There's been so little interest in it, I didn't add more than
this. Feel free to ask your questions over in the developers forum. I'll
try to answer and might work the q&a into the documentation. Thanks!

> Would be nice to get a list of
> available options/attributes.

Of?

> One thing I would like to add to my
> project is a method to monitor the Squeezebox state and somehow blank
> the LCD when the Squeezebox isn't playing.

What LCD?

Michael

JJZolx
2008-10-22, 00:30
> Would be nice to get a list of
> available options/attributes.

Of?

Here are a couple of quick questions. How to:

- (same question as above) get player state
- get track duration
- get track title without track number
- get track number
- get album name without year
- get album year
- display a progress bar
- use different images for buttons and/or progress bar
- get the same information for individual tracks within current playlist
- display playlist controls

mherger
2008-10-22, 01:54
> - (same question as above) get player state

SqueezeJS.Controller.playerStatus - it's an object (or hash) with the following items:

playerStatus = {
// if power is undefined, set it to on for http clients
power: (response.power == null) || response.power,
mode: response.mode,
rate: response.rate,
current_title: response.current_title,
title: response.playlist_tracks > 0 ? response.playlist_loop[0].title : '',
track: response.playlist_tracks > 0 ? response.playlist_loop[0].url : '',
index: response.playlist_cur_index,
duration: parseInt(response.duration) || 0,
canSeek: response.can_seek ? true : false,
playtime: parseInt(response.time),
timestamp: response.playlist_timestamp
};

It doesn't deliver the full list of track information. This is queried every 5 seconds, then passed to the UI elements.

> - get track duration

Doesn't exist (yet). The following would do:

SqueezeJS.UI.PlaytimeDuration = Ext.extend(SqueezeJS.UI.Playtime, {
onPlaytimeUpdate : function(playtime){
if (this.el && playtime)
this.el.update(SqueezeJS.Utils.formatTime(playtime .duration));
}
});

Will add it if it is what you were thinking of.

> - get track title without track number

This currently doesn't exist. Needs a change in the parser.


> - get track number

SqueezeJS.UI.TrackNo = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
this.el.update(result.playlist_loop[0].tracknum ? result.playlist_loop[0].tracknum + '. ' : '');
}
});


> - get album name without year

SqueezeJS.UI.AlbumTitle = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
this.el.update(SqueezeJS.SonginfoParser.album(resu lt, this.noLink));
}
});

> - get album year

SqueezeJS.UI.AlbumYear = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
this.el.update(SqueezeJS.SonginfoParser.year(resul t, this.noLink));
}
});

> - display a progress bar

new SqueezeJS.UI.PlaytimeProgress('yourHTMLElement');

> - use different images for buttons and/or progress bar

That's beyond the scope of this mail... take a look at slimserver.css. Styles starting with x-... are overwriting ExtJS defaults. Eg. x-btn etc.

> - get the same information for individual tracks within current
> playlist

Don't have an answer for this right now. All the defined components listen to the status query, which is about the currently playing track only. You'd probably have to overwrite the base class SqueezeJS.UI.Component, which adds the listener. Not an easy change I guess.

> - display playlist controls

Like fwd/rwd? They're covered in the tutorial. What else?

I'll add the above components to 7.3. Until then you might want to add them to your template.

--

Michael

mherger
2008-10-22, 02:07
> SqueezeJS.UI.PlaytimeDuration = Ext.extend(SqueezeJS.UI.Playtime, {

I've renamed this to Duration only. Please use Duration if you want it to be working with 7.3 (rev. 23649)

--

Michael

JJZolx
2008-10-22, 02:17
> - use different images for buttons and/or progress bar

That's beyond the scope of this mail... take a look at slimserver.css. Styles starting with x-... are overwriting ExtJS defaults. Eg. x-btn etc.

Ok, I thought maybe you might have made the images properties of the component rather than being addressed through CSS.


> - get the same information for individual tracks within current
> playlist

Don't have an answer for this right now. All the defined components listen to the status query, which is about the currently playing track only. You'd probably have to overwrite the base class SqueezeJS.UI.Component, which adds the listener. Not an easy change I guess.

Was just thinking of displaying the next track to be played, with cover and the usual title, artist, album and possibly duration.


- display playlist controls

Like fwd/rwd? They're covered in the tutorial. What else?

No, I mean Play and Delete from playlist. Thought that if I could add the 'Up Next' I might include a delete from playlist button to let you skip the upcoming track by deleting it from the playlist.


I'll add the above components to 7.3. Until then you might want to add them to your template.

Thanks.

mherger
2008-10-22, 02:27
> Was just thinking of displaying the next track to be played, with cover
> and the usual title, artist, album and possibly duration.

Yeah, that would be cool. I was thinking about a cover flow style playlist preview... but that's rather for the spare time :-9

--

Michael

Espen
2008-10-22, 04:34
I found a really cool mini-ITX system complete with DSL (Damn Small Linux) that I'm thinking of using. It is fanless system that I'm going to attach a solid state drive to. No noise. Here's the link:

http://www.damnsmalllinux.org/store/Mini_ITX_Systems/533MHz_fanless_Mini_ITX_PC


I stumbled across this one today.
http://www.fit-pc.com/new/

starfleetcommand
2008-10-22, 14:17
> Not being a programmer, I have no idea what you mean. I just took the

Your file needs the following line in the header, before UI.js is loaded:

<script type="text/javascript">[% PROCESS html/SqueezeJS/Strings.js
%]</script>

> Also, I can't seem to find a whole lot of documentation on SqueezeJS
> other than what I found in the WIKI.

There isn't. There's been so little interest in it, I didn't add more than
this. Feel free to ask your questions over in the developers forum. I'll
try to answer and might work the q&a into the documentation. Thanks!

> Would be nice to get a list of
> available options/attributes.

Of?

> One thing I would like to add to my
> project is a method to monitor the Squeezebox state and somehow blank
> the LCD when the Squeezebox isn't playing.

What LCD?

Michael


Sorry, should have been more specific.



A list of available functions that can be polled by SqueezeJS and how to use it. Looks like that was answered in a later thread. I will try that.

As for the LCD, It is part the project I'm working on. I am building a mini-ITX computer attached to a 17" LCD that will just display the Artwork and song info using the very helpful SqueezeJS instructions and sample scripts you and JJZolx provided. The LCD will be mounted on the wall on the other end of the room where SqueezeBox is, making it easier for people to read the "NowPlaying".

I think there could be allot of potential for SqueezeJS. I hope to see more its development and documentation. I appreciate the support you and others have given me on this forum as I am one step closer to my vision with this project.

starfleetcommand
2008-10-22, 14:22
> - (same question as above) get player state

SqueezeJS.Controller.playerStatus - it's an object (or hash) with the following items:

playerStatus = {
// if power is undefined, set it to on for http clients
power: (response.power == null) || response.power,
mode: response.mode,
rate: response.rate,
current_title: response.current_title,
title: response.playlist_tracks > 0 ? response.playlist_loop[0].title : '',
track: response.playlist_tracks > 0 ? response.playlist_loop[0].url : '',
index: response.playlist_cur_index,
duration: parseInt(response.duration) || 0,
canSeek: response.can_seek ? true : false,
playtime: parseInt(response.time),
timestamp: response.playlist_timestamp
};

It doesn't deliver the full list of track information. This is queried every 5 seconds, then passed to the UI elements.

> - get track duration

Doesn't exist (yet). The following would do:

SqueezeJS.UI.PlaytimeDuration = Ext.extend(SqueezeJS.UI.Playtime, {
onPlaytimeUpdate : function(playtime){
if (this.el && playtime)
this.el.update(SqueezeJS.Utils.formatTime(playtime .duration));
}
});

Will add it if it is what you were thinking of.

> - get track title without track number

This currently doesn't exist. Needs a change in the parser.


> - get track number

SqueezeJS.UI.TrackNo = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
this.el.update(result.playlist_loop[0].tracknum ? result.playlist_loop[0].tracknum + '. ' : '');
}
});


> - get album name without year

SqueezeJS.UI.AlbumTitle = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
this.el.update(SqueezeJS.SonginfoParser.album(resu lt, this.noLink));
}
});

> - get album year

SqueezeJS.UI.AlbumYear = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
this.el.update(SqueezeJS.SonginfoParser.year(resul t, this.noLink));
}
});

> - display a progress bar

new SqueezeJS.UI.PlaytimeProgress('yourHTMLElement');

> - use different images for buttons and/or progress bar

That's beyond the scope of this mail... take a look at slimserver.css. Styles starting with x-... are overwriting ExtJS defaults. Eg. x-btn etc.

> - get the same information for individual tracks within current
> playlist

Don't have an answer for this right now. All the defined components listen to the status query, which is about the currently playing track only. You'd probably have to overwrite the base class SqueezeJS.UI.Component, which adds the listener. Not an easy change I guess.

> - display playlist controls

Like fwd/rwd? They're covered in the tutorial. What else?

I'll add the above components to 7.3. Until then you might want to add them to your template.

--

Michael

I like the idea of showing track title without the track number. Right now, when poll this data, some of my tracks show up as "1-7 TrackTitle" for example. Maybe, it is the tagging my MP3's.

Another question: When you say:

> - display a progress bar

new SqueezeJS.UI.PlaytimeProgress('yourHTMLElement');

What do you mean by 'yourHTMLElement'? I'll post this question in the developer's forum too.

starfleetcommand
2008-10-22, 14:30
>
SqueezeJS.Controller.playerStatus - it's an object (or hash) with the following items:

playerStatus = {
// if power is undefined, set it to on for http clients
power: (response.power == null) || response.power,
mode: response.mode,
rate: response.rate,
current_title: response.current_title,
title: response.playlist_tracks > 0 ? response.playlist_loop[0].title : '',
track: response.playlist_tracks > 0 ? response.playlist_loop[0].url : '',
index: response.playlist_cur_index,
duration: parseInt(response.duration) || 0,
canSeek: response.can_seek ? true : false,
playtime: parseInt(response.time),
timestamp: response.playlist_timestamp
};

It doesn't deliver the full list of track information. This is queried every 5 seconds, then passed to the UI elements.


Michael

How would you query for "paused" or "stop" state? I know, I should be asking in the developer forum but it goes with this thread. Again, appreciate your help.

starfleetcommand
2008-10-22, 14:38
I stumbled across this one today.
http://www.fit-pc.com/new/

Even better and smaller yet. Very cool. Thanks for the link.

starfleetcommand
2008-10-22, 21:49
When I run the script with IE 7 on XP Pro SP3, it displays normally (as seen here). However, when I run it from an Win2000 SP4 running IE6, It gives me a syntax error stating module not defined. What gives? I've also attached the script, which I want to thank JJZolx provided and I modified based on input from mherger. Thanks to you both.

mherger
2008-10-23, 00:26
> I think there could be allot of potential for SqueezeJS. I hope to see
> more its development and documentation.

And I hope it will see more interest by the community. I'm glad you
created some buzz about it ;-).

> I like the idea of showing track title without the track number. Right
> now, when poll this data, some of my tracks show up as "1-7 TrackTitle"
> for example. Maybe, it is the tagging my MP3's.

As mentioned in the other mail the SqueezeJS.UI.Title() component does
combine disc#, track# and title into one. That's why I've added RawTitle()
which will return the title string only, without the numbers.

> How would you query for "paused" or "stop" state? I know, I should be
> asking in the developer forum but it goes with this thread. Again,
> appreciate your help.

playerStatus.mode is one of play, pause, stop. You'll find a lot of this
information in the SC CLI documentation. SqueezeJS uses a lot of those
commands, playerStatus is basically a subset of the "status" command.

http://yourserver:9000/html/docs/cli-api.html#status

Michael

mherger
2008-10-23, 00:39
> When I run the script with IE 7 on XP Pro SP3, it displays normally (as
> seen here). However, when I run it from an Win2000 SP4, It gives me a

What browser are you using on that W2k machine? SqueezeJS requires at
least IE6.

Your script is working fine here in IE6, Opera and Google Chrome.

Michael

starfleetcommand
2008-10-23, 09:32
> When I run the script with IE 7 on XP Pro SP3, it displays normally (as
> seen here). However, when I run it from an Win2000 SP4, It gives me a

What browser are you using on that W2k machine? SqueezeJS requires at
least IE6.

Your script is working fine here in IE6, Opera and Google Chrome.

Michael

IE6 on the Win2000 machine. All of the latest Windows and IE updates. Old machine, but works good. It is actually my squeezecenter server.

starfleetcommand
2008-10-23, 09:37
>
> I like the idea of showing track title without the track number. Right
> now, when poll this data, some of my tracks show up as "1-7 TrackTitle"
> for example. Maybe, it is the tagging my MP3's.

As mentioned in the other mail the SqueezeJS.UI.Title() component does
combine disc#, track# and title into one. That's why I've added RawTitle()
which will return the title string only, without the numbers.

Michael

I'm assuming this will be available in 7.3 of SqueezeCenter??

mherger
2008-10-23, 09:46
> IE6 on the Win2000 machine. All of the latest Windows and IE updates.
> Old machine, but works good. It is actually my squeezecenter server.

if this is a Windows Server machine you might have to make sure javascript isn't disabled.

--

Michael

mherger
2008-10-23, 09:47
>> RawTitle()
>> which will return the title string only, without the numbers.
>
> I'm assuming this will be available in 7.3 of SqueezeCenter??

Correct. (It is already in the nightlies)

--

Michael

starfleetcommand
2008-10-23, 12:25
> IE6 on the Win2000 machine. All of the latest Windows and IE updates.
> Old machine, but works good. It is actually my squeezecenter server.

if this is a Windows Server machine you might have to make sure javascript isn't disabled.

--

Michael


Of course...... Yes, it is a Win 2000 Server. Why didn't I think of that?

starfleetcommand
2008-10-23, 12:27
>> RawTitle()
>> which will return the title string only, without the numbers.
>
> I'm assuming this will be available in 7.3 of SqueezeCenter??

Correct. (It is already in the nightlies)

--

Michael

I forgot about the nightly builds..... I will check it out. Thanks again!

mherger
2008-10-24, 02:24
> Of course...... Yes, it is a Win 2000 Server. Why didn't I think of
> that?

Does this mean it's working now?

--

Michael

starfleetcommand
2008-10-24, 07:43
> Of course...... Yes, it is a Win 2000 Server. Why didn't I think of
> that?

Does this mean it's working now?

--

Michael


Haven't had a chance to try yet, but I'm sure it will

starfleetcommand
2008-10-24, 07:52
>
playerStatus.mode is one of play, pause, stop. You'll find a lot of this
information in the SC CLI documentation. SqueezeJS uses a lot of those
commands, playerStatus is basically a subset of the "status" command.

http://yourserver:9000/html/docs/cli-api.html#status

Michael

I have looked at the CLI documentation. While very well documented for doing CLI commands, I'm not too sure how to translate that into the script. Best I've been able to come up with is (not sure of the syntax):

new SqueezeJS.UI.playerStatus.mode({ then what?? })
if playerStatus.mode=pause1 then change the <Title> from "Now Playing [songindex] of [songcount]" to "Now Paused on [songindex] of [songcount]" and so forth for stopped and power off.

A little guidenance is appreciated.

starfleetcommand
2008-10-24, 08:08
>> RawTitle()
>> which will return the title string only, without the numbers.
>
> I'm assuming this will be available in 7.3 of SqueezeCenter??

Correct. (It is already in the nightlies)

--

Michael



Awesome! Just downloaded the three SqueezeJS script files from 7.3 and replaced my 7.2 JS script files. Works great! Now I have track title without the track number.

mherger
2008-10-24, 14:53
> I have looked at the CLI documentation. While very well documented for
> doing CLI commands, I'm not too sure how to translate that into the
> script. Best I've been able to come up with is (not sure of the
> syntax):

What do you want to do?

Michael

starfleetcommand
2008-10-24, 15:52
> I have looked at the CLI documentation. While very well documented for
> doing CLI commands, I'm not too sure how to translate that into the
> script. Best I've been able to come up with is (not sure of the
> syntax):

What do you want to do?

Michael



Trying to monitor the play/pause/power state so that I can add additional status to my remote display. Currently, the script will display album art and song info on a remote LCD attached to a small PC pointing to "http://myserver:9000/html/SqueezeJS/nowplaying.html" It updates as the music changes. However, when the music is stopped/paused or the player turned off, I want to have my script detect this and display "Now Stopped/Paused" or "Powered OFF". I've attached the script for your reference. Does that make sense? I know you mentioned it can be done with the playerStatus.mode but I'm just not sure how to code for that.

booguss
2008-10-25, 02:01
Hmm, is there some lines I have to change in the nowplaying.txt file before saving it as HTML? I have done like below, but I all the time end up with a completely blank HTML-page when I try to access it in Firefox or Explorer.

1. Saving he nowplaying.txt as nowplaying.html
2. Put the file into C:/program/Squeezecenter/EN/html/SqueezeJS

I suspect that I am missing something really obvious here... :-/

Cheers

/booguss

starfleetcommand
2008-10-25, 08:58
Hmm, is there some lines I have to change in the nowplaying.txt file before saving it as HTML? I have done like below, but I all the time end up with a completely blank HTML-page when I try to access it in Firefox or Explorer.

1. Saving he nowplaying.txt as nowplaying.html
2. Put the file into C:/program/Squeezecenter/EN/html/SqueezeJS

I suspect that I am missing something really obvious here... :-/

Cheers

/booguss

What version of SqueezeCenter are you running? You may also need to get the latest "Base", "UI", and "Strings" by mherger from SqueezeCenter 7.3. Since that isn't released yet, get them from nightly builds at http://svn.slimdevices.com/7.3/trunk/server/HTML/EN/html/SqueezeJS/

these files contain updates and other improvements by mherger that are used in the "nowplaying".

Might want to make backup copies of the existing JavaScript files, just in case. Then, make sure javascript is enabled in your browser and save nowplaying.txt as an html in your SqueezeCenter/EN/html/SqueezeJS folder. Point your browser to "http://yourserver:9000/html/SqueezeJS/nowplaying.html" replacing nowplaying.html with the filename you've given it. It should work OK.

booguss
2008-10-25, 14:12
Oh, thanks for your reply, starfleet! However I solved it.. I discovered that there was already a SqueezeJS folder in C:\Program\SqueezeCenter\server\HTML\EN\html, so I just put the html file there and now it works really fine. 125% on my laptop and I have a huge artwork to enjoy. I will set my servant to embed artwork into every single track in my library, I think :-)


You may also need to get the latest "Base", "UI", and "Strings" by mherger from SqueezeCenter 7.3.

I use 7.2.1 and since it works, there is no need to get the 7.3 Base, UI and Strings, or?

What I want to be able to do is change the background color to black, so I tried to code like this but it wont work... What am I doing wrong?

<body>
<bgcolor="Black">
<div id="cover"></div>
<table id="info">
<tr>
<td id="playerChooser"></td>
<td id="title"></td>
<td id="back"></td><td id="next"></td>
</tr>
</table>
</body>
</html>

Anyway, this is a really simple yet effective solution to something I have been looking for for quite a while..

Cheers!

/boo

booguss
2008-10-25, 14:39
Hey, found your txt file submitted earlier in this thread. Now I got it black :-) Thanks!
But it's interesting, in Firefox 3 I can only get the "default", white one. It works in IE7..

/boo

starfleetcommand
2008-10-25, 14:41
I use 7.2.1 and since it works, there is no need to get the 7.3 Base, UI and Strings, or?

What I want to be able to do is change the background color to black, so I tried to code like this but it wont work... What am I doing wrong?

<body>
<bgcolor="Black">
<div id="cover"></div>
<table id="info">
<tr>
<td id="playerChooser"></td>
<td id="title"></td>
<td id="back"></td><td id="next"></td>
</tr>
</table>
</body>
</html>

Anyway, this is a really simple yet effective solution to something I have been looking for for quite a while..

Cheers!

/boo

No, you really don't need the 7.3 Base, UI or Strings but they offer a additional functions that you can add to your html code. See the earlier threads in this forum by mherger. My html code uses some of them.

For the background color, that is in the style section of the html

<style type="text/css">
html, body {
font-family: arial, helvetica, sans-serif;
line-height: 1.33;
color: #ffffff;
background-color: #000000;
margin: 0;
padding: 0;
}

If you change the background-color from #000000 (black) to another number, the body background behind the album art and song info will be changed to that color.

Let me know how that works for you.

starfleetcommand
2008-10-25, 14:46
Hey, found your txt file submitted earlier in this thread. Now I got it black :-) Thanks!
But it's interesting, in Firefox 3 I can only get the "default", white one. It works in IE7..

/boo

Hi booguss

I totally mis-understood your question. Sorry. Thought you were talking about the body and not the title. Anyway, sounds like you got it worked out. Cool!

/Regard

Starfleetcommand

starfleetcommand
2008-10-25, 23:13
I'm still stumped on trying to make my html detect when the player is Paused/Stopped or powered On/Off using the below reference. I've attached my html. What I'd like is to replace the Title with "Now Stopped" whenever the player is stopped, "Now Paused" when the player is paused, and "Powered OFF" when the player is powered off. Any suggestions?


playerStatus = {
// if power is undefined, set it to on for http clients
power: (response.power == null) || response.power,
mode: response.mode,
rate: response.rate,
current_title: response.current_title,
title: response.playlist_tracks > 0 ? response.playlist_loop[0].title : '',
track: response.playlist_tracks > 0 ? response.playlist_loop[0].url : '',
index: response.playlist_cur_index,
duration: parseInt(response.duration) || 0,
canSeek: response.can_seek ? true : false,
playtime: parseInt(response.time),
timestamp: response.playlist_timestamp
};

mherger
2008-10-26, 13:33
> I'm still stumped on trying to make my html detect when the player is
> Paused/Stopped or powered On/Off using the below reference. I've

Ok, I think we have to start with some basics here ;-). When using
SqueezeJS you shouldn't need to care about that player state and querying
SC etc. SqueezeJS.Controller should do this for you. It will then signal
eg. "playerstatechange" events whenever the current player has changed
some status (play mode, playlist, volume etc.). All of the SqueezeJS.UI
components do this for you: they listen to this event, receive the new
player state information when it happens, and update themselves
accordingly.

So what you need is some component which will use the "mode" part of the
player status to update itself.

> attached my html. What I'd like is to replace the Title with "Now
> Stopped" whenever the player is stopped, "Now Paused" when the player
> is paused, and "Powered OFF" when the player is powered off. Any
> suggestions?

In this case you might want to use something based on
SqueezeJS.UI.RawTitle:

SqueezeJS.UI.MyTitle = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(status){
var title;

// overwrite
if (status.mode == 'stop')
title = 'Stopped';
else if (status.mode == 'pause')
title = 'Paused';
// assuming we're playing
else
title = SqueezeJS.SonginfoParser.title(result, this.noLink, false,
true);

this.el.update(title);
}
});


Then use new SqueezeJS.UI.MyTitle() instead of RawTitle in your page.

As mentioned above this component will be signalled a state change
whenever there's one. It's also sent the new status object. "mode" is part
of this object (as is a lot more information - see the "status" CLI
query). So instead of using the title in any case (as does RawTitle()), it
checks the player mode and displays something else accordingly. Does this
make any sense?

FWIW: if you're seriously trying to do some JavaScript work, you should
get Firefox and install the Firebug add-on. This is a tool which will let
you inspect whatever is going on in SqueezeJS. You could eg. step through
the above onPlayerStateChange() method, inspect the full status object and
learn about what other information would be available to it.

Michael

starfleetcommand
2008-10-26, 14:39
> I'm still stumped on trying to make my html detect when the player is
> Paused/Stopped or powered On/Off using the below reference. I've

Ok, I think we have to start with some basics here ;-). When using
SqueezeJS you shouldn't need to care about that player state and querying
SC etc. SqueezeJS.Controller should do this for you. It will then signal
eg. "playerstatechange" events whenever the current player has changed
some status (play mode, playlist, volume etc.). All of the SqueezeJS.UI
components do this for you: they listen to this event, receive the new
player state information when it happens, and update themselves
accordingly.

So what you need is some component which will use the "mode" part of the
player status to update itself.

> attached my html. What I'd like is to replace the Title with "Now
> Stopped" whenever the player is stopped, "Now Paused" when the player
> is paused, and "Powered OFF" when the player is powered off. Any
> suggestions?

In this case you might want to use something based on
SqueezeJS.UI.RawTitle:

SqueezeJS.UI.MyTitle = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(status){
var title;

// overwrite
if (status.mode == 'stop')
title = 'Stopped';
else if (status.mode == 'pause')
title = 'Paused';
// assuming we're playing
else
title = SqueezeJS.SonginfoParser.title(result, this.noLink, false,
true);

this.el.update(title);
}
});


Then use new SqueezeJS.UI.MyTitle() instead of RawTitle in your page.

As mentioned above this component will be signalled a state change
whenever there's one. It's also sent the new status object. "mode" is part
of this object (as is a lot more information - see the "status" CLI
query). So instead of using the title in any case (as does RawTitle()), it
checks the player mode and displays something else accordingly. Does this
make any sense?

FWIW: if you're seriously trying to do some JavaScript work, you should
get Firefox and install the Firebug add-on. This is a tool which will let
you inspect whatever is going on in SqueezeJS. You could eg. step through
the above onPlayerStateChange() method, inspect the full status object and
learn about what other information would be available to it.

Michael


That's what I needed, an example of how to do it. Your explanation helps me digest what the script is doing too. Made the changes to my html and works great! This was one of the last major hurdles to overcome and now am very close to completing this project. This project has gotten me interested in JavaScript. I will take your advice and get Firefox and the Firebug add-on. Again, I appreciate your help!

PS -- I will post pics of the final project and share the final html when I'm finished tweaking things.

starfleetcommand
2008-10-26, 14:57
OK, maybe spoke too soon. While it now shows when the player is stopped or paused, it fails to show the tracktitle when the player is playing. Instead I get a script saying "result is undefined".

mherger
2008-10-26, 15:04
> OK, maybe spoke too soon. While it now shows when the player is stopped
> or paused, it fails to show the tracktitle when the player is playing.
> Instead I get a script saying "result is undefined".

I'm sorry, there's a bug in that code: when calling the title parser, you
have to send the "status" instead of the "result" variable.

Michael

starfleetcommand
2008-10-26, 15:11
AH HA -- Works better.

booguss
2008-10-28, 01:52
Hi again Starfleet, Michel and others

I just tried to replace the 7.2.1 Base.js, UI.js and Strings.js with 7.3. That rendered impossibility to log into 127.0.0.1:9000 at all... So I had to put my 7.2.1 js files back.
What might have happened here?
Then I tried to use your latest .txt addition (together with 7.2.1 js's) and it works but I get only

a) two pairs of parathesis - () () - where the track name should be stated
b) the Artist name is displayed correctly
c) the album name displays nothing

This result is the same in both Firefox3 and IE7. BUT... in Firefox the change player-button is missing...?

However, I really really like your idea and I follow this thread with excitement.
Do you intend to post the final .txt file when you are happy with the result as a "skin"?

Another thing, just FYI, I have a Nokia N800 and I can access nowplaying.html from it, but the change player button is totally messed up, partly covering the artwork itself :-). And when I zoom in the artwork gets cropped... maybe it would be a nice idea to produce a nowplaing skin optimized for 770/800/810 users as well...

cheers!

/booguss

PS. great work

starfleetcommand
2008-10-28, 09:05
Hi again Starfleet, Michel and others

I just tried to replace the 7.2.1 Base.js, UI.js and Strings.js with 7.3. That rendered impossibility to log into 127.0.0.1:9000 at all... So I had to put my 7.2.1 js files back.
What might have happened here?
Then I tried to use your latest .txt addition (together with 7.2.1 js's) and it works but I get only

a) two pairs of parathesis - () () - where the track name should be stated
b) the Artist name is displayed correctly
c) the album name displays nothing

This result is the same in both Firefox3 and IE7. BUT... in Firefox the change player-button is missing...?

However, I really really like your idea and I follow this thread with excitement.
Do you intend to post the final .txt file when you are happy with the result as a "skin"?

Another thing, just FYI, I have a Nokia N800 and I can access nowplaying.html from it, but the change player button is totally messed up, partly covering the artwork itself :-). And when I zoom in the artwork gets cropped... maybe it would be a nice idea to produce a nowplaing skin optimized for 770/800/810 users as well...

cheers!

/booguss

PS. great work



I just tried to replace the 7.2.1 Base.js, UI.js and Strings.js with 7.3. That rendered impossibility to log into 127.0.0.1:9000 at all... So I had to put my 7.2.1 js files back.
What might have happened here?
Then I tried to use your latest .txt addition (together with 7.2.1 js's) and it works but I get only

a) two pairs of parathesis - () () - where the track name should be stated
b) the Artist name is displayed correctly
c) the album name displays nothing

This result is the same in both Firefox3 and IE7. BUT... in Firefox the change player-button is missing...?

Should work fine with 7.3 js's. As mentioned earlier, my html utilizes some enhanced features provided by Michael in the 7.3 js's, which would explain why you're not getting everything to show. I'm running SqueezeCenter 7.2 with the 7.3 js's. Works great! The attached html is my final version and newer than the ones I posted earlier. Now switches the "Now Playing" to "Now Stopped" or "Now Paused" whenever the player stopped/paused. My thanks to Michael for his help with that!


This result is the same in both Firefox3 and IE7. BUT... in Firefox the change player-button is missing...?

I am running IE7. I don't have Firefox but I think Michael tested an earlier version of this html on Firefox. Michael, correct me if I'm wrong.


However, I really really like your idea and I follow this thread with excitement.
Do you intend to post the final .txt file when you are happy with the result as a "skin"?
Thanks! But I couldn't have done it without Michael's and Jim's (earlier in forum) help. Jim provided the base html template that happened to be what my vision was. I just tweaked it based on the 7.3 JS's. Michael provided valueable assistance with SqueezeJS itself and help with some code, and provided improvements in the 7.3 JS's. Again, my thanks to them! The attached .txt is my final version as I'm very happy with the look and functionality, but I do plan to add to it at a future date -- such as showing repeat and shuffle modes. Also, when I get the LCD monitor and tiny computer built and mounted to the wall, I will post pics of that. May help folks in the community see what this forum is about. :-)


Another thing, just FYI, I have a Nokia N800 and I can access nowplaying.html from it, but the change player button is totally messed up, partly covering the artwork itself :-). And when I zoom in the artwork gets cropped... maybe it would be a nice idea to produce a nowplaing skin optimized for 770/800/810 users as well...
Yeah, the html isn't optimized for handhelds and phones. Since this is my first attempt at something like this, I didn't plan for the Nokia phone.

mherger
2008-10-28, 09:22
> I just tried to replace the 7.2.1 Base.js, UI.js and Strings.js with
> 7.3. That rendered impossibility to log into 127.0.0.1:9000 at all...
> So I had to put my 7.2.1 js files back.
> What might have happened here?

7.3 features the updated ExtJS 2.2, whereas SC 7.2 is still based on ExtJS 2.1. There are subtle differences which render impossible what you're trying to do. But unless you want to use some of the newly introduced components such as eg. SqueezeJS.UI.RawTitle (as discussed earlier in this thread), you don't need to do that anyway.

--

Michael

starfleetcommand
2008-10-29, 20:32
Here it is folks! The working model. Just need to clean up the cables and mount the PC but I wanted to share this with the community. Now people at parties will be able to see what song is playing easily. I used a spare 17inch LCD monitor connected to a "fit-PC SLIM", no relation to SlimDevices, running Windows XP Home. http://www.fit-pc.com/new/ has the specs.

Again, my thanks to Michael Herger and many others on this forum.

Here are some pics. This was a fun project!

starfleetcommand
2008-10-29, 20:36
Here is the html. Just save this file to your SqueezeCenter/server/HTML/EN/html/SqueezeJS folder as nowplaying.html
Point your browser to "http://yourserver:9000/html/squeezejs/nowplaying.html


Note: For proper display, you will need the JS's from SqueezeCenter 7.3. These JS's provide enhanced features that the html utilizes. Those can be obtained at the nightly downloads sight located here: http://svn.slimdevices.com/7.3/trunk/server/HTML/EN/html/SqueezeJS/.

ENJOY!!

MrSinatra
2008-10-29, 23:50
those pics are too big. it would have been better to put normal posts with links to the pics so that my browser could resize them to fit the screen.

but anyway, pretty cool. i like the lil pc, how much is it?

mherger
2008-10-30, 00:35
> Here it is folks! The working model.

Looking great! Just make sure you run IE in full screen mode (F11) to get rid of those title/task bars ;-)

--

Michael

starfleetcommand
2008-10-30, 07:17
those pics are too big. it would have been better to put normal posts with links to the pics so that my browser could resize them to fit the screen.

but anyway, pretty cool. i like the lil pc, how much is it?


those pics are too big. it would have been better to put normal posts with links to the pics so that my browser could resize them to fit the screen.

Sorry for the size of pics. Didn't resize them before uploading :-(


but anyway, pretty cool. i like the lil pc, how much is it?

The little pc was about $350 -- I chose the XP Home to be pre-loaded as I'm not too familiar with LINUX yet.

Specifications

Hardware

CPU: AMD Geode LX800 500MHz
Chipset: AMD CS5536
Display: Integrated Geode LX display controller up to 1920x1440
Memory: 512MB DDR 333MHz soldered on-board
Hard disk: 2.5 IDE 60GB
Ports:
RJ45 Ethernet port 100Mbps
WLAN 802.11b/g 54Mbps
3 x USB 2.0 HiSpeed 480Mbps
mini RS-232 (cable available from CompuLab)
VGA DB15
Stereo line-out audio (headphones)
Stereo line-in audio / Mic


Software

General Software Embedded BIOS
Special BIOS features:
Etherboot for boot over LAN
Etherlink for BIOS update over LAN

Linux:
Ubuntu 8.04 + Gentoo 2008.0 (preloaded as an option)
Other Linux distributions are tested to work
Windows: Windows XP Home SP3 (preloaded as an option)

starfleetcommand
2008-10-30, 07:19
> Here it is folks! The working model.

Looking great! Just make sure you run IE in full screen mode (F11) to get rid of those title/task bars ;-)

--

Michael


Just make sure you run IE in full screen mode (F11) to get rid of those title/task bars ;-)


I intend to when everything is tidied up ;-)

starfleetcommand
2008-11-01, 14:15
One final pic of the completed display. All of the cords and mini (SlimPC) are hidden.

FREE YOUR MUSIC!!

Hailing Frequencies closed. StarfleetCommand out.

MrSinatra
2008-11-01, 14:58
pretty cool. if i were to do something like that, i'd want more of a touchscreen kiosk type deal. but i bet theres a lot of people who will want to do what you've done.

is this just a skin? will it be downloadable from where all the slim plugin stuff is kept?

aubuti
2008-11-01, 15:36
Here is the html. Just save this file to your SqueezeCenter/server/HTML/EN/html/SqueezeJS folder as nowplaying.html
Point your browser to "http://yourserver:9000/html/squeezejs/nowplaying.html"

Nice job! Just a note to users on case-sensitive OSs like *nix, you need to use http://yourserver:9000/html/SqueezeJS/nowplaying.html

Btw, the JS comment text is showing when I use Firefox or Chrome. Probably just a non-standard MS think that is easy to bring in to line with the others.

MrSinatra
2008-11-01, 15:38
and sooner or later this thread will grow old... i'd love to see it officially in the downloads section, or better yet integrated into the official release.

JJZolx
2008-11-01, 17:32
and sooner or later this thread will grow old... i'd love to see it officially in the downloads section, or better yet integrated into the official release.

It's not a skin, just an HTML page using a little of the included AJAX library to display now playing information.

I could maybe see including something like this with the server, but could easily imagine 100 different people wanting it to be displayed 100 different ways, so there'd be endless requests for different display preferences.

MrSinatra
2008-11-01, 20:35
ha, true jim. but then again, thats not much different then how it is now, right? :) lol.

starfleetcommand
2008-11-01, 21:11
pretty cool. if i were to do something like that, i'd want more of a touchscreen kiosk type deal. but i bet theres a lot of people who will want to do what you've done.

is this just a skin? will it be downloadable from where all the slim plugin stuff is kept?


is this just a skin? will it be downloadable from where all the slim plugin stuff is kept?

no skin. just an html. You can get it here. Just save the attached .txt file as .html as per instructions in the .txt. Eventually, I would like touchscreen kiosks throughout my home, but this was a "first step" project. I need to build upon my programming skills first.

starfleetcommand
2008-11-10, 19:17
Thought I'd share an update. With the help of Michael Herger, I added repeat and shuffle status modes. Shuffle status changes almost instantly (within 5 sec.) but the Repeat status updates when the playlist updates. I also added power state and did some extra tweaking for visual appearance. Hope you like it.

mherger
2008-11-11, 01:39
> repeat and shuffle status modes. Shuffle status changes almost
> instantly (within 5 sec.) but the Repeat status updates when the
> playlist updates.

That's odd. I would have expected them both to change in the same rhythm. Do you see the same delay in the Default skin's shuffle/repeat buttons?

--

Michael

starfleetcommand
2008-11-11, 08:09
> repeat and shuffle status modes. Shuffle status changes almost
> instantly (within 5 sec.) but the Repeat status updates when the
> playlist updates.

That's odd. I would have expected them both to change in the same rhythm. Do you see the same delay in the Default skin's shuffle/repeat buttons?

--

Michael


That's odd. I would have expected them both to change in the same rhythm. Do you see the same delay in the Default skin's shuffle/repeat buttons?


Yeah, I would have expected that too. I don't see the delay in while using any of the web UI skins though. Further observations I have noticed that the repeat modes will update if changing other functions; i.e. changing from play to paused or if the web page is refreshed. Then the repeat mode will update with the other function. Shuffle mode changes within 5 sec. on its own as expected. No big deal I guess. Repeat mode will update when the track changes.

starfleetcommand
2008-11-12, 00:34
Better and better.... I have put the nowplaying.html as the home page in IE and set a shortcut in the Startup folder to start IE in kiosk mode (iexplore -k), which launches in full screen without the annoying windows task bar notifications getting in the way or IE refresh icon. So now when Windows starts on the tiny PC in the family room, the nowplaying.html comes up in full screen and won't allow people to mess with windows (unless they know how to kill IE in kiosk mode --- pssst.... it's Alt-F4). Because this is to only display album art and song info, I don't need it to be interactive but I am planning something that is for another project.

Skunk
2008-11-12, 05:50
Nice work SFC. Is this intended for I.E. only? I notice there is no shuffle status in Firefox, but other than that it looks pretty good. One other thing I did was comment out your comment tag. In HTML you generally use <!-- comment_text -->. Also, what size is all your album art, or what size do you find is needed to look acceptable?

You might also give SqueezePlay a try on your setup when it's released with 7.3, which in full screen mode has a Now Playing display similar to yours (though the art doesn't scale as well on a big monitor yet).

starfleetcommand
2008-11-12, 08:23
Nice work SFC. Is this intended for I.E. only? I notice there is no shuffle status in Firefox, but other than that it looks pretty good. One other thing I did was comment out your comment tag. In HTML you generally use <!-- comment_text -->. Also, what size is all your album art, or what size do you find is needed to look acceptable?

You might also give SqueezePlay a try on your setup when it's released with 7.3, which in full screen mode has a Now Playing display similar to yours (though the art doesn't scale as well on a big monitor yet).


Is this intended for I.E. only? I notice there is no shuffle status in Firefox, but other than that it looks pretty good.

For this project, I used IE because it is built into Windows XP Home which is driving the remote LCD monitor in the family room. I didn't want to clog it up with a bunch of software nor have people interact with it. The PC, being really small (about the size of desktop hard drive) is hidden behind the couch and has a wireless keyboard/mouse which I keep in a cabinet.

Should work on any browser since it is just HTML. I just tested it on Firefox and the shuffle status appears normally. However, I noticed that the track info has moved to below the album art instead of to the right of it. Interesting. Can you post a screenshot?


One other thing I did was comment out your comment tag. In HTML you generally use <!-- comment_text -->.

Thanks for the tip. I found the <comment></comment> reference somewhere and assumed all browsers interpreted it. I changed it to use the <!-- comment_text --> tag.


Also, what size is all your album art, or what size do you find is needed to look acceptable?

Approx 50% of my album art is around 300x300. The other half of the art is 500x500. I think 500x500 looks better while not being too big. The HTML code does enlarge the image a bit, which slightly distorts the 300x300 image while the 500x500 looks really great. Still, 300x300 seems acceptable for this pupose. However, I would like to convert my 300x300 art someday.

Skunk
2008-11-13, 05:43
Should work on any browser since it is just HTML. I just tested it on Firefox and the shuffle status appears normally. However, I noticed that the track info has moved to below the album art instead of to the right of it. Interesting. Can you post a screenshot?


This is w/ FF 3.0.3 in full screen at 1680x1050

starfleetcommand
2008-11-13, 07:50
Skunk

That appears to be an older version of the html. Since then I posted a later one that includes the shuffle/repeat modes. It is in this forum at thread #72. That thread has two screenshots. Below it the pics is an updated nowplaying_script.txt. Just save it to your squeezejs folder as an html. It uses some updated JS files from Michael Herger that will be released in 7.3 but you can pick those up in the nightly builds located here:

http://svn.slimdevices.com/7.3/trunk/server/HTML/EN/html/SqueezeJS/

Just remember to save your existing JS files as a backup. Let me know how it works.

booguss
2008-11-13, 11:08
Looks nice Starfleet :-) Good work!


Just remember to save your existing JS files as a backup. Let me know how it works.

Well, for me it's all a mess when I replace those .js files with the 7.3 builds, neither FF3 nor IE7 works:

How come? I really like his to work :-)

Cheers!

/Boo

starfleetcommand
2008-11-13, 23:52
Looks nice Starfleet :-) Good work!



Well, for me it's all a mess when I replace those .js files with the 7.3 builds, neither FF3 nor IE7 works:

How come? I really like his to work :-)

Cheers!

/Boo

hmmmm. Ensure Java Script is enabled in both IE and FF. I've this happen to me last night. The family room computer was displaying exactly what your screenshot shows but my other computers were showing it just fine. I even rebooted the family room computer where the display wasn't right but it still wasn't working. Probably banged my head on the wall a few hundred times because logically it should work if it works on my other PC's. I did upgrade my SqueezeCenter to 7.2.1 around the time it stopped working for me. During the upgrade, I made sure I restored my SqueezeJS folder (from a backup taken prior to upgrading) but still was banging my head on the wall because it worked on all of the computers except the one in the family room. After about 30 minutes of trying everything, I decided, on a whim (or just that I needed to relieve some stress) I started some music up and refreshed the web browser using CTRL-F5 for a clean refresh and viola!. Doesn't quite make sense to me but, hey, it worked.

For browsers other than IE, replace the <comment></comment> tags with <!-- comment text -->. You've probably noticed that FF is displaying the comments while IE doesn't.

I also discovered that if SqueezeCenter is set to another player, this version of the html will display that players "now playing" because I replaced the 'choosePlayer' function with the player name.

Enough of my rambling..... hope my suggestion helps. I'd like to see you get this working so let me know how it goes.

mherger
2008-11-14, 02:38
> Well, for me it's all a mess when I replace those .js files with the
> 7.3 builds, neither FF3 nor IE7 works:

Starfleet - I don't know how this can work on your system. Between 7.2 and 7.3 we've updated the underlying JS framework which required some incompatible changes. I would expect it to break :-/.

--

Michael

starfleetcommand
2008-11-14, 08:12
> Well, for me it's all a mess when I replace those .js files with the
> 7.3 builds, neither FF3 nor IE7 works:

Starfleet - I don't know how this can work on your system. Between 7.2 and 7.3 we've updated the underlying JS framework which required some incompatible changes. I would expect it to break :-/.

--

Michael


So, even though I'm running SqueezeCenter 7.2.1 with the 7.3 js I downloaded from the nightly builds to use some of the extra features (such as track title without track number), you're saying when I upgrade SqueezeCenter to 7.3, when its released, this html will break completely?

Here's my setup:
Hardware for SqueezeCenter -- Dell PowerEdge 1400 Server (company I work for was going through some hardware upgrades and I acquired it for $75)
Dual 1000Ghz Processors
1GB RAM
2 9GB SCSI HD's -- mirrored - OS.
2 300GB Ultra IDE HD's -- mirrored - MP3 store.
(Yes, IDE because it was what I was running in the old server. Just slapped an ULTRA IDE PCI card in to overcome BIOS limitations.)
Software:
Windows 2000 Server -- really need to upgrade this :-)
SqueezeCenter 7.2.1 with the 7.3 JS's.

Family Room computer hardware: "Slim" FitPC
500Mhz AMD Geode processor
512MB RAM
60GB HD
Software:
Windows XP Home with IE7 running in kiosk mode

mherger
2008-11-14, 08:23
> So, even though I'm running SqueezeCenter 7.2.1 with the 7.3 js I
> downloaded from the nightly builds to use some of the extra features
> (such as track title without track number), you're saying when I
> upgrade SqueezeCenter to 7.3, when its released, this html will break
> completely?

No, I'm surprised SC's web interface still works with the updated file. Did you only replace the UI.js? Or all of them?

--

Michael

starfleetcommand
2008-11-14, 19:30
> So, even though I'm running SqueezeCenter 7.2.1 with the 7.3 js I
> downloaded from the nightly builds to use some of the extra features
> (such as track title without track number), you're saying when I
> upgrade SqueezeCenter to 7.3, when its released, this html will break
> completely?

No, I'm surprised SC's web interface still works with the updated file. Did you only replace the UI.js? Or all of them?

--

Michael


Did you only replace the UI.js? Or all of them?

When I upgraded SC, I copied the contents of the SqueezeJS folder to a sub-directory (JScript 7.2.1) and moved in the 7.3 JS's and restarted SC. SC's web interface seems to work with no problems, at least I haven't seen anything different or bad. Should I be? Here are screenshots of my SC and SqueezeJS folder. Sorry for the relatively low quality.

booguss
2008-11-17, 01:53
Hmm, i replaced the 7.3 JS's with 7.2.1 again. I guess I'll wait until SC 7.3 is released officially.

Another issue for me is the artwork size; I have noticed that optimal size of the artwork is around 600*600 so that it sits nicely on the screen toghether with the Track name etc.

However, I do have some really big artwork at aroud 1400*1400 (and even bigger), and I also have some small artwork at 300*300 (and smaller). Problem is that the artwork does not seem to resize in "Nowplaying". If I load a song from an album with a folder.jpg at 1400*1400 it occupies the entire screen as if it was a wallpaper :-)

Similarly, if I load a song from an album with a folder.jpg at 300*300 it's way too small too small for the nowplaying screen purpose...
The ideal solution would be if all covers could be resized to approx. 600*600...

I haven't tested if it's a differance here, between tag embedded artwork vs folder.jpg artwork.

Cheers!
/boo

Apesbrain
2008-12-11, 12:11
This version below optimized for display on Eee PC (800x480).

Thanks for developing this screen. It's fun to put my Eee on coffee table and watch it change while listening to my SB3!

BTW, works perfectly with Rhapsody - album cover and all.

booguss
2008-12-11, 13:22
Very nice that people up their variants here :-)

My contribution is a simple one, yet very nice:

This way my guests can see when it's time to leave the party, even if they're drunk :-)

Cheers!
/Booguss

starfleetcommand
2008-12-11, 22:47
Very nice that people up their variants here :-)

My contribution is a simple one, yet very nice:

This way my guests can see when it's time to leave the party, even if they're drunk :-)

Cheers!
/Booguss

booguss, I love the digital clock display you added. I was wanting to do this since I recently changed to have this display show on my 32" TV which changes to the input being fed by this html whenever I play MP3's. Very nice! Thanks.

booguss
2008-12-12, 02:54
Very nice! Thanks

No problems :-)

I have another idea, which might be not so easy as the digital clock.
As far as I understand, the clock is a flash movie. The code is inserted at the bottom of the html page. A variant that would be cool is a flash movie showing the biography as the song is playing. Think of a vertical scrolling text of four or maybe five rows that flows (in a loop) from the bottom and up as log as the song is playing.

The first tricky part is that one has to create those flash movies themselves, and further, since most listeners (watchers!) has more than one band in their music library, multiple movies has to be created and kept in a local directory. Well, this is perhaps not so difficult once the first movie is created. Just some copy and paste from Wikipedia or similar.

The more tricky part (I think) is that the code - in some .js file or in the html file itself, I don't know - has to be modified in a way so that the appropriate flash movie is called and scrolls based on which artist is playing. So, for example, when Artist: is ELO, the ELO flash movie is called. The result could look as below...

Do you think this is mission impossible? I'm not good at programming so I think it's a too tough nut for me to crack, but if it was possible that someone could do this it would be really really nice, don't you think?

If this can be done, the possibilities to have more fun increases a lot. Another example could be movies showing a picture slide show of the artist etc etc etc.

The attached picture is just a Paint montage, though I wish it wasn't :-/


Cheers!

/Booguss

starfleetcommand
2008-12-12, 07:57
No problems :-)

I have another idea, which might be not so easy as the digital clock.
As far as I understand, the clock is a flash movie. The code is inserted at the bottom of the html page. A variant that would be cool is a flash movie showing the biography as the song is playing. Think of a vertical scrolling text of four or maybe five rows that flows (in a loop) from the bottom and up as log as the song is playing.

The first tricky part is that one has to create those flash movies themselves, and further, since most listeners (watchers!) has more than one band in their music library, multiple movies has to be created and kept in a local directory. Well, this is perhaps not so difficult once the first movie is created. Just some copy and paste from Wikipedia or similar.

The more tricky part (I think) is that the code - in some .js file or in the html file itself, I don't know - has to be modified in a way so that the appropriate flash movie is called and scrolls based on which artist is playing. So, for example, when Artist: is ELO, the ELO flash movie is called. The result could look as below...

Do you think this is mission impossible? I'm not good at programming so I think it's a too tough nut for me to crack, but if it was possible that someone could do this it would be really really nice, don't you think?

If this can be done, the possibilities to have more fun increases a lot. Another example could be movies showing a picture slide show of the artist etc etc etc.

The attached picture is just a Paint montage, though I wish it wasn't :-/


Cheers!

/Booguss

I agree this would be cool. Since the .js files make calls to SqueezeCenter to update the album art/song info, I tend to think SqueezeCenter itself would need to be updated to support biographies or even lyrics like it supports the album art. I could be wrong though. I'm no programmer either. Just basing this on my limited knowledge of the .js files and how they call SqueezeCenter. It would be cool though.

booguss
2008-12-12, 12:59
Yeah, let's hope that somebodey with enough skills is turned on by this idea. Meantime, I will try to create my first flash bio file, for now just for fun :-)

Cheers!

/Boo

booguss
2008-12-14, 09:03
I discovered that it's no need for swf at all here :-) Check out this first test. It fits best if you play ELO while testing :-)

It's all html and the code is simply pasted into the bottom of the file.

It's very simple to make a lot of individual bio-html's but it's not so cool to have to redirect the browser manually :-/ If somehow SS could "wake up" the appropriate file, alternatively have one large file with several bios in some sort if "If - Then - Else" construction"...? Or maybe something else...?

I will investigate further, but with my limited knowledge some help from our friends is always very welcome...

Cheers!

/Boo

starfleetcommand
2008-12-14, 10:06
I discovered that it's no need for swf at all here :-) Check out this first test. It fits best if you play ELO while testing :-)

It's all html and the code is simply pasted into the bottom of the file.

It's very simple to make a lot of individual bio-html's but it's not so cool to have to redirect the browser manually :-/ If somehow SS could "wake up" the appropriate file, alternatively have one large file with several bios in some sort if "If - Then - Else" construction"...? Or maybe something else...?

I will investigate further, but with my limited knowledge some help from our friends is always very welcome...

Cheers!

/Boo

That's cool. Just need a way to have it update automatically. I was looking through the UI.js file (as this is where info is polled to update the nowplaying.html) at how this could be done and it appears there would have to be an update to the song parser. The song parser appears to be a function within the Base.js so it may be possible to add some code there to support this. I'll have to experiment, but am limited in my knowledge here.

mherger
2008-12-15, 03:31
> That's cool. Just need a way to have it update automatically. I was
> looking through the UI.js file (as this is where info is polled to
> update the nowplaying.html) at how this could be done and it appears
> there would have to be an update to the song parser.

No need to change the song parser, as a biography won't be part of the songinfo query's response. Where do you have it stored?

Best approach will be to create a new class based on SqueezeJS.UI.component. This will trigger an event whenever the track is changed. In this case you could do whatever is needed to get the new biography.

--

Michael

booguss
2008-12-16, 06:10
Thanks for info Michael!
Since I know practically nothing about classes, js files etc (even if I'm practising and have examined the files in a text/js/html editor) and thereby I have a (maybe stupid, hrrm) question. Is the new class an entire new file or is it just code in an already existing file? Which one?

I think it will be best to store the bios as .txt files somewhere and then get the appropriate text and "paste" it into "nowplaying". See example file in #93

What do you think about that?

Cheers!

/Booguss

mherger
2008-12-16, 06:21
> and thereby I have a (maybe stupid, hrrm) question. Is the new class an
> entire new file or is it just code in an already existing file? Which
> one?

You can add it to the JavaScript already in that file. Something like

SqueezeJS.UI.Lyrics = Ext.extend(SqueezeJS.UI.Component, {
onPlayerStateChange : function(result){
// your code here to update the lyrics or whatever
...
...
}
});

> I think it will be best to store the bios as .txt files somewhere and
> then get the appropriate text and "paste" it into "nowplaying". See
> example file in #93
>
> What do you think about that?

You can't store the biographies, lyrics etc. in that page, or you would have to create a different page for every artist/track, right?

But you could eg. store it in the tracks COMMENT tags, then use this tag (it's read by SC) to display your content.

--

Michael

eparson
2008-12-16, 23:50
I have attempted to get this to work on my Ubunbtu 8.10 system using Firefox 3.0 and have been unsuccessful. When I run try to browse to the url as directed I just get a blank screen. I followed the directions in the document and changed the file from .txt to .html and put it in the appropriate folder. Have I missed something? I am running SqueezeCenter 7.3 .... Thanks

everett

booguss
2008-12-17, 02:12
I have attempted to get this to work on my Ubunbtu 8.10 system using Firefox 3.0 and have been unsuccessful. When I run try to browse to the url as directed I just get a blank screen. I followed the directions in the document and changed the file from .txt to .html and put it in the appropriate folder. Have I missed something? I am running SqueezeCenter 7.3 .... Thanks

Do you mean the "nowplaying with biography" or the regular "nowplaying"? In case you mean the first one I haven't got this to work yet with automatic updates, but I am working on it. Text file and attachment in #93 shows an example of this .

In #88 you have a picture and a text file to a working file with a digital clock included. Try it out, it's nice.

I have noticed that these nowplaying html's works best in IE, maybe you should try it? I don't know if it has anything to do with the OS...?

Do like this

1. Save the txt file in #88 as nowplaying_time.html Remember to choose 'all file types' when saving, so that you not end up with just another text file.

2. Save it in eg. C:\Program\SqueezeCenter\server\HTML\EN\html\Squee zeJS (save it in the Folder SqueezeJS)

3. Empty cache of web browser, if possible try IE.

4. Point to eg. http://127.0.0.1:9000/html/SqueezeJS/nowplaying.html

Good Luck to ya :-)

/Booguss

booguss
2008-12-18, 12:21
But you could eg. store it in the tracks COMMENT tags, then use this tag (it's read by SC) to display your content.

Yes, it looks very logical to store those bios in the comment tag. And if I do so, the only file I need to update is nowplaying.html with the code as in #97?

Cheers!

/Booguss

GoodVibrations
2008-12-18, 20:54
I have attempted to get this to work on my Ubunbtu 8.10 system using Firefox 3.0 and have been unsuccessful. When I run try to browse to the url as directed I just get a blank screen.

Had the same problem. I think. :-)
I didn't get a completely blank screen, but I got only the headings without any data actually filled in.

What I did was delete an unused "playerChoser" definition in the html, and then the page worked.

starfleetcommand
2009-01-06, 13:31
I have attempted to get this to work on my Ubunbtu 8.10 system using Firefox 3.0 and have been unsuccessful. When I run try to browse to the url as directed I just get a blank screen. I followed the directions in the document and changed the file from .txt to .html and put it in the appropriate folder. Have I missed something? I am running SqueezeCenter 7.3 .... Thanks

everett


Make sure your browser has java script enabled. Clear the cache and do a total page refresh with CTRL-F5. It works best in IE. Firefox tends to display it a little funky, I found. I don't have Ubuntu but wouldn't think the OS would have anything to do with it. I have it running Windows XP Home and IE7 in kiosk mode. The little PC running the browser is connected to my 32" LCD TV via a VGA/Component Video converter. I'll upload some pics of the setup.

starfleetcommand
2009-01-06, 21:40
Attached are some updated pics to my earlier threads (#57 and #59). Sorry for the blurry pics of the small PC. The white box to the left is the VGA to Component Video Converter. I like it better on the TV, bigger display. I've also updated the "nowplaying" html slightly. I'm using Windows 2000 as my SqueezeCenter server. This was tested on SqueezeCenter 7.2.1. The .js files are from the 7.3 build though, with my own small enhancements. Place all of these files in
[install path]\squeezeCenter\server\HTML\EN\html\SqueezeJS folder of your SqueezeCenter server. Please save your old .js files prior to overwriting them with these.

starfleetcommand
2009-01-07, 20:54
Had the same problem. I think. :-)
I didn't get a completely blank screen, but I got only the headings without any data actually filled in.

What I did was delete an unused "playerChoser" definition in the html, and then the page worked.


Another reason for nowplaying not showing anything including player status (and it took me some time to recreate the problem) could be that the players playlist is empty. I have found that when this happens, nowplaying doesn't even show the players status (shuffle, repeat or power mode). Sometimes, though not always, when the play list does contain a song list, then nowplaying still isn't updating properly. So to remedy, I found that once I add songs to the playlist, I can then do a force refresh in the browser (CTRL-F5 in IE), then nowplaying is no longer blank -- even the players status is then properly displayed.

I will have to see about adding some code to catch this scenerio. Thanks for pointing it out.

starfleetcommand
2010-01-17, 15:47
Hi everybody

It's been a while but I thought I'd share with you version 2.0 of my nowplaying html code. This has been tested with SqueezeBox Server 7.4 and SqueezeCenter 7.x. Enjoy!

on247
2013-09-15, 13:52
Hey.

Can anyone show me how to do this on a mac?
Please keep in mind im quite the beginner.

Mac OS X 10.5.8
Logitech Media Server 7.7.3

Thanx.

Apesbrain
2013-09-15, 16:06
Can anyone show me how to do this on a mac?
Not a Mac user, but I think this is correct:

1. Download some version of nowplaying.zip from this thread and unzip/unstuff it
2. Copy the extracted file to:
/Library/PreferencePanes/Squeezebox.prefPane/Contents/server/HTML/EN/html/SqueezeJS/
3. Open your browser to the following URL:
http://[Your_LMS_Server]:9000/html/SqueezeJS/nowplaying.html
Where [Your_LMS_Server] is the local IP address of the Mac running LMS; if on the same machine, just use 127.0.0.1 or localhost:
http://localhost:9000/html/SqueezeJS/nowplaying.html

Welcome to the forum!

on247
2013-09-17, 00:49
Thanx! :)
Ill try this and post a update.

Update:
Thank you so much for your help. The paths was spot on.
So I almost got it up and running. It displays fine on localhost, but not on any other machine.

I get the wireframes, but no info, and most importantly, no artwork.
No matter wich one of the html versions in this thread I get the same result. Local ok. Others only static wireframes.

What could it be? Any idea?

Update 2:
I got it! Somehow pointing the browser to the Squeezecenter, as mentioned in the second post of this thread, also made the nowplaying.html work.
I tested to see if it just was a coincidence, but same story on another mac.

Thanx again. Im a happy camper.