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 296388 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: JScript Panel script discussion/help

Reply #1350 –
Quote from: eurekagliese on
Hi there mate, is there any plan to make that search as stand alone panel script?
DUI and JSPlaylist are really missing out on this.

I guess thats impossible. What I did is just restoring the feature from Br3tt's original script, thus it only applies to Smooth Playlist View. Best scenario is implmenting it to DUI by peter, maybe in the future.

Re: JScript Panel script discussion/help

Reply #1351 –
Quote from: marc2k3 on
I've fixed it for JSP 3.4.3

Extract files to user profile. Put .txt in your panel.

Thanks for this, I didn't realize we could redirect the import path of the script.

Quote from: seongbin on
Quote from: eurekagliese on
Hi there mate, is there any plan to make that search as stand alone panel script?
DUI and JSPlaylist are really missing out on this.

I guess thats impossible. What I did is just restoring the feature from Br3tt's original script, thus it only applies to Smooth Playlist View. Best scenario is implmenting it to DUI by peter, maybe in the future.

Sorry for the delay in replying and thanks for your response.

Re: JScript Panel script discussion/help

Reply #1352 –
Here's a simplified Playback Buttons + Playback Order.

Code: [Select]
// ==PREPROCESSOR==
// @name "Playback Buttons + PBO"
// @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"
// ==/PREPROCESSOR==

// NOTE: This does not support Shuffle (albums) or Shuffle(folders)

var colours = {
	buttons : RGB(255, 255, 255),
	background : RGB(30, 30, 30),
	contrast : RGB(196, 30, 35),
};

//////////////////////////////////////////////////////////////

var panel = new _panel();
var buttons = new _buttons();
var bs = _scale(24);

if (!chars.shuffle) chars.shuffle = '\ue8b1';
if (!chars.random) chars.random = '\ue897';
var pbo_chars = [chars.repeat_all, chars.repeat_all, chars.repeat_one, chars.random, chars.shuffle];

buttons.update = function () {
	var x = ((panel.w - bs * 6) / 2);
	var y = Math.round((panel.h - bs) / 2);
	this.buttons.stop = new _button(x, y, bs, bs, { char : chars.stop, colour:fb.StopAfterCurrent ? colours.contrast : colours.buttons}, null, function () { fb.Stop(); }, 'Stop');
	this.buttons.previous = new _button(x + bs, y, bs, bs, { char : chars.prev, colour:colours.buttons }, null, function () { fb.Prev(); }, 'Previous');
	this.buttons.play = new _button(x + (bs * 2), y, bs, bs, { char : !fb.IsPlaying || fb.IsPaused ? chars.play : chars.pause, colour:colours.buttons}, null, function () { fb.PlayOrPause(); }, !fb.IsPlaying || fb.IsPaused ? 'Play' : 'Pause');
	this.buttons.next = new _button(x + (bs * 3), y, bs, bs, { char : chars.next, colour:colours.buttons }, null, function () { fb.Next(); }, 'Next');
	
	var pbo = plman.PlaybackOrder;
	this.buttons.repeat = new _button(x + (bs * 5) - 2, y - 2, bs + 4, bs + 4, { char : pbo_chars[pbo], colour: pbo == 0 ? setAlpha(colours.buttons, 60) : colours.contrast }, null, function () { pbo >= pbo_chars.length - 1 ? plman.PlaybackOrder = 0 : plman.PlaybackOrder++ }, "Playback Order: " + plman.GetPlaybackOrders().toArray()[pbo]);
}

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

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

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

function on_mouse_rbtn_up(x, y) {
	if (buttons.buttons.stop.containsXY(x, y)) {
		fb.StopAfterCurrent = !fb.StopAfterCurrent;
	} else {
		var menu = window.CreatePopupMenu();
		menu.AppendMenuItem(MF_STRING, 1, 'Configure');

		var idx = menu.TrackPopupMenu(x, y);
		menu.Dispose();

		switch (idx ) {
		case 1:
			window.ShowConfigure();
			break;
		}
	}

	return true;
}

function on_paint(gr) {
	gr.Clear(colours.background);
	buttons.paint(gr);
}

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

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

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

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

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

function on_size() {
	panel.size();
	buttons.update();
}

It doesn't support shuffle (albums) or shuffle (folders). It cycles through the first 5 options. Edit the contrast colour if you don't like my default.

Right click the Stop button to toggle Stop After Current. All included button scripts support this.

Re: JScript Panel script discussion/help

Reply #1353 –
Apparently adding playback buttons and seekbar to Text Display is enough for me :)


Code: [Select]
// ==PREPROCESSOR==
// @name "Text Display with Playback"
// @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/

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

panel.item_focus_change();

