Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: iTunes like skinning: Now playing display thingy (Read 6696 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

iTunes like skinning: Now playing display thingy

I am aware of the fact, that my constant questions may be a bit irritating, but maybe the solution to this problem will be helpful not for me only...

Browsing the web, I stumbled across this tutorial: http://joncairns.com/tutorials/foobar/columns2.php

The part that interested me, was how to create this yellow area with now-playing song details and the seekbar: http://www.joncairns.com/tutorials/foobar/images/itunes.png

Unfortunatelly, the solution presented there required PanelsUI - not compatible with foobar v1.0.

I would probably give up - I've already got used to hearing an anwser: "not possible!", but what I found here: http://sune80.deviantart.com/art/FooSune-93726213
is based on ColumnsUI, which convinced me, that there is a little chance for me... Btw - this skin (fooSune) is awesome, but unfortunately only in the version that I linked - the version available for download is worse...

So here comes my question: does anyone know how to achieve such a result (this nowplaying info box in the upper part of a window)?

Thx in advance...
Regards,
Krzyszcz

iTunes like skinning: Now playing display thingy

Reply #1
Yeah, that'd be easy to make with WSH Panel Mod.  My now playing display is made using this, so it works quite well.  A seekbar is also easy to do (and in the included samples).  Search the forums for the relevant discussion thread.  It's available for both CUI/DUI.

Though, creating the panel will take a bit of coding.  If you're adverse to coding, I'd recommend using WSH Panel Mod (and the included sample) for the progress bar, and foo_textdisplay for the now playing info.

iTunes like skinning: Now playing display thingy

Reply #2
Well, presumably you could do it with WSH panel mod, but that's going to be just as big of a pain in the ass as EL playlist.

So yes, it is possible, but do you really need to have a request that specific that you'd really want to?
I mean, why not just use CUI's built in Items Details panel?
elevatorladylevitateme

iTunes like skinning: Now playing display thingy

Reply #3
Unfortunatelly, I can't place "Item details" panel in that part of a window, moreover - it looks ugly. But what I requested sounds sort of typical. Maybe someone could post here his working WSH Panel Mod code for Columns UI, with "NowPlaying items details and (optionally) seekbar box"...? Because if there is a thread with appropriate code, I didn't manage to find it (there is, of course, a thread with WSH Panel Mod codes, but I found a little chaos there)

iTunes like skinning: Now playing display thingy

Reply #4
Like the others have said the seekbar would have to be done with a wsh panel, but it would be easier to write the info display with Panel Stack Splitter.  It's what all the monolite clones use:

http://pengspawnie.deviantart.com/art/Mono...-Slim-147924669

http://inappropriatenudging.deviantart.com...-v4-1-152653819

http://raknor.deviantart.com/art/Flex-Foobar-v-0-4-154931263

iTunes like skinning: Now playing display thingy

Reply #5
Thx for the replies, Panel Stack Splitter seems to be a great utility (if works with foobar v1.0) but still - If someone has a code of such an "iTunes-like" "now playing track info box" code written (or similar) - please, post it here... Because I found only one code so far and everything it is capable to do is to display title and artist in a classic text box (what I linked in the first post here is much more than that...).

iTunes like skinning: Now playing display thingy

Reply #6
moreover - it looks ugly.

Topic title adjusted accordingly.
elevatorladylevitateme


iTunes like skinning: Now playing display thingy

Reply #8
I would probably give up - I've already got used to hearing an anwser: "not possible!", but what I found here: http://sune80.deviantart.com/art/FooSune-93726213
is based on ColumnsUI, which convinced me, that there is a little chance for me... Btw - this skin (fooSune) is awesome, but unfortunately only in the version that I linked - the version available for download is worse...


OT:

In history of foobar there was a time where all these "skins" were kind of hard to install and setup properly (even word "skin" was perceived as insult)... i presume it stills more or less is in this state. If you need something this specific you should grab some skin in which it works and grab it from it into you current setup/skin... here in foobar there is nothing carved in stone you can edit almost anything component allows you to do and most people just use this "skins" as inspiration for they own works.

WSH Panel/ Panel splitter is your best chance to accomplish this request but they demand lots of scripting experience so youve been warned

iTunes like skinning: Now playing display thingy

Reply #9
Thx for the replies, Panel Stack Splitter seems to be a great utility (if works with foobar v1.0) but still - If someone has a code of such an "iTunes-like" "now playing track info box" code written (or similar) - please, post it here... Because I found only one code so far and everything it is capable to do is to display title and artist in a classic text box (what I linked in the first post here is much more than that...).

I trimmed up my personal now playing display a lot to make it more general for other users.  Just add a new WSH Panel to your config and paste this code in:

Code: [Select]
var image_path = fb.FoobarPath + "images\\";
var g_img = gdi.Image(image_path + "background.png");
var background_width = 800;
var background_height = 600;
var artist = title = album = track = '';
var bgcolor = RGB(238,246,253);
var textcolor1 = RGB(0, 117, 234);
var textcolor2 = RGB(90, 103, 121);
var font1 = gdi.Font("Segoe UI", 16, 1);
var font2 = gdi.Font("Segoe UI", 14, 1);
var font3 = gdi.Font("Segoe UI", 14, 2);


DT_CENTER = 0x00000001;
DT_NOPREFIX = 0x00000800;
DT_END_ELLIPSIS = 0x00008000;
g_metadb = fb.GetFocusItem();
on_item_focus_change();

function RGB(r,g,b) {
return (0xff000000|(r<<16)|(g<<8)|(b));
}

function on_paint(gr) {
gr.FillSolidRect(0, 0, ww, wh, bgcolor);
    gr.DrawImage(g_img, 0, 0, ww, wh, 0, 0, background_width, background_height);
if(g_metadb) {
gr.GdiDrawText(title, gdi.Font("Segoe UI", 16, 1), textcolor1, 0, 0, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(artist, gdi.Font("Segoe UI", 14, 1), textcolor2, 0, 30, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(album, gdi.Font("Segoe UI", 14, 2), textcolor2, 0, 50, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(track, gdi.Font("Segoe UI", 14, 2), textcolor2, 0, 70, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
    }
}

function on_size() {
ww = window.Width;
wh = window.Height;
    window.Repaint();
}

function on_metadb_changed() {
    if(g_metadb) {
        artist = fb.TitleFormat("%artist%").EvalWithMetadb(g_metadb);
        title = fb.TitleFormat("%title%").EvalWithMetadb(g_metadb);
    album = fb.TitleFormat("%album%").EvalWithMetadb(g_metadb) + " (" + fb.TitleFormat("%date%").EvalWithMetadb(g_metadb) + ")";
    track = fb.TitleFormat("%track number%").EvalWithMetadb(g_metadb);
    if(track) track = "Track #" + track; 
    }
}

function on_item_focus_change() {
if (g_metadb) window.UnwatchMetadb();
g_metadb = fb.IsPlaying ? fb.GetNowPlaying() : fb.GetFocusItem();
if (g_metadb) {
try { on_metadb_changed(); } catch(e) {}
window.WatchMetadb(g_metadb);
}
}

function on_playback_new_track() {
    window.Repaint();
}

Now, create an "images" directory in your foobar2000 program folder, and place a background.png in there.  Finally, you may want to tweak the variables at the top of the code to your liking.  Let me know if you need further help.

iTunes like skinning: Now playing display thingy

Reply #10
Thanks a lot!
Silent-Night skin is cool (I will consider using it - don't know whether works with foobar v1.0 and - if I can adjust it all to my needs), and the code by Hitchhiker427 seems to be just what I was looking for... To make it look the way I want I will probably ask here some more questions later. But, once again - thank you for your help

iTunes like skinning: Now playing display thingy

Reply #11
Ok, so here comes my first problem... This NowPlaying info display panel of Hitchhiker427 sometimes refreshes when I am changing NowPlaying song, sometimes it doesn't. I have no idea what may be the reason...

iTunes like skinning: Now playing display thingy

Reply #12
Ok, so here comes my first problem... This NowPlaying info display panel of Hitchhiker427 sometimes refreshes when I am changing NowPlaying song, sometimes it doesn't. I have no idea what may be the reason...


Look if you have Playback / Cursor follows playback checked. imho it could be the culprit.

iTunes like skinning: Now playing display thingy

Reply #13
quite a few errors/bad practice in that script from Hitchhiker427.

fixed version:

Code: [Select]
var image_path = fb.FoobarPath + "images\\";
var g_img = gdi.Image(image_path + "background.png");
var background_width = 800;
var background_height = 600;
var artist = title = album = track = '';
var bgcolor = RGB(238,246,253);
var textcolor1 = RGB(0, 117, 234);
var textcolor2 = RGB(90, 103, 121);
var font1 = gdi.Font("Segoe UI", 16, 1);
var font2 = gdi.Font("Segoe UI", 14, 1);
var font3 = gdi.Font("Segoe UI", 14, 2);


DT_CENTER = 0x00000001;
DT_NOPREFIX = 0x00000800;
DT_END_ELLIPSIS = 0x00008000;
g_metadb = fb.GetFocusItem();
on_item_focus_change();

function RGB(r,g,b) {
return (0xff000000|(r<<16)|(g<<8)|(b));
}

function on_paint(gr) {
gr.FillSolidRect(0, 0, ww, wh, bgcolor);
gr.DrawImage(g_img, 0, 0, ww, wh, 0, 0, background_width, background_height);
if(g_metadb) {
gr.GdiDrawText(title, font1, textcolor1, 0, 0, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(artist, font2, textcolor2, 0, 30, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(album, font3, textcolor2, 0, 50, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(track, font3, textcolor2, 0, 70, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
}
}

function on_size() {
ww = window.Width;
wh = window.Height;
}

function on_metadb_changed() {
artist = fb.TitleFormat("%artist%").EvalWithMetadb(g_metadb);
title = fb.TitleFormat("%title%").EvalWithMetadb(g_metadb);
album = fb.TitleFormat("[%album%] ['('%date%')']").EvalWithMetadb(g_metadb);
track = fb.TitleFormat("[Track # %tracknumber%]").EvalWithMetadb(g_metadb);
window.Repaint();
}

function on_item_focus_change() {
if (g_metadb) window.UnwatchMetadb();
g_metadb = fb.IsPlaying ? fb.GetNowPlaying() : fb.GetFocusItem();
if (g_metadb) {
on_metadb_changed();
window.WatchMetadb(g_metadb);
}
}

function on_playback_new_track() {
on_item_focus_change();
}

iTunes like skinning: Now playing display thingy

Reply #14
Thx, it helped

reason for editing: spelling

iTunes like skinning: Now playing display thingy

Reply #15
quite a few errors/bad practice in that script from Hitchhiker427.


Sorry, most of that was from trimming up my personal script.  I have a lot of other special case stuff (streaming audio, fading on track changes, context menu entries, etc.) making my code ~4x as long.  However, I learned that I don't need to put window.Repaint() in on_size().  I didn't know that before.

iTunes like skinning: Now playing display thingy

Reply #16
well the main problem was the display not updating on track change.

iTunes like skinning: Now playing display thingy

Reply #17
Yeah, I use a combination of on_playback_dynamic_info_track() and on_metadb_changed() to gather the relevant info (the first is necessary for streaming audio, and the second is necessary for selected tracks when not playing), and accidentally cut out some important lines of code.  Sorry again.

iTunes like skinning: Now playing display thingy

Reply #18
no need to keep saying sorry. i've posted far worse examples. i once posted a script that read a text file during on_paint - that was truly shocking. 

iTunes like skinning: Now playing display thingy

Reply #19
My song info box looks nice now. Thanks, again
Now it's time to get the seekbar :]

I could, of course, spend a lot of time on looking for an appropriate pattern in the WSH Panel Mod thread, but maybe someone uses exactly what I need and could just perform "copy&paste" for me. I need a seekbar with time counters on both sides of it, with elapsed and remaining time of the song playback (and, of course, configurable graphics that I could replace with mine).
Anyone?

iTunes like skinning: Now playing display thingy

Reply #20
I´m trying to add more fields to the track info code, thanks Hitchhiker427 and Marc2003! and I kind a need a some help...

I´m using the line "playback = fb.TitleFormat("%playback_time%").EvalWithMetadb(g_metadb);" along with the gr.GdiDrawText one
to display the playback time but it always shows up "?".

Also how can I align the text to the left instead of using the "center of the word/field" so that I can align all the info such as playback time, bitrate, etc in the left like using a tab? Maybe replacing the "DT_CENTER" value?

Is it possible as well, to display the sample rate "in the natural behavior" like %filesize_natural% such that if it´s "48000 Hz" it displays "48 Khz" and what´s the syntax of the volume say in db to display it too? I couldn´t find it in the help files.

Here´s what I´m using:

Code: [Select]
var image_path = fb.FoobarPath + "colores personalizados\\";
var g_img = gdi.Image(image_path + "Fondo Azul.bmp");
var background_width = 220;
var background_height = 300;
var artist = title = album = track = '';
var bgcolor = RGB(238,246,253);
var textcolor1 = RGB(249, 249, 249);
var textcolor2 = RGB(249, 249, 249);
var font1 = gdi.Font("Segoe UI", 14, 1);
var font2 = gdi.Font("Segoe UI", 14, 1);
var font3 = gdi.Font("Segoe UI", 10, 0);


DT_CENTER = 0x00000001;
DT_NOPREFIX = 0x00000800;
DT_END_ELLIPSIS = 0x00008000;
g_metadb = fb.GetFocusItem();
on_item_focus_change();

function RGB(r,g,b) {
return (0xff000000|(r<<16)|(g<<8)|(b));
}

function on_paint(gr) {
gr.FillSolidRect(0, 0, ww, wh, bgcolor);
gr.DrawImage(g_img, 0, 0, ww, wh, 0, 0, background_width, background_height);
if(g_metadb) {
gr.GdiDrawText(title, font1, textcolor1, 0, 0, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(artist, font2, textcolor2, 0, 17, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(album, font3, textcolor2, 0, 40, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(track, font3, textcolor2, 0, 50, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(channels, font3, textcolor2, 148, 3, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(playback, font3, textcolor2, 144, 16, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(bitrate, font3, textcolor2, 155, 29, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
gr.GdiDrawText(samplerate, font3, textcolor2, 155, 42, ww, 24, DT_CENTER | DT_END_ELLIPSIS | DT_NOPREFIX);
}
}

function on_size() {
ww = window.Width;
wh = window.Height;
}

function on_metadb_changed() {
artist = fb.TitleFormat("$replace([%artist%],_, )$replace($stripprefix($substr([%title%],1,$sub($strstr(%title%,-),2)),-),_, )").EvalWithMetadb(g_metadb);
title = fb.TitleFormat("$replace($stripprefix($substr([%title%],$strstr(%title%,-),1000),-),_, )").EvalWithMetadb(g_metadb);
album = fb.TitleFormat("[%album%] ['('%date%')']").EvalWithMetadb(g_metadb);
track = fb.TitleFormat("[Track # %tracknumber%]").EvalWithMetadb(g_metadb);
playback = fb.TitleFormat("%playback_time%").EvalWithMetadb(g_metadb);
channels = fb.TitleFormat("%channels%").EvalWithMetadb(g_metadb);
bitrate = fb.TitleFormat("%bitrate% Kbps").EvalWithMetadb(g_metadb);
samplerate = fb.TitleFormat("%samplerate% Hz").EvalWithMetadb(g_metadb);
window.Repaint();
}

function on_item_focus_change() {
if (g_metadb) window.UnwatchMetadb();
g_metadb = fb.IsPlaying ? fb.GetNowPlaying() : fb.GetFocusItem();
if (g_metadb) {
on_metadb_changed();
window.WatchMetadb(g_metadb);
}
}

function on_playback_new_track() {
on_item_focus_change();
}
Thanks in advanced!

Edit: used the codebox instead.