Help - Search - Members - Calendar
Full Version: HTPC Fullscreen panels
Hydrogenaudio Forums > Hosted Forums > foobar2000 > Uploads - (fb2k)
ojdo
Intro
I use foobar2000 for my HTPC which is connected to a big 16:9 LCD TV (resolution: 1360x768). For this, I stick to a quite classic columns ui layout when I want to browse my music collection. Nothing fancy there, only big fonts, playlist switcher and several track display panels to show artist & album art and some colorful bars representing rating, mood, hotness and progress. This layout is too specific for a general release; here a screenshot:

IPB Image

The fullscreen part
Now the interesting thing: While listening to the music, I switch to a secondary layout, which basically has the following structure:
CODE
Vertical splitter
+- Track display
\- Columns playlist [hidden]


I have made several configurations for the Track display part, I already posted some of them in this forum. Now I want to thoroughly upload 2 or 3 of them:


htpc1
  • Uses font Gentium
  • Stretches artist picture to panel size
IPB Image

Track display code and pictures (copy to images\htpc1\ in your fb2k directory):
Click to view attachment


htpc4
  • Shows album cover and artist pic (uses user globals)
  • easy usage: just use the code below; no additional images required
  • quite resolution independent; album art size easily modifiable
IPB Image

IPB Image

CODE

// Name: HTPC4
// Version: 1.0
// ---
// Description: A fullscreen trackinfo_mod/track display config for foobar2000
// Author: ojdo

// Global
$puts(path.artistart,$get(artistPath))
$puts(path.albumart,$get(coverPath))

$puts(font.a,$font(Arial,16,,120-120-120))
$puts(font.b,$font(Arial,16,,255-255-255))
$puts(swap.time,10)
$puts(swap.number,2)
$puts(col.border,60-60-60)
$puts(albumart.size,350)

// Background
$drawrect(0,0,0,0,pencolor-null brushcolor-5-5-5)


// PerTrack

// Artist photo
$imageabs2(%_width%,$muldiv(%_width%,3,4),0,$div($sub($muldiv(%_width%,3,4),%_height%),2),%_width%,%_height%,0,0,$get(path.artistart),NOKEEPASPECT NOCACHE)

$if(%title%,
// Panel bg
$drawrect(16,$eval(%_height%-226),$eval(%_width%-32),210,pencolor-0-0-0 alpha-220)

// Title
$alignabs($add(90,$get(albumart.size)),$sub(%_height%,234),$sub(%_width%,$get(albumart.size),90,40),110,left,bottom)
'#LINEHEIGHT,44#'
$font(Calibri,40,,255-255-255)
$if2(%title%,Unknown Title)
'#LINEHEIGHT,59#'

// Artist
$alignabs($add(90,$get(albumart.size)),$sub(%_height%,125),$sub(%_width%,$get(albumart.size),90,40),40,left,bottom)
$font(Calibri,24,,255-255-255)
$if2(%artist%,Unknown Artist)

,

// Nothing to display
$alignrel(center,middle)
$font(Calibri,40,,255-255-255)
No track loaded
)

// Album art
$if($get(path.albumart),
$drawrect(58,$sub(%_height%,$get(albumart.size),62),$eval($get(albumart.size)+4),$eval($get(albumart.size)+4),pencolor-$get(col.border) brushcolor-null)
$imageabs2($get(albumart.size),$get(albumart.size),0,0,$get(albumart.size),$get(albumart.size),60,$sub(%_height%,$get(albumart.size),60),$get(path.albumart),NOKEEPASPECT)
)

// Pause overlay
$if(%ispaused%,$if($get(path.albumart),
$drawrect(60,$sub(%_height%,$get(albumart.size),60),$get(albumart.size),$get(albumart.size),pencolor-0-0-0 alpha-150)
$alignabs(60,$sub(%_height%,$get(albumart.size),60),$get(albumart.size),$get(albumart.size),center,middle)$font(Webdings,100,,255-255-255)';'
,
$alignabs(60,$sub(%_height%,150,60),$get(albumart.size),150,center,middle)$font(Webdings,100,,255-255-255)';'
))

// Rating
$ifgreater(%rating%,0,
$drawrect(60,$sub(%_height%,42),$muldiv(%rating%,$eval($muldiv(220,$get(albumart.size),400)-4),5),7,pencolor-null brushcolor-255-128-0)
,)
$drawrect(58,$sub(%_height%,44),$muldiv(220,$get(albumart.size),400),11,pencolor-$get(col.border) brushcolor-null)

