JScript Panel script discussion/help

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

0 Members and 1 Guest are viewing this topic.

Re: JScript Panel script discussion/help

Reply #1375 – 2024-03-12 08:54:37

So I've been messing around with a new menu bar script - mainly for CUI since you can't hide the menu in DUI.

This time I've not been so lazy and made a menu for customising the colours....

The buttons will always be black or white based on background colour.

It will be in the next component release but it can be tested now by pasting this in a panel...

https://raw.githubusercontent.com/jscript-panel/component/main/samples/Menu%20%2B%20Playback%20Buttons%20%2B%20Custom%20Colours.txt

Requires component version 3.4.7 or later (the release that ditched FontAwesome and uses Segoe Fluent Icons for all buttons)

Re: JScript Panel script discussion/help

Reply #1376 – 2024-03-12 19:15:24

Hey marc2k3 or anyone,

I've been modifying the 'Status Bar' sample to show both selection and playlist totals, and one thing I miss from the built-in status bars is the "Starting playback..." message, which appears in between the stopped and playing states. This is mostly only noticeable when playing a stream, since playback starts more or less immediately from local files.

I know there is on_playback_starting callback (not in the original sample), and the on_paint is using if (fb.IsPlaying) {...} else {...}, but I seem to be missing how to get it to write text only in between the two states when starting. I tried the inverse if (!fb.IsPlaying) to see if that catches it which did not work either. Basically just trying to get the var left_text_status to display "Starting..." when the track / stream is loading.

Look, I'm not competent at this stuff.

(No doubt something simple I'm missing - below is the mess I have so far but you may have to avert your eyes there, perhaps an update to the original sample to fix this small issue would clue me in?

)

_{^{Edit: Fixed code that saving a draft on the forum screwed up...}}

Spoiler (click to show/hide)

Code: [Select]

// ==PREPROCESSOR==
// @name "Status Bar / Mod"
// @author "marc2003 / ghstchldrn"
// @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\volume.js"
// ==/PREPROCESSOR==

var left_text_playing = fb.TitleFormat("$if(%ispaused%,Paused...,Playing $replace(%codec%,Musepack,MPC,Vorbis,OGG,Monkey$char(39)s Audio,APE,aac,AAC,opus,OPUS,Opus,OPUS)[  ·  %bitrate% kbps][  ·  %__bitspersample%-bit][  ·  %samplerate% Hz][  ·  $caps(%channels%)][  ·  %length%][   –   Playing $if2($info(video_codec),$if($or(%fy_title%,$strstr($info(@),fy+)),$replace($trim($substr(%video_file_stats%,$strchr(%video_file_stats%,|),$if2($strstr(%video_file_stats%, | aac),99))),| ,, |,, ,  $char(183)  ,vp,VP,h,H.,av,AV,fps, fps,kbps, kbps)))])");

var right_text_playing = fb.TitleFormat("$puts(path,$if2($info(@),%path%))$puts(s,$if($strstr($get(path),fy+),12,$if($strstr($get(path),https),9,$if($strcmp($left($get(path),3),www),0,8))))$puts(domain,$left($substr($get(path),$get(s),999),$sub($strchr($substr($get(path),$get(s),999),/),1)))$if($or($strstr($get(path),http),$strstr($get(path),www)),From $char(91)$get(domain)$char(93),From $left(%path%,3))[$if(%__hdcd%,  ·  HDCD %__hdcd_gain% '('Peak: $caps(%__hdcd_peak_extend%)')',)][  ·  Album %replaygain_album_gain%][  ·  Track %replaygain_track_gain%]");

var left_text_stopped = '';
var right_text_stopped = '';
var left_text_status = 'Stopped.                 ';

var properties = {
	sl_count : new _p('Show Selection Count', true),
	sl_duration : new _p('Show Selection Duration', true),
	sl_size : new _p('Show Selection Size', true),
	pl_name : new _p('Show Playlist Name', true),
	pl_count : new _p('Show Playlist Count', true),
	pl_duration : new _p('Show Playlist Duration', true),
	pl_size : new _p('Show Playlist Size', true),
	background : new _p('Custom Colour Background', RGB(51, 51, 51)),
	text : new _p('Custom Colour Text', RGB(240, 240, 240))
};

var ww = 0;
var wh = 0;

var font = CreateFontString('Segoe UI Symbol', 9);

