Skip to main content
Topic: JScript Panel script discussion/help (Read 81751 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: JScript Panel script discussion/help

Reply #800
The JScript "Coverflow View" by Br3tt doesn't work with JScript Panel 2.2.1 anymore.
Problem is line 1535:
Code: [Select]
window.DlgCode = DLGC_WANTALLKEYS;
I tried
Code: [Select]
// window.DlgCode = DLGC_WANTALLKEYS;
but the error still remains.

Re: JScript Panel script discussion/help

Reply #801
marc2003

I found bug!
When Foobar started a window POPs up with a message:
Quote
JScript Panel v2.2.1 (JS Smooth Playlist Manager v2018-mod by Br3tt aka Falstaff)
JavaScript execution failed:
Overflow
File: G:\Foobar2000\user-components\foo_jscript_panel\samples\js-smooth\js\jsspm.js
Line: 432, Col: 3
Then I go to the window with this script and click on the right mouse button to restart the script. Now it works1

Re: JScript Panel script discussion/help

Reply #802
FYI marc2003 hasn't been active on the forum since 2017.

Re: JScript Panel script discussion/help

Reply #803
If you have a bug report for JScript Panel, please contact marc2k3 at Github (https://github.com/marc2k3/foo_jscript_panel) and open an issue.

Re: JScript Panel script discussion/help

Reply #804
Hi, marc.
I am currently using SMP, and looking for a method to implement box-shadow effect like in CSS.
Is there any way to do it in albumart.js without using an external shadow image?

Re: JScript Panel script discussion/help

Reply #805
(I'll reply there, but maybe you should consider moving to SMP, which is faster and offer more possibilites.)
You need to create an image with this shadow, and then you draw the shadow image below/before the final image. Here is a function which create such image:
Code: [Select]
function createShadow(width, height, color){
var shadow = gdi.CreateImage(width, height);
    var gb = shadow.GetGraphics();
    gb.FillSolidRect(10, 10, width-20, height-20, color);
shadow.ReleaseGraphics(gb);

shadow = shadow.Resize(width*1/10, height*1/10,2);
shadow = shadow.Resize(width, height, 2);
return shadow;
};

And then using this function, it's quite easy:
Code: [Select]
cover_shadow = createShadow(image_width, image_height, RGB(0,0,0));
gr.DrawImage(cover_shadow, 0, 0, image_width+20, image_height+20, 0, 0, cover_shadow.Width, cover_shadow.Height);

To achieve the desired effect (shadow blur radius/position), you need to play mostly with the values in DrawImage

Re: JScript Panel script discussion/help

Reply #806
(I'll reply there, but maybe you should consider moving to SMP, which is faster and offer more possibilites.)
You need to create an image with this shadow, and then you draw the shadow image below/before the final image. Here is a function which create such image:
Code: [Select]
function createShadow(width, height, color){
var shadow = gdi.CreateImage(width, height);
    var gb = shadow.GetGraphics();
    gb.FillSolidRect(10, 10, width-20, height-20, color);
shadow.ReleaseGraphics(gb);

shadow = shadow.Resize(width*1/10, height*1/10,2);
shadow = shadow.Resize(width, height, 2);
return shadow;
};

And then using this function, it's quite easy:
Code: [Select]
cover_shadow = createShadow(image_width, image_height, RGB(0,0,0));
gr.DrawImage(cover_shadow, 0, 0, image_width+20, image_height+20, 0, 0, cover_shadow.Width, cover_shadow.Height);

To achieve the desired effect (shadow blur radius/position), you need to play mostly with the values in DrawImage

Code: [Select]
function createShadow(width, height, color){
let shadow = gdi.CreateImage(width, height);
let gb = shadow.GetGraphics();
gb.FillSolidRect(0, 0, width, height, color);
shadow.ReleaseGraphics(gb);

shadow = shadow.Resize(width / 128, height / 128, 2);
shadow = shadow.Resize(width, height, 2);
return shadow;
}
Code: [Select]
if (this.img) {
let cover_shadow = createShadow(this.img.Width, this.img.Height, _RGBA(0, 0, 0, 128));
_drawImage(gr, cover_shadow, this.x, this.y, this.w, this.h, this.properties.aspect.value);
_drawImage(gr, this.img, this.x + 10, this.y + 10, this.w - 20, this.h - 20, this.properties.aspect.value);
}
Thanks for the tip.
So, what the script is doing is that resize the image to a smaller size and then resize it back to original dimension so that it can be generated with blurred border? If so, what I don't get is the resized shadow image has blurred edge only on right and bottom, but no blurred effect on left and top. Is this a rendering bug from resize()?

Re: JScript Panel script discussion/help

Reply #807
Yes, you understood correctly. I didn't try myself your code, but i guess the issue is with the rectangle drawn inside the createShadow function. In my function, I intentionly left 10px of padding, in order to leave space for the blur effect:
Code: [Select]
gb.FillSolidRect(10, 10, width-20, height-20, color);
You removed this padding:
Code: [Select]
gb.FillSolidRect(0, 0, width, height, color);

Otherwise, you can probably use the function StackBlur instead of this resize trick which create a blur effect, look into SMP doc.

Re: JScript Panel script discussion/help

Reply #808
Yes, you understood correctly. I didn't try myself your code, but i guess the issue is with the rectangle drawn inside the createShadow function. In my function, I intentionly left 10px of padding, in order to leave space for the blur effect:
Code: [Select]
gb.FillSolidRect(10, 10, width-20, height-20, color);
You removed this padding:
Code: [Select]
gb.FillSolidRect(0, 0, width, height, color);

Otherwise, you can probably use the function StackBlur instead of this resize trick which create a blur effect, look into SMP doc.

I found a ref in one of Br3tt's skins https://www.deviantart.com/br3tt/art/DUiTunes-beta3-412700925

I tried different ways to achieve it in SMP, the only function missing for this is BoxBlur() which has been removed since Jscript(?).
Eventually, I am using a png shadow file instead, overall it works fine. Thanks anyway.

https://imgur.com/94NqVBy

Re: JScript Panel script discussion/help

Reply #809
i gave you the name of the function, StackBlur.
For example:
Code: [Select]
function createCoverShadowStack(cover_width, cover_height, color, radius){
var shadow = gdi.CreateImage(cover_width, cover_height);
    var gb = shadow.GetGraphics();
var radius = Math.floor(Math.min(cover_width/2,cover_height/2,radius));
    gb.FillSolidRect(radius, radius, cover_width-radius*2, cover_height-radius*2, color);
shadow.ReleaseGraphics(gb);
shadow.StackBlur(radius);
return shadow;
};

Re: JScript Panel script discussion/help

Reply #810
i gave you the name of the function, StackBlur.
For example:
Code: [Select]
function createCoverShadowStack(cover_width, cover_height, color, radius){
var shadow = gdi.CreateImage(cover_width, cover_height);
    var gb = shadow.GetGraphics();
var radius = Math.floor(Math.min(cover_width/2,cover_height/2,radius));
    gb.FillSolidRect(radius, radius, cover_width-radius*2, cover_height-radius*2, color);
shadow.ReleaseGraphics(gb);
shadow.StackBlur(radius);
return shadow;
};


Many THNAKS! It works perfectly.

 
SimplePortal 1.0.0 RC1 © 2008-2019