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 283120 times) previous topic - next topic
0 Members and 3 Guests are viewing this topic.

Re: JScript Panel script discussion/help

Reply #950
width and height are whatever you want the returned image to be. That's the whole point of SVG, the source can be any size and you get a scaled image without quality loss.

If you loaded a tiny 16x16px png file with utils.LoadImage and then used the Resize method to make it 1024x1024, it would look terrible.

Re: JScript Panel script discussion/help

Reply #951
Just as a follow up, you can parse XML with ActiveXObjects like this...

Code: [Select]
var svg_file = fb.ComponentPath + 'samples\\svg\\android.svg';
var svg_text = utils.ReadUTF8(svg_file);

var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.6.0");
xmlDoc.async = false;
xmlDoc.loadXML(svg_text);
if (xmlDoc.parseError.errorCode == 0) {
var svg = xmlDoc.childNodes[0];
       // width / height not present in the android.svg but you could access them if you know they are with other content
console.log(svg.getAttribute("viewBox"));
}

Re: JScript Panel script discussion/help

Reply #952
Hi Marc,
Tested the update this morning with the new SVG library
It looks better, the pie close correctly at 360°, thanks !!
here is the result :
X

i will try to check if it accepts "text" but i think i read it was not using it.


Re: JScript Panel script discussion/help

Reply #954
yep, thanks, i tried it, it seems the <text> tag is not recognized.
this library seems much better than the other one though.

Re: JScript Panel script discussion/help

Reply #955
ok so i was able to test the <text> tag and it works well ! It's much easier to manage the percentage within the SVG creation function rather than going back to the paint function.
I also tested the transform/Skew/rotate function of the <text> tag and it works well as well.

Here is my function (if anyone is interested):
Code: [Select]
function create_svg(crit) {
var color = [];
var radius = 35;
var width = window.Width / 3;
var height = window.Height;
var offset = 0;
var circumf = 2 * Math.PI * radius;
color[1] = "lime"; color[2] = "fuchsia"; color[3] = "gold";
var svg ='<svg xmlns="http://www.w3.org/2000/svg" height="' + height + '" width="' + width + '" viewBox="0 0 200 200" >\n';
    for (var i = 1 ; i< crit.length; i++) { //loop to draw all the slices
var sliceAngle = crit[i]/crit[0]*circumf;
svg +='<circle r="' + radius + '" cx="100" cy="100" fill="none"\n';
svg +='stroke="' + color[i] + '"\n';
svg +='stroke-width="'+radius * 2 +'"\n';
svg +='stroke-dasharray="'+ sliceAngle + ' ' + circumf + '"\n';
svg +='stroke-dashoffset="'+offset + '"\n';
svg += 'transform="rotate(-90) translate(-200)"/>';
offset-=sliceAngle;
var perc = Math.round(crit[i]/crit[0]*100).toFixed(0) + "%"; // percentage as text of the slice
//// Below to calculate X/Y pos of the percentage in the pie //////
var cum = 0; 
var sav = 0; 
for (var j = 1 ; j< i+1; j++) { 
cum +=crit[j];  
}
sav = cum-crit[i] + (crit[i]/2);
var angle = radians(360*sav/crit[0] -90);
var xPos = 100+Math.cos(angle) * radius/2 ;
var yPos = 100+Math.sin(angle) * radius/2 ;
//// End of calculation //////////
svg +='<text x = "'+xPos+'" y = "'+yPos+'" fill="Blue"  font-family="Segoe UI" font-size="13" font-weight="bold">' + perc + '</text>\n'; // put the percentage in the slice
svg+= '<text x = "'+ (43*i) +'" y = "183" fill="White"  font-family="Segoe UI" font-size="13" font-weight="bold">' + perc + '</text>\n'; // put the percentage below
svg+= '<rect x = "'+ (43*i) +'" y = "185" height="7" width="22" fill="'+color[i]+'"/>\n';
}
    svg += '</svg>\n';
//console.log(svg);
    return utils.LoadSVG(svg);
}

