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: Building a Columns UI design from scratch (Read 37296 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Building a Columns UI design from scratch

Hey, foobar community!

I’ve been busy over the last couple of weeks and this is the result: A tutorial on how to use Tagz scripting to completely control the look of your playlist.

A lot of documentation for the Tagz language in general and Columns UI’s additions already exists. But I’ve never seen a tutorial explaining how to build a complete playlist design from scratch. That’s a gap I hope to fill.

The tutorial is based on Foobar 0.9 and Columns UI 0.1.3. A chapter about porting the example design back to 0.8.3 is included as well.

This is the URL: http://brother-john.net/tagz/

Have fun reading and don’t hesitate to post any feedback.

Brother John

Building a Columns UI design from scratch

Reply #1 –
Impressive ...

a bit offtopic but .... You may want to add this for RG in one column

Code: [Select]
$if(%__replaygain_track_gain%,$ifgreater($replace(%__replaygain_track_gain%,.,, dB,),0,$blend(758A75|758A75,40BF40|40BF40,$add($replace(%__replaygain_track_gain%,.,, dB,),0),300),$blend(75758A|75758A,0000A6|0000A6,$sub(0,$replace(%__replaygain_track_gain%,.,, dB,)),1000))•,)$if(%__replaygain_album_gain%,$ifgreater($replace(%__replaygain_album_gain%,.,, dB,),0,$blend(75758A|75758A,40BF40|40BF40,$add($replace(%__replaygain_album_gain%,.,, dB,),0),300),$blend(75758A|75758A,0000A6|0000A6,$sub(0,$replace(%__replaygain_album_gain%,.,, dB,)),1000))•,)

Building a Columns UI design from scratch

Reply #2 –
Very nice tutorial, and a nicely designed page as well.

Building a Columns UI design from scratch

Reply #3 –
No more comments?

Anyway, the chapter about back-porting to 0.8.3 is online now.

@NEMO7538
Good suggestion. Personally I prefer rgain display as the actual value, but mentioning $blend() and $replace() seems like a fine idea. I'll keep that in mind for future versions.

Brother John

Building a Columns UI design from scratch

Reply #4 –
Brother John, very nice indeed. i'm sort of advanced user so i went through all that long time ago, but it's really great for new users ...
 

Building a Columns UI design from scratch

Reply #5 –
Very USEFUL

Thanks!!!!

This Tutorial is very good for beginners who also want to configure fb2k's design and appearance! (Like me  )
The tutorial does contain very compact, well-explained and good structured instructions with very nice examples/pictures, so that almost everyone can follow it without pre-knowledge.     

Deserves definately to be [span style='font-size:14pt;line-height:100%']Sticky ![/span]

Building a Columns UI design from scratch

Reply #6 –
Very impressive.  I've been meaning to create a nicer UI for my FB2K instances, and now I know where to go for a nice recipe.  Thanks much!

Building a Columns UI design from scratch

Reply #7 –
Brother John,
I must say your tutorial is REALLY excellent! just reading through it not trying it out has already taught me a lot about tagz, etc.

i must say however, the part where you convert certain tracks to hex, i understand that might be what you want for your playlist, but that is a pretty confusing bit for someone who might now understand what hex is, and seems like it might just make it a little bit too difficult for a complete novice. im sure most people would want regular track numbers anyway.

im not sayin take it out or nothing, but you wanted comments and that is the only real criticism i can come up with. nice job.

Building a Columns UI design from scratch

Reply #8 –
Brilliant, very useful.  Love the layout.

Building a Columns UI design from scratch

Reply #9 –
Thanks Brother John! This is the kind of guide i've been looking for, I found it perfect for me because I know my way around foobar's functions and utilities side but I'm a complete noob at modding the appearance and doing all that stuff with the sorting and whatnot. The link to your guide must be made sticky! but thats not up to me though
we was young an' full of beans

Building a Columns UI design from scratch

Reply #10 –
Brilliant! Thank you for this fantastic tutorial. Very very useful!

Building a Columns UI design from scratch

Reply #11 –
Cheers for all the praise, mates!

NogginJ, you might be right about the $hex() stuff. Indeed it kept moving in and out of the tut all the time. Main reason for keeping it in the final version was that I love the look.
And to all: If you run into problems at this particular point: Let me know so I can decide if a change might be necessary for future updates.

Brother John

Building a Columns UI design from scratch

Reply #12 –
If you made this for foobar 0.9 you should replace %album tracks% by %totaltracks% because it is mapped to official id3v2 and mp4 tags.

Building a Columns UI design from scratch

Reply #13 –
@brother john: i think %_is_paused% should be %is_paused% . i think they changed that in .9

here

Building a Columns UI design from scratch

Reply #14 –
@dano
Could you please elaborate? A search didn't bring up anything useful apart from it being a tag used by iTunes while %album tracks% seems to be the most common way of storing number of tracks.

@falconfox
I assume the middle underscore is a typo?
The Titleformat reference only mentions %_ispaused% but you are correct that %ispaused% works as well (and is consistent with %isplaying%). Thx for pointing this out.

Brother John

Building a Columns UI design from scratch

Reply #15 –
@brother john:

misspelling:  $select(), wich evaluates numbers.

regarding the second example of a comment: the comment should not read "this is a comment" it should read "this is NOT the correct way to comment" or something like that. if someone is scanning your tutorial for code on how to comment, they might not read the text and think that either method is acceptable.

i stopped there, i will continue reading when i have more time.

Building a Columns UI design from scratch

Reply #16 –
this is nice, but i get confused on how to add single frame line to the top, but using foobar 0.8.3

Building a Columns UI design from scratch

Reply #17 –
hexonn, can you tell the exact point in the tutorial where you got confused? Maybe something is unclear there.

0.8.3 defines all colours in one large string with this syntax:
Quote
text|selected text|background|selected background|non-focused selected background|left frame|top frame|right frame|bottom frame

You must define everything up to "selected background" everytime you use the colour string. The rest may be empty.
So setting red top frame (on an otherwise black and white layout) could look something like this:
Quote
000000|ffffff|ffffff|000000|||0000ff||

Building a Columns UI design from scratch

Reply #18 –
Quote
Could you please elaborate? A search didn't bring up anything useful apart from it being a tag used by iTunes while %album tracks% seems to be the most common way of storing number of tracks.

I can't give you a definate answer, but if you put a CD in and stick it in a playlist in foobar. Right click a track, goto properties and TOTALTRACKS is used...

Building a Columns UI design from scratch

Reply #19 –
Quote
hexonn, can you tell the exact point in the tutorial where you got confused? Maybe something is unclear there.
i guess it's that i'm just trying to add frames to an already-made style that i'm using

all i want to do is just add a line above every album (or first track)

and i'm pretty much lost on everything else  because i don't know what to change in the Globals / Variables or in the Columns


This is in Globals / Varialbes
Code: [Select]
background=$ifgreater($mod(%_playlist_number%,2),0,F2E8DF,FFFFFF)
background_selected=FFFFFF

playing_background=F1F1F1
playing_background_selected=F1F1F1

title_text=9A6633
title_text_selected=888888

playing_title_text=4387C0
playing_title_text_selected=4387C0

number_text=838383
number_text_selected=000000

playing_album_text=9A6633
playing_album_text_selected=9A6633

button_text=D1D1D1

// black = 000000
// white = FFFFFF
// orange = 4387C0
// blue = 9A6633
// light grey = F1F1F1
// light blue = F7F0EB


and it has nothing in the Color tab next to it



Then in the Columns tab

This is what it has an Artist in the Display
Code: [Select]
$if2(%album%,'-') ['('%date%')']



This is in Color
Code: [Select]
$if(%_isplaying%,
%_playing_title_text%|
%_playing_title_text_selected%|
%_playing_background%|
%_playing_background_selected%,
%_title_text%|
%_title_text_selected%|
%_background%|
%_background_selected%)


i dont know exactly how to put the top frame line

i know i'm supposed to use $get(FRMtop) and add the color to the variables, but nothing happens


This is what it looks like


and what i want to get this (i just added some quick lines)

Building a Columns UI design from scratch

Reply #20 –
thank you so much brother john. this helped me a lot understand what i was doing by copying and pasting everything together
now i actually did all this myself errrr with your help

have a look at this [img=http://img82.imageshack.us/img82/6761/foooooo0gy.th.png]

Building a Columns UI design from scratch

Reply #21 –
%totaltracks% works on cuesheet without adding any tags, %album tracks% does not.

Building a Columns UI design from scratch

Reply #22 –
Fifoxtasy, thanks for the praise and nice layout. I'd love to get started on porting my current Apple aqua-ish style to 0.9. But foo_playlist_tree is one of my most essential components. So no use in abandoning 0.8 before it's ported.

AndersHu and everyone: Please try not to start a tag-field name discussion here. The tutorial is about learning to use the Tagz scripting language, not about which tag names are best for which circumstances. I'm aware that this is a quite controversial subject by itself. However this tutorial can't address it in any depth. In fact, you should expect having to adapt the example design to your personal needs.

Cheers,
Brother John

Building a Columns UI design from scratch

Reply #23 –
at first i didn't switch because i thought i NEEEEDED all those components, but when i finally checked it out i was so happy with 0.9, that i switched instantly, even without all those plug ins. it's just so much better.
the components are getting ported pretty quick any way...

Building a Columns UI design from scratch

Reply #24 –
Small update.

Mainly typos, some small details and updated comments referring to Foobar2000 0.9 being beta. No changes to the scripts.

And thx again for all the feedback so far.

Brother John