JScript Panel script discussion/help

Topic: JScript Panel script discussion/help (Read 301157 times) previous topic - next topic

0 Members and 3 Guests are viewing this topic.

Re: JScript Panel script discussion/help

Reply #1050 – 2023-10-01 17:19:49

Solved.
I accidentally added the .js file too.
All you need is the txt file, in the samples directory.

Re: JScript Panel script discussion/help

Reply #1051 – 2023-10-02 09:37:58

I suppose my advice about editing .js files was not good. A better alternative is to transplant the method that handles updates in to the .txt file that goes in the panel.

Inside a panel with the text display script, insert this directly after var albumart = new _albumart(0, 0, 0, 0);

Code: [Select]

albumart.metadb_changed = function () {
	var img = null;
	if (panel.metadb) {
		img = panel.metadb.GetAlbumArt(this.properties.id.value);
	}

	if (this.img) this.img.Dispose();
	this.img = null;
	this.tooltip = this.path = '';
	if (img) {
		this.img = img;
		this.img.StackBlur(50); // valid values are 2-254
		this.tooltip = 'Original dimensions: ' + this.img.Width + 'x' + this.img.Height + 'px';
		this.path = this.img.Path;
		if (this.path.length) {
			this.tooltip += '\nPath: ' + this.path;
		}
	}
	window.Repaint();
}

Re: JScript Panel script discussion/help

Reply #1052 – 2023-10-02 11:06:16

@marc2k3

A: Line 27 this.img.StackBlur(2); // valid values are 2-254

Is there no choice but to modify A to make AlbumArt not blurry?

Re: JScript Panel script discussion/help

Reply #1053 – 2023-10-02 12:00:53

Eh? The original is not blurred. This edit is only for those who want blur.

Re: JScript Panel script discussion/help

Reply #1054 – 2023-10-02 12:29:58

I know that.
context menu > Album art background ← normal condition.

Is it possible to add a blurred state and a switching option?
I'm sorry for taking up your precious time.

Re: JScript Panel script discussion/help

Reply #1055 – 2023-10-02 12:34:52

Quote from: Air KEN on 2023-10-02 12:29:58

I know that.
context menu > Album art background ← normal condition.

Is it possible to add a blurred state and a switching option?
I'm sorry for taking up your precious time.

The code I posted earlier actually does that.
It's blurred by default and can be switched to normal if the album art is check on in context menu.

Re: JScript Panel script discussion/help

Reply #1056 – 2023-10-02 12:59:17

@eurekagliese

I have already tried your script. thank you.
I thought it was great that you could easily switch between these two +1 functions with Option.

1.) Album Art normal
2.) Album Art Blur
3.) Text only

Re: JScript Panel script discussion/help

Reply #1057 – 2023-10-03 13:36:10

@marc2k3
Thanks.

v3.3.5
Reply #1273 https://hydrogenaud.io/index.php/topic,110499.msg1033624.html#msg1033624

Album art background

Enable blur effect

Re: JScript Panel script discussion/help

Reply #1058 – 2023-10-03 15:24:23

Is there a script like this?
If you can edit Samples Script, you can probably create it, but I don't have that knowledge.
(Track Info + Seekbar + Buttons.txt etc...)

Now Playing Info

Re: JScript Panel script discussion/help

Reply #1059 – 2023-10-03 16:23:27

Add a normal Text Display panel and make sure the album art option is turned off. Also, make sure vertical alignment is set to bottom.

Then on line 16, you should find this...

Code: [Select]

var text = new _text_display(LM, 0, 0, 0);

Insert this directly after it...

Code: [Select]

text.paint = function (gr) {
	if (!this.text_layout) return;

	var h = panel.h - this.text_layout.CalcTextHeight(text.w) - 50;
	_drawImage(gr, albumart.img, 20, 20, panel.w, h, image.centre);

	gr.WriteTextLayout(this.text_layout, this.colour_string, this.x, this.y + _scale(12), this.w, this.ha, this.offset);
	this.up_btn.paint(gr, this.default_colour);
	this.down_btn.paint(gr, this.default_colour);
}

Re: JScript Panel script discussion/help

Reply #1060 – 2023-10-03 18:17:55

With some modifications:

Re: JScript Panel script discussion/help

Reply #1061 – 2023-10-03 21:45:56

Quote from: marc2k3 on 2023-10-03 16:23:27

Add a normal Text Display panel and make sure the album art option is turned off. Also, make sure vertical alignment is set to bottom.

Then on line 16, you should find this...

Code: [Select]
var text = new _text_display(LM, 0, 0, 0);
Insert this directly after it...

Code: [Select]
text.paint = function (gr) {
	if (!this.text_layout) return;

	var h = panel.h - this.text_layout.CalcTextHeight(text.w) - 50;
	_drawImage(gr, albumart.img, 20, 20, panel.w, h, image.centre);

	gr.WriteTextLayout(this.text_layout, this.colour_string, this.x, this.y + _scale(12), this.w, this.ha, this.offset);
	this.up_btn.paint(gr, this.default_colour);
	this.down_btn.paint(gr, this.default_colour);
}

@marc2k3
Many Thanks.

I needed to adjust the X axis.

_drawImage(gr, albumart.img, 0, 20, panel.w, h, image.centre);

Re: JScript Panel script discussion/help

Reply #1062 – 2023-10-04 10:57:02

I meant to write panel.w - 40 for the width but forgot.

Re: JScript Panel script discussion/help

Reply #1063 – 2023-10-04 11:20:11

My settings:

lines 17-26

Spoiler (click to show/hide)

lines 110-115

Spoiler (click to show/hide)

result:

Re: JScript Panel script discussion/help

Reply #1064 – 2023-10-04 11:25:10

Oh, I see.
Thanks.

Line 21: _drawImage(gr, albumart.img, 20, 20, panel.w - 40, h, image.centre);

Re: JScript Panel script discussion/help

Reply #1065 – 2023-10-04 11:57:09

A change would need to be made for vertical alignment to work properly.

The image must translate with the text in the following way:

top image
text bottom

image center
text center

bottom image
text top.

Re: JScript Panel script discussion/help

Reply #1066 – 2023-10-04 12:35:00

In the end I managed to find the right settings with a static image.
Now even the vertical alignment is optimal.

Spoiler (click to show/hide)

Re: JScript Panel script discussion/help

Reply #1067 – 2023-10-04 13:02:41

@ApacheReal

We're just changing these values, right?
Can I change it from the context menu?
Spoiler (click to show/hide)

Re: JScript Panel script discussion/help

Reply #1068 – 2023-10-04 13:29:07

@Air KEN

You can make the changes you prefer and give ok.

If they don't work, you can always reload the sample.

If they work well for you, you can export
and overwrite the Text Display + Album Art in the samples directory.

These settings are fine with a $font(Segoe UI,15)

Re: JScript Panel script discussion/help

Reply #1069 – 2023-10-04 13:29:55

As mentioned above, for optimal use, the image must translate when the vertical alignment is changed

Re: JScript Panel script discussion/help

Reply #1070 – 2023-10-04 13:56:18

For these modded text display scripts which always display album art not as the background, this function needs updating....

Code: [Select]

function on_playback_dynamic_info_track(type) {
	if (type == 0) text.metadb_changed();
	else if (type == 1 && text.properties.albumart.enabled) albumart.metadb_changed();
}

should now be...

Code: [Select]

function on_playback_dynamic_info_track(type) {
	if (type == 0) text.metadb_changed();
	else if (type == 1) albumart.metadb_changed();
}

But it only matters for online streams which supply album art. It can be ignored for local file playback.

Re: JScript Panel script discussion/help

Reply #1071 – 2023-10-04 14:20:48

Is it bothersome to blur the image as a background?
The font color also changes according to the background color.
Can also be Enable Dynamic.

Re: JScript Panel script discussion/help

Reply #1072 – 2023-10-04 14:24:23

Quote from: Air KEN on 2023-10-04 14:20:48

Spoiler (click to show/hide)
Is it bothersome to blur the image as a background?
The font color also changes according to the background color.

That would be nice!

Re: JScript Panel script discussion/help

Reply #1073 – 2023-10-04 17:00:40

Here's a quick and dirty bodge job for having album art above the text and a blurred album art background.

Code: [Select]