function radians(degrees)
{
  var pi = Math.PI;
  return degrees * (pi/180);
}

function takes as a parameter an array with the number for each slice (i chose to have the first element being the total)
I tried to spot the percentages (written in blue) within the pie but it doesnt work, the x/y coordinates and not good (if anyone has knowledge there, i'd be curious to see what i did wrong).

The paint function draws each graph in a loop.
Here is the result :
X

For these wondering about the yellow arrow in the top left corner, it is a switch button that switches the view from graph to text as shown below :
X


Edit : To calculate the coordinates, i've used the following guide :
https://quantrix.com/answers/questions/question/how-to-place-labels-inside-of-a-pie-chart/

Re: JScript Panel script discussion/help

Reply #956
Quick question on the window.NotifyOthers(name, info) function

I have a panel that draws a simple list and i would like to choose the content of the list with another panel. So i would like to pass on an array between these 2 panels.
I cant make it happen.
So on the sending panel i have this (basic example):
Code: [Select]
function notif() {
var data = [];
for (var i = 0; i <plman.PlaylistCount ; i++) {
data.push({
value : plman.GetPlaylistName(i),
});
}
window.NotifyOthers("simple_list", data);
}
then on the other panel (called 'simple_list') i dont really know how to use the
on_notify_data(name, info) callback. i tried all sort of things with no success.
I didnt find any example of it.
Any help would be appreciated :)
thanks

Re: JScript Panel script discussion/help

Reply #957
Quick question on the window.NotifyOthers(name, info) function

I have a panel that draws a simple list and i would like to choose the content of the list with another panel. So i would like to pass on an array between these 2 panels.
I cant make it happen.
So on the sending panel i have this (basic example):
Code: [Select]
function notif() {
var data = [];
for (var i = 0; i <plman.PlaylistCount ; i++) {
data.push({
value : plman.GetPlaylistName(i),
});
}
window.NotifyOthers("simple_list", data);
}
then on the other panel (called 'simple_list') i dont really know how to use the
on_notify_data(name, info) callback. i tried all sort of things with no success.
I didnt find any example of it.
Any help would be appreciated :)
thanks


In script A you put the window.NotifyOthers("simple_list", data); part.
Data is the data to pass to the other panel (I think you got that right).

In Script B, you put the callback. It's a async process, so Panel B gets "notified" at some point after running window.NotifyOthers, and the arguments on the callback are the string "simple_list" and the data you sent.
Code: [Select]
function on_notify_data(name, info)  {
if (name === "simple_list" && info) { // only want to react to our data on Script A, and ensure data is received
if (info.length) { //Array contains items?
// Do your thing with the data
const data = [...info]; // Make a copy, info will not be available later if used in other functions
}
}
}

Note I used some ES6 code, not sure if destructuring is available on JSP.

Re: JScript Panel script discussion/help

Reply #958
thank you ! it works like a charm and is incredibly easy to use !

Re: JScript Panel script discussion/help

Reply #959
i'm coming back on the destructuring topic. Yes, it's not available on JSP and i used the following way to handle this :
Code: [Select]
var data = [];
data = info;

Is that the best way ? i can see some unexpected behaviors and i'm not sure what i did was right.
thanks !

Re: JScript Panel script discussion/help

Reply #960
i'm coming back on the destructuring topic. Yes, it's not available on JSP and i used the following way to handle this :
Code: [Select]
var data = [];
data = info;

Is that the best way ? i can see some unexpected behaviors and i'm not sure what i did was right.
thanks !
Nop, because you are overwriting the [] reference with info's reference.
When you assign Arrays [] and objects {} to a variable, you are only storing the reference.
Code: [Select]
a = [3, 4];
a does not contain [3,4], but only points to that thing.
So when you do
Code: [Select]
b = a;
b[0] = 1;

In fact you have changed the original array to [1, 4]. And both a and b variables point to the same array.