// Mood
$ifgreater(%mood%,0,
$drawrect($eval(60+$muldiv(220,$get(albumart.size),400)+30),$sub(%_height%,42),$muldiv(%mood%,$eval($sub($get(albumart.size),$muldiv(220,$get(albumart.size),400),26)-4),3),7,pencolor-null brushcolor-0-255-0)
,)
$drawrect($eval(58+$muldiv(220,$get(albumart.size),400)+30),$sub(%_height%,44),$sub($get(albumart.size),$muldiv(220,$get(albumart.size),400),26),11,pencolor-$get(col.border) brushcolor-null)

// PerSecond

// Third line

$alignabs($add($get(albumart.size),90),$sub(%_height%,85),$sub(%_width%,$get(albumart.size),90,40),30,left,bottom)

$select($add($mod($div($right(%cwb_systemdatetime%,2),$get(swap.time)),$get(swap.number)),1),
// A
$get(font.a)
$if(%album%,$get(font.b)%album%$get(font.a))
$if(%date%, '('$get(font.b)%date%$get(font.a)')')
$if(%tracknumber%,',' Track $get(font.b)$num(%tracknumber%,1)$get(font.a)$if(%totaltracks%,'/'$get(font.b)$num(%totaltracks%,1)$get(font.a))$if(%disc%, '('CD $get(font.b)%disc%$get(font.a)')'))
,
// B
$if(%last_played%,$get(font.a)Bisher $get(font.b)$if2(%play_counter%,0)$get(font.a)mal gehört', 'zuletzt am $get(font.b)$substr(%last_played%,9,10). $select($substr(%last_played%,6,7),Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember) $substr(%last_played%,1,4)$get(font.a).,$get(font.a)Bisher noch $get(font.b)nie$get(font.a) gehört.)
)

// Progress bar
$puts(width,$muldiv(%_time_elapsed_seconds%,$sub(%_width%,$get(albumart.size),90,60,4),%_length_seconds%))
$ifgreater($get(width),0,$drawrect($add($get(albumart.size),92),$sub(%_height%,42),$get(width),7,pencolor-null brushcolor-$if($strstr(%cwb_playback_order%,Shuffle),128-0-255,0-128-255)),)
$drawrect($add($get(albumart.size),90),$sub(%_height%,44),$sub(%_width%,$get(albumart.size),90,60),11,pencolor-$get(col.border) brushcolor-null)



htpc6
  • Easy installation: Only copy code below
  • Uses artistPath and coverPath
  • Very well structured code (good for personal modifications), easy to adapt to other resolutions (if necessary at all)
  • Font used: Big Noodle Titling
  • Progress bar around album art

IPB Image

IPB Image

CODE

// Name: HTPC6
// Version: 1.0
// ---
// Description: A fullscreen trackinfo_mod/track display config for foobar2000
// Author: ojdo

// Global

// Colors
$puts(col.bg,5-5-5)
$puts(col.border.rating,255-128-0)
$puts(col.border.mood,0-255-0)
$puts(col.imgborder,66-66-66)
$puts(col.progress,$if(%_ispaused%,180-180-180,$if($strstr(%cwb_playback_order%,Shuffle),96-32-255,32-128-255)))
$puts(col.info.basic,222-210-200)
$puts(col.info.additional,180-180-180)

// Not needed anymore, once used to make place for a child panel (spectrum vis)
$puts(pos.vh,0)´

// Positions
$puts(pos.img.a,450)
$puts(pos.img.x,$eval(%_width%/2-$get(pos.img.a)/2))
$puts(pos.img.y,$muldiv($eval(%_height%/2-$get(pos.vh)/2-$get(pos.img.a)/2),3,5))

// When to show additional info
$puts(EndIsNear,$if($or($greater(35,%_time_elapsed_seconds%),$greater(35,%_time_remaining_seconds%)),1))

/////////////////////////////////////////
// RELATIVE TIMESTAMPS
// formerly known as natural language timestamps
// by topdownjimmy - v0.5.c - May 6, 2007
/////////////////////////////////////////

// calculate days since last play
$puts(dayssince,$cwb_datediff(%cwb_systemdate%,%last_played%))

// correct "dayssince" to consider early AM to be an extension of previous day
$puts(dayssince,$sub($get(dayssince),$if($and($greater(7,$substr(%cwb_systemdatetime%,12,13)),$greater($substr(%last_played%,12,13),6)),1,0)))
$if($and($greater($substr(%cwb_systemdatetime%,12,13),6),$greater(7,$substr(%last_played%,12,13))),$puts(dayssince,$add($get(dayssince),1)),)

