_drawImage(gr, thumbs.blur_img, 0, 0, panel.w, panel.h, image.crop);

The first image of multiple is always blurred by default and can be accessed with thumbs.blur_img so inside on_paint, add this BEFORE thumbs.paint(gr)

Code: [Select]

_drawImage(gr, thumbs.blur_img, 0, 0, panel.w, panel.h, image.crop);

edit: whenever an image is blurred, it has to be clone of the original so it uses twice as much memory which is why I do it on the first only. I don't really want to blur all images or do it on demand.

_drawImage(gr, thumbs.blur_img, 0, 0, panel.w, panel.h, image.crop);

gr.DrawImage(thumbs.blur_img, 0, 0, panel.w, panel.h, 0, 0, this.blur_img.Width, this.blur_img.Height, 0.5, 0);

Seems like blurring on demand could be OK. I've been messing around with it (see attachment)

edit: the artifacting is my gif recorder, not my blurring.

	this.paint = function (gr) {
		var offset_px = this.offset * this.properties.px.value;

		// Added
		if ( this.images.length > 0 ) {
			if ( transparent == 1 ) {
				gr.FillRectangle(0, 0, panel.w, panel.h, colours.background);	// paint full background to remove PSS background art
			}

			if ( blur == 2 ) {
				this.blur_img = this.images[this.image].Clone();
				this.blur_img.StackBlur(120);
			}

			if ( blur > 0 ) {
				_drawImage(gr, thumbs.blur_img, 0, 0, panel.w, panel.h, image.crop, 0.7);
//				gr.DrawImage(thumbs.blur_img, 0, 0, panel.w, panel.h, 0, 0, this.blur_img.Width, this.blur_img.Height, 0.7, 0);
//				DrawImage(thumbs.blur_img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH[, opacity, angle])
				if ( blur == 2 ) {
					this.blur_img.Dispose();
					this.blur_img = null;
				}
			}
		}

		...

Save this in your component folder\samples\js overwriting the existing file.

https://raw.githubusercontent.com/jscript-panel/component/main/samples/js/list.js

It will also be in the next component release whenever that is.

I have a better fix for the properties script names being too wide. Same instructions/link as before.

The last release version used the full width of the longest tag name regardless of panel size which was a major problem. 50/50 improves things but can't help if you have insanely long tag names in a narrow panel. The previous mod also broke other scripts that share common code, This version does not. If you're still not happy, don't use it or edit the javascript yourself.

Download the same file again and make the changes to 0.5 on this line...

https://github.com/jscript-panel/component/blob/81561a7a46bf2820797d76c63477baf2cfd2befe/samples/js/list.js#L469

//	this.draw_row(gr, this.data[i + this.offset].name, panel.colours.text, this.x, this.y + _scale(12) + (i * panel.row_height), this.clickable_text_x - 10, panel.row_height);						// ORIGINAL
	this.draw_row(gr, this.data[i + this.offset].name.replace(/TRUEPEAK_SCANNER/g,'tps').replace(/REPLAYGAIN/g,'rg').replace(/MUSICBRAINZ/g,'mb'), panel.colours.text, this.x, this.y + _scale(12) + (i * panel.row_height), this.clickable_text_x - 10, panel.row_height);

Hello,

How to make background blur in properties? This is what I marked in the screenshot

https://imgbox.com/serjCZpZ

Thank you in advance

Ideal:
Now Playing Screen (Text Display)