//////////////////////////////////////////////////////////////
var colours = {
	buttons : RGB(255, 255, 255),
	background : RGB(30, 30, 30),
	title : RGB(255, 255, 255),
	artist : RGB(240, 240, 240),
	time : RGB(240, 240, 240),
	seekbar_background : setAlpha(RGB(255, 255, 255), 50),
	seekbar_progress : setAlpha(RGB(255, 255, 255), 150),
	seekbar_knob :  RGB(255, 255, 255),
	sac : RGB(196, 30, 35),
};

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

var seekbar = new _seekbar(0, 0, 0, 0);
var buttons = new _buttons();
var button_set_idx = 0;
var fluent_font = 'Segoe Fluent Icons';
var has_font = utils.CheckFont(fluent_font);
var img = null;
var bs = _scale(24);

var normal_font = CreateFontString('Segoe UI', 12);
var bold_font = CreateFontString('Segoe UI', 12, true);

if (has_font) {
	button_set_idx = window.GetProperty('2K3.BUTTON.SET', 0);
}

buttons.update = function () {
	var y = Math.round((panel.h - bs * 2));
	var c = Math.round((panel.w - bs) / 2);
	this.buttons.stop = new _button(c - (bs * 2), y, bs, bs, { char : chars.stop, colour:fb.StopAfterCurrent ? colours.sac : colours.buttons}, null, function () { fb.Stop(); }, 'Stop');
	this.buttons.previous = new _button(c - (bs), y, bs, bs, { char : chars.prev, colour:colours.buttons }, null, function () { fb.Prev(); }, 'Previous');
	this.buttons.play = new _button(c, y, bs, bs, { char : !fb.IsPlaying || fb.IsPaused ? chars.play : chars.pause, colour:colours.buttons}, null, function () { fb.PlayOrPause(); }, !fb.IsPlaying || fb.IsPaused ? 'Play' : 'Pause');
	this.buttons.next = new _button(c + (bs), y, bs, bs, { char : chars.next, colour:colours.buttons }, null, function () { fb.Next(); }, 'Next');
	this.buttons.queue = new _button(c + (bs * 2), y, bs, bs, { char : '\ue109', colour: colours.buttons}, null, function () {var handleList = plman.GetPlaylistSelectedItems(plman.ActivePlaylist);			if (handleList && handleList.Count !== 0) {	handleList.RunContextCommand("Add to playback queue");}	}, 'Add to playback queue\nRight Click: Flush Queue');
	this.buttons.preferences = new _button(c + (bs * 3), y, bs, bs, { char : chars.preferences, colour:colours.buttons}, null, function () { fb.ShowPreferences(); }, 'Preferences');
	//this.buttons.console = new _button(panel.w - LM - (bs * 3), y, bs, bs, {char : chars.list, colour:colours.buttons }, null, function () { fb.ShowConsole(); }, 'Console');
	//this.buttons.search = new _button(panel.w - LM - (bs * 2), y, bs, bs, { char : chars.search, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('Library/Search'); }, 'Library Search');

	if (button_set_idx == 1) {
		this.change_font(fluent_font);
	}
}

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

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

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

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

function on_playback_edited() {
	window.Repaint();
}

//////////////////////////////////////////////////////////////
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_up(x, y) {
	text.lbtn_up(x, y);
	if (buttons.lbtn_up(x, y)) {
		return;
	}
	if (seekbar.lbtn_up(x, y)) {
		return;
	}
}

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

function on_mouse_rbtn_up(x, y) {
	if (buttons.buttons.queue.containsXY(x, y)) {
		fb.RunMainMenuCommand('Playback/Flush playback queue');
		return true;
	}
	if (buttons.buttons.stop.containsXY(x, y)) {
		fb.StopAfterCurrent = !fb.StopAfterCurrent;
	} else {
		panel.rbtn_up(x, y, text);
	}
	return true
}

function on_mouse_wheel(s) {
	text.wheel(s);
	if (seekbar.wheel(s)) {
		return;
	}
	if (s == 1) {
		fb.VolumeUp();
	} else {
		fb.VolumeDown();
	}
}

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

	gr.FillRoundedRectangle(seekbar.x, seekbar.y, seekbar.w + _scale(6), seekbar.h, _scale(4), _scale(4), colours.seekbar_background);
	if (fb.IsPlaying) {
		var pos = seekbar.pos();
		
		gr.WriteText(tfo.playback_time.Eval(), normal_font, colours.time, seekbar.x - _scale(72), panel.h /2 - bs * 0.6, _scale(60), panel.h, DWRITE_TEXT_ALIGNMENT_TRAILING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER);
		gr.WriteText(tfo.length.Eval(), normal_font, colours.time, seekbar.x + seekbar.w + _scale(20), panel.h /2 - bs * 0.6, _scale(60), panel.h, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER);

		if (fb.PlaybackLength > 0) {
            //progress
            gr.FillRoundedRectangle(seekbar.x, seekbar.y, pos, seekbar.h,  _scale(4), _scale(4), colours.seekbar_progress);
            //knob
			gr.FillEllipse(seekbar.x + _scale(3) + seekbar.pos(), seekbar.y + _scale(3), _scale(6), _scale(6), colours.seekbar_knob);
		}
	}
}

