JScript Panel script discussion/help

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

0 Members and 1 Guest are viewing this topic.

Re: JScript Panel script discussion/help

Reply #1525 – 2024-07-17 15:26:53

This is a composite image of an image from the foo_uie_webview thread, so I don't know. Sorry.

Re: JScript Panel script discussion/help

Reply #1526 – 2024-07-18 01:01:58

Quote from: eurekagliese on 2024-07-17 14:56:01

Can we get a sample of a png or svg image as buttons instead of font icons?

In 3.6.1, the _button object now supports images.

Replace

Code: [Select]

{ char : some_char, colour : some_colour }

with

Code: [Select]

{ img : some_image }

Code: [Select]

var some_image = utils.LoadImage(fb.ProfilePath + "images\\blah.png");

You only want to load images once on script init so don't put this inside any update function.

Re: JScript Panel script discussion/help

Reply #1527 – 2024-07-18 08:06:16

Thank you very much for the update and the guide @marc2k3
---

Quote from: Air KEN on 2024-07-17 15:26:53

This is a composite image of an image from the foo_uie_webview thread, so I don't know. Sorry.

No worries, mate. With latest JSP update, we can also replicate it on a text display.
The script and image files with the PNG and SVG icons are available below.
In your foobar config folder, extract it to the images folder.
Just modify the link on script or the icons as needed.

Code: [Select]

// ==PREPROCESSOR==
// @name "Text Display + Album Art + Custom SVG and PNG Buttons"
// @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"
// @import "%fb2k_component_path%samples\js\seekbar.js"
// ==/PREPROCESSOR==

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

//.svg files
var google = utils.LoadSVG(fb.ProfilePath + 'images\\google.svg');
var youtube = utils.LoadSVG(fb.ProfilePath + 'images\\youtube.svg');
var spotify = utils.LoadSVG(fb.ProfilePath + 'images\\spotify.svg');
var wikipedia = utils.LoadSVG(fb.ProfilePath + 'images\\wikipedia.svg');
var lastfm = utils.LoadSVG(fb.ProfilePath + 'images\\lastfm.svg');
var search = utils.LoadSVG(fb.ProfilePath + 'images\\search.svg');
var settings = utils.LoadSVG(fb.ProfilePath + 'images\\settings.svg');
//.png files
var discogs = utils.LoadImage(fb.ProfilePath + 'images\\discogs.png');

var tfo = {
	artist: fb.TitleFormat('%artist%'),
	title: fb.TitleFormat('%title%'),
	// playback_time : fb.TitleFormat('[%playback_time%]'),
	// length : fb.TitleFormat('$if2(%length%,LIVE)'),
}

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

var colours = {
	slider_background : RGB(160, 160, 160),
	white : RGB(255, 255, 255),
	contrast : RGB(196, 30, 35),
};

var font = CreateFontString('Segoe UI', 12);
var buttons = new _buttons();
var bs = _scale(24);
var bottom_y = 0;

