Skip to main content

Topic: HTPC Fullscreen panels II (Read 108349 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Introduction
This thread is the continuation of HTPC Fullscreen panels where I posted my configurations for foo_uie_trackinfo_mod which is now a problematic component. So I had the desire to resettle to a stable component with the same (or better) features. I found it in the component WSH Panel Mod by T.P Wang (official thread with download). For now there is just one configuration, but I have the strong feeling that I will continue to change my current design...

Requirements and usage
My panel configurations depend on Columns UI and WSH Panel Mod. In order to use them, I recommend to set up a layout in Preferences > Display > Columns UI, Tab Layout like this:
Code: [Select]
Vertical splitter
+- WSH Panel Mod
\- NG Playlist [hidden]

The hidden playlist is just there to make keyboard shortcuts run properly. I use them to switch back and forth between different layouts (browsing and the fullscreen panels you find here).

Then just copy and paste the text file's contents into the configuration dialog you can find in the WSH panel context menu.


WSHtpc01
My first real try to make a proper layout with WSH panel. It still feels less "natural" than with foo_uie_trackinfo_mod, but performance-wise (=less CPU load) the WSH panel is much better.


[ Specified attachment is not available ]
  • Last Edit: 31 December, 2009, 12:25:29 PM by ojdo

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #1
Update: WSHtpc01 v0.2

Changes from v0.1
  • Panel is blanked on playback stop
  • Progress bar thicker, (remaining) playback time is shown
  • Infoline no shows playback order (to-do: introduce symbols)

Features
  • Shows title, album, artist next to big album cover
  • Bars visualise %rating% (orange, default range: 1 to 5) and %mood% (green, default range: 1 to 3) and playback progress (blue)
  • A greyed-out "infoline" displays %genre%, %style%, %tracknumber%, %discnumber%, %date%, %publisher%, %play_count%, %last_played%, %first_played%, %length% and the playback order.
  • Font used: Calibri

Screenshot


Download
[ Specified attachment is not available ]
  • Last Edit: 11 January, 2010, 04:45:01 PM by ojdo

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #2
Sh*t, what pitty. Wrong file encoding crippled the file in the post above. Here the correct download:

[ Specified attachment is not available ]

  • High Five
  • [*]
HTPC Fullscreen panels II
Reply #3
Thank you for your work!

it's really minimalistic and beautiful. I love it!


  • TheShaman
  • [*]
HTPC Fullscreen panels II
Reply #4
Hey ojdo,

Good work! 
Is it possible to integrate this function into FooNight and use a keyboard shortcut to change from your fullscreen view to the FooNight one?
That skin already uses WSH Panel Mod but I'm not sure how I can make both work.

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #5
Is it possible to integrate this function into [another skin]? I'm not sure how I can make both work.


Yes, the principle is explained in the first post. Probably the skin (FooNight/Day) creates a layout in Preferences > Columns UI, tab Layout. Just add another one for the fullscreen panel (see first post for what to put in there to make keyboard shortcuts work). Then you can assign keyboard shortcuts in Preferences > General > Keyboard Shortcuts to each layout. However, the last time I tried PSS I was not able to make keyboard shortcuts work reliably - I always had issues when the wrong panel had focus. That's why I stick to a "pure" CUI configuration.

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #6
New configuration: WSHtpc02 (v0.2)

Features
  • Fullscreen background image: artist if available, otherwise genre-specified image is displayed
  • Symbol line displaying (from left to right): Playback order, Playback statistics (line diagram), track- and discnumber, mood, rating
  • Scales very well also to very small sizes as long the panel is wider than high.

Screenshots
Rock bands look great on it:


Classical masters, too:


Genre-specific "fallback" images are displayed if artist has no own image (here: rock.jpg, I think I found it on sxc.hu):


Download
[ Specified attachment is not available ]

Installation
Extract the images from the download into images/WSHtpc02. Add a WSH panel to your layout. Copy and paste the code from the text file to the panel's configuration window. Place genre-images into %foobar_installation_path%/images/%genre%.jpg.
  • Last Edit: 18 February, 2010, 02:39:45 PM by ojdo

  • marc2003
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #7
can you provide the required images please?

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #8
can you provide the required images please?

There are no images "required". It displays what you have. I cannot share pictures that I have not made myself. It is just pre-configured to display them. I also don't know how you named your Genres. For me it's mainly Electronic, Rock and Pop. Search deviantart, sxc.hu, google image search, ... for pictures that visualise what you have in mind when you think of your music. I hope this makes the idea behind this configuration clearer.

  • marc2003
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #9
??

Code: [Select]
var imgpath2 = fb.FoobarPath+'images\\WSHtpc02\\';
var img_pborder = new Array(
gdi.Image(imgpath2+'default.png'),
gdi.Image(imgpath2+'repeat-playlist.png'),
gdi.Image(imgpath2+'repeat-track.png'),
gdi.Image(imgpath2+'random.png'),
gdi.Image(imgpath2+'shuffle-tracks.png'),
gdi.Image(imgpath2+'shuffle-albums.png'),
gdi.Image(imgpath2+'shuffle-folder.png')
);
var img_rating = new Array(
gdi.Image(imgpath2+'star-filled.png'),
gdi.Image(imgpath2+'star-outline.png')
);
var img_mood = new Array(
gdi.Image(imgpath2+'mood-filled.png'),
gdi.Image(imgpath2+'mood-outline.png')
);
  • Last Edit: 18 February, 2010, 02:39:06 PM by marc2003

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #10
??


Silly me. Sorry for not thinking twice. I uploaded a ZIP-file containing configuration script and images... I hope it works now. 

  • marc2003
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #11
now it works. thanks. 

  • Gapkiller
  • [*][*][*]
HTPC Fullscreen panels II
Reply #12
Thank you for your work ojdo!!
I like it very much.

I'm using WSHtpc01 v0.2 and I was wondering if I could do something like
$if(%isplaying%,your code,MUSIK IS THE KEY)   
Of course I can't but could you please help me out with a solution for this?
Because it looks so empty if nothing is playing...

thx

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #13
I'm using WSHtpc01 v0.2 and I was wondering if I could do something like
$if(%isplaying%,your code,MUSIK IS THE KEY)

Yes, that's possible very easy. Look at this section of the code:
Code: [Select]
function on_playback_stop(reason) {
    if(reason != 2) { // starting_another
        g_albumart = null; g_albumart_rot = null;
        g_disc = null; g_disc_rot = null;
        g_artist = null; g_artist_rot = null;
        
        title = ""; artist = ""; album = "";    rating=0; mood=0; infoline = "";
        window.Repaint();
    }
}


and just assign the string "MUSIC IS THE KEY" to one of the variables title, artist, album or infoline.
E.g. artist = "foobar2000"; and infoline = "Plays music." would display the text always when playback is stopped.

  • Gapkiller
  • [*][*][*]
HTPC Fullscreen panels II
Reply #14
ojdo,

thx for the fast reply.

Unfortunately it doesn't work on startup of foobar, only after playing the first track in the session
and it doesn't work if you change layouts via keyboard shortcut.
I assume that you have to start playback from the layout wsh panel is located in to get it working.




  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #15
Yes, you're right. As the function name says, these values are only assigned (and displayed) when the playback has stopped. If the playback has never been started since the panel was initialised, this code is never reached. So you also have to initialise these values when the variables are declared. So find this line at the beginning of the code:
Code: [Select]
var title, artist, album, rating, mood, tracknumber, discnumber, totaltracks, totaldiscs, infoline, pbtime;
and change it to (untested)
Code: [Select]
var title, album, rating, mood, tracknumber, discnumber, totaltracks, totaldiscs, pbtime;
var artist = "foobar2000", infoline = "Play music.";

While it's cool to have full control on the display, it is cumbersome to have to deal with everything "by hand". Maybe I should once rewrite these panels using classes and objects.

  • Gapkiller
  • [*][*][*]
HTPC Fullscreen panels II
Reply #16
Works.
Thx again!

  • bimbel
  • [*][*]
HTPC Fullscreen panels II
Reply #17
ojdo care to explain the playback statistics (line diagram)?

I cannot really make sense out of it!
  • Last Edit: 07 March, 2010, 11:28:08 AM by bimbel

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #18
Here you are:

[ Specified attachment is not available ]

The line length is partitioned according to the dates (they are calculated in days, approximated [months have all 30 days, no leap years]). So the line quickly shows how often you played a song already and how long you have not listend to it compared to its "age" in your library. It is especially interesting to watch when playing "long not heared" tracks (autoplaylist example query: NOT %last_played% DURING 52 WEEKS).

  • tommygun
  • [*]
HTPC Fullscreen panels II
Reply #19
.......is it possible to set a fixed maximum size on how embedded album art is displayed?
Tommy

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #20
.......is it possible to set a fixed maximum size on how embedded album art is displayed?

Fixed maximum size is possible. To apply this limit only for embedded album art is not possible. For the case of WSHptc02, look out for this line:
Code: [Select]
var album_scale = Math.min(X,Y);

where X is
Code: [Select]
0.33*ww/g_albumart.Width
and Y is
Code: [Select]
Math.max(0.55*wh/ g_albumart.Height,(200-0.03*wh)/g_albumart.Height)


So the album cover is scaled to fit both (hence Math.min) horizontally (X) and vertically (Y) to the available space. If you want to limit the maximum size to a fixed value, change X to something like
Code: [Select]
Math.min(0.33*ww/g_albumart.Width,500/g_albumart.Width)

for the case of a desired maximum width of 500 pixel. Y at the moment respects to constraints: Either the image shall take 55% of the panel height or at least 200 pixels - 3% of the panel height. Enclose this statement also with a Math.min like for X to limit the size in both dimensions.
  • Last Edit: 22 March, 2010, 05:53:46 AM by ojdo

  • tommygun
  • [*]
HTPC Fullscreen panels II
Reply #21
Hi ojdo.

1st of all, thanks for your reply and your effort to make the foobar2000 application more user friendly in order to change the looks of it and share the results with all the others.

Sorry, but I'm not that much of a geek and the scripting language can be kinda confusing for someone who don't understand it as much as guys like you do.

Anyway, I was talking about embedded album art only and the way I understood you was that it isn't possible to set a fixed size for embedded album art is that correct?

If yes, there is no point to go any further from here but if there is a way I would like to know the parameters to set the maximum size of the displayed album art to 450x450.

These are the only parameters I could find that kinda fit your description:

Code: [Select]
    // Albumart: Calculations and reflection
    if(g_albumart) {
        var scale_w = 0.45*ww / g_albumart.Width;
        var scale_h = 0.9*(0.75*wh) / g_albumart.Height;
        var scale = Math.min(scale_w, scale_h);
        var img_w = g_albumart.Width * scale;
        var img_h = g_albumart.Height * scale;
        var pos_x = 0.45*ww-img_w;
        var pos_y = 0.75*wh-img_h;
        gr.DrawImage(g_albumart_rot, pos_x, pos_y+img_h, img_w, img_h, 0, 0, g_albumart.Width, g_albumart.Height);        
        gr.FillGradRect(pos_x,pos_y+img_h,img_w,wh/6, 90, RGBA(0,0,0,128), RGB(0,0,0,255));
        gr.FillSolidRect(pos_x,pos_y+img_h+wh/6,img_w,5*wh/6, RGBA(0,0,0,255));
    }

Please give me a hint on how to change them in order to display the embedded album art in a maximum size of 450x450.

Thanks a lot, your help is very much appreciated.

Tommy

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #22
Replace these two lines
Code: [Select]
var scale_w = 0.45*ww / g_albumart.Width;
var scale_h = 0.9*(0.75*wh) / g_albumart.Height;

with the following ones:
Code: [Select]
var scale_w = Math.max(0.45*ww,450) / g_albumart.Width;
var scale_h = Math.max(0.9*0.75*wh,450) / g_albumart.Height;

This sets the maximum size of all (both embedded art and separate files) album art to 450x450 pixels.

  • tommygun
  • [*]
HTPC Fullscreen panels II
Reply #23
Replace these two lines
Code: [Select]
var scale_w = 0.45*ww / g_albumart.Width;
var scale_h = 0.9*(0.75*wh) / g_albumart.Height;

with the following ones:
Code: [Select]
var scale_w = Math.max(0.45*ww,450) / g_albumart.Width;
var scale_h = Math.max(0.9*0.75*wh,450) / g_albumart.Height;

This sets the maximum size of all (both embedded art and separate files) album art to 450x450 pixels.


Hi ojdo.

Thanks for your reply.

I did change the script as suggested but it didn't work, the album art is displaying the same as before the change.

Is there something else that could be done to display the album art in the desired maximum size ?

Thanks again,
Tommy

  • ojdo
  • [*][*][*][*][*]
HTPC Fullscreen panels II
Reply #24
Is there something else that could be done to display the album art in the desired maximum size ?


No, it should work. Please post your whole currently used WSH panel code in a CODEBOX or as an attachment and I will have a look into it.