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: Spider Monkey Panel (foo_spider_monkey_panel) (Read 215880 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1225
I'm trying to modify sample script with the context menu button - I made the context menu appear on hover, but is there a way to hide it when I stop hovering over the button?
You will notice even the native foobar buttons/menus don't work while there is a menu open. The entire UI waits tracking the menu. There is no way to change it, unless the actual SMP code is changed.

Only the main menus work different (hovering as you said), but they hide when you hover over other main menu. If you move the mouse over other buttons or UI elements the menu remains there.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1226
I'm trying to modify sample script with the context menu button - I made the context menu appear on hover, but is there a way to hide it when I stop hovering over the button?
You will notice even the native foobar buttons/menus don't work while there is a menu open. The entire UI waits tracking the menu. There is no way to change it, unless the actual SMP code is changed.

Only the main menus work different (hovering as you said), but they hide when you hover over other main menu. If you move the mouse over other buttons or UI elements the menu remains there.
Ah, that's unfortunate, thank you very much for your reply.

Anyway, I've been studying javascript and now after 15 years of dreaming to modify foobar2000 myself I've started meddling with sample scripts. So I hope someone will be able to assist me in my newbie issues.

1 - I'm trying to create a general track info panel by combining several samples, for example TrackInfo Follows Cursor and Rating.
In rating component there's ability to switch between follow playback and follow cursor.

in the included file panel.js there's a function

Code: [Select]
function _panel(custom_background = false) {
this.item_focus_change = () => {
if (this.metadb_func) {
if (this.selection.value == 0) {
this.metadb = fb.IsPlaying ? fb.GetNowPlaying() : fb.GetFocusItem();
} else {
this.metadb = fb.GetFocusItem();
}
on_metadb_changed();
if (!this.metadb) {
_tt('');
}
}
}

I don't see where and how the result is stored in the rating sample script so I am having issues assigning handle to a customizable option (from general track info - let handle = fb.GetFocusItem();)

2 - in sample custom context menu how can I modified stuff so that there's a specific area where I want to click (hover, actually, but oh well) which acts as a button.

Code: [Select]
    gr.DrawImage(img, 340, 200, img.Width, img.Height, 0, 0, img.Width, img.Height);
function menu() {
    let _context = fb.CreateContextMenuManager();
    let _basemenu = window.CreatePopupMenu();
    let _child = window.CreatePopupMenu();

    // start index at 1, NOT 0
    _basemenu.AppendMenuItem(MF_STRING, 1, "Open facets");
    _basemenu.AppendMenuItem(MF_STRING, 2, 'item2');
    if (fb.GetNowPlaying()) {
        _child.AppendTo(_basemenu, MF_STRING, 'Now Playing');
    }
   
    _context.InitNowPlaying();
    _context.BuildMenu(_child, 3);

    const idx = _basemenu.TrackPopupMenu(1, 4);
   
    switch (idx) {
        case 0: //user dismissed menu by clicking elsewhere.
            break;
        case 1:
            fb.RunMainMenuCommand("Library/Facets");
            break;
        case 2:
            fb.ShowPopupMessage('OK, item2 is clicked.');
            break;
        default:
            _context.ExecuteByID(idx - 3);
            break;
}}

function on_mouse_lbtn_up(x, y) {
    if (x > 350 && x < 370 && y > 200 && y < 240) {
        menu();
    }
    rating.lbtn_up(x, y);
}
How do I make the context menu open at specific coordinates? Right now it opens at 0,0.

3 - how can I add an onclick function to a simple text line?    like on this one gr.GdiDrawText("foobar2000", gdi.Font('Product Sans', 36, 1), RGB(245,245,245), 0, 0, window.Width, 30, DT_VCENTER | DT_CENTER | DT_END_ELLIPSIS | DT_CALCRECT | DT_NOPREFIX);

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1227
3 is not possible. You are expecting browser behavior here, adding event listeners to any object (like html items). SMP objects don't work like that.
You draw a string, but there is no string "object" to attach anything to. It's just a UI cosmetic thing.

You would need to calculate the position of the string, width, height, etc. and then associate a event listener to that spatial position. It's the same for any item you consider. There is no buit-in object-like instances of items. If at any point the spatial position changes, you have to re-adjust the event listener.

Developers usually code from scratch having this in mind, creating things which track their  own position to make their life easier. You may find such examples in more complex scripts: for ex. my world map script and how countries are associated to clickable points in a map. Or any of the playlists/album list managers. The item list is internally tracked, so somewhere X = 5 and y= 30 is associate to item 1, but there is no way to to retrieve a item by its position unless you code it by yourself.

For strings is a bit trickier as soon as you add flags like center or vcenter, since you have to calculate the position relative to the total width / height.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1228
2. check this:
https://github.com/regorxxx/Profiler-SMP

That UI is the more simple thing you can find in a real tool, and surely it will answer your doubts. 4 "buttons", 4 areas on UI to click. Look for 'on_mouse_lbtn_up' (for the click) and 'on_mouse_move' (for the tooltip).

 

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1229
1. Did not create those samples and don't really want to take a deep look at them... but the selection mode is set according to "this.selection.value". When it's zero uses playback (and fallbacks to cursor if nothing plays), otherwise uses cursor.

This.selection refers to a variable within _panel function. I suppose at some point this.selection is saved at the properties of the panel (to maintain the config on different sessions).

This.handle does the same.

So if you want to access this.handle outside _panel.... just point to "panel.handle". I say "panel" but there should be an actual variable name at the main sample script. The SMP samples use helpers multiple times, so _panel is used in multiple scripts, and every one calls it on the main js file. The constructor is named _panel, and the instance will probably be panel. Check it.

Not sure if those are your doubts (?)

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1230
Thanks regor! Those 3 issues are dealt with :)

Some more, maybe someone can point me to existing scripts or methods which can help me...



1 - is there a way to have words wrap?
2 - tooltips in jscript panel 3 follow my dark theme while SMP shows light tooltips - how to fix?
3 - same with SimpleThemedButton sample - the buttons are white and don't follow CUI dark settings, judging by the code they are supposed to.


I started working on my custom menu - is it possible to add icons next to the text? or maybe replace the context menu completely and have another panel open... I can do it in browser JS and CSS but alas not in SMP  :))

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1231
1. Do you mean...? The quiet things that.... -> The quiet things \newline that sound....
Nope. Well you use this: https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/GdiGraphics.html#EstimateLineWrap
For a desired width, then you draw each string manually.