buttons.update = function () {
	var x = (panel.w - (bs * 7)) / 2
	var y = seekbar.y + _scale(12);
	this.buttons.google = new _button(x, y, bs, bs, { img : google }, null, function () { utils.Run('https://www.google.com/search?tbm=isch&q=' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'Google');
	this.buttons.youtube = new _button(x + bs, y, bs, bs, { img : youtube }, null, function () { utils.Run('http://www.youtube.com/results?search_query=' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'youtube');
	this.buttons.spotify = new _button(x + (bs * 2), y, bs, bs, { img : spotify}, null, function () { utils.Run('https://open.spotify.com/search/' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'spotify');
	this.buttons.wikipedia = new _button(x + (bs * 3), y, bs, bs, { img : wikipedia }, null, function () { utils.Run('http://en.wikipedia.org/wiki/Special:Search?search=' + encodeURIComponent(tfo.artist.Eval()));  }, 'wikipedia');
	this.buttons.lastfm = new _button(x + (bs * 4), y, bs, bs, { img : lastfm }, null, function () { utils.Run('https://www.last.fm/search?q=' + encodeURIComponent(tfo.artist.Eval()));  }, 'lastfm');
	this.buttons.discogs = new _button(x + (bs * 5), y, bs, bs, { img : discogs }, null, function () { utils.Run('http://www.discogs.com/search?q=' + encodeURIComponent(tfo.artist.Eval()));  }, 'discogs');
	this.buttons.search = new _button(x + (bs * 6), y, bs, bs, { img : search }, null, function () { fb.RunMainMenuCommand('Library/Search'); }, 'Library Search');
	this.buttons.preferences = new _button(x + (bs * 7), y, bs, bs, { img : settings}, null, function () { fb.ShowPreferences(); }, 'Preferences');
}

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(handles, fromhook) {
	if (!fromhook) {
		albumart.metadb_changed();
	}
	text.metadb_changed();
}

function on_mouse_lbtn_dblclk(x, y) {
	if (albumart.img && albumart.containsXY(x, y)) {
		panel.metadb.ShowAlbumArtViewer();
	}
}

function on_mouse_lbtn_down(x, y) {
	seekbar.lbtn_down(x, y);
}

function on_mouse_lbtn_up(x, y) {
	if (seekbar.lbtn_up(x, y)) {
		return;
	}
	if (buttons.lbtn_up(x, y)) {
		return;
	}
	text.lbtn_up(x, y);
}

function on_mouse_leave() {
	buttons.leave();
}

function on_mouse_move(x, y) {
	window.SetCursor(buttons.buttons.google.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.youtube.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.spotify.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.wikipedia.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.lastfm.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.discogs.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.search.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.preferences.containsXY(x, y) ? IDC_HAND
	: IDC_ARROW);

	if (seekbar.move(x, y)) {
		return;
	}
	if (buttons.move(x, y)) {
		return;
	}
	text.move(x, y);
}

function on_mouse_rbtn_up(x, y) {
	// if (buttons.buttons.stop.containsXY(x, y)) {
	// 	fb.StopAfterCurrent = !fb.StopAfterCurrent;
	// 	return true;
	// }
	return panel.rbtn_up(x, y, text);
}

function on_mouse_wheel(s) {
	if (seekbar.wheel(s)) {
		return;
	}
	text.wheel(s);
}

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

	// gr.FillRoundedRectangle(seekbar.x, seekbar.y, seekbar.w, seekbar.h, _scale(2), _scale(2), colours.slider_background);

	// if (fb.IsPlaying) {
	// 	var time_width = seekbar.x - _scale(12);
	// 	gr.WriteText(tfo.playback_time.Eval(), font, colours.white, 0, bottom_y, time_width, _scale(12), 1, 2);
	// 	gr.WriteText(tfo.length.Eval(), font, colours.white, seekbar.x + seekbar.w + _scale(12), bottom_y, time_width, _scale(12), 0, 2);

	// 	if (fb.PlaybackLength > 0) {
	// 		gr.FillEllipse(seekbar.x + seekbar.pos(), seekbar.y + _scale(3), _scale(6), _scale(6), colours.white);
	// 	}
	// }
}

function on_playback_order_changed() {
	buttons.update();
	window.Repaint();
}

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();
	buttons.update();
	window.Repaint();
}

function on_playback_seek() {
	seekbar.playback_seek();
}

function on_playback_starting() {
	buttons.update();
	window.Repaint();
}

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

	buttons.update();
	window.Repaint();
}

// function on_playback_time() {
// 	text.playback_time();
// 	window.RepaintRect(0, bottom_y, panel.w, panel.h - bottom_y);
// }

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

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

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

function on_playlist_stop_after_current_changed() {
	buttons.update();
	window.Repaint();
}

function on_playlist_switch() {
	on_item_focus_change();
}

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

function on_size() {
	panel.size();
	text.size();

	seekbar.x = _scale(60);
	seekbar.y = panel.h - _scale(44);
	seekbar.w = panel.w - (seekbar.x * 2);
	seekbar.h  = _scale(6);

	bottom_y = seekbar.y - _scale(4);
	buttons.update();
}

Re: JScript Panel script discussion/help

Reply #1528 – 2024-07-18 08:30:00

Great!!! Thanks eurekagliese

Re: JScript Panel script discussion/help

Reply #1529 – 2024-07-18 08:30:53

Code: [Select]

var x = (panel.w - (bs * 7)) / 2

You have 8 buttons so that's why it is off centre.

And yay, the SVG parser which takes around 1.5MB (or 25%) of the overall DLL size is getting some use.

edit: you should not comment this out...

Code: [Select]

// function on_playback_time() {
// 	text.playback_time();
// 	window.RepaintRect(0, bottom_y, panel.w, panel.h - bottom_y);
// }

People customising their own text may want %playback_time% etc during playback. There is a toggle on the right click menu to turn per second updates on or off.

Re: JScript Panel script discussion/help

Reply #1530 – 2024-07-18 08:51:26

Quote from: eurekagliese on 2024-07-18 08:06:16

Thank you very much for the update and the guide @marc2k3
---

Quote from: Air KEN on 2024-07-17 15:26:53

This is a composite image of an image from the foo_uie_webview thread, so I don't know. Sorry.

Code: [Select]

// ==PREPROCESSOR==
// @name "Text Display + Album Art + Custom SVG and PNG Buttons"
// @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"
// @import "%fb2k_component_path%samples\js\seekbar.js"
// ==/PREPROCESSOR==

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

//.svg files
var google = utils.LoadSVG(fb.ProfilePath + 'images\\google.svg');
var youtube = utils.LoadSVG(fb.ProfilePath + 'images\\youtube.svg');
var spotify = utils.LoadSVG(fb.ProfilePath + 'images\\spotify.svg');
var wikipedia = utils.LoadSVG(fb.ProfilePath + 'images\\wikipedia.svg');
var lastfm = utils.LoadSVG(fb.ProfilePath + 'images\\lastfm.svg');
var search = utils.LoadSVG(fb.ProfilePath + 'images\\search.svg');
var settings = utils.LoadSVG(fb.ProfilePath + 'images\\settings.svg');
//.png files
var discogs = utils.LoadImage(fb.ProfilePath + 'images\\discogs.png');

var tfo = {
	artist: fb.TitleFormat('%artist%'),
	title: fb.TitleFormat('%title%'),
	// playback_time : fb.TitleFormat('[%playback_time%]'),
	// length : fb.TitleFormat('$if2(%length%,LIVE)'),
}

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

var colours = {
	slider_background : RGB(160, 160, 160),
	white : RGB(255, 255, 255),
	contrast : RGB(196, 30, 35),
};

var font = CreateFontString('Segoe UI', 12);
var buttons = new _buttons();
var bs = _scale(24);
var bottom_y = 0;

buttons.update = function () {
	var x = (panel.w - (bs * 7)) / 2
	var y = seekbar.y + _scale(12);
	this.buttons.google = new _button(x, y, bs, bs, { img : google }, null, function () { utils.Run('https://www.google.com/search?tbm=isch&q=' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'Google');
	this.buttons.youtube = new _button(x + bs, y, bs, bs, { img : youtube }, null, function () { utils.Run('http://www.youtube.com/results?search_query=' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'youtube');
	this.buttons.spotify = new _button(x + (bs * 2), y, bs, bs, { img : spotify}, null, function () { utils.Run('https://open.spotify.com/search/' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'spotify');
	this.buttons.wikipedia = new _button(x + (bs * 3), y, bs, bs, { img : wikipedia }, null, function () { utils.Run('http://en.wikipedia.org/wiki/Special:Search?search=' + encodeURIComponent(tfo.artist.Eval()));  }, 'wikipedia');
	this.buttons.lastfm = new _button(x + (bs * 4), y, bs, bs, { img : lastfm }, null, function () { utils.Run('https://www.last.fm/search?q=' + encodeURIComponent(tfo.artist.Eval()));  }, 'lastfm');
	this.buttons.discogs = new _button(x + (bs * 5), y, bs, bs, { img : discogs }, null, function () { utils.Run('http://www.discogs.com/search?q=' + encodeURIComponent(tfo.artist.Eval()));  }, 'discogs');
	this.buttons.search = new _button(x + (bs * 6), y, bs, bs, { img : search }, null, function () { fb.RunMainMenuCommand('Library/Search'); }, 'Library Search');
	this.buttons.preferences = new _button(x + (bs * 7), y, bs, bs, { img : settings}, null, function () { fb.ShowPreferences(); }, 'Preferences');
}

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(handles, fromhook) {
	if (!fromhook) {
		albumart.metadb_changed();
	}
	text.metadb_changed();
}

function on_mouse_lbtn_dblclk(x, y) {
	if (albumart.img && albumart.containsXY(x, y)) {
		panel.metadb.ShowAlbumArtViewer();
	}
}

function on_mouse_lbtn_down(x, y) {
	seekbar.lbtn_down(x, y);
}

function on_mouse_lbtn_up(x, y) {
	if (seekbar.lbtn_up(x, y)) {
		return;
	}
	if (buttons.lbtn_up(x, y)) {
		return;
	}
	text.lbtn_up(x, y);
}

function on_mouse_leave() {
	buttons.leave();
}

function on_mouse_move(x, y) {
	window.SetCursor(buttons.buttons.google.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.youtube.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.spotify.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.wikipedia.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.lastfm.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.discogs.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.search.containsXY(x, y) ? IDC_HAND
	: buttons.buttons.preferences.containsXY(x, y) ? IDC_HAND
	: IDC_ARROW);

	if (seekbar.move(x, y)) {
		return;
	}
	if (buttons.move(x, y)) {
		return;
	}
	text.move(x, y);
}

function on_mouse_rbtn_up(x, y) {
	// if (buttons.buttons.stop.containsXY(x, y)) {
	// 	fb.StopAfterCurrent = !fb.StopAfterCurrent;
	// 	return true;
	// }
	return panel.rbtn_up(x, y, text);
}

function on_mouse_wheel(s) {
	if (seekbar.wheel(s)) {
		return;
	}
	text.wheel(s);
}

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

	// gr.FillRoundedRectangle(seekbar.x, seekbar.y, seekbar.w, seekbar.h, _scale(2), _scale(2), colours.slider_background);

	// if (fb.IsPlaying) {
	// 	var time_width = seekbar.x - _scale(12);
	// 	gr.WriteText(tfo.playback_time.Eval(), font, colours.white, 0, bottom_y, time_width, _scale(12), 1, 2);
	// 	gr.WriteText(tfo.length.Eval(), font, colours.white, seekbar.x + seekbar.w + _scale(12), bottom_y, time_width, _scale(12), 0, 2);

	// 	if (fb.PlaybackLength > 0) {
	// 		gr.FillEllipse(seekbar.x + seekbar.pos(), seekbar.y + _scale(3), _scale(6), _scale(6), colours.white);
	// 	}
	// }
}

function on_playback_order_changed() {
	buttons.update();
	window.Repaint();
}

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();
	buttons.update();
	window.Repaint();
}

function on_playback_seek() {
	seekbar.playback_seek();
}

function on_playback_starting() {
	buttons.update();
	window.Repaint();
}

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

	buttons.update();
	window.Repaint();
}

// function on_playback_time() {
// 	text.playback_time();
// 	window.RepaintRect(0, bottom_y, panel.w, panel.h - bottom_y);
// }

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

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

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

function on_playlist_stop_after_current_changed() {
	buttons.update();
	window.Repaint();
}

function on_playlist_switch() {
	on_item_focus_change();
}

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

function on_size() {
	panel.size();
	text.size();

	seekbar.x = _scale(60);
	seekbar.y = panel.h - _scale(44);
	seekbar.w = panel.w - (seekbar.x * 2);
	seekbar.h  = _scale(6);

	bottom_y = seekbar.y - _scale(4);
	buttons.update();
}

Logo discogs
https://postimg.cc/LJxJnRDQ

Re: JScript Panel script discussion/help

Reply #1531 – 2024-07-18 09:11:38

This removes a lot of dead code, fixes the button count and improves the search button to find all tracks by the current artist. I've also uncommented the code that broke per second updates.

Code: [Select]

// ==PREPROCESSOR==
// @name "Text Display + Album Art + Custom SVG and PNG Buttons"
// @author "marc2003 / eurekagliese"
// @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/

//.svg files
var google = utils.LoadSVG(fb.ProfilePath + 'images\\google.svg');
var youtube = utils.LoadSVG(fb.ProfilePath + 'images\\youtube.svg');
var spotify = utils.LoadSVG(fb.ProfilePath + 'images\\spotify.svg');
var wikipedia = utils.LoadSVG(fb.ProfilePath + 'images\\wikipedia.svg');
var lastfm = utils.LoadSVG(fb.ProfilePath + 'images\\lastfm.svg');
var search = utils.LoadSVG(fb.ProfilePath + 'images\\search.svg');
var settings = utils.LoadSVG(fb.ProfilePath + 'images\\settings.svg');
//.png files
var discogs = utils.LoadImage(fb.ProfilePath + 'images\\discogs.png');

var tfo = {
	artist: fb.TitleFormat('%artist%'),
	title: fb.TitleFormat('%title%'),
}

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

var colours = {
	white : RGB(255, 255, 255),
};

var font = CreateFontString('Segoe UI', 12);
var buttons = new _buttons();
var bs = _scale(24);
var bottom_y = 0;

buttons.update = function () {
	var x = (panel.w - (bs * 8)) / 2
	var y = bottom_y;
	this.buttons.google = new _button(x, y, bs, bs, { img : google }, null, function () { utils.Run('https://www.google.com/search?tbm=isch&q=' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'Google');
	this.buttons.youtube = new _button(x + bs, y, bs, bs, { img : youtube }, null, function () { utils.Run('http://www.youtube.com/results?search_query=' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'youtube');
	this.buttons.spotify = new _button(x + (bs * 2), y, bs, bs, { img : spotify}, null, function () { utils.Run('https://open.spotify.com/search/' + encodeURIComponent(tfo.artist.Eval() + " " + tfo.title.Eval())); }, 'spotify');
	this.buttons.wikipedia = new _button(x + (bs * 3), y, bs, bs, { img : wikipedia }, null, function () { utils.Run('http://en.wikipedia.org/wiki/Special:Search?search=' + encodeURIComponent(tfo.artist.Eval()));  }, 'wikipedia');
	this.buttons.lastfm = new _button(x + (bs * 4), y, bs, bs, { img : lastfm }, null, function () { utils.Run('https://www.last.fm/search?q=' + encodeURIComponent(tfo.artist.Eval()));  }, 'lastfm');
	this.buttons.discogs = new _button(x + (bs * 5), y, bs, bs, { img : discogs }, null, function () { utils.Run('http://www.discogs.com/search?q=' + encodeURIComponent(tfo.artist.Eval()));  }, 'discogs');
	this.buttons.search = new _button(x + (bs * 6), y, bs, bs, { img : search }, null, function () { fb.ShowLibrarySearchUI('artist IS ' + tfo.artist.Eval()); }, 'Search');
	this.buttons.preferences = new _button(x + (bs * 7), y, bs, bs, { img : settings}, null, function () { fb.ShowPreferences(); }, 'Preferences');
}

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(handles, fromhook) {
	if (!fromhook) {
		albumart.metadb_changed();
	}
	text.metadb_changed();
}

function on_mouse_lbtn_dblclk(x, y) {
	if (albumart.img && albumart.containsXY(x, y)) {
		panel.metadb.ShowAlbumArtViewer();
	}
}

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

function on_mouse_leave() {
	buttons.leave();
}

function on_mouse_move(x, y) {
	text.move(x, y);
	buttons.move(x, y);
	
	_.forEach(buttons.buttons, function (button) {
		if (button.containsXY(x, y)) {
			window.SetCursor(IDC_HAND);
			return;
		}
	});
}

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

function on_mouse_wheel(s) {
	if (seekbar.wheel(s)) {
		return;
	}
	text.wheel(s);
}

function on_paint(gr) {
	panel.paint(gr);
	text.paint(gr);
	buttons.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();
	buttons.update();
	window.Repaint();
}

function on_playback_starting() {
	buttons.update();
	window.Repaint();
}

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

	buttons.update();
	window.Repaint();
}

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_playlists_changed() {
	text.refresh();
}

function on_size() {
	panel.size();
	text.size();

	bottom_y = panel.h - _scale(36);
	buttons.update();
}

edit: requires images from this post...

https://hydrogenaud.io/index.php/topic,110516.msg1048037.html#msg1048037

edit2: script edited to remove more dead callbacks

Re: JScript Panel script discussion/help

Reply #1532 – 2024-07-18 09:29:46

Quote from: marc2k3 on 2024-07-18 08:30:53

Code: [Select]
var x = (panel.w - (bs * 7)) / 2
You have 8 buttons so that's why it is off centre.

And yay, the SVG parser which takes around 1.5MB (or 25%) of the overall DLL size is getting some use.

edit: you should not comment this out...

Code: [Select]
// function on_playback_time() {
// 	text.playback_time();
// 	window.RepaintRect(0, bottom_y, panel.w, panel.h - bottom_y);
// }
People customising their own text may want %playback_time% etc during playback. There is a toggle on the right click menu to turn per second updates on or off.

Ah that's why it's off center.
I didn't know the SVG parser was that big.

Thanks again for the correction and updates Marc

Re: JScript Panel script discussion/help

Reply #1533 – 2024-07-18 09:51:10

If someone can add the url button, it's perfect, see the image on the left.

Re: JScript Panel script discussion/help

Reply #1534 – 2024-07-18 11:28:16

Quote from: ApacheReal on 2024-07-18 09:51:10

If someone can add the url button, it's perfect, see the image on the left.

Hi there, it seems your hosting image (postimg) flagged as Potential Security Issue, so the attached image are not shown.
However, I can see the image link when quoting your post, and paste it proxy sites to open it.

So, you are looking to open radio url link from the tag, perhaps you can try this.

Code: [Select]

var tfo = {
	artist: fb.TitleFormat('%artist%'),
	title: fb.TitleFormat('%title%'),
	url: fb.TitleFormat('%url%'),
}

Add to the buttons.update

Code: [Select]

	this.buttons.radio = new _button(x + (bs * 8), y, bs, bs, { img : settings}, null, function () { utils.Run(tfo.url.Eval());  }, tfo.url.Eval());

Re: JScript Panel script discussion/help

Reply #1535 – 2024-07-18 12:01:34

Quote from: eurekagliese on 2024-07-18 11:28:16

Quote from: ApacheReal on 2024-07-18 09:51:10

If someone can add the url button, it's perfect, see the image on the left.

Hi there, it seems your hosting image (postimg) flagged as Potential Security Issue, so the attached image are not shown.
However, I can see the image link when quoting your post, and paste it proxy sites to open it.

So, you are looking to open radio url link from the tag, perhaps you can try this.
Code: [Select]
var tfo = {
	artist: fb.TitleFormat('%artist%'),
	title: fb.TitleFormat('%title%'),
	url: fb.TitleFormat('%url%'),
}
Add to the buttons.update
Code: [Select]
	this.buttons.radio = new _button(x + (bs * 8), y, bs, bs, { img : settings}, null, function () { utils.Run(tfo.url.Eval());  }, tfo.url.Eval());

THX

Re: JScript Panel script discussion/help

Reply #1536 – 2024-07-18 12:05:53

@eurekagliese and @marc2k3

My desire became a reality. I had someone so knowledgeable help me.
I don't know how to thank them.
I'm so grateful.

Re: JScript Panel script discussion/help

Reply #1537 – 2024-07-18 12:07:18

@eurekagliese
To remove or add the blur effect?

Re: JScript Panel script discussion/help

Reply #1538 – 2024-07-18 15:06:14

Where can I download 3.5.7? Thanks.

Re: JScript Panel script discussion/help

Reply #1539 – 2024-07-18 16:45:30

Quote from: ApacheReal on 2024-07-18 12:07:18

@eurekagliese
To remove or add the blur effect?

Whoever does it himself does it for three:

albumart.js

Line 7

// blur_it = properties.albumart.enabled && properties.albumart_blur.enabled;

for Thumbs and Last.fm Bio + Images

thumbs.js

Line 112

// _drawImage(gr, this.blurred_images[this.image_index], 0, 0, panel.w, panel.h, image.crop, this.properties.blur_opacity.value);

Re: JScript Panel script discussion/help

Reply #1540 – 2024-07-18 17:10:57

Can we make thumbs with lyrics on top ?

Re: JScript Panel script discussion/help

Reply #1541 – 2024-07-18 18:26:02

Quote from: Jul2323 on 2024-07-18 17:10:57

Can we make thumbs with lyrics on top ?

Load lyrics and overlay it to the images? I don't think so.
Also, I don't think JSP is meant to be a lyric parser, but it would be wonderful addition if Marc had any plans for it.

As of now, perhaps Biography SMP plug-in or ESLyrics is what you looking for.
Spoiler (click to show/hide)

Re: JScript Panel script discussion/help

Reply #1542 – 2024-07-18 21:54:45

Quote from: eurekagliese on 2024-07-18 18:26:02

Quote from: Jul2323 on 2024-07-18 17:10:57
Can we make thumbs with lyrics on top ?

Load lyrics and overlay it to the images? I don't think so.
Also, I don't think JSP is meant to be a lyric parser, but it would be wonderful addition if Marc had any plans for it.

As of now, perhaps Biography SMP plug-in or ESLyrics is what you looking for.
Spoiler (click to show/hide)

Yes I know eslyrics and overs too . I made the LA NOIRE thème with it . Hope soon to share my new version of this theme .
Thanks anyway

Re: JScript Panel script discussion/help

Reply #1543 – 2024-07-19 07:29:32

Quote from: eurekagliese on 2024-07-18 18:26:02

Quote from: Jul2323 on 2024-07-18 17:10:57
Can we make thumbs with lyrics on top ?

Load lyrics and overlay it to the images? I don't think so.
Also, I don't think JSP is meant to be a lyric parser, but it would be wonderful addition if Marc had any plans for it.

As of now, perhaps Biography SMP plug-in or ESLyrics is what you looking for.
Spoiler (click to show/hide)

could you share your UI js ? thanks

Re: JScript Panel script discussion/help

Reply #1544 – 2024-07-19 08:29:12

Quote from: JackYau on 2024-07-19 07:29:32

Quote from: eurekagliese on 2024-07-18 18:26:02
Quote from: Jul2323 on 2024-07-18 17:10:57
Can we make thumbs with lyrics on top ?

Load lyrics and overlay it to the images? I don't think so.
Also, I don't think JSP is meant to be a lyric parser, but it would be wonderful addition if Marc had any plans for it.

As of now, perhaps Biography SMP plug-in or ESLyrics is what you looking for.
Spoiler (click to show/hide)

could you share your UI js ? thanks

Sure, here you go

Re: JScript Panel script discussion/help

Reply #1545 – 2024-07-19 10:28:45

Run Service Bar.

Text Display + Album Art + Run Service.

Re: JScript Panel script discussion/help

Reply #1546 – 2024-07-19 10:28:57

Quote from: MaFred on 2024-07-18 15:06:14

Where can I download 3.5.7? Thanks.

I only provide old versions when system requirements change. There is no change in 3.6.x

Did you read the warning on the download page. If you missed if, I'll link to it again,

https://github.com/jscript-panel/release/releases

It should only take a few seconds to fix any sript errors caused by the upgrade.

Re: JScript Panel script discussion/help

Reply #1547 – 2024-07-19 10:45:39

Quote from: marc2k3 on 2024-07-19 10:28:57

Quote from: MaFred on 2024-07-18 15:06:14
Where can I download 3.5.7? Thanks.

I only provide old versions when system requirements change. There is no change in 3.6.x

Did you read the warning on the download page. If you missed if, I'll link to it again,

https://github.com/jscript-panel/release/releases

It should only take a few seconds to fix any sript errors caused by the upgrade.

Thanks for the tips! I had undefinable problems with Last.fm Bio + Images on the first try with 3.6x - but it worked on the second try.
I particularly like the fact that the background adapts to the color of the images.
Thank you very much!

Re: JScript Panel script discussion/help

Reply #1548 – 2024-07-19 21:21:29

Quote from: MaFred on 2024-07-19 10:45:39

Thanks for the tips! I had undefinable problems with Last.fm Bio + Images on the first try with 3.6x - but it worked on the second try.
I particularly like the fact that the background adapts to the color of the images.
Thank you very much!

I just installed jscript panel 3.6.1; as far as I can see in Last.fm Bio+Images, the background remains black, there is no adaptation to the color of the images, and no changes when holding shift and scrolling the mouse wheel. Yes I did replace the sample.

I assume the change referred to in 3.5.7--"Update Thumbs sample so the brightness of the blurred background can be changed. Hold Shift and scroll your mouse wheel to adjust"--has been reverted in 3.6.1. Personally I'm fine with that; I assume MaFred must have been using a 3.6.0 version in the quote above.

Re: JScript Panel script discussion/help

Reply #1549 – 2024-07-19 21:43:56

The background colour effect in Last.fm Bio + Images is very subtle because a dark overlay is always drawn so the text is always readable. But if you can't see it, you might be blind. :/

And shift + scroll is only available in Thumbs and remains available in the latest version. Obviously that's only when Centre mode is enabled. All other modes cover the entire panel with the image so there is no blurred background to be seen.

Notice