In jsp you should be able to do something like
Code: [Select]
const data = JSON.parse(JSON.stringify(info));
You can also manually copy every item:
Code: [Select]
const data = info.map(function(a) {return a;}); // This works because it's an array
etc.

Re: JScript Panel script discussion/help

Reply #961
Even better is not passing the array at all. Just send a name only and get the other panels to update themselves.

But even that shouldn't be necessary. It's hard to see why you'd need it given the built in callbacks for any playlist manager type scripts to update themselves when playlists are renamed/added/removed in other panels.

Re: JScript Panel script discussion/help

Reply #962
thanks, my playlist example was just an easy example, i'll eventually send arrays of artists/composers ... with the associated # of occurences/songs.
@Regor : thanks, the var data = JSON.parse(JSON.stringify(info)); works !

Re: JScript Panel script discussion/help

Reply #963
Yo two questions about JS Playlist on JS Script 3.0.14 and Foobar2000 1.6.14. 
 
1) Why playlist custom background image not work https://i.imgur.com/SxCg0DZ.png https://i.imgur.com/kVuoxl9.png (works with album and artist option, just not with default image, tried different formats for the image path and nothing). 
 
2) How to change fonts in the playlist view (CollumsUI and DefaultUI methods listed at https://jscript-panel.github.io/gallery/jsplaylist/ not work, as in, the option to change the fonts for "JSScript" or something similar doesn't exist, and other options don't modify it)

thanks

Edit: for problem #2, I can change font and font size for JS Playlist though common list items in the ColumnsUI setting, but I can't choose different versions of a font (like black or italics).

Re: JScript Panel script discussion/help

Reply #964
1) currently, it only supports paths relative to the foobar2000 profile folder. The next release will be updated to support absolute paths.

2) https://hydrogenaud.io/index.php/topic,110499.msg1020722.html#msg1020722

edit: I forgot to mention the JS Playlist code only extracts the name from the font returned by window.GetFontCUI / window.GetFontDUI so other properties like italic are ignored. I'll look at adding some notes to make this clearer.

Re: JScript Panel script discussion/help

Reply #965
Thanks for the reply, I guess I'll learn some JS on youtube as code is black magic to me. Also the background feature still doesn't work even with images in Users\currentuser\AppData\Roaming\Foobar2000, so I'll just use the default playlist and try again when 2.0 releases a stable version an I can use the updated component.

Re: JScript Panel script discussion/help

Reply #966
Any image inside the profile folder should definitely work with the current version. This fb2k logo is bundled with the component and works fine...

Code: [Select]
user-components\foo_jscript_panel3\samples\images\foobar2000.png






Re: JScript Panel script discussion/help

Reply #967
Hello,

I searched this subforum since it's jscript-panel-related, but I also googled elsewhere, but I wasn't able to find a solution for the following minor inconvenience: The tooltip fontsize of jscript panel elements are pretty large in comparison to Windows' native tooltip fontsize and I'd like to reduce them to match the other fontsizes.


Re: JScript Panel script discussion/help