2. No fix. SMP is in need of updating since months XD (for multiple bugs, dark theme support, x64 support...). Not saying is not stable, just that there have been no updates in half a year, V2 has been released meanwhile, dark theme support and a few bugs found since then. There are also some long term bugs not resolved.

3. The buttons don't follow CUI settings, but system settings. But not necessarily in the way you expect. Buttons fill color is not the same than the theme color. In my scripts you can find and alternative buttons framework which allows to paint buttons without background matching the CUI colors on the toolbar (or the background of the panel). Or you can simply set the background color. You may be interested on that. I did it since WINE systems don't work properly with the theme-manager thing from the samples, but it applies now too to dark themes...

4. No. You can add a character which looks like an icon (a heart for ex). Look for ASCII codes. That's all. But you are limited to the font used by the menu.

SMP is not currently able to open new panels. You can open an HTML popup which probably does what you want.
https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/utils.html#.ShowHtmlDialog
And that requires standard CSS and JS coding.

You may also be able to open a new panel with this:
https://github.com/ttsping/foo_flowin
Calling within SMP the main menus which open the flowin panel, and you could put there another script which interacts with the first one. It's on my todo list to try for some fancy scripts, but not currently on the mood.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1232
1. Do you mean...? The quiet things that.... -> The quiet things \newline that sound....
Nope. Well you use this: https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/GdiGraphics.html#EstimateLineWrap
For a desired width, then you draw each string manually.

2. No fix. SMP is in need of updating since months XD (for multiple bugs, dark theme support, x64 support...). Not saying is not stable, just that there have been no updates in half a year, V2 has been released meanwhile, dark theme support and a few bugs found since then. There are also some long term bugs not resolved.

