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: WSH Panel Mod script discussion/help (Read 1370957 times) previous topic - next topic
0 Members and 4 Guests are viewing this topic.

WSH Panel Mod script discussion/help

taken from the main WSH panel mod thread....

A semi-offtopic suggestion:
Maybe the script exchange business could take place elsewhere, so this topic would be left for the general component discussion only? By that I mean information about new releases, feature requests, bug reports and other support, while the creations of the users and stories about the others struggling to use them would be kept separate.


definitely a great idea. so here's a new thread for it.

to get us started, here's a replacement artwork panel i made. it does a few things the standard CUI/DUI* panels can't do...

http://javascript.pastebin.com/f7aeaaa1b

-if you edit/add artwork for the currently playing track, use the "Refresh" context menu item to see the changes without having to restart playback.
-changes made in the foobar display preferences also take effect immediately if you use the "Refresh" command. currently, the DUI/CUI artwork panels require a foobar restart for those changes to take effect.
-displays artwork for the previously played/selected track on foobar startup.
-you can lock the panel size in pixels. no more messing around locking splitters. both CUI and DUI obey the limits set in the panel.
-tooltip to show if the artwork is embedded or not. it also shows the actual image dimensions plus the currently displayed size.
-it has the usual context menu options you would expect to set front/back/cover/artist/etc