// ==PREPROCESSOR==
// @name "Text Display"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// @import "%fb2k_component_path%samples\js\lodash.min.js"
// @import "%fb2k_component_path%samples\js\common.js"
// @import "%fb2k_component_path%samples\js\panel.js"
// @import "%fb2k_component_path%samples\js\albumart.js"
// @import "%fb2k_component_path%samples\js\text_display.js"
// ==/PREPROCESSOR==

// https://jscript-panel.github.io/gallery/text-display/

var panel = new _panel({ custom_background : true });
var albumart = new _albumart(0, 0, 0, 0);
var text = new _text_display(LM, 0, 0, 0);

albumart.blur_img = null;

albumart.metadb_changed = function () {
	var img = null;
	if (panel.metadb) {
		img = panel.metadb.GetAlbumArt(0);
	}

	if (this.img) this.img.Dispose();
	if (this.blur_img) this.blur_img.Dispose();
	this.img = this.blur_img = null;
	this.tooltip = this.path = '';
	if (img) {
		this.img = img;
		if (text.properties.albumart_blur.enabled) {
			this.blur_img = this.img.Clone();
			this.blur_img.StackBlur(60);
		}
		this.tooltip = 'Original dimensions: ' + this.img.Width + 'x' + this.img.Height + 'px';
		this.path = this.img.Path;
		if (this.path.length) {
			this.tooltip += '\nPath: ' + this.path;
		}
	}
	window.Repaint();
}
	

text.paint = function (gr) {
	if (!this.text_layout) return;

	if (this.properties.albumart.enabled) {
		_drawImage(gr, this.properties.albumart_blur.enabled ? albumart.blur_img : albumart.img, 0, 0, panel.w, panel.h, image.crop);
		_drawOverlay(gr, 0, 0, panel.w, panel.h, 120);
	}

	var h = panel.h - this.text_layout.CalcTextHeight(this.w) - 50;
	_drawImage(gr, albumart.img, 20, 20, panel.w - 40, h, image.centre);

	gr.WriteTextLayout(this.text_layout, this.colour_string, this.x, this.y + _scale(12), this.w, this.ha, this.offset);
	this.up_btn.paint(gr, this.default_colour);
	this.down_btn.paint(gr, this.default_colour);
}

panel.item_focus_change();

function on_colours_changed() {
	panel.colours_changed();
	text.refresh(true);
}

function on_font_changed() {
	panel.font_changed();
	text.refresh(true);
}

function on_item_focus_change() {
	if (panel.selection.value == 0 && fb.IsPlaying) return;
	panel.item_focus_change();
}

function on_metadb_changed() {
	albumart.metadb_changed();
	text.metadb_changed();
}

function on_mouse_lbtn_up(x, y) {
	text.lbtn_up(x, y);
}

function on_mouse_move(x, y) {
	text.move(x, y);
}

function on_mouse_rbtn_up(x, y) {
	return panel.rbtn_up(x, y, text);
}

function on_mouse_wheel(s) {
	text.wheel(s);
}

function on_paint(gr) {
	panel.paint(gr);
	text.paint(gr);
}

function on_playback_dynamic_info_track(type) {
	if (type == 0) text.metadb_changed();
	else if (type == 1) albumart.metadb_changed();
}

function on_playback_new_track() {
	panel.item_focus_change();
}

function on_playback_pause() {
	text.refresh();
}

function on_playback_stop(reason) {
	if (reason != 2) {
		panel.item_focus_change();
	}
}

function on_playback_time() {
	text.playback_time();
}

function on_playlist_items_added() {
	text.refresh();
}

function on_playlist_items_removed() {
	text.refresh();
}

function on_playlist_items_reordered() {
	text.refresh();
}

function on_playlist_switch() {
	on_item_focus_change();
}

function on_size() {
	panel.size();
	text.w = panel.w - (LM * 2);
	text.h = panel.h;
	text.size();
}

The right click menu options for enabling/blurring the background should work as expected. And the vertical alignment must be set to bottom as per my previous mod.

Re: JScript Panel script discussion/help

Reply #1074 – 2023-10-04 17:10:47

Quote from: marc2k3 on 2023-10-04 17:00:40

