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

Re: JScript Panel script discussion/help

Reply #175 –
Look inside the on_paint function for if (fb.PlaybackLength > 0) and replace that section with this...

Code: [Select]
		if (fb.PlaybackLength > 0) {
			var pos = seekbar.pos();
			gr.FillSolidRect(seekbar.x, seekbar.y + 7, pos, 6, colours.seekbar_progress);
			gr.FillSolidRect(seekbar.x + _.round(seekbar.w * 0.2) + 13, seekbar.y + 7, 3, 6, colours.seekbar_knob); //20%
			gr.FillSolidRect(seekbar.x + _.round(seekbar.w * 0.8) + 13, seekbar.y + 7, 3, 6, colours.seekbar_knob); //80%
			gr.FillRoundRect(seekbar.x + pos, seekbar.y + 2, 16, 16, 8, 8, colours.seekbar_progress);
			gr.FillRoundRect(seekbar.x + pos + 3, seekbar.y + 5, 10, 10, 5, 5, colours.seekbar_knob);
			gr.GdiDrawText(_.tfe("%playback_time%  "), panel.fonts.normal, colours.time, seekbar.x - 60, 0, 60, panel.h, RIGHT);
			gr.GdiDrawText(_.tfe("  %length%"), panel.fonts.normal, colours.time, seekbar.x + seekbar.w + 16, 0, 60, panel.h, LEFT);
		}

edit: top tip for anyone use imgur. Edit the url so it's https rather than http. That way, we get full size images like this...






Re: JScript Panel script discussion/help

Reply #176 –
Thank you so much :)

Re: JScript Panel script discussion/help

Reply #177 –
Quote
this.delete_image = function
THANX Again ! :)  

Re: JScript Panel script discussion/help

Reply #178 –
I'm working on modifying the "track info + seekbar + buttons" sample script. I've noticed that cover art images are cropped by JScript Panel whereas foobar's Album Art Viewer renders them correctly.

In the attachment, the panel is sized to 400 px tall to result in a 400 x 400 image, which mimics the Art Viewer. This cover art is enlarged from 310 x 310, but the problem exists regardless of the size of the source image or the panel size.

This is the line that displays the image, compared to the original. The only modification is to place it at the right side of the panel as opposed to the left side.

Code: [Select]
img && _.drawImage(gr, img, 0, 0, panel.h, panel.h, image.centre); //original 
img && _.drawImage(gr, img, panel.w - panel.h + 1, 0, panel.h, panel.h, image.centre);

Can this be fixed?

Re: JScript Panel script discussion/help

Reply #179 –
To get the image untouched, simply omit the last argument like this...

Code: [Select]
img && _.drawImage(gr, img, panel.w - panel.h + 1, 0, panel.h, panel.h);

Re: JScript Panel script discussion/help

Reply #180 –
Problem solved! Thank you.

Now I'm curious: is "image.centre" broken? If not, what would it be used for, given that behavior?

Re: JScript Panel script discussion/help

Reply #181 –
It's by design and  was asked for as a feature request by someone else. It trims 5px off each edge of the original image before resizing it. This helps when you have less than perfect images. I may have done it for my thumbs script originally but it shares the same drawImage function with the artreader. I think you're the first person to notice it- or at least tell me about it.

Having the option to draw images untouched by omitting that last argument is also by design because it absolutely matters when making buttons where you could be using images as small as 16px to begin with.

Re: JScript Panel script discussion/help

Reply #182 –
Quote from: marc2003 on
It's by design and was asked for as a feature request by someone else. [-snip-]

Excellent explanation, thank you.

Another question, then: Is "image.center" the only possible argument, or are there others?

Re: JScript Panel script discussion/help

Reply #183 –
Code: [Select]
image.crop
image.crop_top
image.stretch
image.centre

Just load my artreader script and use the right click options to see each one in action.



It really helps if you make the panel an extreme rectangle rather than a square to see what it does.

Re: JScript Panel script discussion/help

Reply #184 –
Quote from: marc2003 on
Just load my artreader script and use the right click options to see each one in action.

Ah, I haven't looked at that script yet. (I should probably look at all of them.) The menu image you posted is a good explanation.

