Skip to main content
Topic: foo_looks - Users' / Designers' guide (Read 22092 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

foo_looks - Users' / Designers' guide

I'll have time these days, so I think this can be a good moment for begin this attempt of explain what is foo_looks, how to use it, and how to do new Looks to everyone.
This will be a mix of FAQ and manual, and when we have material enough, it´ll be corrected, edited, and uploaded to www.foobarlooks.tk. I hope you help me with all this work.
Feel free for ask, add or correct whatever you want (mainly my bad english).

Quote
What is foo_looks?
It's a plugin for foobar2000, developed by DanZ. Its previous name was foo_WSGUI.
It allows the use of "skins", called LOOKS by convention (you know, skins for Winamp, Looks for foobar).
It's intended as a complement for the standard foobar UI, that remains as the best playlist we can have (IMHO). But for some users could be a full alternative.

Quote
How must I install it?
Just download foo_looks.zip from here or from www.foobarlooks.tk, and unzip the files in the "components" folder (inside of the foobar2000 folder).
Now, you must have:
-foo_looks.dll
-foo_looks folder, with a few graphics and *.ski files
These are the "standard" Looks. If you want to add new Looks, you must copy their files to the foo_looks folder.


Quote
Design of Looks

First, we need a nice graphic. These could be good examples, but if you want to send another one, please, do it (angel.gr@lycos.es). The first graphic is an edited photograph. It's more "real", but it has some jpg artifacts and it need some work in the lower part (do anybody want to do it?). The second one is a full digital image (Deleted). If you make changes, please, keep the .bmp format by the moment.


The new "code" is easy:
Quote
/////////////////////////////////////////////////////////////////////
// USER DEFINED COLORS (More usual colors - Optional)
/////////////////////////////////////////////////////////////////////
section color
list black int { 255 5 5 5 }  // Alpha Red Green Blue
list white int { 255 255 255 255 }
list lcd int { 255 216 216 204 }
list transparent int { 0 0 255 0 } // The easiest way is to fill the transparent zones with a "pure color" and define it as transparent. So the pure green (0 255 0) will be transparent in our graphic.

/////////////////////////////////////////////////////////////////////
// WINDOW (Defines the window attributes of your look)
/////////////////////////////////////////////////////////////////////
section window
list transalpha color.transparent  // We're calling a color that was defined previously in "section color"
list maptranscolor color.white  // On systems that don't support window transparency ( OS < Win2K) map that trans pixels to this color
int alphablend 255 // 255 == Full opacity


Quote
Titles

What about the titles of the songs?:
Quote
section title
   string fontname "Tahoma"
   int fontsize 7
   list fontcolor color.textcolor
   int texthint 4
   string fspec "$if(%tracknumber%,%tracknumber% - )[%artist% - ]$if(%title%,%title%,%_filename%) ->"
   bool scroll true
   int x 16
   int y 54
   int width 142
   int height 14

We can define several titles with diverse info, just use "section title1", "section title2"...

Now, we must have something like this:
)
   list fillcolor color.textcolor  // Predefined color
   bool mouseinput true // Allows mouse inputs, so we can move the bar
   int x 17  // You know, locations and size
   int y 73
   int width 142
   int height 12[/quote]

And we have this:
(tooltips, seek bar, volume, right click options, change playlists...). Where are you? 

foo_looks - Users' / Designers' guide

Reply #1
i think this is a great idea.

ive been meaning to make a look or modify someone else's to bring it up to date..

ill be sure to tune in to this thread often to look for updates.

foo_looks - Users' / Designers' guide

Reply #2
This probably could be added to the wiki somewhere... I'd try that first. These forums aren't really designed for documentation.

foo_looks - Users' / Designers' guide

Reply #3
Yes, but I think this is an easy way, and more people can see it, and they can collaborate. Maybe later, with more elaborated material.

foo_looks - Users' / Designers' guide

Reply #4
Updated.

foo_looks - Users' / Designers' guide

Reply #5
I'm gonna try foo_looks for 0.7 now. The link for ipodlook2.bmp has a duplicate 'http://'.

cya

foo_looks - Users' / Designers' guide

Reply #6
Are there any troubleshooting guides or anything like that.  I installed foo_looks and if I click on anything in Foobar I get an 'Illegal Operation' and after that window Foobar crashes.  It doesnt' really give me much info on what's going wrong, except one line says "Additional info: main message loop".  I am using Foobar 0.7 and the foo_looks I downloaded from http://www.foobarlooks.tk/ that says it is for 0.7 (1.03).  Taking out foo_looks dll lets me run Foobar again.

foo_looks - Users' / Designers' guide

