Skip to main content
Topic: JScript Panel script discussion/help (Read 68704 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: JScript Panel script discussion/help

Reply #700
I haven't looked at that code, but I assume it was doing something similar to:
Code: [Select]
setInterval(function () {
    if (fb.IsPlaying) window.Repaint();
},1000);
That's fine and will obviously work, but the callback is a much cleaner and more accurate way to do it and will have less wasted repaints (which are probably trivial in most cases/themes, but a full repaint for me can take 30-40ms).

It does that, save for more tests in the "if" and "150" instead of the "1000" in your example. I assume that's milliseconds, and that the smaller interval is needed for smoothly animating the moving seek button.

I'll keep the callback in mind for when I rewrite my scripts. Thanks for the lesson!

Re: JScript Panel script discussion/help

Reply #701
Well you do bring up an interesting point. If you've just got a time counter (which appeared to be what @firewater was doing) then on_playback_time is what you want to use. If you're trying to animate a progress bar, you very well might want to update it more frequently.

I actually do just this in my script, and I figured it would be cool to smoothly fill the progress bar 1 pixel at a time (if possible). In on_playback_new_track() I call a function I wrote called SetProgressBarRefresh():

Code: [Select]
function SetProgressBarRefresh()
{
if (fb.PlaybackLength > 0) {
        t_interval = Math.abs(Math.ceil(1000/(progressBarWidth/fb.PlaybackLength))); // we want to update the progress bar for every pixel so divide total time by number of pixels in progress bar
        if (t_interval < 25) {
            t_interval = 25;   // if interval is too low your refreshes can stack up. Refreshing 40x a second max seems reasonable
        }

if (showDebugTiming)
console.log("Progress bar will update every " + t_interval + "ms or " + 1000/t_interval + " times per second.");

timer && window.ClearInterval(timer);
timer = null;
if (!fb.IsPaused) { // only create timer if actually playing
timer = window.SetInterval(function() {
refresh_seekbar();
}, t_interval);
}
}
}

refreshProgressBar() {
    window.RepaintRect(<<exact dimensions of my progressBar so I don't redraw more stuff>>)
}
timer and t_interval are global variables. progressBarWidth is the width of the progress bar I want to fill. I only redraw the progressBar itself because there's a lot of other crap in my jscript panel. If the only thing in your script is a progress bar then who cares... just to windowRepaint().

This isn't complete because you'll need to clear the timer when the playback stops, and also when paused. You'd also need to call SetProgressBarRefresh in on_size() and when unpausing. There's probably some more stuff too, but that's how I do it. Obviously the draw code is up to you, but Math.floor(progressBarLength * fb.PlaybackTime / fb.PlaybackLength) is the way to calculate the number of pixels of your progressbar to fill.

Re: JScript Panel script discussion/help

Reply #702
Math.floor(progressBarLength * fb.PlaybackTime / fb.PlaybackLength) is the way to calculate the number of pixels of your progressbar to fill.

It's Math.ceil in the posted code. Is that what you meant?

I've added your post to my samples/notes library for future use. Thanks for another lesson.

Re: JScript Panel script discussion/help

Reply #703
Well when calculating the interval between refreshes I probably wanted the number to be bigger rather than smaller so that when the interval elapsed you could be sure it was always adding at least one to the fill.

Math.floor rounds down, Math.ceil rounds up, and Math.round roundest to the nearest. When actually drawing a progress bar you probably want to always round one direction or the other, but it doesn't really matter which.


Re: JScript Panel script discussion/help

Reply #705
Does a Coverflow script for newest JScript Panel exist? The only script I found is: https://br3tt.deviantart.com/art/WSH-CoverFlow-290788027 by Br3tt on Deviantart, but this is only for the old WSH panel mod.

it is necessary to replace window.GetColor by window.GetColour
Code: [Select]
    if(g_instancetype == 0) { // CUI
        g_textcolor = window.GetColourCUI(ColorTypeCUI.text);
        g_textcolor_sel = window.GetColourCUI(ColorTypeCUI.selection_text);
        g_textcolor_hl = window.GetColourCUI(ColorTypeCUI.active_item_frame);
        g_backcolor = window.GetColourCUI(ColorTypeCUI.background);
        g_backcolor_sel = window.GetColourCUI(ColorTypeCUI.selection_background);
    } else if(g_instancetype == 1) { // DUI
        g_textcolor = window.GetColourDUI(ColorTypeDUI.text);
        g_textcolor_sel = window.GetColourDUI(ColorTypeDUI.selection);
        g_textcolor_hl = window.GetColourDUI(ColorTypeDUI.highlight);
        g_backcolor = window.GetColourDUI(ColorTypeDUI.background);
        g_backcolor_sel = g_textcolor_sel;
    };

and replace fb.IsAutoPlaylist by plman.IsAutoPlaylist
Code: [Select]
    _child01.AppendMenuItem((plman.IsAutoPlaylist(panel.active_playlist))?MF_DISABLED|MF_GRAYED:MF_STRING, 1000, "Remove");
    _child02.AppendTo(_child01, MF_STRING, "Add to...");

    _child02.AppendMenuItem(MF_STRING, 2000, "a New playlist...");
    _child02.AppendMenuItem(MF_SEPARATOR, 0, "");
    var pl_count = fb.PlaylistCount;
    for(var i=0;i<pl_count;i++) {
        if(i!=panel.active_playlist && !plman.IsAutoPlaylist(i)) {       
            _child02.AppendMenuItem(MF_STRING, 2001+i, plman.GetPlaylistName(i));
        };
    };
      
I.m. UR5EQF

Re: JScript Panel script discussion/help

Reply #706
Works, thanks!

Re: JScript Panel script discussion/help

Reply #707
what about "EnableMenuItem(id_or_pos, enable, bypos = false)" in jscript panel. Can not find.
I.m. UR5EQF


Re: JScript Panel script discussion/help

Reply #709
why ....
TheQwertiest, thanks
I.m. UR5EQF

Re: JScript Panel script discussion/help

Reply #710
marc2k3, is it possible to return EnableMenuItem
I.m. UR5EQF

Re: JScript Panel script discussion/help

Reply #711
marc2k3, is it possible to return EnableMenuItem
There's no need for EnableMenuItem, and it was rightly removed.

Replace your EnableMenuItem calls with something like this:
Code: [Select]
_menu.AppendMenuItem(pref.displayArt ? MF_STRING : MF_DISABLED, 5, 'Display Album Art');

Re: JScript Panel script discussion/help

Reply #712
marc2k3, is it possible to return EnableMenuItem
There's no need for EnableMenuItem, and it was rightly removed.

Replace your EnableMenuItem calls with something like this:
Code: [Select]
_menu.AppendMenuItem(pref.displayArt ? MF_STRING : MF_DISABLED, 5, 'Display Album Art');

I know that.
I understand if new functions are added that give new opportunities.
but why remove the old convenient features.
I do not understand
I.m. UR5EQF

Re: JScript Panel script discussion/help

Reply #713
I know that.
I understand if new functions are added that give new opportunities.
but why remove the old convenient features.
I do not understand
Because it is not really 'convenient', but rather useless. EnableMenuItem would be only useful if the menu could be kept open after clicking on it (i.e. dynamically update a currently open menu), which is not possible in JScript anyway. It would be a different case, if there was some unique functionality that is only available through EnableMenuItem, but all of it's functionality is available through AppendMenuItem flags.

In the old wsh_panel component there were quite a few methods with duplicated functionality, which made scripting interface unnecessary bloated. Removing them allows for easier component development and maintenance.

PS: And I abhor the 'Microsoft' way - indefinite support of the deprecated functionality, which causes a lot of their API to be over-complicated because of the compatibility reasons.

Re: JScript Panel script discussion/help

Reply #714
Hi,

With the latest jscript panel release, there is a new dodragDrop functionality, which is great, now we can do drag and drop between jscript panels (for the moment, you can't do drag and drop within the same panel and outside the panel at the same time, you have to choose between both actions, but it's the only flaw)

My issue is that an empty semi-transparent rectangle is drawn while dragging tracks next to the mouse pointer, it look a little bit buggy (on windows, this rectangle contain a preview of the dragged content, for ex file icons, but here the rectangle is just empty), is there a way to remove this rectangle ?



Re: JScript Panel script discussion/help

Reply #715
for the moment, you can't do drag and drop within the same panel and outside the panel at the same time, you have to choose between both actions, but it's the only flaw
Well, that is not really true, since in my playlist script I'm using drag-n-drop API for both actions =)
I.e. you just have to implement it correctly :P

My issue is that an empty semi-transparent rectangle is drawn while dragging tracks next to the mouse pointer, it look a little bit buggy (on windows, this rectangle contain a preview of the dragged content, for ex file icons, but here the rectangle is just empty), is there a way to remove this rectangle ?
Currently, image for dragging is generated by fb2k interface itself, so this is the intended behaviour of JScript (the square does not look as ugly on my system though (Win7/Win10), it is also quite weird that you don't have a cursor displayed in that drag). I will try to investigate if it's possible to make it prettier (e.g. like CUI playlist) and in case of success will present the results to @marc2003 for approval.

[EDIT] Darn, if we want to change the drag image, the whole image must be generated manually (aero/glass effects and all)...
[EDIT2] Hm, I think it's possible to add the text to that rectangle without much hassle...

Re: JScript Panel script discussion/help

Reply #716
Well, that is not really true, since in my playlist script I'm using drag-n-drop API for both actions =)
I.e. you just have to implement it correctly :P

Do you have a link to this playlist script, so i can look to the code ? I tried to download and install CaTRoX_QWR from the link in your signature, but i didn't find any external drag and drop.
Currently, the best i'm able to do is to do an internal drag and drop by default, and switch to an external drag and drop when the cursor goes out of the panel limits. But i can't switch back to a internal drag and drop if i move the cursor back into the panel

Re: JScript Panel script discussion/help

Reply #717
Currently, image for dragging is generated by fb2k interface itself, so this is the intended behaviour of JScript (the square does not look as ugly on my system though (Win7/Win10), it is also quite weird that you don't have a cursor displayed in that drag). I will try to investigate if it's possible to make it prettier (e.g. like CUI playlist) and in case of success will present the results to @marc2003 for approval.

Thanks for taking a look! About the cursor, it's just because my screen capture tool doesn't show the cursor. The cursor is there

Re: JScript Panel script discussion/help

Reply #718
Do you have a link to this playlist script, so i can look to the code ? I tried to download and install CaTRoX_QWR from the link in your signature, but i didn't find any external drag and drop.
Currently, the best i'm able to do is to do an internal drag and drop by default, and switch to an external drag and drop when the cursor goes out of the panel limits. But i can't switch back to a internal drag and drop if i move the cursor back into the panel
I have yet to release the updated theme (since I'm waiting for @WilB :P), but you can get it manually from git:
 - Download repo as zip.
 - Extract themes folder content to ...\foobar2000\themes\CaTRoX\ (e.g. CaTRoX_QWR\theme\Scripts > ...\foobar2000\themes\CaTRoX\Scripts)
 - Import .fcl.

All the relevant drag-n-drop code is in Playlist script (https://github.com/TheQwertiest/CaTRoX_QWR/blob/master/theme/Scripts/Panel_Playlist.js):
https://github.com/TheQwertiest/CaTRoX_QWR/blob/a1be1e922542193ba7ca0cf9cbf17535f9adfe63/theme/Scripts/Panel_Playlist.js#L938
https://github.com/TheQwertiest/CaTRoX_QWR/blob/a1be1e922542193ba7ca0cf9cbf17535f9adfe63/theme/Scripts/Panel_Playlist.js#L961
https://github.com/TheQwertiest/CaTRoX_QWR/blob/a1be1e922542193ba7ca0cf9cbf17535f9adfe63/theme/Scripts/Panel_Playlist.js#L973
https://github.com/TheQwertiest/CaTRoX_QWR/blob/a1be1e922542193ba7ca0cf9cbf17535f9adfe63/theme/Scripts/Panel_Playlist.js#L1017

Re: JScript Panel script discussion/help

Reply #719
To anyone using IntelliJ WebStorm, IDEA or Visual Studio Code to create/edit scripts:
I've updated JSDoc'd version of JScript's interface.txt, which can be used as a plugin/library in WebStorm/IDEA/VisualCode.
This will remove most of 'undefined symbol' warnings and will also provide some type checks when using JScript interface.

Instructions:
  • Download all files from >>git<< and put them in some folder.
    • IntelliJ: File > Settings > Languages > JavaScript > Libraries > Add... > + > Attach Directories... > Choose folder from the previous step
    • Visual Studio Code: instructions

Re: JScript Panel script discussion/help

Reply #720
[EDIT] Darn, if we want to change the drag image, the whole image must be generated manually (aero/glass effects and all)...
[EDIT2] Hm, I think it's possible to add the text to that rectangle without much hassle...

Hi again,
So in the end, you didn't manage to find a way to remove this rectangle, or replace it with something which would make more sense ? Generating a gdi.Image for each drag and drop is completely fine, then it's up to the coder to do something which look nice/is useful in term of UI.

(About the drag and drop inside a panel / outside a panel, i managed to install your catrox theme, and yes, your code do what i'm trying to achieve in term of behavior, so i'm convinced now : ) i need to clean up my drag and drop code to make it work like yours.)

Re: JScript Panel script discussion/help

Reply #721
I am newbie to Jscript Panel so I have some questions:
1. I want to create a panel that will run external program (Spek) in that panel, and spek will show the spectrogram of file which is playing? Can I do it?
2. I am searching spectrogram seekbar and after lurking around I find that JScript Panel can create that. Can anyone help me to do that...

Thank you. Sorry for my bad English, it's not my native language

Re: JScript Panel script discussion/help

Reply #722
Apparently I was on a very old version 1.3.0 and decided to update just now. Unfortunately a ton of scripts in my skin broke. I fixed some errors regarding fb.trace and getcolorcui replacements but this one I can't beat:
Code: [Select]
Error: JScript Panel v2.1.0.2 (track info + seekbar + buttons by marc2003)
Microsoft JScript runtime error:
Object doesn't support this property or method
File: C:\Users\3\AppData\Roaming\foobar2000\js_marc2003\js\panel.js
Line: 65, Col: 5
<source text only available at compile time>


which is    if (font) {

Please help  :(

Re: JScript Panel script discussion/help

Reply #723
Apparently I was on a very old version 1.3.0 and decided to update just now. Unfortunately a ton of scripts in my skin broke. I fixed some errors regarding fb.trace and getcolorcui replacements but this one I can't beat:
Those scripts have been updated by marc. The one you want is located in: %appdata%\foobar2000\user-components\foo_jscript_panel\samples\complete\js\panel.js

Use that instead of the one you have installed to that location.

Re: JScript Panel script discussion/help

Reply #724
To anyone using IntelliJ WebStorm, IDEA or Visual Studio Code to create/edit scripts:
I've updated JSDoc'd version of JScript's interface.txt, which can be used as a plugin/library in WebStorm/IDEA/VisualCode.
This will remove most of 'undefined symbol' warnings and will also provide some type checks when using JScript interface.

Instructions:
  • Download all files from >>git<< and put them in some folder.
    • IntelliJ: File > Settings > Languages > JavaScript > Libraries > Add... > + > Attach Directories... > Choose folder from the previous step
    • Visual Studio Code: instructions

You are doing god's work, my friend. Thank you so much.

 
SimplePortal 1.0.0 RC1 © 2008-2018