Thanks!

Re: JScript Panel script discussion/help

Reply #185 –
While still working on modifying the "track info + seekbar + buttons" sample script, I moved the seekbar around a bit. I had trouble moving the %playback_time% and %length% text to follow it, as the text kept appearing above where I expected.

The panel height is currently 228 pixels. The var seekbar.y is (panel.h - 20) / 2, which is 104, and the seekbar is about where I expect it to be. So I figured I needed 104 or thereabouts for the gr.GdiDrawText 'h' value, but that doesn't work. I did some testing and came up with this...

Code: [Select]
//Test
// syntax:  gr.GdiDrawText(str, IGdiFont, color, x, y, w, h, [format]);
gr.GdiDrawText("50h", _.gdiFont("Segoe UI", 12, 0), _.RGB(255, 255, 0), seekbar.x + seekbar.w + 60, 0, 40, 50, RIGHT);
gr.GdiDrawText("150h", _.gdiFont("Segoe UI", 12, 0), _.RGB(255, 255, 0), seekbar.x + seekbar.w + 60, 0, 40, 150, RIGHT);
gr.GdiDrawText("228h", _.gdiFont("Segoe UI", 12, 0), _.RGB(255, 255, 0), seekbar.x + seekbar.w + 60, 0, 40, 228, RIGHT);
gr.GdiDrawText("456h", _.gdiFont("Segoe UI", 12, 0), _.RGB(255, 255, 0), seekbar.x + seekbar.w + 60, 0, 40, 456, RIGHT);
gr.GdiDrawText("panel.h = " + panel.h, _.gdiFont("Segoe UI", 12, 0), _.RGB(255, 255, 255), 10, panel.h - 70, 900, 24, LEFT);

...which produces the result shown below. I see now that the value of 'h' needs to be double the pixel distance the text is to be moved below 'y' (which is zero in this case). Not what I expected, but at least it's not hard to remember.

Why does gr.GdiDrawText work this way?

Re: JScript Panel script discussion/help

Reply #186 –
The RIGHT variable is actually a combination of flags (see helpers.js) and one of them is to vertically centre the text. If you draw rectangles using the same co-ordinates as your text, you'll see a result like this.



This is working exactly as expected and I'm not really sure what your problem is???

Also, never use gdiFont inside on_paint like that. Just create a variable outside the function and re-use it

Code: [Select]
var font = _.gdiFont("Segoe UI", 12);

function on_paint(gr) {
    gr.GdiDrawText("50h", font, _.RGB(255, 255, 0), 10, 10, 40, 50, RIGHT);
}

edited: because I don't really understand what you're asking.

Re: JScript Panel script discussion/help

Reply #187 –
Quote from: marc2003 on
It is working exactly as expected and your problem is how you've decided to increment the height of the rectangles rather than using a fixed height and adjusting the y position.

Also, never use gdiFont inside on_paint like that. Just create a variable outside the function and re-use it

Code: [Select]
var font = _.gdiFont("Segoe UI", 12);

function on_paint(gr) {
    gr.GdiDrawText("50h", font, _.RGB(255, 255, 0), 10, 10, 40, 50, RIGHT);
}


So I'm basically making a box and putting text in it; okay, that makes sense now. Part of my confusion is that the original script left y at zero (to my befuddlement) and changed h (ditto), and I followed suit. I find it obvious now that it was done that way to allow the text to stay in the middle of the panel with the seekbar when the panel height changes. My panel will fit into a specific area, so I'm hard-coding the positioning.

The original script also uses panel.fonts and at the time I couldn't find where that was to make changes (panel.js, I now presume), so I went with what I knew would work. I'll definitely create variables for fonts and colors and such from here on out.

Thank you for the information. It is very much appreciated.

Re: JScript Panel script discussion/help

Reply #188 –
Hey guys :). I'd like to start work at a script for the JS Panel in Foobar. Where can I find some tutorials regarding the API of JSPanel? I already found this:

https://github.com/19379/foo-jscript-panel/wiki/Editor-Properties

And of course I can look at some source code from the existing scripts.

But is there any tutorial anywhere which covers some of the basics of setting up an UI and calling Foobar API?