function on_playback_dynamic_info_track(type) {
	if (type == 0) text.metadb_changed();
	else if (type == 1 && (text.properties.albumart.enabled || text.properties.layout.value > 0)) 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_stop(reason) {
	if (reason != 2) {
		panel.item_focus_change();
	}
	
	buttons.update();
	window.Repaint();
}

function on_playback_time() {
	text.playback_time();
	window.RepaintRect(panel.h, 0, seekbar.x - panel.h, panel.h);
}

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_mouse_lbtn_dblclk(x, y) {
	// window.ShowConfigure();
	fb.RunMainMenuCommand('View/Show now playing in playlist');
}

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

	seekbar.x = _scale(96);
	seekbar.w = panel.w - seekbar.x * 2;
	seekbar.h = _scale(6);
	seekbar.y = (panel.h - bs * 0.7);
	buttons.update();
}

Re: JScript Panel script discussion/help

Reply #1355 –
$crlf() 4 times, much easier.
As long as it works hehe.

Re: JScript Panel script discussion/help

Reply #1357 –
Thank you for the update, and I'm glad I could contribute an idea.

Re: JScript Panel script discussion/help

Reply #1358 –
Hi guys . Did Jscript panel 3 can make a drop down menu ? The one with an arrow and multiple choose ? Or something similar ? Thanks ....

Re: JScript Panel script discussion/help

Reply #1359 –
If you're talking about the Playlist: Metal in that screenshot above then no. That's a default UI toolbar. :/

Fully custom menus from mouse clicks are possible. Many included samples implement them.

Re: JScript Panel script discussion/help

Reply #1360 –
Quote from: marc2k3 on
If you're talking about the Playlist: Metal in that screenshot above then no. That's a default UI toolbar. :/

Fully custom menus from mouse clicks are possible. Many included samples implement them.
Thanks marc2k3 for your answer....

Re: JScript Panel script discussion/help

Reply #1361 –
Hi marc,
is there a simple solution to add additional text into the menu like
new _button(0, 0, 36, 36, { char : chars.edit + 'CUE', colour : colours.buttons } ..

This has not been working since changing the font to Segoe Fluent Icons ..
many thanks for your help  :)

Re: JScript Panel script discussion/help

Reply #1362 –
Not tested but I think if you want to revert to FontAwesome, you need to:

1) Copy this in your panel...

Code: [Select]
var fa_chars = {
	up : '\uF077',
	down : '\uF078',
	left : '\uF060',
	right : '\uF061',
	close : '\uF00D',
	rating_on : '\uF005',
	rating_off : '\uF006',
	heart_on : '\uF004',
	heart_off : '\uF08A',
	prev : '\uF049',
	next : '\uF050',
	play : '\uF04B',
	pause : '\uF04C',
	stop : '\uF04D',
	preferences : '\uF013',
	search : '\uF002',
	console : '\uF120',
	info : '\uF05A',
	audioscrobbler : '\uF202',
	minus : '\uF068',
	music : '\uF001',
	menu : '\uF0C9',
	hourglass : '\uF254',
	lock : '\uF023',
	list : '\uF0C9',
	volume : '\uF028',
};

2) Update each button definition with fa_chars.BLAH

3) After defining your buttons inside buttons.update...

Code: [Select]
this.change_font("FontAwesome");

4) Check the button size. 36x36 doesn't seem big enough.

Re: JScript Panel script discussion/help

Reply #1363 –
hi marc,

I've tested:
Code: [Select]
// ==PREPROCESSOR==
// @name "Menu Button"
// @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"
// ==/PREPROCESSOR==

var fa_chars = {
	up : '\uF077',
	down : '\uF078',
	left : '\uF060',
	right : '\uF061',
	close : '\uF00D',
	rating_on : '\uF005',
	rating_off : '\uF006',
	heart_on : '\uF004',
	heart_off : '\uF08A',
	prev : '\uF049',
	next : '\uF050',
	play : '\uF04B',
	pause : '\uF04C',
	stop : '\uF04D',
	preferences : '\uF013',
	search : '\uF002',
	console : '\uF120',
	info : '\uF05A',
	audioscrobbler : '\uF202',
	minus : '\uF068',
	music : '\uF001',
	menu : '\uF0C9',
	hourglass : '\uF254',
	lock : '\uF023',
	list : '\uF0C9',
	volume : '\uF028',
};

var colours = {
	buttons : RGB(255, 255, 255),
	background : RGB(196, 30, 35)
};