// calculate day of week of last play
$puts(calcdayofweek,$add(1,$mod($add($substr(%last_played%,3,4),$div($substr(%last_played%,3,4),4),$select($substr(%last_played%,6,7),6,2,2,5,0,3,5,1,4,6,2,4),$substr(%last_played%,9,10)),7)))

// correct day of week to consider early AM to be an extension of previous day
$puts(calcdayofweek,$sub($get(calcdayofweek),$ifgreater(7,$substr(%last_played%,12,13),1,0)))
$if($strcmp($get(calcdayofweek),0),$puts(calcdayofweek,7),)

// calculate period of day of last play (night, morning, etc.)
$puts(dayperiod,$select($add(1,$substr(%last_played% ,12,13)),Night,Night,Night,Night,Night,Night,Night,Morning,Morning,Morning,Morning,Morning,Afternoon

,Afternoon,Afternoon,Afternoon,Afternoon,Evening,Evening,Evening,Evening,Night,Night,Night))

// calculate natural language timestamp
$if(%last_played%,$puts(rel_timestamp,$ifgreater($get(dayssince),0,$ifgreater($get(dayssince),1,$ifgreater($get(dayssince),6,$if($and($greater($get(dayssince),21),$not($strcmp($left(%cwb_systemdate%,7),$left(%last_played%,7)))),$if($not($strcmp($left(%cwb_systemdate%,4),$substr(%last_played%,1,4))),$select($substr(%last_played%,6,7),January,February,March,April,May,June,July,August,September,October,November,December)' '$ifgreater($get(dayssince),334,$substr(%last_played%,1,4),),$ifgreater(2,$sub($substr(%cwb_systemdate%,6,7),$substr(%last_played%,6,7)),'Last Month',$select($substr(%last_played%,6,7),January,February,March,April,May,June,July,August,September,October,November,December))),$ifgreater($div($add($get(dayssince),4),7),1,$div($add($get(dayssince),4),7)' Weeks Ago',Last Week)),$select($get(calcdayofweek),Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday)' '$get(dayperiod)),$if($strcmp($get(dayperiod),Night),Last,Yesterday)' '$get(dayperiod)),$if($strcmp($get(dayperiod),Night),Tonight,This $get(dayperiod)))),$puts(rel_timestamp,Never))

// ------------------------------------------------------------------------------------------------------------------

// Background

$drawrect(0,0,0,0,pencolor-null brushcolor-$get(col.bg))
$drawrect(0,$eval($get(pos.img.y)+$get(pos.img.a)*6/7),%_width%,1,pencolor-99-99-99)
$drawrect(
$eval($get(pos.img.x)-5),
$eval($get(pos.img.y)-5),
$eval($get(pos.img.a)+10),
$eval($get(pos.img.a)+10),
brushcolor-$get(col.bg) pencolor-$get(col.bg) alpha-200
)
$drawrect(
$eval($get(pos.img.x)-3),
$eval($get(pos.img.y)-3),
$eval($get(pos.img.a)+6),
$eval($get(pos.img.a)+6),
brushcolor-null pencolor-$get(col.imgborder)
)

// ------------------------------------------------------------------------------------------------------------------

// PerTrack

// Basic trackinfo
$alignabs(
0,
$eval($get(pos.img.y)+$get(pos.img.a)+10),
%_width%,
$eval(%_height%-$get(pos.img.y)-$get(pos.img.a)-$get(pos.vh)-10),
center,
middle
)
$font(BigNoodleTitling,40,,$get(col.info.basic))
[' '%title%' ']
$char(10)
$font(Florencesans,8,,$get(col.info.basic))
' '$char(10)
$font(BigNoodleTitling,24,,$get(col.info.basic))
[' '%artist%' ']

// Album Art
$if($get(coverPath),
$imageabs2(
$eval($get(pos.img.a)-50),
$eval($get(pos.img.a)-50),
0,0,
$eval($get(pos.img.a)-50),
$eval($get(pos.img.a)-50),
$eval($get(pos.img.x)+25),
$eval($get(pos.img.y)+25),
$get(coverPath),
NOKEEPASPECT)
)



// Rating
$if(%rating%,
$puts(rw,$muldiv(%rating%,$eval($get(pos.img.x)-5),5))
$ifgreater($get(rw),0,
$drawrect(
0,
$eval($get(pos.img.y)+$get(pos.img.a)*6/7-1),
$get(rw),
3,
brushcolor-null pencolor-$get(col.border.rating)
)
,)
)

// Mood
$if(%mood%,
$puts(mw,$muldiv(%mood%,$eval($get(pos.img.x)-5),3))
$ifgreater($get(mw),0,
$drawrect(
$eval(%_width%-$get(mw)),
$eval($get(pos.img.y)+$get(pos.img.a)*6/7-1),
$get(mw),
3,
brushcolor-null pencolor-$get(col.border.mood)
)
,)
)