Reply #7
DanZ (the plugin developer) said:
Quote
I still have some issues to work out with using the utf8api.dll so for now foo_looks is still unicode only (funny, it used to be ANSI only but everyone kept pressuring me to release a unicode version   )

So I think this version doesn't work with Win 9x yet. Be patient. 

foo_looks - Users' / Designers' guide

Reply #8
Hi,
I have created skin for Foobar2000 in Samurize
with working buttons ,elapsed time,scrolling text
(on pic : #15 Road Trippin' (Californication) RHCP )
file info ... (using 'foo_txt' plugin for output info from foobar
and 'scroll.vbs' and 'text file' script for scrolling and displaying text in samurize)
and two switchable modes each with multiple
color options (based on iCandy Wmp3 skin by Judge) :



I was wondering would you consider using
*.png images for making foo_looks skins, as they give much more
transparency options then *.bmp ?

foo_looks - Users' / Designers' guide

Reply #9
RGBA transparency with layered windows, using UpdateLayeredWindow instead of SetLayeredWindowAttributes, are not terribly difficult. Now, the real fun comes if/when you want clicks on certain translucent parts, such as the shadows, to go through to the underlying windows. With layered windows, only clicks on fully transparent pixels go through. If you're not worried about that little element, then it should be no problem. Just a matter of calling UpdateLayeredWindow every time you change the bitmap. Or, if you're nuts, you could make each dynamic element of the window its own layered window... Hell, screw that.

foo_looks - Users' / Designers' guide

Reply #10
what are all the available controls?

i mean like can i call history based previous and next functions or other things like call the album list etc?

maybe call visualizations etc?

granted i havent looked closely at the tutorial or the example files... got a big architecture test coming up soon... but soon as thats over with, i wanna make a simple look and maybe move on to things more advnaced.

also is there alpha transparency?  (rather than color based?)

just curious.

foo_looks - Users' / Designers' guide

Reply #11
Quote
RGBA transparency with layered windows, using UpdateLayeredWindow instead of SetLayeredWindowAttributes, are not terribly difficult. Now, the real fun comes if/when you want clicks on certain translucent parts, such as the shadows, to go through to the underlying windows. With layered windows, only clicks on fully transparent pixels go through. If you're not worried about that little element, then it should be no problem. Just a matter of calling UpdateLayeredWindow every time you change the bitmap. Or, if you're nuts, you could make each dynamic element of the window its own layered window... Hell, screw that.

Do you have any sample code using UpdateLayeredWindow, blendfuntions, etc.?

foo_looks - Users' / Designers' guide

Reply #12
Quote
what are all the available controls?

You should be able to find all available commands about in the default foo_looks.ski file (about halfway through).

Quote
i mean like can i call history based previous and next functions or other things like call the album list etc?

maybe call visualizations etc?


AFAIK not yet, but you could always ask danZ to implement them, in case you need them.  Wouldn't be the first feature request he implemented.

Quote
also is there alpha transparency? (rather than color based?)


Yes there is, at least for the look as a whole.  Should be somewhere in the main window section (ski file).

foo_looks - Users' / Designers' guide

Reply #13
Quote
what are all the available controls?

Maybe we must write a complete list with a short description of function and options.
Sorry for not update the guide these days, I'll try to do something more tomorrow. 

foo_looks - Users' / Designers' guide

Reply #14
Quote
Do you have any sample code using UpdateLayeredWindow, blendfuntions, etc.?

First, I create a 32bpp bitmap. Of course, you can load/create it however you want, and you'll probably have error checking.

Code: [Select]
BYTE * ptr;
HBITMAP bitmap;
BITMAPINFOHEADER bmih;
bmih.biSize = sizeof(bmih);
bmih.biWidth = m_sSize.cx;
bmih.biHeight = m_sSize.cy;
bmih.biPlanes = 1;
bmih.biBitCount = 32;
bmih.biCompression = BI_RGB;
bmih.biSizeImage = 0;
bmih.biXPelsPerMeter = 0;
bmih.biYPelsPerMeter = 0;
bmih.biClrUsed = 0;
bmih.biClrImportant = 0;

bitmap = CreateDIBSection(0, (const BITMAPINFO *) &bmih, DIB_RGB_COLORS, (VOID **) &ptr, 0, 0);


Now, here comes the fun part:

Code: [Select]
POINT ptSrc = {0, 0};
BLENDFUNCTION blend = {AC_SRC_OVER, 0, alpha, AC_SRC_ALPHA};
HDC dDC = GetDC(NULL);
HDC hDC = CreateCompatibleDC(dDC);
HBITMAP pOldBmp = (HBITMAP) SelectObject(hDC, bitmap);
UpdateLayeredWindow(m_hWnd, dDC, &m_pPos, &m_sSize, hDC, &ptSrc, 0, &blend, ULW_ALPHA);
SelectObject(hDC, pOldBmp);
DeleteDC(hDC);
ReleaseDC(NULL, dDC);


This code is copied from foo_osd.

Since I don't feel like retyping exactly what MSDN explains about that function, I'll give you this link.

You must pre-scale the color values according to their alpha levels... for each pixel:

(red/green/blue) = (red/green/blue) * alpha / 255

Have fun with that stuff, and remember that you can't use SetLayeredWindowAttributes if you're using UpdateLayeredWindow. Best to keep the same bitmap resident and pass it to all calls where you need to change the blend function.

foo_looks - Users' / Designers' guide

Reply #15
Quote
Quote
i mean like can i call history based previous and next functions or other things like call the album list etc?

maybe call visualizations etc?


AFAIK not yet, but you could always ask danZ to implement them, in case you need them.  Wouldn't be the first feature request he implemented.

Make this a formal feature request then.

I guess just to be able to call any of the functions available to the hotkeys (including those on the context menu)

Not sure if this is possible, but if so it would be great!

foo_looks - Users' / Designers' guide

Reply #16
moved this reply here because somebody looking here might find it useful also

Quote
3. is that possible to toggle play/pause with a unique play/fake play button? what i want is the song to be paused when playing if i clicked on play and start playing from where it paused if clicked on it once again



hi,

just realised i addressed this problem when updating my fooAMP look to version 1.2 (will appear on www.foobarlooks.tk in a day or 2)


note - replace all coordinates & sizes with your own


section play // play (non-toggle version)
int x 39
int y 88
int width 22
int height 17

section user0 // layers trick to allow un-pausing with the play button
int command command.playback_pause
int show show.IsPaused
int x play.x
int y play.y
int width play.width
int height play.height


and if you want the play button to act as a pause button during playback, use this:

section user1 // layers trick to make 'play' pause during playback
int show show.IsPlaying
int command command.playback_pause
int x play.x
int y play.y
int width play.width
int height play.height



hope this is what you wanted

it saves you from accidently restarting tracks

foo_looks - Users' / Designers' guide

Reply #17
just a quick message

over the last week or 2 i've spent quite a lot of time with the functionality aspect of the foo_looks syntax, learning the features pretty in-depth and devising a few clever layers & script tricks

if anybody needs specific .ski help i'm happy to respond to your emails


and i'm also happy to assist graphic designers who are perhaps a little code-shy


so if you have some cool graphics you need code for, or have some areas of your .ski that need work, just drop me an email


tkelly32@btinternet.com


Tom

'unofficial foo_looks technical support'
(trying to ease danZ workload)

foo_looks - Users' / Designers' guide

Reply #18
Is it possible to implement the tabs of foobar in foo_looks?  If it is, how can it be done???

foo_looks - Users' / Designers' guide

Reply #19
Quote
Is it possible to implement the tabs of foobar in foo_looks?  If it is, how can it be done???

sorry

not possible to have tabs


but you can have the current playlist name displayed, and code a 'prev' & 'next' button to control which playlist is running

i'll investigate more

(if you want me to send you the code for this - email me)


Tom
tkelly32@btinternet.com

foo_looks - Users' / Designers' guide

Reply #20
hi again

i've written a very very basic guide to creating your first ever 'look'

it's for complete beginners and the end result looks like so:




to download the files click here

all you need to do is the following:

- extract to your /components/foo_looks/ folder
- open my_first_look.ski in notepad (or similar)
- read along


if this is too basic, don't worry

intermediate & advanced guides on the way


in fact, if somebody would like to submit a graphic for the intermediate guide, i'd be happy to work with it

tkelly32@btinternet.com


as for me - i'm putting the finishing touches to this:



foo_looks - Users' / Designers' guide

Reply #22
that silver thing is big and nasty

i prefer things a little more compact (most of us do)

let me ask you something....

after you've put a cd into your real life hi-hi; set the volume, then press play...
do you really stand and stare at it, impressed by how well it was designed??

looks should be

- functional
- non-intrusive
- low memory & cpu
- resizeable

if you can think of a design (or know one) like this - then by all means point me in the direction

but at the moment, the old classic winamp 2.x (with mini-bar versions) seems to be the most sought after 'look'

foo_looks - Users' / Designers' guide

Reply #23
I think we may be more creative. We're thinking "Winamp, Winamp, Winamp", and there're a lot of different possibilities... 

foo_looks - Users' / Designers' guide

Reply #24
Any possibility to get text to scroll sideways for long filenames?

 
SimplePortal 1.0.0 RC1 © 2008-2019