Reply #968
better image of what I mean (can't edit original post, sorry):

(offtopic) by the way I managed to get a button to work that changes depending on state (active,inactive,hoveronactive,hoveroninactive). Thanks to the awesome people in this forum.


Re: JScript Panel script discussion/help

Reply #970
Thank you. However, it spits out the following error message:
Code: [Select]
JScript Panel v2.3.6.1 (Volume by marc2003)
Laufzeitfehler in JavaScript:
Das Objekt unterstützt die Eigenschaft oder Methode "SetTooltipFont" nicht
File: <main>
Line: 9, Col: 1
Runtime error in JavaScript:
The object does not support the property or method "SetTooltipFont".

This is the code I'm using for one of my jscript panels:
Code: [Select]
// ==PREPROCESSOR==
// @name "Volume"
// @author "marc2003"
// @import "%fb2k_component_path%samples\complete\js\lodash.min.js"
// @import "%fb2k_component_path%samples\complete\js\helpers.js"
// @import "%fb2k_component_path%samples\complete\js\volume.js"
// ==/PREPROCESSOR==

window.SetTooltipFont("IBM Plex Serif", 12);

var volume = new _.volume(0, 0, 0, 0);
//volume.c1 = _.RGB(238, 238, 238);
volume.c1 = _.RGB(108, 144, 116);
volume.c2 = _.RGB(118, 158, 127);

function on_size() {
volume.w = window.Width;
volume.h = window.Height;
}

function on_paint(gr) {
gr.FillSolidRect(volume.x, volume.y, volume.w, volume.h, volume.c1);
gr.FillSolidRect(volume.x, volume.y, volume.pos(), volume.h, volume.c2);
}

function on_volume_change() {
volume.volume_change();
}

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

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

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

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

By the way this script works only in jscript panel, not in jscript panel 3 So maybe your solution was for jscript panel 3?

Re: JScript Panel script discussion/help

Reply #971
window.SetTooltipFont does exist in JScript Panel 2.4.something. The last release was 2.8.8. Your version 2.3.6.1 is very old.

Upgrading might break something so you could just remove that code and edit samples\complete\js\helpers.js instead.

look for var tooltip = window.CreateTooltip() and replace it with var tooltip = window.CreateTooltip("Segoe UI", 12)

 

Re: JScript Panel script discussion/help

Reply #972
That worked! And I could wonder for a long time why so many scripts I tried didn't work. Because I use a very old version. Darn it! But now it works and, as some english speaking people say, "never touch a running system" and so that will have to do for now as far as customising Foobar is concerned. Thanks again!

Re: JScript Panel script discussion/help

Reply #973
Inside your panel, replace the on_paint function with this:

Spoiler (click to show/hide)

Then open js_marc2003\js\volume.js and replace the this.move function with this:
Spoiler (click to show/hide)

and replace the this.pos function with this:

Spoiler (click to show/hide)
It was a bit like walking in circles in a forest where every tree looks the same. Finding the right files to edit is not so easy because there are so many files with exactly the same name stored under different paths.

First I looked for the volume.js file and went to the appdata folder of the "old" Jscript panel (no1, not no3).
So this path:
[...]AppData\Roaming\foobar2000-v2\user-components\foo_jscript_panel\samples\js
Result: error message.   :-\ 

Then I thought maybe it must be the new JScript 3 panel ([...]user-components\foo_jscript_panel3\samples\js), but a similar result again :o
Code: (error message) [Select]
JScript Panel 3.2.2 (Volume by marc2003)
Runtime error in JavaScript
The object does not support the property or method "FillSolidRect".
File: <main>
Line: 31, Col: 2

Then I looked at your forum post again and noticed that there was no marc2003 folder in the paths, so looked further and the jscript rabbit hole lead me to towards a folder within the spider monkey panels main folder ([…]user-components\foo_spider_monkey_panel\samples\complete\js). I wasn't surprised and accepted my error message.
Then, out of desperation I also gave the uie jsplitter panel a try ([…]user-components\foo_uie_jsplitter\samples\js) …aaaand error message again.  :'(

I was about to give up until I noticed that there are several volume.js files in every single dedicated panel main folder. This time I went back to the JScript (numero uno) panel path and found the correct volume.js in a folder called 'complete' (C:\Users\%username%\AppData\Roaming\foobar2000-v2\foo_jscript_panel\samples\complete\js), which then worked perfectly. Phew! Stupid as a donkey but with my head through the wall it worked after all.  :D

I finally have a rotated or vertical volume bar thanks to your jscript and the awesome community!

Re: JScript Panel script discussion/help

Reply #974
The exact paths for your particular component version/script are right there in the snippet you posted earlier...

This is the code I'm using for one of my jscript panels:
Code: [Select]
// ==PREPROCESSOR==
// @name "Volume"
// @author "marc2003"
// @import "%fb2k_component_path%samples\complete\js\lodash.min.js"
// @import "%fb2k_component_path%samples\complete\js\helpers.js"
// @import "%fb2k_component_path%samples\complete\js\volume.js"
// ==/PREPROCESSOR==