// ------------------------------------------------------------------------------------------------------------------

// PerSecond

// Debug section
// $alignabs(0,0,%_width%,50,left,top)$font(Verdana,8,nocleartype,255-255-255)%_width%', '%_height%

// Pause overlay
$if(%_ispaused%,
$drawrect(
$eval($get(pos.img.x)),
$eval($get(pos.img.y)),
$eval($get(pos.img.a)),
$eval($get(pos.img.a)),
brushcolor-$get(col.bg) pencolor-$get(col.bg) alpha-150
)
)

// Progress bar
$puts(prog.milli,$muldiv( %playback_time_seconds%,1000,%length_seconds%))
$ifgreater($get(prog.milli),0,
$puts(lw,$muldiv($min(250,$eval($get(prog.milli)-0)),$eval($get(pos.img.a)+6),250))
$drawrect(
$eval($get(pos.img.x)-3),
$eval($get(pos.img.y)-3-1),
$get(lw),
3,
brushcolor-null pencolor-$get(col.progress)
)
,)

$ifgreater($get(prog.milli),250,
$puts(lw,$muldiv($min(250,$eval($get(prog.milli)-250)),$eval($get(pos.img.a)+6),250))
$drawrect(
$eval($get(pos.img.x)+$get(pos.img.a)+2-1),
$eval($get(pos.img.y)-3-1),
3,
$get(lw),
brushcolor-null pencolor-$get(col.progress)
)
,)
$ifgreater($get(prog.milli),500,
$puts(lw,$muldiv($min(250,$eval($get(prog.milli)-500)),$eval($get(pos.img.a)+6),250))
$drawrect(
$eval($get(pos.img.x)+$get(pos.img.a)+3-$get(lw)+1),
$eval($get(pos.img.y)+$get(pos.img.a)+2-1),
$get(lw),
3,
brushcolor-null pencolor-$get(col.progress)
)
,)
$ifgreater($get(prog.milli),750,
$puts(lw,$muldiv($min(250,$eval($get(prog.milli)-750)),$eval($get(pos.img.a)+6),250))
$drawrect(
$eval($get(pos.img.x)-3-1),
$eval($get(pos.img.y)+$get(pos.img.a)+3-$get(lw)+1),
3,
$get(lw),
brushcolor-null pencolor-$get(col.progress)
)
,)





// Additional Info
$if($and($get(EndIsNear),%_isplaying%),

// Artist Art
$if($get(artistPath),
$drawrect($eval(%_width%/2-80-5),$eval($get(pos.img.y)+$get(pos.img.a)-100-5),170,130,pencolor-$get(col.bg) brushcolor-$get(col.bg) alpha-200)
$drawrect($eval(%_width%/2-80-5),$eval($get(pos.img.y)+$get(pos.img.a)-100-5),170,130,pencolor-$get(col.imgborder) brushcolor-null)
$imageabs2(160,120,0,0,160,120,$eval(%_width%/2-80),$eval($get(pos.img.y)+$get(pos.img.a)-100),$get(artistPath),NOKEEPASPECT)
)

$drawrect(
0,
$eval(%_height%-80-$get(pos.vh)),
$eval(%_width%/5),
80,
brushcolor-null pencolor-$get(col.imgborder)
)
$alignabs(
0,
$eval(%_height%-80-$get(pos.vh)),
$eval(%_width%/5-10),
80,
right,
middle
)
$font(BigNoodleTitling,19,,$get(col.info.additional))
[' '%album% ['('%date%')']' ']

$drawrect(
$eval(%_width%*4/5+1),
$eval(%_height%-80-$get(pos.vh)),
$eval(%_width%/5),
80,
brushcolor-null pencolor-$get(col.imgborder)
)
$alignabs(
$eval(%_width%*4/5+1+10),
$eval(%_height%-80-$get(pos.vh)),
$eval(%_width%/5-10),
80,
left,
middle
)
$font(BigNoodleTitling,19,,$get(col.info.additional))
Last time played:' '$char(10)$get(rel_timestamp)' '
)
// ----------





htpc7
  • Credits go to Cyex for his CD cover picture
  • Playback buttons (pause on cover, next and previous track on left/right)
  • Small scpl panel on the cover can be activated for quick browsing in the current playlist (==> only usable for mouse)
  • When hotness is used, the cover glows to indicate hot tracks
  • Quite resolution independent (horizon position and text sizes must be tweaked a bit in the configuration part to look good)
IPB Image

IPB Image