get_selection();
get_playlist();

function get_selection() {
	var tmp = [];
	var sl_items = fb.GetSelection(0);
	var sl_count = sl_items.Count;
	if (properties.sl_count.enabled) {
		tmp.push(sl_count == 0 ? 'None' : sl_count + (sl_count == 1 ? ' Track' : ' Tracks'));
	}
	if (properties.sl_duration.enabled) {
		tmp.push(utils.FormatDuration(sl_items.CalcTotalDuration()));
	}
	if (properties.sl_size.enabled) {
		tmp.push(utils.FormatFileSize(sl_items.CalcTotalSize()));
	}
	sl_items.Dispose();
	left_text_stopped = (properties.sl_count.enabled || properties.sl_duration.enabled || properties.sl_size.enabled ? 'Selection:  ' : '') + tmp.join('  ·  ');
	window.Repaint();
}

function get_playlist() {
	var tmp = [];
	var ap = plman.ActivePlaylist;
	if (ap >= 0 && ap < plman.PlaylistCount) {
		var pl_items = plman.GetPlaylistItems(ap);
		var pl_count = pl_items.Count;
		if (properties.pl_count.enabled) {
			tmp.push(pl_count + (pl_count == 1 ? ' Track' : ' Tracks'));
		}
		if (properties.pl_duration.enabled) {
			tmp.push(utils.FormatDuration(pl_items.CalcTotalDuration()));
		}
		if (properties.pl_size.enabled) {
			tmp.push(utils.FormatFileSize(pl_items.CalcTotalSize()));
		}
		if (properties.pl_name.enabled) {
			var str = plman.IsPlaylistLocked(ap) ? '🔒 ' : '';
			str += plman.GetPlaylistName(ap);
			tmp.push(str);
		}
		pl_items.Dispose();
	}
	right_text_stopped = (properties.pl_count.enabled || properties.pl_duration.enabled || properties.pl_size.enabled || properties.pl_name.enabled ? 'Playlist:  ' : '') + tmp.join('  ·  ');
	window.Repaint();
}

function on_mouse_lbtn_dblclk() {
	fb.RunMainMenuCommand('View/Show now playing in playlist');
}

function on_mouse_rbtn_up(x, y) {
	var menu = window.CreatePopupMenu();
	var sub = window.CreatePopupMenu();
	var colour_menu = window.CreatePopupMenu();

	var context = fb.CreateContextMenuManager();
	if (fb.IsPlaying) {
		context.InitNowPlaying();
		context.BuildMenu(sub, 1);
		sub.AppendTo(menu, MF_STRING, 'Now playing');
		menu.AppendMenuSeparator();
	}
	menu.AppendMenuItem(MF_STRING, 9000, 'Show selection count');
	menu.CheckMenuItem(9000, properties.sl_count.enabled);
	menu.AppendMenuItem(MF_STRING, 9001, 'Show selection duration');
	menu.CheckMenuItem(9001, properties.sl_duration.enabled);
	menu.AppendMenuItem(MF_STRING, 9002, 'Show selection size');
	menu.CheckMenuItem(9002, properties.sl_size.enabled);
	menu.AppendMenuSeparator();
	menu.AppendMenuItem(MF_STRING, 10000, 'Show playlist name');
	menu.CheckMenuItem(10000, properties.pl_name.enabled);
	menu.AppendMenuItem(MF_STRING, 10001, 'Show playlist count');
	menu.CheckMenuItem(10001, properties.pl_count.enabled);
	menu.AppendMenuItem(MF_STRING, 10002, 'Show playlist duration');
	menu.CheckMenuItem(10002, properties.pl_duration.enabled);
	menu.AppendMenuItem(MF_STRING, 10003, 'Show playlist size');
	menu.CheckMenuItem(10003, properties.pl_size.enabled);
	menu.AppendMenuSeparator();
	colour_menu.AppendMenuItem(MF_STRING, 10004, 'Background...');
	colour_menu.AppendMenuItem(MF_STRING, 10005, 'Text...');
	colour_menu.AppendTo(menu, MF_STRING, 'Colours');
	menu.AppendMenuSeparator();
	menu.AppendMenuItem(MF_STRING, 10010, 'Configure...');

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

	switch (idx) {
	case 0:
		break;
	case 9000:
		properties.sl_count.toggle();
		get_selection();
		break;
	case 9001:
		properties.sl_duration.toggle();
		get_selection();
		break;
	case 9002:
		properties.sl_size.toggle();
		get_selection();
		break;
	case 10000:
		properties.pl_name.toggle();
		get_playlist();
		break;
	case 10001:
		properties.pl_count.toggle();
		get_playlist();
		break;
	case 10002:
		properties.pl_duration.toggle();
		get_playlist();
		break;
	case 10003:
		properties.pl_size.toggle();
		get_playlist();
		break;
	case 10004:
		properties.background.value = utils.ColourPicker(properties.background.value);
		window.Repaint();
		break;
	case 10005:
		properties.text.value = utils.ColourPicker(properties.text.value);
		window.Repaint();
		break;
	case 10010:
		window.ShowConfigure();
		break;
	default:
		context.ExecuteByID(idx - 1);
		break;
	}

	context.Dispose();
	return true;
}