(*for those that aren't aware - WSH panel mod can now run in DUI natively without dockable panels)

for people who are new to WSH panel mod, remember to download the samples as there's lots of good stuff to get you going.

WSH Panel Mod script discussion/help

Reply #1
nice G!

WSH Panel Mod script discussion/help

Reply #2
here's another script. this is for DUI only. it allows you to create your own buttons of any size, using any images you like. by default it uses the DUI background colour (it changes colour as you change theme).



but it also has an option to set the background to the same colour as the splitter or your own custom colour which you can specify in the script.



it does require a little tinkering to get going so here's a guide. first of all download and save this script....

http://javascript.pastebin.com/f77d9e62f

you need to create a folder called scripts inside your main foobar directory. make sure you save the file inside this folder and name it dui_buttons.js

next you need to add a WSH panel to your layout. copy/paste this

http://javascript.pastebin.com/f1c08ceca

into your panel and read the comments (sorry for the rambling). here are the images i've used.

http://cid-649d3bfeaf541fbb.skydrive.live....uide/images.zip

extract into your foobar install directory.

it should at least be a starting point for anyone wanting to create their own button toolbars.

WSH Panel Mod script discussion/help

Reply #3
Hi marc,
The custom WSH panel based album art viewer is cool. Would it be possible make it keep its aspect ratio constant, instead of keeping the dimensions fixed as foobar2000 changes sizes?
Anish

WSH Panel Mod script discussion/help

Reply #4
you mean what i put in the very first 2 lines of the script?

Quote
//edit this line or comment it out if you don't want a fixed size....
window.MinWidth = window.MinHeight = window.MaxWidth = window.MaxHeight = 375;


and you use the context menu to control the aspect ratio of the image itself, just like the standard artwork panel.


WSH Panel Mod script discussion/help

Reply #5
Wow... great work, marc! Thank you very much for this.

Just an idea: Might it be possible to open the art-containing folder by doubleclick? I mean, like in the default album art-panel (DUI).

WSH Panel Mod script discussion/help

Reply #6
sorry but i don't think that is possible with this component.

WSH Panel Mod script discussion/help

Reply #7
Ok, thanks for your answer.

WSH Panel Mod script discussion/help

Reply #8
here's another script for DUI. it's a ratings panel that displays the current rating and of course lets you set it. it works with the official playback statistics component. it has the same context menu options as the "buttons" panel above to set the background colour.

when foobar is playing it sticks to now playing. and when playback is stopped, it follows the cursor.

just copy/paste this code into a new panel and download these images and extract them to your foobar folder.

(credit to NEMO7538 for providing the original rating code)

script: http://javascript.pastebin.com/f5450d71a
images: http://cid-649d3bfeaf541fbb.skydrive.live....uide/rating.zip
screenshot: http://k5sbdw.blu.livefilestore.com/y1pQER...-BTE/rating.png




WSH Panel Mod script discussion/help

Reply #9
//edit this line or comment it out if you don't want a fixed size....
window.MinWidth = window.MinHeight = window.MaxWidth = window.MaxHeight = 375;

Yes, just like that. I'm an idiot.


WSH Panel Mod script discussion/help

Reply #11
interesting idea. getting the text from last.fm feeds is fairly trivial as i'm already doing this with another script. but how to get the images, i don't know.

WSH Panel Mod script discussion/help

Reply #12
//edit this line or comment it out if you don't want a fixed size....
window.MinWidth = window.MinHeight = window.MaxWidth = window.MaxHeight = 375;

Yes, just like that. I'm an idiot.

Actually, what I want is slightly different from this (I really shouldn't post in the middle of the night when I'm half asleep). I want behavior that is similar to the DUI & CUI, when the album view panel is not locked, except the panel keeps its aspect ratio constant.
Anish

WSH Panel Mod script discussion/help

Reply #13
i have absolutely no idea what you're talking about. there is a "Correct Aspect Ratio" option on the context menu which behaves exactly the same as the normal DUI/CUI panels.


WSH Panel Mod script discussion/help

Reply #15
Here my new mod of the album art panel. There is now buttons on the panel which will fade when entering. Actually there is one button to refresh, prev, play/pause/next and one buttons i use to launch Album Art Downloader.
Right now buttons are placed at the bottom but i will make it configurable through the menu.
To make it work you must change that line
Code: [Select]
window.SetProperty("BtnimageDirectory", fb.FoobarPath + "Images/tintin/buttons/");
To the path that will contain your buttons images. You must have a Prev.png, Pause.png, next.png. reload.png, albumart.png.

This is a work in progress!
Code: [Select]
//edit this line or comment it out if you don't a fixed size....
//window.MinWidth = window.MinHeight = window.MaxWidth = window.MaxHeight = 200;

var RefreshInterval = 50;

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//no need to edit anything below here///////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var g_metadb = fb.GetFocusItem();
var NewImage, CurImage, new_width, new_height = null;
var CurSize = null;
var NewSize = null;
var ww = window.Width;
var wh = window.Height;
var opacity = 255;
var step = Math.min(Math.ceil(255*RefreshInterval/300),255);
var timer = null;
var cur_btn = null;

var g_tooltip = window.CreateTooltip();
var hover = null;
var dui = window.InstanceType;
window.GetProperty("aspect",1);
window.GetProperty("id",0);
window.SetProperty("BtnimageDirectory", fb.FoobarPath + "Images/tintin/buttons/");
window.GetProperty("Buttons", 1);

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

function on_timer(id) {
    Buttons.OnTimer && Buttons.OnTimer(id);
if (timer && id==timer.ID) {
if (opacity>0) {
opacity = Math.max(opacity-step,0);
window.Repaint();
} else {
CurImage = NewImage;
CurSize = NewSize;
NewImage = null;
NewSize = null;
opacity = 255;
timer && window.KillTimer(timer);
timer = null;
CollectGarbage(); // Release memory.
//window.RepaintRect(this.x, this.y, this.width, this.height);
}
}
}

function on_size() {
ww = window.Width;
wh = window.Height;
Buttons.OnResize && Buttons.OnResize(ww, wh);

}

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

function on_paint(gr) {
gr.FillSolidRect(0, 0, ww, wh, dui ==1 ? window.GetColorDUI(1) : window.GetColorCUI(3));
var Img, size;
if (Img = CurImage) {
currentopacity = opacity;
size = CurSize;
gr.DrawImage(Img, size.x, size.y, size.width, size.height, 0, 0, Img.width, Img.height, 0, opacity);
}
if (Img = NewImage) {
currentopacity = 255-opacity;
size = NewSize;
gr.DrawImage(Img, size.x, size.y, size.width, size.height, 0, 0, Img.width, Img.height, 0, 255-opacity);
}

//gr.DrawImage(g_img, pos_x, pos_y, new_width, new_height, 0, 0, g_img.Width, g_img.Height);

if(dui == 1)
{
    gr.DrawRect(0,0, window.Width, window.Height, 1.0, RGB(160,160,160));
}
Buttons.OnPaint && Buttons.OnPaint(gr);
}

function CalcNewImgSize(img) {
var size = {x:0, y:0, width:ww, height:wh};
if (img) {
if(window.GetProperty("aspect") == 1) {
var scale_w = ww / img.Width;
var scale_h = wh / img.Height;
scale = Math.min(scale_w, scale_h);
if (scale_w < scale_h)
size.y = (wh - g_img.height * scale) / 2;
else if (scale_w > scale_h)
size.x = (ww - img.Width * scale) / 2;
size.width = img.Width * scale;
size.height = img.Height * scale
}
}
return size;
}

function on_playback_new_track(){
Buttons.SetPauseStatus && Buttons.SetPauseStatus();
    changeImage();
}

function on_playback_pause(state) {
Buttons.SetPauseStatus && Buttons.SetPauseStatus();
window.Repaint();
}

function on_playback_stop(reason){
Buttons.SetPauseStatus && Buttons.SetPauseStatus();
}

function changeImage() {
g_metadb = fb.IsPlaying ? fb.GetNowPlaying() : fb.GetFocusItem();

is_embedded = "No";
if(g_metadb) {
type = window.GetProperty("id");
g_img = utils.GetAlbumArtEmbedded(g_metadb.rawpath, type);
if(g_img) {
is_embedded = "Yes";
} else {
g_img = utils.GetAlbumArtV2(g_metadb, type);
}
if (NewImage) {
CurImage = NewImage;
CurSize = NewSize;
opacity = 255;
}
NewImage = g_img;
NewSize = CalcNewImgSize(NewImage);
if (!timer) timer = window.CreateTimerInterval(RefreshInterval);

window.Repaint();
}

//if ( fb.IsPlaying) return;

}

function on_item_focus_change()
{
if (!fb.IsPlaying)
{
changeImage();
}
}

changeImage();

function on_mouse_move(x,y) {
    Buttons.OnMouseMove && Buttons.OnMouseMove(x, y);
if(!hover) {
if (NewImage)
{
g_tooltip.Text = "Embedded image: " + is_embedded + ". Actual size: " + NewImage.Width + " x " + NewImage.Height + ". Current size: " + Math.round(NewSize.width) + " x " + Math.round(NewSize.height) + ".";
}
else if (CurImage)
{
g_tooltip.Text = "Embedded image: " + is_embedded + ". Actual size: " + CurImage.Width + " x " + CurImage.Height + ". Current size: " + Math.round(CurSize.width) + " x " + Math.round(CurSize.height) + ".";
}
g_tooltip.Activate();
hover = true;
}
}

function on_mouse_leave() {
    Buttons.OnMouseLeave && Buttons.OnMouseLeave();
g_tooltip.Deactivate();
hover = null;
}

function on_mouse_lbtn_down(x,y){
Buttons.OnLbtnDown && Buttons.OnLbtnDown(x, y);
}

function on_mouse_lbtn_up(x, y) {
    Buttons.OnLbtnUp && Buttons.OnLbtnUp(x, y);
}


function on_mouse_rbtn_up(x, y) {
var MF_SEPARATOR = 0x00000800;
var MF_STRING = 0x00000000;
var _menu = window.CreatePopupMenu();
var idx;
_menu.AppendMenuItem(MF_STRING, 1, "Refresh");
_menu.AppendMenuItem(MF_SEPARATOR, 0, 0);
_menu.AppendMenuItem(MF_STRING, 2, "Correct Aspect Ratio");
_menu.AppendMenuItem(MF_SEPARATOR, 0, 0);
_menu.AppendMenuItem(MF_STRING, 4, "Front Cover");
_menu.AppendMenuItem(MF_STRING, 5, "Back Cover");
_menu.AppendMenuItem(MF_STRING, 6, "Disc");
_menu.AppendMenuItem(MF_STRING, 7, "Icon");
_menu.AppendMenuItem(MF_STRING, 8, "Artist");
_menu.AppendMenuItem(MF_SEPARATOR, 0, 0);
//_menu.AppendMenuItem(MF_STRING, 9, "Properties");
_menu.AppendMenuItem(MF_STRING, 10, "Configure...");
_menu.CheckMenuItem(2, window.GetProperty("aspect") == 0 ? 0x0 : 0x8);
_menu.CheckMenuRadioItem(4, 8, window.GetProperty("id")+4);
idx = _menu.TrackPopupMenu(x, y);
switch(idx) {
case 1:
changeImage();
break;
case 2:
window.GetProperty("aspect") == 0 ? window.SetProperty("aspect", 1) : window.SetProperty("aspect", 0);
changeImage();
window.Repaint();
break;
case 4:
case 5:
case 6:
case 7:
case 8:
window.SetProperty("id", idx-4);
changeImage();
break;
case 9:
window.ShowProperties();
break;
case 10:
window.ShowConfigure();
break;
}
_menu.Dispose();
return true;
}

//if (window.GetProperty("Buttons") == 1) {
if (true) {
var Buttons = new function () {
var BtnDir = window.GetProperty("BtnimageDirectory");
var Position = 4;
this.x = 100;
this.y =0;
this.width = 0;
this.height = 0;
var opacity = 0;
var defaultOp = 150;
var hbtn = null;
var dbtn = null;
var timer = null;
var RefreshInterval = 50;
var step = 40;
var dstOp = 0;
var _this = this;
this.BtnsArray = new Array();

// Define button class ------------------------------------------------
var Button = function (x, y, img, OnClick, tiptext) {
this.x = x;
this.y = y;
this.width = img.width;
this.height = img.height;
this.Img = img;
this.tiptext = tiptext;
this.state = 0; // 0=normal, 1=hover, 2=down, 3=disabled
this.enabled = true;
this.OnClick = OnClick;
var Tooltip = g_tooltip;

this.isXYinBtn = function (x, y) {
if (!this.enabled) return false;
return (x >= this.x && y >= this.y && x<= this.x + this.width && y <= this.y + this.height) ? true : false;
};

this.Draw = function (gr, op) {
if (!opacity) return;
gr.DrawImage(this.Img, this.x, this.y, this.width, this.height, 0, 0, this.width, this.height, 0, opacity);
};

this.ChangeState = function (s, enabled) {
//if (!this.enabled && !enabled) return;
if (enabled===undefined) {
if (s==this.state)
return;
else
this.state = s;
} else {
this.enabled = enabled;
this.state = enabled ? 0 : 3;
}
if (s==1) {
Tooltip.Text =  this.tiptext;
Tooltip.Activate();
} else
Tooltip.Deactivate();
if (opacity)
window.RepaintRect(Math.max(0, this.x), Math.max(0, this.y),
Math.min(window.width,this.width), Math.min(window.height, this.height));
};
};

// Create buttons --------------------------------
var img_play = gdi.image(BtnDir+"Play.png");
var img_pause = gdi.image(BtnDir+"Pause.png");
var img_next = gdi.image(BtnDir+"Next.png");
var img_prev = gdi.image(BtnDir+"Prev.png");
var img_reload = gdi.image(BtnDir+"reload.png");
var img_albumart = gdi.image(BtnDir+"albumart.png");
var xOffset = this.x;
this.BtnsArray.push(new Button(xOffset, this.y, img_reload, function(){changeImage();}, "Refresh"));
xOffset += this.BtnsArray[this.BtnsArray.length-1].width;
this.BtnsArray.push(new Button(xOffset, this.y, img_prev, function(){fb.Prev();}, "Previous"));
xOffset += this.BtnsArray[this.BtnsArray.length-1].width;
this.BtnsArray.push(PlayBtn = new Button(xOffset, this.y, img_play, function(){fb.PlayOrPause();}, ""));
xOffset += this.BtnsArray[this.BtnsArray.length-1].width;
this.BtnsArray.push(new Button(xOffset, this.y, img_next, function(){fb.Next();}, "Next"));
xOffset += this.BtnsArray[this.BtnsArray.length-1].width;
this.BtnsArray.push(new Button(xOffset, this.y, img_albumart, function(){fb.RunContextCommand("Run service/AlbumArt");}, "NexAlbumArt"));
xOffset += this.BtnsArray[this.BtnsArray.length-1].width;


PlayBtn.tiptext_play = "Play";
PlayBtn.tiptext_pause = "Pause";
PlayBtn.tiptext = fb.IsPaused ? PlayBtn.tiptext_play : PlayBtn.tiptext_pause;
PlayBtn.img_pause = img_pause;
PlayBtn.img_play = img_play;
PlayBtn.Img = fb.IsPlaying ? PlayBtn.img_pause : PlayBtn.img_play;
PlayBtn.ChangeState(null, true);
this.PlayBtn = PlayBtn;

this.width = xOffset-this.x;
this.height = PlayBtn.height;



this.SetPauseStatus = function () {
if (fb.IsPlaying && !fb.IsPaused) {
PlayBtn.Img = PlayBtn.img_pause;
PlayBtn.tiptext = PlayBtn.tiptext_pause;
} else {
PlayBtn.Img = PlayBtn.img_play;
PlayBtn.tiptext = PlayBtn.tiptext_play;
}
};

var isXYinBtns = function (x, y) {
return (x >= _this.x && y >= _this.y && x<= _this.x + _this.width && y <= _this.y + _this.height) ? true : false;
};

var Fading = function (dstop) {
if (dstOp==dstop) return;
dstOp = dstop;
if (!timer) timer = window.CreateTimerInterval(RefreshInterval);
};

this.OnPaint = function (gr) {
if (!opacity) return;
for (var i=0; i<this.BtnsArray.length; i++)
this.BtnsArray[i].Draw(gr, opacity);
};

this.OnMouseMove = function (x, y) {
if (isXYinBtns(x, y)) {
if (opacity!=255) {
dstOp = 255;
opacity = 255;
window.RepaintRect(Math.max(0, this.x), Math.max(0, this.y),
Math.min(window.width,this.width), Math.min(window.height, this.height));
}
} else if (opacity!=defaultOp)
Fading(defaultOp);

if (dbtn) {
if (dbtn.isXYinBtn(x, y))
dbtn.ChangeState(2);
else
dbtn.ChangeState(1);
} else {
for (var i=0; i < this.BtnsArray.length ; i++)
if (this.BtnsArray[i].isXYinBtn(x,y)) {
if (hbtn!=this.BtnsArray[i]) {
if(hbtn) hbtn.ChangeState(0);
hbtn = this.BtnsArray[i];
hbtn.ChangeState(1);
}
break;
}
if (i==this.BtnsArray.length) {
if (hbtn) {
hbtn.ChangeState(0);
hbtn = null;
}
}
}
};

this.OnLbtnDown = function (x, y) {
if (hbtn) {
dbtn = hbtn;
dbtn.ChangeState(2);
}
};

this.OnLbtnUp = function (x, y) {
if (dbtn) {
if (dbtn.state==2) {
dbtn.OnClick();
dbtn.ChangeState(1);
}
dbtn = null;
this.OnMouseMove(x, y);
}
};

this.OnMouseLeave = function () {
Fading(0);
if (hbtn) {
hbtn.ChangeState(0);
hbtn = null;
}
};

this.OnTimer = function (id) {
if (timer && id==timer.ID) {
if (opacity==dstOp) {
timer && window.KillTimer(timer);
timer = null;
CollectGarbage(); // Release memory.
//window.RepaintRect(this.x, this.y, this.width, this.height);
} else {
if (opacity<dstOp)
opacity = Math.min(opacity+step, dstOp);
else
opacity = Math.max(opacity-step, dstOp);
window.RepaintRect(Math.max(0, this.x), Math.max(0, this.y),
Math.min(window.width,this.width), Math.min(window.height, this.height));
}
}
};

this.OnResize = function (ww, wh) {
if (Position==1 || Position==4)
this.x = (ww-this.width)/2;
else if (Position==2 || Position==5)
this.x = ww-this.width;

if (Position>2)
this.y = wh-this.height;

var x = this.x;
for (var i=0; i<this.BtnsArray.length; i++) {
this.BtnsArray[i].x = x;
x += this.BtnsArray[i].width;
if (Position>2)
this.BtnsArray[i].y = wh-this.BtnsArray[i].height;
else this.BtnsArray[i].y = 0;
};
this.width = x-this.x;
};
this.OnResize(window.Width, window.Height);

} ();

} else
var Buttons = {};

WSH Panel Mod script discussion/help

Reply #16
work in progress of text only bio panel for DUI.

[a href="http://k5sbdw.blu.livefilestore.com/y1pPOpFoa7lzRfqT7f4wY_qJxB5ZCBSqi3ON2CXShGq84Oe67KFT7tdZLopO_jmF-pYnYeY7wX2cuqIV63p_t1u2_WkBj7Js7az/bio.png" target="_blank"]

WSH Panel Mod script discussion/help

Reply #17
Here my new mod of the album art panel. There is now buttons on the panel which will fade when entering. Actually there is one button to refresh, prev, play/pause/next and one buttons i use to launch Album Art Downloader.
Right now buttons are placed at the bottom but i will make it configurable through the menu.
To make it work you must change that line
Code: [Select]
window.SetProperty("BtnimageDirectory", fb.FoobarPath + "Images/tintin/buttons/");

To the path that will contain your buttons images. You must have a Prev.png, Pause.png, next.png. reload.png, albumart.png.

This is a work in progress!


That's pretty cool.  What would be really awesome is if your fading effects could somehow be merged with marc2003's button script to easily create buttons that fade between the normal state and hover state.

WSH Panel Mod script discussion/help

Reply #18
Sorry but i dont see what script. May be i can do it.



WSH Panel Mod script discussion/help

Reply #21
here's another script. this is for DUI only. it allows you to create your own buttons of any size, using any images you like. by default it uses the DUI background colour (it changes colour as you change theme).



but it also has an option to set the background to the same colour as the splitter or your own custom colour which you can specify in the script.



it does require a little tinkering to get going so here's a guide. first of all download and save this script....

http://javascript.pastebin.com/f77d9e62f

you need to create a folder called scripts inside your main foobar directory. make sure you save the file inside this folder and name it dui_buttons.js

next you need to add a WSH panel to your layout. copy/paste this

http://javascript.pastebin.com/f1c08ceca

into your panel and read the comments (sorry for the rambling). here are the images i've used.

http://cid-649d3bfeaf541fbb.skydrive.live....uide/images.zip

extract into your foobar install directory.

it should at least be a starting point for anyone wanting to create their own button toolbars.


super!
i cant script JS but this looks so brilliant, i'm gonna learn it and make an awesome DUI interface!
thanks so much! keep more scripts coming!

WSH Panel Mod script discussion/help

Reply #22
here's my text only biography display.

[a href="http://k5sbdw.blu.livefilestore.com/y1pPOpFoa7lzRfqT7f4wY_qJxB5ZCBSqi3ON2CXShGq84Oe67KFT7tdZLopO_jmF-pYnYeY7wX2cuqIV63p_t1u2_WkBj7Js7az/bio.png" target="_blank"]

WSH Panel Mod script discussion/help

Reply #23
here's my text only biography display.


you'll need a last.fm api key to use it. register here.... http://www.last.fm/api/account and then edit the first line of the script.

just copy/paste this code into a new panel

[removed]

it caches the results in a folder called lastfm_bio inside your profile folder (this is created automatically for you). but you can force an update through the context menu should you want to.

it has no other features. it's for display purposes only.

and sorry if there is too much text to fit in a panel. i don't have the skills or inclination to learn how to do such a thing. just make it bigger. 


Awesome.  I always loved the functionality of the biography plugin, but it always causes at least a split second stutter when switching tracks (and considerably more than that if I want to display artist art) on the DUI.  This works very well.

WSH Panel Mod script discussion/help

Reply #24
Great job marc2003.
Just one thing. You know that biography view can get those info for you and cache them. As it works as a background process i suppose it also works with DUI.
i am using biograview tags to do what you do.