Track display and SCPL codes, pictures and installation notices (readme.txt):
Click to view attachment

Enjoy!

Edit: I will modify this post when I add stuff.
bowen_tk
Hi
Really Nice share

Can you recapitulate all the config you share in this topic please.

ANd for Htpc4 is there a way to make that the artist image is not deformed but only adapt it self on the height of the screen smile.gif .??
ojdo
QUOTE(bowen_tk @ Apr 3 2008, 01:32) *

ANd for Htpc4 is there a way to make that the artist image is not deformed but only adapt it self on the height of the screen smile.gif .??


Yes, but this dependent on a) your source file format and b) your screen aspect ratio. My code reflects the computations necessary for 4:3-pictures to be cropped suiting my 16:9 resolution (top and bottom is cut away)

CODE
// Artist photo
$imageabs2(%_width%,$muldiv(%_width%,3,4),0,$div($sub($muldiv(%_width%,3,4),%_height%),2),%_width%,%_height%,0,0,$get(path.artistart),NOKEEPASPECT NOCACHE)


Refer to the Reference for $imageabs2 for a detailed description:
The second argument sets the "resize-to" height of the picture, for me it is 0.75*%_width% (4:3 pics), it would be exactly 1*%_width% for squared pictures. Then the fourth argument with $div(...): This cuts away half of the invisible part at the top so that the cropped sections are at bottom and top of the source picture. In every case, a persistent source picture format is necessary for all pictures to be shown without deformations.
cmdrpaddy
Do you know any good source of high quality artist art? A small jpeg scaled up on a HDTV doesn't look so great.
ojdo
QUOTE(cmdrpaddy @ Apr 17 2008, 19:20) *

Do you know any good source of high quality artist art?


I must disappoint you, I just use Google Image Search (restricted to large and very large pictures). If that doesn't bring good results, I also look for the band's homepage or on Wikipedia. Also fanpages sometimes have good galleries. It's some work, but I think it's worth the effort... cool.gif

One recommendation: Crop all pictures to the same aspect ratio (e.g. 1:1, 4:3 or 16:9) to make it easier to show them later without stretching.

Good look for hunting!
ojdo
orbtwin
hello:

i only get the total times played, but not the %last_played% in your config htpc7.
i think there something wrong with this:

CODE
$if(%last_played%,
    $get(font.a)Bisher $get(font.b)%play_count%$get(font.a)mal gehört
    $ifgreater($get_global(lp_diff),0,', 'zuletzt am $get(font.b)$substr(%last_played%,9,10). $select($substr(%last_played%,6,7),Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember) $substr(%last_played%,1,4)$get(font.a),)
    $ifgreater($get_global(age),0,', 'das erste Mal am $get(font.b)$substr(%first_played%,9,10). $select($substr(%first_played%,6,7),Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember) $substr(%first_played%,1,4)$get(font.a),).
,


where's the (lp-diff) and (age) globals? in the code?

thanks wink.gif
ojdo
QUOTE(orbtwin @ Apr 17 2008, 23:41) *

where's the (lp-diff) and (age) globals? in the code?

Arg, thanks for reporting this... I use columns_ui's $set_global function in the preferences to calculate globals only once: age (since when is the song in my collection), lp-diff (when - relative to today - was the song heared last time?) [and hotness]:

CODE
$set_global(lp_diff,$cwb_datediff(%cwb_systemdate%,%last_played%))
$set_global(age,$cwb_datediff(%cwb_systemdate%,%first_played%))


I do that to prevent today's date to be shown too often (like in "Heared 1 time, last time $today, first time $today", which sounds quite silly to me). When I make an update, I will include as much as possible in the code above. Now I see, that also some colours are set in my private panels_ui user globals (like artistPath and coverPath).

HTH
ojdo
orbtwin
thanks ... it works now

i acommodate the code in columns ui -- prefs -- globals and the track info shows now the last played OK...
now i only must translate into english laugh.gif

great code ... i use your htpc7 (and old versions) since one year or more!

sorry my bad english! laugh.gif
ojdo
QUOTE(orbtwin @ Apr 18 2008, 12:22) *

great code ... i use your htpc7 (and old versions) since one year or more!

Thanks, I am glad to hear that the configs are useful for you. I am also open for suggestions for future versions ... wink.gif
slawekebi
Hi,
nice config's. I have question: would You add playlist dropdown and quicksearch toolbar?
thx
ojdo
QUOTE(slawekebi @ Apr 19 2008, 19:28) *

nice config's. I have question: would You add playlist dropdown and quicksearch toolbar?

Definitely not as I use these views for listening, not for browsing music. However thanks for the input.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.