var panel = new _panel();
var buttons = new _buttons();
var bt=40;

buttons.update=function() {
this.buttons.buttons.menu = new _button(0, 0, bt, bt, { char :  fa_chars.menu , colour : colours.buttons }, null, function () { _menu(0, 36); }, 'Menu');
this.buttons.buttons.console= new _button(bt, 0, bt, bt, { char :  fa_chars.console + ' Test', colour : colours.buttons },null, function () { fb.ShowConsole(); }, 'Console Test');
this.change_font("FontAwesome");
}

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

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

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

function on_mouse_rbtn_up(x, y) {
	if (buttons.buttons.menu.containsXY(x, y)) {
		_help(0, 36);
		return true;
	}
	return panel.rbtn_up(x, y);
}

function on_paint(gr) {
	gr.Clear(colours.background);
	buttons.paint(gr);
}

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

Result: no button - any ideas - or am I wrong

Re: JScript Panel script discussion/help

Reply #1364 –
this.buttons.buttons.BLAH is wrong. Should be this.buttons.BLAH

Also, you need to update the on_size function right at the bottom
Code: [Select]
function on_size() {
	panel.size();
	buttons.update();
}

And increase the width of any button with text like I said in the previous reply.

Re: JScript Panel script discussion/help

Reply #1365 –
Thank you Marc,

you show the blind the way!  ;)

Re: JScript Panel script discussion/help

Reply #1366 –
When i switch Theme color , i need to stay in the same sort of Layout  , but with a different color .

In ColumnUI / Layout ,  i need to check which layout is active or selected ?  his name , i suppose ?

Example :  switch Layout "Biography"  to Layout "Biography_blue"  . in jscript panel 3 of course . Hope it was clear.



Re: JScript Panel script discussion/help

Reply #1367 –
If each layout has its own colour scheme, using on_colours_changed / window.GetColourCUI will pick it up. The default script inside the panel does that as do most of my own samples/JS Playlist/Smooth samples.

Re: JScript Panel script discussion/help

Reply #1368 –
Quote from: marc2k3 on
If each layout has its own colour scheme, using on_colours_changed / window.GetColourCUI will pick it up. The default script inside the panel does that as do most of my own samples/JS Playlist/Smooth samples.
I can make a color scheme for each layout . Ok
Can you explain how to use on_color_changed ?
Just add this line on the script ? Didn't use it ... Thanks

Re: JScript Panel script discussion/help

Reply #1369 –
Even without seekbar and buttons the most useful of your samples to me  :)  Thank you Marc !

Re: JScript Panel script discussion/help

Reply #1370 –
Hi Marc,

I ran into a little problem with your Text Display sample and I can't figure how to solve it.

I tried to put a drop shadow on the text in that I used gr.WriteTextLayout twice with a little offset to the right and down and colour black - that worked perfectly (Pic1) as long as I don't minimize the foobar window. When maximizing the window again, the drop shadow 'loses' the colour and the text is drawn twice in the foreground color (Pic2). I can't figure out how to catch this event to initiate a refresh or any other way to solve this. Maybe you got an idea - thanks.

Re: JScript Panel script discussion/help

Reply #1371 –
I can't really tell what I'm supposed to be looking at in pic1?? :/

But I think I know the cause of the issue in pic2. The default code passes an array of colours (stringified) which the component then parses and applies to the text layout object. These colours are now permanent properties of that layout object until overwritten or the text layout is destroyed. Trying to call gr.WriteTextLayout with a solid colour isn't going to touch that layout object.

Maybe passing this as the colour will work instead...

Code: [Select]
var black = JSON.stringify([{
    Colour: RGB(0, 0, 0),
    Start: 0,
    End: UINT_MAX
}]);

Re: JScript Panel script discussion/help

Reply #1372 –
Quote from: marc2k3 on
I can't really tell what I'm supposed to be looking at in pic1?? :/

Sorry, Pic1 was just there to show how it normally looks like.

Unfortunately, your suggested code didn't have any effect - thanks anyway, it's not a major problem, since I don't minimize the window that often anyway

Re: JScript Panel script discussion/help

Reply #1373 –
Just realised there was a typo. Should be Length, not End.

Code: [Select]
var black = JSON.stringify([{
    Colour: RGB(0, 0, 0),
    Start: 0,
    Length: UINT_MAX
}]);

It's doing what I expected it to....

Re: JScript Panel script discussion/help

Reply #1374 –
Thanks, but that didn't solve the problem for me either - it only works when you put the focus on the Text Display panel before minimizing/maximizing the window. When the focus is on another panel, the colour is gone again  :-\

But thanks to the explanations in your first answer, I managed to solve it by creating a second text layout for the shadow - so no need to dig into this anymore. Thanks a lot for your help!