I'm talking about stuff like this: fb.CreateContextMenuManager();

I'd like to see all the methods that the fb object has, along with signatures (arguments required, returned types).

Re: JScript Panel script discussion/help

Reply #189 –
Unfortunately, there aren't any tutorials as such. The main file you want to look at is the component folder>docs>Interfaces.txt

Most methods have a single line example but more complex ones like fb.CreateContextMenuManager will point you toward some scripts contained within the samples folder.

https://github.com/19379/foo-jscript-panel/blob/master/foobar2000/foo_jscript_panel/docs/Interfaces.txt#L87L102

Re: JScript Panel script discussion/help

Reply #190 –
kinda enjoyed the more plain look on the other wsh playlist

Re: JScript Panel script discussion/help

Reply #191 –
By the way do any of you know how to remove the track # for this playlist? I remember I did it on the other one with whs mod

Re: JScript Panel script discussion/help

Reply #192 –
If anyone uses my JSplaylist-mod, it has been updated so the minutes/seconds display text in the group header is replaced with just numbers.

https://github.com/19379/jsplaylist-mod

Re: JScript Panel script discussion/help

Reply #193 –
Hey marc :). Apparently you blocked PMs so...

I really like what you've done with the JS Panel and WSH Panel. You've helped / are helping a lot of people build components. I'd like to donate to you, as a sign of appreciation for your contributions.

Re: JScript Panel script discussion/help

Reply #194 –
I'm trying to run the "quicksearch for same" command on every new track and I guess jscript is the only way. Is there a script I can look at to understand how to do this? I mean a script that does something simple when a new track starts.
I'm late

Re: JScript Panel script discussion/help

Reply #195 –
@Axonn, just sling a few pennies towards a charity of your choice.

@davideleo, you can do something like...

Code: [Select]
function on_playback_new_track() {
    fb.RunContextCommand("path/to/command");
}

IIRC, you use columns UI so you can hide this panel.
 

Re: JScript Panel script discussion/help

Reply #196 –
Quote from: marc2003 on
@davideleo, you can do something like...

Code: [Select]
function on_playback_new_track() {
    fb.RunContextCommand("path/to/command");
}

IIRC, you use columns UI so you can hide this panel.

Wow! That worked, thanks a lot!!  :D 
Now I'd like to make it a little bit more complicated: the quick search command should be different according to which panel is visible. I'm already using a PSS global variable which is called "quicksearch" and is set to the proper parameter (genre, artist or album) when I click on the panel switch.

I guess I have to declare a jscript variable and write something like:

Code: [Select]
var quicksearch = "the PSS global variable value";
var command = "Quicksearch for same/" + quicksearch;

function on_playback_new_track() {
    fb.RunContextCommand(command);
}

Besides the syntax of what I wrote above, which is likely faulty here and there, can I recall PSS global variable values in the jscript panel?
I'm late

Re: JScript Panel script discussion/help

Reply #197 –
Quote from: davideleo on
Besides the syntax of what I wrote above, which is likely faulty here and there, can I recall PSS global variable values in the jscript panel?

I tried this:
Code: [Select]
var quicksearch = fb.TitleFormat("%quicksearch%");
var command = "Quicksearch for same/" + quicksearch;

function on_playback_new_track() {
    fb.RunContextCommand(command);
}


I don't know if it makes sense, but it doesn't work.
I'm late

Re: JScript Panel script discussion/help

Reply #198 –
Quote from: davideleo on
can I recall PSS global variable values in the jscript panel?

Short answer: no
Longer answer: with lots of script hacking it may me possible. Basically you'd use $movepanel in PSS to resize the Jscript Panel based on the value of your global variable. JScript Panel can then detect its own height/width and adjust the command accordingly. I don't really have the time or inclination to spell it all out though.

BTW, fb.TitleFormat is used for reading tags from files and you need to use it in conjunction with Eval or EvalWithMetadb

Re: JScript Panel script discussion/help

Reply #199 –
Bit of a schoolboy error but I just realised my track info + seekbar + buttons didn't update the artist/title if tags were edited during playback, This has now been fixed.

https://github.com/19379/js-marc2003/releases