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 (Read 293072 times) previous topic - next topic
Jul2323 and 1 Guest are viewing this topic.

Re: JScript Panel

Reply #1026
Message for marc2K3:

Foobar2000 v-2 64-bit
Jscript Panel3

I have the following problem in the "Track Info + Seekbar + Buttons.txt" script:

I need to paint the %samplerate% with one color if> 48000 and another color for the rest (image)

Something similar to this code that I had in the Graphical Browser 32-bit complement:
$ifgreater(%samplerate%,49000,$puts(colours.samplerate,0-240-0),$puts(colours.samplerate,170-170-170))

This my code:

Code: [Select]
var tfo = fb.TitleFormat('%samplerate% Hz');

//aquí se pinta la linea 1 dcha: samplerate
gr.WriteText(tfo.Eval(), normal3_font, colours.samplerate, panel.h + posi_vertical_linea1_dcha, posi_horiz_linea1, seekbar.x - panel.h, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_TRAILING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
Thanks in advance

Re: JScript Panel

Reply #1027
Any instance of gr.WriteText can be replaced with DrawColouredText. It fully supports $rgb in title formatting, Using $rgb() with no args resets to the default_colour.

Code: [Select]
$ifgreater(%samplerate%,44100,$rgb(255,0,0),)%samplerate%

Note that the first argument has to be gr. The rest of the arguments are the same as WriteText in the same order.

Code: [Select]
DrawColouredText(gr, text, font, default_colour, x, y, w, h, text_alignment, paragraph_alignment, word_wrapping, trimming_granularity)

edit: DrawColouredText is not part of the component so it won't be on the docs pages. It's just a bit of javascript included inside helpers.txt. All samples already import it by default. Anyone writing their own scripts from scratch would need to import it...

Code: [Select]
// ==PREPROCESSOR==
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

Re: JScript Panel

Reply #1028
Thank you very much mark2k3 for your quick response.

I have not been able to put it into practice.

It seemed to understand that tfo.eval () would interpret the color $rgb (0.240.0) and the metadato %samplerate% if %samplerate% > 49000 and otherwise would apply "colours.samplerate1"
But if %samplerate% > 49000 paints "00f00095000 Hz" (image)

I leave you an extract of my script in case you can help me indicating the convenient corrections.

// ==PREPROCESSOR==
// @name "Track Info + Seekbar + 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\seekbar.js"

// ==/PREPROCESSOR==

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

var colours = {
   buttons : RGB(220, 220, 220),
   background : RGB(50, 50, 50),
   artist : RGB(170, 170, 170),
   año : RGB(220, 220, 220),
   album : RGB(200, 200, 200),
   composer : RGB(200, 200, 200),
   track : RGB(200, 200, 200),
   title : RGB(220, 220, 220),
   time : RGB(220, 220, 220),
   time_total : RGB(230, 230, 230),
   relojes : RGB(170, 170, 170),
   codec : RGB(170, 170, 170),

   samplerate1 : RGB(170, 170, 170),

   rgain : RGB(190, 190, 190),
   seekbar_background : RGB(25, 25, 25),
   seekbar_progress : RGB(110, 110, 110),
   seekbar_knob : RGB(255, 0, 0),
   sac : RGB(196, 30, 35),
};

var tfo = fb.TitleFormat('$ifgreater(%samplerate%,49000,$rgb(0,240,0),)%samplerate% Hz');   

//aquí se pinta la linea 1 dcha: herzios
DrawColouredText(gr, tfo.Eval(), normal3_font, colours.samplerate1, panel.h + posi_vertical_linea1_dcha, posi_horiz_linea1, seekbar.x - panel.h, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_TRAILING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

Re: JScript Panel

Reply #1029
It only shows the colour codes if I pass the text with $rgb code in to WriteText like this....



edit: this is an appalling code example, never create fb.TitleFormat objects inside on_paint. I was lazy.

Re: JScript Panel

Reply #1030
It only shows the colour codes if I pass the text with $rgb code in to WriteText like this....

edit: this is an appalling code example, never create fb.TitleFormat objects inside on_paint. I was lazy.

marc2k3 I want to thank you for your help.

Everything was fantastic as seen in the image.

Now I have another problem. Time data are paralyzed and do not advance per second.
However, if I take them on the Seekbar if they look correctly, but to move them away from the Seekbar they are paralyzed.

Keep in mind that the right side where the volume and the texts are painted above and below belong to another panel3 attached to the principal.  

I leave you the script in case you can take a look:
Code: [Select]
// ==PREPROCESSOR==
// @name "Track Info + Seekbar + 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\seekbar.js"
// ==/PREPROCESSOR==

//lleva 4 panel3:
//1 que lleva la minicover, los botones, la seekbar, los textos de la izquierda y los relojes
//2 un triple panel a derecha del pie: 1 para los textos arriba, el volumen y los textos abajo

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

//tamaño botones
var bs = _scale(25);
var sep_botones = 3;
//posicion vertical botones
var posi_horiz_botones = -1;
var LM = 318;
//posiciones para el botón speaker
var posi_horiz_botones2 = -2.5;
var LM2 = -64;
//posiciones seekbar
var posi_vert_seekbar_ini = 60;
var ancho_seekbar = _scale(550);
var alto_seekbar = _scale(5)

//el valor _scale(-xxx) marca el límite en que se corta el texto con ...
var limite1 = _scale(-497);
var posi_vert_linea_izq = 10;
var posi_horiz_linea1 = -5;
var posi_horiz_linea2 = 23;
var posi_horiz_porcen = -2;
var posi_vert_porcen = _scale(975);

//fuentes para los textos
var normal1_font = CreateFontString('Segoe UI', 11);
var normal2_font = CreateFontString('Segoe UI', 12);
var normal3_font = CreateFontString('Segoe UI', 13);
var normal4_font = CreateFontString('Eras Medium ITC', 13);
var bold_font = CreateFontString('Segoe UI', 12, true);

//aquí se definen los colores
var colours = {
buttons : RGB(220, 220, 220),
background : RGB(40, 40, 40),
artist : RGB(170, 170, 170),
año : RGB(220, 220, 220),
album : RGB(200, 200, 200),
composer : RGB(200, 200, 200),
track : RGB(200, 200, 200),
title : RGB(220, 220, 220),
time : RGB(220, 220, 220),
time_total : RGB(210, 210, 210),
relojes : RGB(170, 170, 170),
codec : RGB(170, 170, 170),
samplerate1 : RGB(170, 170, 170),
rgain : RGB(190, 190, 190),
seekbar_background : RGB(15, 15, 15),
seekbar_progress : RGB(70, 70, 70),
seekbar_progress_degra : RGB(20, 20, 20),
seekbar_borde : RGB(50, 50, 50),
seekbar_knob : RGB(230, 0, 0),
sac : RGB(196, 30, 35),
};

// textos izquierda
var tfo1 = fb.TitleFormat('$if($strcmp($cut(%genre%,7),Clásica),%album%    %date%    %artist%^^"$upper(%composer%)"   ,%artist%    %date%    %album%^^)%tracknumber%.  %title%^^[%playback_time% ]^^$if2(%length%,LIVE)');
// porcentaje, tiempos
var tfo3 = fb.TitleFormat('$div($mul(%_time_elapsed_seconds%,100),%_time_total_seconds%) ٪   |   %playback_time%   |   - %playback_time_remaining%');

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

var chars = {
vol : '\uF027',
activate : '\uF054',
prev : '\uF049',
next : '\uF050',
play : '\uF04B',
pause : '\uF04C',
stop : '\uF04D',
}

var panel = new _panel();
var seekbar = new _seekbar(0, 0, 0, 0);
var buttons = new _buttons();
var img = null;
window.MaxHeight = _scale(150);

on_playback_new_track();

buttons.update = function () {
var y = (Math.round((panel.h - bs) / 2)) + posi_horiz_botones;
this.buttons.stop = new _button(panel.w - LM - (sep_botones * 4) - (bs * 8), y, bs, bs, { char : chars.stop, colour:fb.StopAfterCurrent ? colours.sac : colours.buttons}, null, function () { fb.Stop(); }, 'Stop');
this.buttons.previous = new _button(panel.w - LM - (sep_botones * 3) - (bs * 7), y, bs, bs, { char : chars.prev, colour:colours.buttons }, null, function () { fb.Prev(); }, 'Previous');
this.buttons.play = new _button(panel.w - LM - (sep_botones * 2) - (bs * 6), 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(panel.w - LM-sep_botones - (bs * 5), y, bs, bs, { char : chars.next, colour:colours.buttons }, null, function () { fb.Next(); }, 'Next');
this.buttons.activate = new _button(panel.w - LM - (bs * 4), y, bs, bs, { char : chars.activate, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('View/Playlist view/Activate now playing'); }, 'Activate now playing');
var y = (Math.round((panel.h - bs) / 2)) + posi_horiz_botones2;
this.buttons.vol = new _button(panel.w - LM2 - (bs * 3), y, bs, bs, { char : chars.vol, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('Playback/Volume/Mute'); }, 'Mute');
}

function update_album_art(metadb) {
_dispose(img);
img = null;
if (metadb) {
img = metadb.GetAlbumArt();
}
window.Repaint();
}

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

function on_mouse_lbtn_up(x, y) {
if (x < panel.h && fb.IsPlaying && img) {
fb.GetNowPlaying().ShowAlbumArtViewer();
return;
}
if (buttons.lbtn_up(x, y)) {
return;
}
if (seekbar.lbtn_up(x, y)) {
return;
}
fb.RunMainMenuCommand('View/Show now playing in playlist');
}

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

function on_mouse_move(x, y) {
window.SetCursor(x < panel.h && fb.IsPlaying && img ? IDC_HAND : IDC_ARROW);
if (buttons.move(x, y)) {
return;
}
seekbar.move(x, y);
}

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

//aquí cancelo que al mover la rueda del ratón se dispare el volumen
function on_mouse_wheel(s) {
if (seekbar.wheel(s)) {
return;
}
// if (s == 1) {
// fb.VolumeUp();
// } else {
// fb.VolumeDown();
// }
}

function on_paint(gr) {
//  aquí se pinta el background de todo el pie
    gr.FillRectangle(0, 0, panel.w, panel.h, colours.background);
// aquí se pinta la barra nula
// gr.FillRectangle(seekbar.x, seekbar.y, seekbar.w + _scale(6), seekbar.h, colours.seekbar_background);
gr.FillGradientRectangle(seekbar.x, seekbar.y, seekbar.w + _scale(6), seekbar.h, 0, RGB(50, 50, 50), RGB(0, 0, 0));

buttons.paint(gr);

// aquí se pinta la miniatura ---------------------------------------------
if (img) {
_drawImage(gr, img, 0, 0, panel.h - 2, panel.h - 2, image.centre);
}

if (fb.IsPlaying) {
var arr1 = tfo1.Eval().split('^^');

// aquí se pinta la linea 1 izq: artist, año, album
gr.WriteText(arr1[0], normal2_font, colours.artist, panel.h + posi_vert_linea_izq, posi_horiz_linea1, seekbar.x - panel.h - limite1, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

// aquí se pinta la linea 2 izq: composer, track, title
gr.WriteText(arr1[1], normal2_font, colours.title, panel.h + posi_vert_linea_izq, posi_horiz_linea2, seekbar.x - panel.h - limite1, panel.h * 0.9, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

// aquí se pinta el tiempo total del track
gr.WriteText(arr1[3], normal4_font, colours.time_total, seekbar.x + seekbar.w + _scale(12), -2, _scale(130), panel.h, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER);

//      aquí se pintan porcentaje, tiempo transcurrido y tiempo restante /////////////////////
var arr3 = tfo3.Eval().split('^^');
gr.WriteText(arr3[0], normal4_font, colours.relojes, seekbar.x - _scale(50), posi_horiz_porcen, posi_vert_porcen, panel.h, DWRITE_TEXT_ALIGNMENT_TRAILING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

if (fb.PlaybackLength > 0) {
var pos = seekbar.pos();
// aquí se pinta la parte izquierda de la seekbar
// gr.FillRectangle(seekbar.x, seekbar.y, pos, seekbar.h, colours.seekbar_progress);
        gr.FillGradientRectangle(seekbar.x, seekbar.y, pos, seekbar.h, 0, RGB(70, 70, 70), RGB(20, 20, 20));
// aquí se pinta el knob avanzando
        gr.FillGradientRectangle(seekbar.x + pos, seekbar.y - 1, _scale(8), seekbar.h +2, 0, RGB(230, 0, 0), RGB(0, 0, 0));
}
}
}

function on_playback_dynamic_info_track(type) {
if (type == 0) window.Repaint();
else update_album_art(fb.GetNowPlaying());
}

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

function on_playback_new_track(metadb) {
update_album_art(metadb);
}

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

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

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

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

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

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

//aquí se definen las coordenadas de la seekbar
function on_size() {
panel.size();
seekbar.x = _scale(posi_vert_seekbar_ini);
    seekbar.w = panel.w - seekbar.x - ancho_seekbar;
seekbar.h = alto_seekbar;
seekbar.y = (panel.h - seekbar.h) / 2;
buttons.update();
}


Re: JScript Panel

Reply #1032
Replace this code...

Code: [Select]
function on_playback_time() {
window.RepaintRect(panel.h, 0, seekbar.x - panel.h, panel.h);
}
with
Code: [Select]
function on_playback_time() {
window.Repaint();
}

marc2K3 I just correct the script and everything has been perfect.

Thank you very much once again.

Re: JScript Panel

Reply #1033
Message for marc2k3:

I don't know if it will be abusing you. But I ask you if you have a routine that does what I need.

It is a routine that I had in Foobar2000 32-bit in a WSH panel that eliminated when painting the metadata %album% and %title% all the text that was to the right of the "(" except that it was at the beginning of the text. When trying to write it in JScript Panel3 I give me continuous syntax errors.

Therefore the entire text will be eliminated from the first "(" until the end of the text except that "(" is at the beginning of the text.

In the following examples the red text indicates what should not be painted:

metadato                                                                                   Paint
----------------------------------------------------------------     ------------------------------------------
Three Seasons (Music From The Motion Picture)                     Three Seasons
Byrd Jazz (Live at London) aka "Yusef" (Delmark DL-407)        Byrd Jazz
Do Ai (Dhuong Vi..... The Red Blindfo)                                      Do Ai
(Down Home) Blues (together)                                                 (Down Home) Blues


This is my routine for wsh panel 32-bit:
Code: [Select]
// obtengo el titulo pintando la primera frase entre () si está al principio
// seguido de las palabras anteriores a la siguiente frase entre ()
$puts(cam,%title%)

//////////////////// Fase 1: proceso hasta la 1ª palabra entre parentesis /////////////////////
$puts(tx1,)$puts(tx2,)$puts(pri,)$puts(ult,)
$puts(var,)$puts(var2,)

$puts(pri,$strchr($get(cam),'('))
$puts(ult,$strchr($get(cam),')'))

// si no hay '('
$ifequal(pri,0,var1 = 1,)
// si no hay ')'
$ifequal(ult,0,var1 = 1,)
// si '(' está despues del ')'
$ifgreater(pri,ult,var var1 = 1,)
// si '(' está al principio
$ifequal(pri,1,var var2 = 1,)

$ifequal(var1,1
,
var trz1 = cam
var tx1 = cam
,
var trz1 = $left(cam,ult)
var tx1 = $left(trz1,$add(pri,-1))
var tx2 = $substr(trz1,pri,ult)
)

$ifequal(var2,1
,var titulo = tx2
,var titulo = tx1
)

//////////// Fase 2: proceso desde el final del 1er trozo hasta el final /////////////

//////////// Vuelvo a subdividir el resto

$ifgreater($len(cam),trz1
,
//$puts(resto,$replace($get(cam),$get(trz1),))
var resto = $right(cam,$sub($len(cam),$len(trz1)))

var tx1 =
var tx2 =
var pri =
var ult =

var pri = $strchr(resto,'(')
var ult = $strchr(resto,')')

// si no hay '('
$ifequal(pri,0,var var1 = 1,)
// si no hay ')'
$ifequal(ult,0,var var1 = 1,)
// si '(' está despues del ')'
$ifgreater(pri,ult,var var1 = 1,)

$ifequal(var,1
,
var trz2 = resto
var tx1 = resto
,
var trz2 = $left(resto, ult)
var tx1 = $left(trz2,$add(pri,-1))
var tx2 = $substr(trz2,pri,ult)
)
,
)

$ifequal(var2,1
,var titulo = titulotx1
,
)

This is my current script for JScript Panel3:
Code: [Select]
// ==PREPROCESSOR==
// @name "Track Info + Seekbar + 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\seekbar.js"
// ==/PREPROCESSOR==

//PIE que lleva 2 panel3:
//1 con la minicover, los botones, la seekbar, los textos de la izquierda y los tiempos
//2 un triple panel a derecha del pie: 1 para los textos arriba, 1 para el volumen y 1 para los textos abajo

//////////////////////////////////////////////////////////////
//tamaño botones
var bs = _scale(25);
var sep_bot = 3;
//posicion vertical botones
var posi_horiz_bot = -1;
var posi_horiz_bot2 = -0.1;
var LM = 324;
//posiciones para el botón speaker
var posi_horiz_bot3 = -1;
var LM2 = -64;
//posiciones seekbar
var posi_vert_seekbar_ini = 59;
var ancho_seekbar = _scale(550);
var alto_seekbar = _scale(5)

//el valor _scale(-xxx) marca el límite en que se corta el texto con ...
var limite1 = _scale(-496);

var posi_vert_lin_izq = 10;
var posi_horiz_lin1 = -5;
var posi_horiz_lin2 = 23;

//Recuadro de tiempos
//desplazamiento vertical
var time_x = 1365
//desplazamiento horizontal
var time_y = 21.5
//ancho de izq. a dcha.
var time_w = -240
//alto
var time_h = 26

var posi_horiz_time = 1;
var sep_time = 161;
var posi_vert_time_actual = _scale(1731);
var posi_vert_time_resto = posi_vert_time_actual + sep_time;
var posi_vert_time_total = posi_vert_time_resto + sep_time;

//fuentes para los textos
var normal1_font = CreateFontString('Segoe UI', 11);
var normal2_font = CreateFontString('Segoe UI', 12);
var normal3_font = CreateFontString('Segoe UI', 13);
var normal4_font = CreateFontString('Segoe UI', 14);
var normal5_font = CreateFontString('Eras ITC', 14);
var bold_font = CreateFontString('Segoe UI', 12, true);

//aquí se definen los colores
var colours = {
buttons : RGB(220, 220, 220),
background : RGB(40, 40, 40),
artist : RGB(170, 170, 170),
año : RGB(230, 230, 230),
album : RGB(200, 200, 200),
composer : RGB(170, 170, 170),
dato1 : RGB(150, 150, 150),
negro : RGB(0, 0, 0),
track : RGB(200, 200, 200),
title : RGB(215, 215, 215),
porcen : RGB(180, 180, 180),

time : RGB(180, 180, 180),
time_total : RGB(220, 220, 220),
time_reborde : RGB(32, 32, 32),
time_recuadro_sup : RGB(50, 50, 50),
time_recuadro_inf : RGB(25, 25, 25),

codec : RGB(170, 170, 170),
samplerate1 : RGB(170, 170, 170),
rgain : RGB(190, 190, 190),
seekbar_background : RGB(15, 15, 15),
seekbar_progress : RGB(70, 70, 70),
seekbar_progress_degra : RGB(20, 20, 20),
seekbar_borde : RGB(50, 50, 50),
seekbar_knob : RGB(230, 0, 0),
sac : RGB(196, 30, 35),
};

var tfo1 = fb.TitleFormat('$if($strcmp($cut(%genre%,7),Clásica),%album%    %date%    %artist%^^"$upper(%composer%)"   ,%artist%    %date%    %album%^^)%tracknumber%.  %title%^^[%playback_time% ]^^$ifgreater(%length%,0,$div($mul(%_time_elapsed_seconds%,100),%_time_total_seconds%) ٪,LIVE)');

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

var chars = {
vol : '\uF027',
activate3 : '\uF054',
prev : '\uF049',
next : '\uF050',
play : '\uF04B',
pause : '\uF04C',
stop : '\uF04D',
}

var panel = new _panel();
var seekbar = new _seekbar(0, 0, 0, 0);
var buttons = new _buttons();
var img = null;
window.MaxHeight = _scale(150);

on_playback_new_track();

buttons.update = function () {
var y = (Math.round((panel.h - bs) / 2)) + posi_horiz_bot;

this.buttons.stop = new _button(panel.w - LM - (sep_bot * 4) - (bs * 8), y, bs, bs, { char : chars.stop, colour:fb.StopAfterCurrent ? colours.sac : colours.buttons}, null, function () { fb.Stop(); }, 'Stop');
this.buttons.previous = new _button(panel.w - LM - (sep_bot * 3) - (bs * 7), y, bs, bs, { char : chars.prev, colour:colours.buttons }, null, function () { fb.Prev(); }, 'Previous');
this.buttons.play = new _button(panel.w - LM - (sep_bot * 2) - (bs * 6), 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(panel.w - LM-sep_bot - (bs * 5), y, bs, bs, { char : chars.next, colour:colours.buttons }, null, function () { fb.Next(); }, 'Next');

var y = (Math.round((panel.h - bs) / 2)) + posi_horiz_bot2;
this.buttons.activate = new _button(panel.w - LM - (bs * 4), y, bs, bs, { char : chars.activate3, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('View/Playlist view/Activate now playing'); }, 'Activate now playing');

var y = (Math.round((panel.h - bs) / 2)) + posi_horiz_bot3;
this.buttons.vol = new _button(panel.w - LM2 - (bs * 3), y, bs, bs, { char : chars.vol, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('Playback/Volume/Mute'); }, 'Mute');
}

function update_album_art(metadb) {
_dispose(img);
img = null;
if (metadb) {
img = metadb.GetAlbumArt();
}
window.Repaint();
}

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

function on_mouse_lbtn_up(x, y) {
if (x < panel.h && fb.IsPlaying && img) {
fb.GetNowPlaying().ShowAlbumArtViewer();
return;
}
if (buttons.lbtn_up(x, y)) {
return;
}
if (seekbar.lbtn_up(x, y)) {
return;
}
fb.RunMainMenuCommand('View/Show now playing in playlist');
}

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

function on_mouse_move(x, y) {
window.SetCursor(x < panel.h && fb.IsPlaying && img ? IDC_HAND : IDC_ARROW);
if (buttons.move(x, y)) {
return;
}
seekbar.move(x, y);
}

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

//aquí cancelo que al mover la rueda del ratón se dispare el volumen
function on_mouse_wheel(s) {
if (seekbar.wheel(s)) {
return;
}
// if (s == 1) {
// fb.VolumeUp();
// } else {
// fb.VolumeDown();
// }
}

function on_paint(gr) {
//  aquí se pinta el background de todo el pie
    gr.FillRectangle(0, 0, panel.w, panel.h, colours.background);
// aquí se pinta la barra nula
gr.FillGradientRectangle(seekbar.x, seekbar.y, seekbar.w + _scale(6), seekbar.h, 0, RGB(50, 50, 50), RGB(0, 0, 0));
buttons.paint(gr);

// aquí se pinta la miniatura fuera de If (fb.IsPlaying) para que no se borre al pulsar stop --------
if (img) {
_drawImage(gr, img, 0, 0, panel.h - 2, panel.h - 2, image.centre);
}

if (fb.IsPlaying) {
var arr1 = tfo1.Eval().split('^^');
// aquí se pinta la linea 1 izq: artist, año, album
gr.WriteText(arr1[0], normal2_font, colours.artist, panel.h + posi_vert_lin_izq, posi_horiz_lin1, seekbar.x - panel.h - limite1, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
// aquí se repinta en alta luminosidad la linea 1 izq: ALbum+Año o Artist+Año
var dato1_2 = fb.TitleFormat('$if($strcmp($cut(%genre%,7),Clásica),%album%    %date%,%artist%    %date%)').Eval();
gr.WriteText(dato1_2, normal2_font, colours.año, panel.h + posi_vert_lin_izq, posi_horiz_lin1, seekbar.x - panel.h - limite1, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
// aquí se repinta la linea 1 izq: ALbum o Artist (primero se pinta en negro y luego se vuelve a repintar en su color)
var dato1 = fb.TitleFormat('$if($strcmp($cut(%genre%,7),Clásica),%album%,%artist%)').Eval();
gr.WriteText(dato1, normal2_font, colours.negro, panel.h + posi_vert_lin_izq, posi_horiz_lin1, seekbar.x - panel.h - limite1, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
gr.WriteText(dato1, normal2_font, colours.artist, panel.h + posi_vert_lin_izq, posi_horiz_lin1, seekbar.x - panel.h - limite1, panel.h * 0.5, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

// aquí se pinta la linea 2 izq: composer, track, title
gr.WriteText(arr1[1], normal2_font, colours.title, panel.h + posi_vert_lin_izq, posi_horiz_lin2, seekbar.x - panel.h - limite1, panel.h * 0.9, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
// aquí se repinta en baja luminosidad la linea 2 izq: composer (solo para clásica)
var tfo_composer = fb.TitleFormat('$if($strcmp($cut(%genre%,7),Clásica),"$upper(%composer%)",)').Eval();
gr.WriteText(tfo_composer, normal2_font, colours.composer, panel.h + posi_vert_lin_izq, posi_horiz_lin2, seekbar.x - panel.h - limite1, panel.h * 0.9, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

// aquí se pinta el porcen que lleva el track a la dcha. de la seekbar
gr.WriteText(arr1[3], normal3_font, colours.porcen, seekbar.x + seekbar.w + _scale(12), 0, _scale(130), panel.h, DWRITE_TEXT_ALIGNMENT_LEADING, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

// aquí se pinta el recuadro con reborde que aloja los tiempos
gr.FillGradientRectangle(time_x, time_y, time_w, time_h, 0, colours.time_recuadro_sup, colours.time_recuadro_inf);
// aquí se pinta el reborde del recuadro
DrawRectangle(gr, time_x, time_y, time_w, time_h, colours.time_reborde);

// tiempo transcurrido
var time_actual = fb.TitleFormat('%playback_time%').Eval();
gr.WriteText(time_actual, normal5_font, colours.time, seekbar.x - _scale(50), posi_horiz_time, posi_vert_time_actual, panel.h, DWRITE_TEXT_ALIGNMENT_CENTER, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
// tiempo restante
var time_resto = fb.TitleFormat('- %playback_time_remaining%').Eval();
gr.WriteText(time_resto, normal5_font, colours.time, seekbar.x - _scale(50), posi_horiz_time, posi_vert_time_resto, panel.h, DWRITE_TEXT_ALIGNMENT_CENTER, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
// tiempo total
var time_total = fb.TitleFormat('%length%').Eval();
gr.WriteText(time_total, normal5_font, colours.time_total, seekbar.x - _scale(50), posi_horiz_time, posi_vert_time_total, panel.h, DWRITE_TEXT_ALIGNMENT_CENTER, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);

if (fb.PlaybackLength > 0) {
var pos = seekbar.pos();
// aquí se pinta la parte izquierda de la seekbar
        gr.FillGradientRectangle(seekbar.x, seekbar.y, pos, seekbar.h, 0, RGB(80, 80, 80), RGB(30, 30, 30));

// aquí se pinta el knob avanzando
        gr.FillGradientRectangle(seekbar.x + pos, seekbar.y - 1, _scale(8), seekbar.h +2, 0, RGB(230, 0, 0), RGB(0, 0, 0));
}
}
}

function on_playback_dynamic_info_track(type) {
if (type == 0) window.Repaint();
else update_album_art(fb.GetNowPlaying());
}

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

function on_playback_new_track(metadb) {
update_album_art(metadb);
}

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

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

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

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

function on_playback_time() {
//la linea siguiente la sustituí por la siguiente según me indicó marc2k3 en el foro para arreglar el que no se pintaban los tiempos per second
// window.RepaintRect(panel.h, 0, seekbar.x - panel.h, panel.h);
window.Repaint();
}

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

//aquí se definen las coordenadas de la seekbar
function on_size() {
panel.size();
seekbar.x = _scale(posi_vert_seekbar_ini);
    seekbar.w = panel.w - seekbar.x - ancho_seekbar;
seekbar.h = alto_seekbar;
seekbar.y = (panel.h - seekbar.h) / 2;
buttons.update();
}

Re: JScript Panel

Reply #1034
Code: [Select]
var title = tfo.title.Eval();
var first = title.indexOf('(');
var last = title.lastIndexOf('(');
if (last > first) title = title.substr(0, last-1).trim();
else if (first > 0) title = title.substr(0, first-1).trim();

Re: JScript Panel

Reply #1035
3.2.0 https://github.com/jscript-panel/release/releases

Actually quite a minor release but gets a bigger version bump because the `Playback Statistics` built in to foobar2000 have been dropped in the latest Beta 18. Using foo_playcount for playback stats is back once again so the JS Playlist and Smooth Playlist ratings have reverted to component detection like all versions prior to 3.1.0.

Re: JScript Panel

Reply #1036


tell me how to change the background color on the thumbnail feed



how do I change the font, font size and underline on the text panel? and how do I remove the inscription and underline at all?



how to change the font, font size on the volume panel

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

and the most mega important question is how to install a biography on your dashboard from @WilB ???

Re: JScript Panel

Reply #1037
Code: [Select]
var title = tfo.title.Eval();
var first = title.indexOf('(');
var last = title.lastIndexOf('(');
if (last > first) title = title.substr(0, last-1).trim();
else if (first > 0) title = title.substr(0, first-1).trim();

Marc2K3, once again thank you for your help.

Routine works perfectly.

The problem is now how to invoke the title variable (clean of parentheses) from the fb.titleformat() command

var tfo1 = fb.TitleFormat('$if($strcmp($cut(%genre%,7),Clásica),%album%    %date%    %artist%^^"$upper(%composer%)"   ,%artist%    %date%    %album%^^)%tracknumber%.  %title%^^[%playback_time% ]^^$ifgreater(%length%,0,$div($mul(%_time_elapsed_seconds%,100),%_time_total_seconds%) ٪,LIVE)');

Re: JScript Panel

Reply #1038
Message for marc2k3:

I have installed JSPlaylist to try to replace the obsolete Graphical Browser.

In the notes listed at https: //jscript-panel.github.io/gallery/jsplaylist/#Clickable-ratings read: Change Colours and Fonts in Fobar2000 Preferences> Display> DefaultUI or ColumsUI.

However, I am not able to see in "Colours and fonts" the option to configure the source that is seen in the image is very large.

Thanks for your help.

Re: JScript Panel

Reply #1039
JSPplaylist uses window.GetFontCUI which only supports global fonts

https://jscript-panel.github.io/docs/flags/#fonttypecui

If you want custom alternative fonts then you don't use it and write your own code...

https://jscript-panel.github.io/docs/fonts/


Re: JScript Panel

Reply #1040
Message for marc2k3:

I need, if possible, to solve 2 problems in JSPLAYLIST:

1. It is possible that all albums are collapsed?. I don't want when an album is playing the tracks. That is, I want the albums to always be collapsed.

2. I would like to be able to reduce the panel in width. It must now have a minimal width.

Re: JScript Panel

Reply #1041
I've removed the min width/height for the next release. If you can't wait, you can make the changes yourself in samples\jsplaylist\main.js

https://github.com/jscript-panel/component/commit/7fb29822d2f8cce89ad7212f0659be0ac3cd5fc3

As for making all groups collapsed all the time, I can't help with it. I didn't write that code and most of it is alien to me.

 

Re: JScript Panel

Reply #1042
I've removed the min width/height for the next release. If you can't wait, you can make the changes yourself in samples\jsplaylist\main.js

https://github.com/jscript-panel/component/commit/7fb29822d2f8cce89ad7212f0659be0ac3cd5fc3

As for making all groups collapsed all the time, I can't help with it. I didn't write that code and most of it is alien to me.


Thanks to your help I could reduce the panel.

With respect to the subject of Albums collapsed:

The image corresponds to a 32-bit version of towards 2017 in which I installed the jsplaylist script (in a WSH panel).

It looks like all discs are collapsed even if a track is playing.

The configuration differs from the current one in which the enable auto-collapse box is not marked and in the current one it is marked since if I uncheck it then it does not collapse.

I would like to try to modify the code to collapse totally.

To gain time it is possible that you can tell me that file. Js of those that are loaded in the jscript panel3 may contain said code.

I guess it's playlist.js

Re: JScript Panel

Reply #1043
3.0.14 for fb2k v1 peasants - https://github.com/marc2k3/fb2k-archive/releases
3.2.1 for fb2k v2 -  https://github.com/jscript-panel/release/releases

The Thumbs sample has been limited to loading no more than 64MB of images from disk.

This can still take 1GB+ of memory so you may override it by using the Properties window (Hold Shift+Win before right clicking, 2K3.THUMBS.SIZE.LIMIT in bytes)




Re: JScript Panel

Reply #1046
Message for Marc2K3:

I would like in the script "menu button" to be able to load instead of chars.Menu a PNG icon that I have on this route:
%fb2k_component_path%images\5. Pie\5-1.png

// ==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 colours = {
    buttons : RGB(200, 200, 200),
    background : RGB(50, 50, 50)
};

var panel = new _panel();
var buttons = new _buttons();
buttons.buttons.menu = new _button(1, -2, 30, 30, { char : chars.menu, colour : colours.buttons }, null, function () { _menu(0, 36); }, 'Menu');

Re: JScript Panel

Reply #1047
%fb2k_component_path% is only valid in the preprocessor section. You cannot use it in script. But you can use fb.ComponentPath or fb.ProfilePath. But you should only ever use fb.ComponentPath to access files bundled with the component. Never put your own files inside the component folder as they will be wiped whenever you upgrade the component.

So to solve your problem, you can create an image object like this..

Code: [Select]
// make your own images folder inside your profile
var img = utils.LoadImage(fb.ProfilePath + "images\\5. Pie\\5-1.png");

Now the _button object doesn't support images by default but you can easily hack the paint function like this...

Code: [Select]
buttons.buttons.menu = new _button(1, -2, 30, 30, img, null, function () { _menu(0, 36); }, 'Menu');
buttons.buttons.menu.paint = function (gr) {
    _drawImage(gr, this.current, this.x, this.y, this.w, this.h, image.centre);
}

Re: JScript Panel

Reply #1048
Message for Marc2K3:

I have  foobar2000 v2 64-bit beta23

I have installed the Qsearch 1.0.5 component

Using the context menu works perfectly

I have created with JScript panel3 a panel with 2 buttons that point to:

 1º - QSearch/title HAS
 2º - QSearch/album IS

I frame the track and click on any of the 2 buttons and do not respond.

I send you the script in case you can help me:

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

//////////////////////////////////////////////////////////////
//tamaño botones
var bs = _scale(21);
var sep_bot = -9;

//posicion botones
var posi_vert_bot = 7;
var posi_horiz_bot = -1;

//aquí se definen los colores
var colours = {
buttons : RGB(180, 180, 180),
background : RGB(0, 0, 0),
};

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

//aquí se definen los botones tomados de la fuente "fontawesome-webfont.ttf" que debe estar instalada
//algunos de ellos ya estaban definidos en "helpers.txt"
//por eso defino aquí los nuevos cambiando la variable chars por chars_cosi

var chars_cosi = {
//QSearch/title HAS
lupa1 : '\uF002',
//QSearch/album IS
lupa2 : '\uF00E',
}

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

buttons.update = function () {
var y = (Math.round((panel.h - bs) / 2)) + posi_horiz_bot;
this.buttons.lupa1 = new _button(panel.w - posi_vert_bot - (sep_bot * 2) - (bs * 2), y, bs, bs, { char : chars_cosi.lupa1, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('QSearch/title HAS'); }, 'title HAS');
this.buttons.lupa2 = new _button(panel.w - posi_vert_bot - (sep_bot * 1) - (bs * 1), y, bs, bs, { char : chars_cosi.lupa2, colour:colours.buttons }, null, function () { fb.RunMainMenuCommand('QSearch/album IS'); }, 'album IS');
}

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

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

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

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

function on_paint(gr) {
//aquí se pinta el background de todo el pie
gr.FillRectangle(0, 0, panel.w, panel.h, colours.background);
buttons.paint(gr);
}

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

Re: JScript Panel

Reply #1049
Quote
fb.RunMainMenuCommand

This is the main menu....



QSearch provides context menu commands. Not the same.

https://jscript-panel.github.io/docs/namespaces/fb/#fbruncontextcommandcommand