3. The buttons don't follow CUI settings, but system settings. But not necessarily in the way you expect. Buttons fill color is not the same than the theme color. In my scripts you can find and alternative buttons framework which allows to paint buttons without background matching the CUI colors on the toolbar (or the background of the panel). Or you can simply set the background color. You may be interested on that. I did it since WINE systems don't work properly with the theme-manager thing from the samples, but it applies now too to dark themes...

4. No. You can add a character which looks like an icon (a heart for ex). Look for ASCII codes. That's all. But you are limited to the font used by the menu.

SMP is not currently able to open new panels. You can open an HTML popup which probably does what you want.
https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/utils.html#.ShowHtmlDialog
And that requires standard CSS and JS coding.

You may also be able to open a new panel with this:
https://github.com/ttsping/foo_flowin
Calling within SMP the main menus which open the flowin panel, and you could put there another script which interacts with the first one. It's on my todo list to try for some fancy scripts, but not currently on the mood.
Thank you so much for all your advice! :)
1 - EstimateLineWrap wasn't very easy for me but I did it.

2 - that's what I was wondering about... I am moving away from WSH panels right now and I had to pick what to use. Went with SMP, but JSPanel seems to be maintained better nowadays?
3, 4 - got it, thanks.
5 - considering I won't be able to use SMP methods this HTML window will be useless, so I'll pass.

Instead of it I decided to add another panel and managed to do what I wanted for literally 5+ years - a toggleable stop after queue/stop after current song which displays its state, I'm so proud  :))

Now I want to combine JSPlaylist's mood button with sample last.fm love button (either left/right clicks or maybe just %SMP_loved% to current date), the script in the playlist uses %MOOD% field and puts current time in it. However getTimestamp() which is used in WSHPlaylist.js  (handles.UpdateFileInfoFromJSON(JSON.stringify({"MOOD" : getTimestamp()}));) throws error when I put it elsewhere. Kind of lost at the moment...

Also how do you write SMP commands for these context menu items?
Adding these buttons works easily in standard buttons panel, but just       fb.RunContextCommandWithMetadb("Last.fm/Last.fm Love Track", items); doesn't work with javascript.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1233
If you use JSPlaylist bundled with JScript Panel 3 and my foo_lastfm_playcount_sync component, you can easily love tracks from clicking the mood column.

https://marc2k3.github.io/component/lastfm-playcount-sync/

https://jscript-panel.github.io/gallery/jsplaylist/#loving-tracks-on-lastfm-with-foo_lastfm_playcount_sync

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1234
Quote
Went with SMP, but JSPanel seems to be maintained better nowadays?
Yep. I can't stand not being able to use standard ES6 javascript, so I prefer SMP.  This is also something to consider when you code things meant to be used outside foobar or integrated with standard JS libraries (which require ES6 and missing things in JSP).

But there are multiple examples right now where JSP has been fixed or has superior methods.

There is a catch, though, you need IE9 in JSP. That's a no for me and I care about wine compatibility.

Now I want to combine JSPlaylist's mood button with sample last.fm love button (either left/right clicks or maybe just %SMP_loved% to current date), the script in the playlist uses %MOOD% field and puts current time in it. However getTimestamp() which is used in WSHPlaylist.js  (handles.UpdateFileInfoFromJSON(JSON.stringify({"MOOD" : getTimestamp()}));) throws error when I put it elsewhere. Kind of lost at the moment...

Also how do you write SMP commands for these context menu items?
Adding these buttons works easily in standard buttons panel, but just       fb.RunContextCommandWithMetadb("Last.fm/Last.fm Love Track", items); doesn't work with javascript.
Don't really understand your problem. If getTimeStamp() is not a native JS function, just create one by yourself (?)
https://stackoverflow.com/questions/9756120/how-do-i-get-a-utc-timestamp-in-javascript

WSH and JSP don't share the same methods and functions than SMP. But just rely on native JS, instead of foobar specific functions whenever possible.