function on_mouse_wheel(s) {
	if (s < 0)	fb.VolumeDown();
	else fb.VolumeUp();
}

function on_mouse_mbtn_up() {
	fb.VolumeMute();
}

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

function on_paint(gr) {
	gr.Clear(properties.background.value);
	if (fb.IsPlaying) {
		gr.WriteText(left_text_playing.Eval(), font, this.properties.text.value, 5, 0, ww - 200 - utils.CalcTextWidth(right_text_playing.Eval(), 'Segoe UI', 9), 21, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_NEAR, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
	}
	else {
		gr.WriteText(left_text_status + left_text_stopped, font, this.properties.text.value, 5, 0, ww - 200 - utils.CalcTextWidth(right_text_stopped, 'Segoe UI', 9), 21, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_NEAR, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
	}
	if (fb.IsPlaying) {
		gr.WriteText(right_text_playing.Eval(), font, this.properties.text.value, 0, 0, ww - 130, 21, DWRITE_TEXT_ALIGNMENT_TRAILING);
	}
	else if (plman.ActivePlaylist > -1 && plman.ActivePlaylist < plman.PlaylistCount) {
		gr.WriteText(right_text_stopped, font, this.properties.text.value, 0, 0, ww - 130, 21, DWRITE_TEXT_ALIGNMENT_TRAILING);
	}
	gr.WriteText(fb.Volume.toFixed(2) < -60.00 ? 'Muted' : fb.Volume.toFixed(2) + ' dB', font, this.properties.text.value, 0, 0, ww - 5, 21, DWRITE_TEXT_ALIGNMENT_TRAILING);
}

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

function on_playback_starting() {
	left_text_status = 'Starting...                 ';
	window.Repaint();
}

function on_playback_stop() {
	left_text_status = 'Stopped.                 ';
	window.Repaint();
}

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

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

function on_playlist_items_added(p) {
	if (p == plman.ActivePlaylist) {
		get_playlist();
	}
}

function on_playlist_items_removed(p) {
	if (p == plman.ActivePlaylist) {
		get_playlist();
	}
}

function on_playlist_switch() {
	get_playlist();
}

function on_playlists_changed() {
	if (properties.pl_name.enabled) {
		get_playlist();
	}
}

function on_selection_changed() {
	if (properties.sl_count.enabled || properties.sl_duration.enabled || properties.sl_size.enabled) {
		get_selection();
	}
}

function on_size() {
	ww = window.Width;
	wh = window.Height;
}

Re: JScript Panel script discussion/help

Reply #1377 – 2024-03-12 19:16:15

Quote from: marc2k3 on 2024-03-12 08:54:37

So I've been messing around with a new menu bar script - mainly for CUI since you can't hide the menu in DUI.

This time I've not been so lazy and made a menu for customising the colours....

The buttons will always be black or white based on background colour.

It will be in the next component release but it can be tested now by pasting this in a panel...

https://raw.githubusercontent.com/jscript-panel/component/main/samples/Menu%20%2B%20Playback%20Buttons%20%2B%20Custom%20Colours.txt

Requires component version 3.4.7 or later (the release that ditched FontAwesome and uses Segoe Fluent Icons for all buttons)

Interesting. Would it be possible to have an alternative to Text Display with the menu and Playback buttons placed in this way ?

Re: JScript Panel script discussion/help

Reply #1378 – 2024-03-13 09:48:47

Updated status bar: https://raw.githubusercontent.com/jscript-panel/component/main/samples/Status%20Bar.txt

And nope, I'm not making any more changes to Text Display. Most of my scripts are flexible with regards to positioning/dimensions. This is not so easy and I can't be bothered.

Re: JScript Panel script discussion/help

Reply #1379 – 2024-03-13 10:58:30

How can I check if a certain pattern is in a string?

For instance:
var str = 'Speakers some more text [exclusive]'

How to check that the var str contains 'Speakers ' and/or contains ' [exclusive]'?

Re: JScript Panel script discussion/help

Reply #1380 – 2024-03-13 13:11:05

This Status Bar script has been updated: https://raw.githubusercontent.com/jscript-panel/component/main/samples/Status%20Bar.txt

You can now set title formatting via the right click menu and $rgb is supported.

Re: JScript Panel script discussion/help

Reply #1381 – 2024-03-13 15:59:03

Hi,
Is it possible to move the image (Cover Art) a little lower, by a few pixels?

Re: JScript Panel script discussion/help

Reply #1382 – 2024-03-13 16:20:31

Search this line in text_display.js

_drawImage(gr, albumart.img, albumart.x, albumart.y, albumart.w, albumart.h, image.centre);

add the number of pixels to albumart.y (e.g. + 5) and save the file, but remember, that with every update the file will get overwritten, so better save it somewhere else and replace the path in the config window with your new path (or change the file after every update, that's up to you)

Re: JScript Panel script discussion/help

Reply #1383 – 2024-03-13 16:27:40

Must be modded?? Margins are like this with the original script at 150%.

No amount of panel resizing can get the image closer to the edges.

Re: JScript Panel script discussion/help

Reply #1384 – 2024-03-13 18:42:38

Yet another Status Bar update: https://raw.githubusercontent.com/jscript-panel/component/main/samples/Status%20Bar.txt

This fixes actual bugz. Ever since the first version, it didn't support the font size being changed so any manual change or DPI increase would have chopped it off. Sorry about that.

Now that it can take up the panel height, multi-line with wrapping is now possible. Use $crlf() in your title formatting.

Re: JScript Panel script discussion/help

Reply #1385 – 2024-03-13 21:13:48

^ I never would've figured that out myself. It'll take me some time to integrate the new changes, so I'll just assume it goes smoothly and say thanks now. Thanks

Re: JScript Panel script discussion/help

Reply #1386 – 2024-03-13 23:12:38

Quote from: Major_Tom on 2024-03-13 16:20:31

Search this line in text_display.js

_drawImage(gr, albumart.img, albumart.x, albumart.y, albumart.w, albumart.h, image.centre);

add the number of pixels to albumart.y (e.g. + 5) and save the file, but remember, that with every update the file will get overwritten, so better save it somewhere else and replace the path in the config window with your new path (or change the file after every update, that's up to you)

Thanks. I'll try It.

Re: JScript Panel script discussion/help

Reply #1387 – 2024-03-14 10:27:42

Nice one Marc2k3... I will try it too....

Re: JScript Panel script discussion/help

Reply #1388 – 2024-03-14 20:12:28

Hi,

I would like to use icons of the font 'Material Icons Round Regular'. How to do it ?

I tried, to use '\uE03D' with char_set[button_set_idx].playlist :

Spoiler (click to show/hide)

But it does not work.

Re: JScript Panel script discussion/help

Reply #1389 – 2024-03-15 07:38:06

Quote from: Jacob91 on 2024-03-14 20:12:28

I would like to use icons of the font 'Material Icons Round Regular'. How to do it ?

I think, the font is just called 'Material Icons Round' without 'Regular', at least, that's what it's called here in my system

Re: JScript Panel script discussion/help

Reply #1390 – 2024-03-15 12:04:37

Quote from: Major_Tom on 2024-03-15 07:38:06

Quote from: Jacob91 on 2024-03-14 20:12:28

I would like to use icons of the font 'Material Icons Round Regular'. How to do it ?

I think, the font is just called 'Material Icons Round' without 'Regular', at least, that's what it's called here in my system

I tried, but It doesn't work.

Re: JScript Panel script discussion/help

Reply #1391 – 2024-03-15 14:53:53

I tried, but It doesn't work.
[/quote]

A little hard to tell you why without the corresponding code - you just defined some variables...

Re: JScript Panel script discussion/help

Reply #1392 – 2024-03-15 16:32:46

Quote from: Major_Tom on 2024-03-15 14:53:53

I tried, but It doesn't work.

A little hard to tell you why without the corresponding code - you just defined some variables...
[/quote]

Spoiler (click to show/hide)

Then I use rg_plchars to display the button :

Code: [Select]

	bpos = btot - 4;		this.buttons.plmanager	= new _button(x + (bs * bpos), y, bs, bs, { char : rg_plchars, colour:colours.white}, null, function () { fb.RunMainMenuCommand('View/Playlist Manager'); }, 'PL Manager');

C'est ce que je veux afficher :

Re: JScript Panel script discussion/help

Reply #1393 – 2024-03-15 17:26:11

Supposing your standard font is Segoe Fluent Icons, why not just put this line into your code and forget about the rest:

this.buttons.plmanager = new _button(x + (bs * bpos), y, bs, bs, { char : '\ue90b', colour:colours.white}, null, function () { fb.RunMainMenuCommand('View/Playlist Manager'); }, 'PL Manager');

Re: JScript Panel script discussion/help

Reply #1394 – 2024-03-15 17:30:51

Quote from: Jacob91 on 2024-03-15 16:32:46

Quote from: Major_Tom on 2024-03-15 14:53:53
I tried, but It doesn't work.

A little hard to tell you why without the corresponding code - you just defined some variables...

Spoiler (click to show/hide)

Then I use rg_plchars to display the button :

Code: [Select]

	bpos = btot - 4;		this.buttons.plmanager	= new _button(x + (bs * bpos), y, bs, bs, { char : rg_plchars, colour:colours.white}, null, function () { fb.RunMainMenuCommand('View/Playlist Manager'); }, 'PL Manager');

C'est ce que je veux afficher :

[/quote]

Like this?

RDIT: Try the attached script

Re: JScript Panel script discussion/help

Reply #1395 – 2024-03-15 17:43:56

That's the output of the code you provided - wouldn't look any different with Material Font

You will have to alter the size of the button by adjusting the second bs value:

this.buttons.plmanager = new _button(x + (bs * bpos), y, bs, bs + 5...

or whatever value suits your needs

Re: JScript Panel script discussion/help

Reply #1396 – 2024-03-15 18:00:22

homer backing in to a hedge.gif

Re: JScript Panel script discussion/help

Reply #1397 – 2024-03-16 07:28:06

Quote from: Major_Tom on 2024-03-15 17:26:11

Supposing your standard font is Segoe Fluent Icons, why not just put this line into your code and forget about the rest:

this.buttons.plmanager = new _button(x + (bs * bpos), y, bs, bs, { char : '\ue90b', colour:colours.white}, null, function () { fb.RunMainMenuCommand('View/Playlist Manager'); }, 'PL Manager');

Quote from: Major_Tom on 2024-03-15 17:26:11

Supposing your standard font is Segoe Fluent Icons, why not just put this line into your code and forget about the rest:

this.buttons.plmanager = new _button(x + (bs * bpos), y, bs, bs, { char : '\ue90b', colour:colours.white}, null, function () { fb.RunMainMenuCommand('View/Playlist Manager'); }, 'PL Manager');

Thanks for your help.
But if I want to use "Material Icons" for '\ue90b'. What should I write before ?

Re: JScript Panel script discussion/help

Reply #1398 – 2024-03-16 07:30:45

Quote from: Major_Tom on 2024-03-15 17:43:56

That's the output of the code you provided - wouldn't look any different with Material Font

You will have to alter the size of the button by adjusting the second bs value:

this.buttons.plmanager = new _button(x + (bs * bpos), y, bs, bs + 5...

or whatever value suits your needs

👍

Re: JScript Panel script discussion/help

Reply #1399 – 2024-03-16 08:01:26

Quote from: Defender on 2024-03-15 17:30:51

Quote from: Jacob91 on 2024-03-15 16:32:46
Quote from: Major_Tom on 2024-03-15 14:53:53
I tried, but It doesn't work.
A little hard to tell you why without the corresponding code - you just defined some variables...
[attach type=image]29696[/attach]

Like this?

RDIT: Try the attached script
[/quote]

It works perfectly. Thanks. 👍👍
The _button_mir function allows, among other things, to assign the "Material Icons Round" font to the plmanager button. 👍

Notice