Here's a quick and dirty bodge job for having album art above the text and a blurred album art background.

Code: [Select]

// ==PREPROCESSOR==
// @name "Text Display"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// @import "%fb2k_component_path%samples\js\lodash.min.js"
// @import "%fb2k_component_path%samples\js\common.js"
// @import "%fb2k_component_path%samples\js\panel.js"
// @import "%fb2k_component_path%samples\js\albumart.js"
// @import "%fb2k_component_path%samples\js\text_display.js"
// ==/PREPROCESSOR==

// https://jscript-panel.github.io/gallery/text-display/

var panel = new _panel({ custom_background : true });
var albumart = new _albumart(0, 0, 0, 0);
var text = new _text_display(LM, 0, 0, 0);

albumart.blur_img = null;

albumart.metadb_changed = function () {
	var img = null;
	if (panel.metadb) {
		img = panel.metadb.GetAlbumArt(this.properties.id.value);
	}

	if (this.img) this.img.Dispose();
	if (this.blur_img) this.blur_img.Dispose();
	this.img = this.blur_img = null;
	this.tooltip = this.path = '';
	if (img) {
		this.img = img;
		if (panel.display_objects.length) {
			if (panel.display_objects[0].properties.albumart_blur.enabled) {
				this.blur_img = this.img.Clone();
				this.blur_img.StackBlur(60);
			}
		}
		this.tooltip = 'Original dimensions: ' + this.img.Width + 'x' + this.img.Height + 'px';
		this.path = this.img.Path;
		if (this.path.length) {
			this.tooltip += '\nPath: ' + this.path;
		}
	}
	window.Repaint();
}
	

text.paint = function (gr) {
	if (!this.text_layout) return;

	if (this.properties.albumart.enabled) {
		_drawImage(gr, this.properties.albumart_blur.enabled ? albumart.blur_img : albumart.img, 0, 0, panel.w, panel.h, image.crop);
		_drawOverlay(gr, 0, 0, panel.w, panel.h, 170);
	}

	var h = panel.h - this.text_layout.CalcTextHeight(this.w) - 50;
	_drawImage(gr, albumart.img, 20, 20, panel.w - 40, h, image.centre);

	gr.WriteTextLayout(this.text_layout, this.colour_string, this.x, this.y + _scale(12), this.w, this.ha, this.offset);
	this.up_btn.paint(gr, this.default_colour);
	this.down_btn.paint(gr, this.default_colour);
}

panel.item_focus_change();

function on_colours_changed() {
	panel.colours_changed();
	text.refresh(true);
}

function on_font_changed() {
	panel.font_changed();
	text.refresh(true);
}

function on_item_focus_change() {
	if (panel.selection.value == 0 && fb.IsPlaying) return;
	panel.item_focus_change();
}

function on_metadb_changed() {
	albumart.metadb_changed();
	text.metadb_changed();
}

function on_mouse_lbtn_up(x, y) {
	text.lbtn_up(x, y);
}

function on_mouse_move(x, y) {
	text.move(x, y);
}

function on_mouse_rbtn_up(x, y) {
	return panel.rbtn_up(x, y, text);
}

function on_mouse_wheel(s) {
	text.wheel(s);
}

function on_paint(gr) {
	panel.paint(gr);
	text.paint(gr);
}

function on_playback_dynamic_info_track(type) {
	if (type == 0) text.metadb_changed();
	else if (type == 1) albumart.metadb_changed();
}

function on_playback_new_track() {
	panel.item_focus_change();
}

function on_playback_pause() {
	text.refresh();
}

function on_playback_stop(reason) {
	if (reason != 2) {
		panel.item_focus_change();
	}
}

function on_playback_time() {
	text.playback_time();
}

function on_playlist_items_added() {
	text.refresh();
}

function on_playlist_items_removed() {
	text.refresh();
}

function on_playlist_items_reordered() {
	text.refresh();
}

function on_playlist_switch() {
	on_item_focus_change();
}

function on_size() {
	panel.size();
	text.w = panel.w - (LM * 2);
	text.h = panel.h;
	text.size();
}

The right click menu options for enabling/blurring the background should work as expected. And the vertical alignment must be set to bottom as per my previous mod.

Thank you, the display looks great!

Notice