Did you read the docs?
https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/fb.html#.RunContextCommand
Quote
8 - flag_view_full. This can be useful if you need to run context commands the user may have hidden using File>Preferences>Display>Context Menu

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1235
Did you read the docs?
https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/fb.html#.RunContextCommand
Quote
8 - flag_view_full. This can be useful if you need to run context commands the user may have hidden using File>Preferences>Display>Context Menu
They aren't available at all in the main menu, only context menu. And in context menus the options are dynamically filled with artist and title, I guess that;s why it doesn't work with JS?

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1236
I love the mental gymnastics on display here:

I can use title formatting to display text in a panel.
I cannot use title formatting to build a string to run a context menu command.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1237
Did you read the docs?
https://theqwertiest.github.io/foo_spider_monkey_panel/assets/generated_files/docs/html/fb.html#.RunContextCommand
Quote
8 - flag_view_full. This can be useful if you need to run context commands the user may have hidden using File>Preferences>Display>Context Menu
They aren't available at all in the main menu, only context menu. And in context menus the options are dynamically filled with artist and title, I guess that;s why it doesn't work with JS?
What he means, without passive-aggressive replies... is that you have to use the proper menu name to call the menu. And if the context menu changes according to track, then change your string. I did not understand your question since you already pointed to what your problem was...

Code: [Select]
"use strict";

const sel = fb.GetSelection();
const tf = fb.TitleFormat('%TITLE%|||$meta(artist,0)');
const [title, artist] = tf.EvalWithMetadb(sel).split('|||');
const menu = 'Last.fm Love track \'' + title + '\' By \'' + artist + '\'';
console.log(menu);
fb.RunContextCommandWithMetadb(menu, sel, 8);

Quote
Last.fm Love track 'Something just like this' By 'The Chainsmokers'
foo_softplaylists: feed downloading: error
foo_softplaylists: failed to love track: authentication failed: empty reply
foo_softplaylists: failed to love track 'Something just like this' by 'The Chainsmokers'

Works fine, there is no problems at all with JS calling dynamic menus.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1238
Thanks, I've tried something like 'Last.fm Love track \'' + %title% + '\' By \'' + %artist% + '\''; which looking back, is not correct lol

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1239
This issue: https://github.com/TheQwertiest/foo_spider_monkey_panel/issues/192

Made me think some common SMP bugs usually appear because every developer is using their own set of helpers and there is not a single place of "knowledge". What about unifying all those helpers into a central repository (classified by usage: file | tags | playlists | etc.)?

Like sometimes I have found a rare bug on my own helpers, and sometime later I see the same coding error on someone's else code, but not going to write every script developer about it. This would be easily managed if there was a central repository of common scripts (and the helpers provided by SMP on install does not suffice).

Is anyone interested? Do we really need like 5 different versions of the isFile helper? XD
I already applied this philosophy on the frameworks though. But this would be a community effort.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1240
I really like this idea and it would help and make life easier for other users too!
Would be cool if @TheQwertiest would make an extra section on SMP and showcase them all.
Also put them in a new .js file in the SMP docs.

-TT

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1241
Is anyone interested? Do we really need like 5 different versions of the isFile helper? XD
I already applied this philosophy on the frameworks though. But this would be a community effort.
Isn't this the problem with JS at-large versus other languages? There's no std library and everybody roles their own thing to handle their own specific use case so there are 31 different flavors of anything you could want. :D

It's not a bad idea, but a lot of us have written our own things in the past and migrating it is almost never worth the hassle when we know how the code works and it's been well tested for years. That's why this kind of generic stuff is unlikely to catch on (unlike components, etc.)

That said, what would be useful to tons of people is a standard UI library for doing stuff in SMP. I got pretty far along with my Material Design one, but then got distracted when I needed to take the next leap to make it easily usable/composable by anyone (still awesome for whipping up quick demos though!). Also since TT's Georgia-Reborn has far surpassed the original in popularity, I don't have a ton of motivation to work on general stuff that it seems only I'd ever take advantage of. This is not a good attitude but I'm busy/lazy.  8)

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1242
It's not a bad idea, but a lot of us have written our own things in the past and migrating it is almost never worth the hassle when we know how the code works and it's been well tested for years. That's why this kind of generic stuff is unlikely to catch on (unlike components, etc.)
As long as people currently coding get involved, it should be pretty easy to migrate. 'The well tested for years', well SMP has been getting more and more updates and helpers from some years are deprecated, have problems in Wine,  don't work on specific OS versions as expected, etc.

