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: This skin possible? / Help me with skin (Read 4114 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

This skin possible? / Help me with skin

http://i.imgur.com/yNYc8sx.png

^ Would greatly appreciate someone helping me learn to make a skin similar to this, if possible.

This skin possible? / Help me with skin

Reply #1
http://i.imgur.com/yNYc8sx.png

^ Would greatly appreciate someone helping me learn to make a skin similar to this, if possible.

I think you can achieve seekbar and volume bar like that with WSH panel mod. You need to modify one of the existing scripts, like the one from this post: http://www.hydrogenaud.io/forums/index.php...st&p=599561  There may be better ones and  they may differ in using logarithmic or linear scale.

I posted recently very simple (RGB values, rectangle and positioning) modification of such script here: http://www.hydrogenaud.io/forums/index.php...st&p=901698. It looks similar.

This skin possible? / Help me with skin

Reply #2
I think you can achieve seekbar and volume bar like that with WSH panel mod. You need to modify one of the existing scripts, like the one from this post: http://www.hydrogenaud.io/forums/index.php...st&p=599561  There may be better ones and  they may differ in using logarithmic or linear scale.

I posted recently very simple (RGB values, rectangle and positioning) modification of such script here: http://www.hydrogenaud.io/forums/index.php...st&p=901698. It looks similar.


Thanks for replying, but I unfortunately have (just about) no clue what you're talking about. I'm the absolute least technical person on planet Earth. Exactly how would I go about actually adding something like you've posted to foobar?


This skin possible? / Help me with skin

Reply #4
I'm the absolute least technical person on planet Earth.


i suspect making something yourself is going to be beyond you. instead, you could try looking for something pre-made on deviantart but be careful. most "skin" makers are clueless when it comes to sharing configurations and will include all their own personal preferences which can lead to behaviour in foobar that you're not used to.

This skin possible? / Help me with skin

Reply #5
Thanks for replying, but I unfortunately have (just about) no clue what you're talking about. I'm the absolute least technical person on planet Earth. Exactly how would I go about actually adding something like you've posted to foobar?
Unless there is a full foobar modification that looks and acts the way you want it or a layout file you can import I'm afraid you'd have to adjust it yourself. For composing your foobar layout, adding and replacing components there is a "layout" part in a  "view" section of foobar's menu. You'd have to figure out how to add, remove and move components by copying, pasting, using tabs/splitters by yourself and seeing results. You can use "Quick set up" for some presets, "Enable layout editing mode" and "Create scratchbox", see what it does. Adding a splitter should be a good start, it will divide a window in two halves (horizontally or vertically) where you can put elements.

To see how WSH panel mod seekbar would look like:
- download additional component called WSH panel mod (http://code.google.com/p/foo-wsh-panel-mod/downloads/list) and install it (menu - file - preferences - components - install - find the find you downloaded - open it - push apply or OK - restart foobar)
- Use scratchbox: menu - view - layout - create scratchbox
- You have a blank window, right click on it, click on Add New UI Element, choose WSH Panel Mod (last option probably) click OK
- You have a window with "create you script..." txt, right click on it, push "Configure"
- Select and delete text inside this window
- copy this text and paste it there, click OK (just an example, the one I use):


Code: [Select]
//--------
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;

function StrFmt(alignH,alignV,trim,flag){ return ((alignH<<28)|(alignV<<24)|(trim<<20)|flag); }
//--------
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
function RGBA(r,g,b,a){ return ((a<<24)|(r<<16)|(g<<8)|(b)); }
//--------
function TimeFmt(t){
var zpad = function(n){
var str = n.toString();
return (str.length<2) ? "0"+str : str;
}
var h = Math.floor(t/3600); t-=h*3600;
var m = Math.floor(t/60); t-=m*60;
var s = Math.floor(t);
if(h>0) return h.toString()+":"+zpad(m)+":"+zpad(s);
return m.toString()+":"+zpad(s);
}
//----------------------------------------------------------------------------

var g_font = gdi.Font("Segoe UI", 12, 1);
var g_titlefmt = fb.TitleFormat("");
var g_fileinfo = null; 

var g_drag = 0;
var g_drag_seek = 0;

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var pos = 0;
var length = fb.PlaybackLength;
var txt;

if(length > 0){
if(g_drag){
pos = (window.Width -10) * g_drag_seek;
txt = " " + TimeFmt(g_drag_seek * length) ;
}
else{
pos = (window.Width -10)* (fb.PlaybackTime / length);
txt = g_titlefmt.Eval();
}
}
gr.DrawString(txt, g_font, RGB(140,198,255), 0, 0, ww-1, wh,
StrFmt(align_right, align_top, trim_no, flag_nowrap | flag_noclip));
       
gr.FillGradRect(  0, 15,    pos, wh-27, 90, RGB(172,214,255), RGB(172,214,255));
gr.FillGradRect(pos, 15, ww-pos, wh-26, 90, RGB(235,240,254), RGB(235,240,254));
    gr.FillGradRect(pos, 6, 10, wh-9, 90, RGB(132,193,255), RGB(98,176,255));
      gr.FillGradRect(pos+1, 7, 8, wh-11, 10, RGB(255,255,255), RGB(172,214,255));
         




}
function on_size(){
}
function on_focus(focused){
//fb.trace("focus " + focused);
}
function on_key_down(key){
//fb.trace("key " + key);
}
function on_mouse_lbtn_down(x,y){
g_drag = 1;
}
function on_mouse_lbtn_up(x,y){
if(g_drag){
g_drag = 0;
g_drag_seek = x / window.Width;
g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
fb.PlaybackTime = fb.PlaybackLength * g_drag_seek;
}
}
function on_mouse_move(x,y){
if(g_drag){
g_drag_seek = x / window.Width;
g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
window.Repaint();
}
}
function on_mouse_wheel(delta){
//fb.trace("wheel " + delta);
}
//--------
function on_playback_starting(cmd, paused){
}
function on_playback_new_track(info){
window.Repaint();
}
function on_playback_stop(){
window.Repaint();
}

window.SetInterval(function () {
    if (fb.IsPlaying && !fb.IsPaused && fb.PlaybackLength > 0)
        window.Repaint();
}, 150);

function on_playback_pause(state){
}
function on_playback_edited(){
}
function on_playback_dynamic_info(){
}
function on_playback_dynamic_info_track(){
}
function on_playback_time(time){
window.Repaint();
}
function on_volume_change(val){
}

//EOF
- adjust the window size

This skin possible? / Help me with skin

Reply #6
=/ Is making foobar more easily customizeable somewhere on the to-do list?

This skin possible? / Help me with skin

Reply #7
=/ Is making foobar more easily customizeable somewhere on the to-do list?


How "easy" customizable foobar is mainly depends on what you want from it. Changing your own foobar using the default UI into something you want isn't that difficult and doesn't require much knowledge. Using facets, columns UI, panel stack splitter,... will give you more options but with that also comes for you to know about titleformatting scripting to make foobar your own. Using WSH panel mod has got an even steeper learning curve because that requires javascript coding skills.

Edit: grammar

This skin possible? / Help me with skin

Reply #8
=/ Is making foobar more easily customizeable somewhere on the to-do list?


Peter is not interested to make foobar more customizable, skins etc...
You have Columns UI, WSH panel, Panel stack splitter, with that you can make skins, but you must learn..
Personaly, i was earlier use CUI, now i'm use DUI, and i find that i actually love this white style more than black..

This skin possible? / Help me with skin

Reply #9
Thanks for the replies, everyone. =)

How about this question instead: What are the most easiest/noob-friendly/etc. components that can be added to foobar to change the UI?

This skin possible? / Help me with skin

Reply #10
The easiest way is to import theme/layout files (.thm) for DefaultUI or .fcl .fcs for ColumnsIU or copy full big modifications (like Falstaff's) according to instructions. The problem is finding exactly what you want, that's why people sometimes do it by themselves. There are threads for screenshots of setups and config files.

I posted WSH example because your set up seemed relatively simple, playlist, three buttons, seekbar/volume bar achievable with WSH panels mod scripts (that work as any other element with copy and paste and small adjustments). Maybe also Panel Stack Splitter for removing borders.

Yes skinning foobar is way too complicated but also not a priority so don't expect changes, I understand those who can't be bothered. It took me years to figure out moving/hiding panels independently using globals (thank you all the people posting examples) and even that happened by accident while doing something else :-).