Everybody is using either _isFile, or isFile, etc. JS lets you wrap the same function with 5 different names. If we can agree that _isFile should not crash on external and virtual disk sand do X simple task, it would work for everybody.

Obviously other helpers could not be easily replaced without a consensus, but at least this is something. The simple ones are the ones giving problems...

Developers may not care about updating or using them... but at least some of us may simple point them to the files when a bug is found.

In any case agree with your comments.

About the standard libraries... well, I shared a menu framework, a statistics framework with support for multiple graphs, a map framework (which may be used for a world map, but also for a tags map, or whatever), etc. it's just that no one but me is using them XD

I have seen other user creating graphs in JSP, and he started from scratch... so... Already recommended theQwertiest to clearly point on the docs to such libraries, but without that support, any user starting with SMP has no way to look for them.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1243
Side-note regarding isFile and etc: in v2 of SMP I will most likely replace all fs related methods with a module similar to `fs` module in NodeJS (albeit simplified)

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1244
Side-note regarding isFile and etc: in v2 of SMP I will most likely replace all fs related methods with a module similar to `fs` module in NodeJS (albeit simplified)
Hey great to see u again, sorry for filling github with so many reports ;)

Any improvement on file-management will be appreciated.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1245
That said, what would be useful to tons of people is a standard UI library for doing stuff in SMP. I got pretty far along with my Material Design one, but then got distracted when I needed to take the next leap to make it easily usable/composable by anyone (still awesome for whipping up quick demos though!). Also since TT's Georgia-Reborn has far surpassed the original in popularity, I don't have a ton of motivation to work on general stuff that it seems only I'd ever take advantage of. This is not a good attitude but I'm busy/lazy.  8)

Mate, I'm feeling a little bit bad to have "stolen" your motivation and I have kinda knew about it for a long time, actually since not updating your theme :(
But keep in mind, Georgia-ReBORN would have been not possible without your original Georgia theme, so I myself and many other users are grateful.
Btw, I have put your Material Design into good use and made some custom menus ( metadata grid, custom theme ). Since Beta 11, users can create their own themes  8)
So thanks for that!

-TT


Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1246
@MordredKLB,

P.S: I would love if you would work with me and also see Georgia-ReBORN as half as your own.
You know I've invited you on Github and I really don't care about ego, credit, fame, recognition and all this stuff.
I just want to create and use great things and share that experience with other users.
In my opinion that's what open source is all about.

-TT

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1247
Mate, I'm feeling a little bit bad to have "stolen" your motivation and I have kinda knew about it for a long time, actually since not updating your theme :(
But keep in mind, Georgia-ReBORN would have been not possible without your original Georgia theme, so I myself and many other users are grateful.
Btw, I have put your Material Design into good use and made some custom menus ( metadata grid, custom theme ). Since Beta 11, users can create their own themes  8)
So thanks for that!
Haha, don't feel bad! It's just that Georgia fits all of my needs currently (with one big exception of automatic discart downloading that I have to implement at some point) and so adding features for what seems to be mostly non-existent users just feels like making extra work for myself. I think it's awesome what you've done. Also I can't believe you were able to make anything usable out of the Material design ux stuff I shared here so long ago. It was a neat demo, but I didn't think it was far enough along to be easily usable by anyone but me. I'll have to check out the latest beta when I find more of that time I never seem to have enough of.

Re: Spider Monkey Panel (foo_spider_monkey_panel)

Reply #1248
Yea, we need a component ( foo_fanart ) that auto downloads disc art, band logo, label logo and missing album art from fanart.tv
Unfortunately this is beyond my scope as I have no idea how to write a user-component in C++.
I have took a look at the API from fanart.tv and it should be straight forward.
We just need to have options for custom download directories for disc art, band and label logos and album art...

Maybe if we friendly ask @marc2k3 ? He is lately on fire with user-components ;-)

-TT