Skip to main content
Topic: Hover popup component (Read 947 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Hover popup component

Hi guys, is there a component that would do the following ?

When cursor hovers over any song's title in Playlist View for more than x seconds, display a text pop-up (close to the cursor and following it if it moves within the same song).
The pop-up would contain some titleformatted info about that song (can be the contents of a specific tag field for instance).
That way we wouldn't have to open the Properties dialog.

No song would be playing at any time, it would be just hovering and displaying.

Thanks in advance.

Re: Hover popup component

Reply #1
You'll need to use ELplaylist to be able to do that. It has a popup feature included. I'm not aware of any separate component that does that for playlist view.

Re: Hover popup component

Reply #2
Columns UI playlist viewer also has tooltips for clipped text.

But if its so important data, that can still fit inside a tooltip, why not make it part of your playlist viewer as separate columns?

If it's a tag you are personally maintaining, having to hover over them each sounds fairly bothersome to me, which in turn means those tags are exposed less, leading to tagging mistakes cropping up more often.

Re: Hover popup component

Reply #3
Thanks for your help.

But if its so important data, that can still fit inside a tooltip, why not make it part of your playlist viewer as separate columns?
Because I'm thinking of a particular tag field that contains several lines of text (sometimes more than 5000 char). That will never fit inside a column, but it could fit inside a dynamically-resized tooltip, right ?

Re: Hover popup component

Reply #4
PS : I'm currently using DUI + EsPlaylist.

Re: Hover popup component

Reply #5
OK, how about this backup plan then ?
" f I hit a given keyboard shortcut, a text component pops up and displays the contents of a given tag field. "
Does that exist ?

My research has shown a deprecated/crashware foo_popupplus component, but nothing else since then. @jazzthieve ? @Daeron ?

Re: Hover popup component

Reply #6
Perhaps (seems to be Columns UI only):
https://www.foobar2000.org/components/view/foo_popup_panels

Or have you tried ELplaylist, as jazzthieve suggested?

Or if you let go of the hover/popup criteria, there are many options to display the contents of a tag in a panel. Things like the base panels in DUI/CUI (I think named something like Selection properties/item details/item properties) or their equivalent written in JScript/Spider Monkey panel. Either of those could follow the currently selected track instead of the now playing one. If you are concerned about not having the panel visible all the time, maybe you can combine it with something like Panel Stack Splitter toggle buttons or the auto-hide feature in CUI when not hovered.

Re: Hover popup component

Reply #7
You're right, I should try ELplaylist (currently I'm using EsPlaylist).
However, I'll stick with DUI, not CUI.

Displaying tag contents in a fixed panel is what I do already with the standard text component. It takes too much space in my UI. That's why I'd like to make that panel disappear, and only invoke it with a keyboard shortcut. :)

Re: Hover popup component

Reply #8
You can use foo_title for a playing popup, with a bit of custom XML (see the documentation). Not anymore difficult than title formatting. It has a toggle / peek menu option.

Probable issues for your scenario - I think has to be the playing track, not selected. And I'm not actually sure if it can wrap text either(?) - never tried it with a large comment field.

(It works great as a customizable 'Now Playing' popup though (album art too!), and I hope TheQwertiest gets back into it one day. :) )

Cheers

Re: Hover popup component

Reply #9
Thanks :) Damn, that looks really complicated ! Plus for me it really needs to work on the selected track, NOT on the playing track.
I guess foobar is really missing such a simple component : shortcut --> shows component --> shortcut again --> hides component.
Maybe the Text Display component could be modified someday to act as a pop-up. But being an old foobar user, I wouldn't raise any hopes for any dev adding a requested feature to a component of his own, when it differs ever-so-slightly from his original intent. That happens once in a million or so, lol.

Re: Hover popup component

Reply #10
OK, how about this backup plan then ?
" f I hit a given keyboard shortcut, a text component pops up and displays the contents of a given tag field. "
Does that exist ?

My research has shown a deprecated/crashware foo_popupplus component, but nothing else since then. @jazzthieve ? @Daeron ?

Using SpiderMonkey Panel here is an example:
Code: [Select]
"use strict";

function on_main_menu(index) {
    switch (index) {
    case 1:
        let tfo1 = fb.TitleFormat("%comment%"); //define the field you want the text to get displayed
        let tfo2 = fb.TitleFormat("%artist% - %title%");
        fb.ShowPopupMessage(tfo1.EvalWithMetadb(fb.GetFocusItem()),tfo2.EvalWithMetadb(fb.GetFocusItem()));
        break;
    }
}

Bind the shortcut you want to menu entry  File / Spider Monkey Panel / 1

Re: Hover popup component

Reply #11
Thank you @zeremy ! That worked beautifully !! :D
It's really close to what I was expecting to achieve, so problem solved for me.
Questions :
1. How can I change the font inside the panel ? I'd like to have the same font as in the rest of foobar (Segoe UI, 12 pt).
2. Can the panel itself be resized ? (width, height)

Thanks again !

Re: Hover popup component

Reply #12
With the fb.ShowPopupMessage method you cannot define font or window size position.
(it is a generic nonmodal noninteractive dialog with a text message.)

The utils.ShowHtmlDialog method has more options if you are up to coding html and css styles.
You can find a sample in the components samples directory

You can access the documentation for SMP by right clicking the SpiderMonkey panel and selecting Open documentation.

Re: Hover popup component

Reply #13
You can find a sample in the components samples directory
But where ? I have searched the "showpopup" text in all txt files in the "samples\complete" directory and I have found nothing.

Re: Hover popup component

Reply #14
But where ? I have searched the "showpopup" text in all txt files in the "samples\complete" directory and I have found nothing.
zeremy was talking about utils.ShowHtmlDialog (with corresponding sample being `basic\HtmlDialogWithCheckBox.js`). fb.ShowPopupMessage is simple enough to not require any samples.

Re: Hover popup component

Reply #15
OMG, I'm really too tired today ! lol. Sorry, my bad. I'll check it out.

 

Re: Hover popup component

Reply #16
OK guys, I have tried, but that part is beyond me. I'm not a coder and I know nothing about js.
Just a little bit (very basic) about html and css, no more.

In zeremy's script, there's this line :
fb.ShowPopupMessage(tfo1.EvalWithMetadb(fb.GetFocusItem()),tfo2.EvalWithMetadb(fb.GetFocusItem()));

In HtmlDialogWithCheckBox.js, there's this line :
utils.ShowHtmlDialog(window.ID, htmlCode, {
    data: ['Html Window', 'This is an HTML notification window with a check box\n', '< Click me', window_ok_callback],           
    });

I have no idea on how replace the first with the second.
I thought it would be easier (some kind of line with definable things such as font, width, height...)
I thought it would be an easy switch, but poor little me sees nothing like that.

The only thing I wanted was to set the font as Segoe UI, 12pt. Nothing more : default colors and everything.
Sure, being able to change the pop-up's width & height would be great, but it's too complicated I'll just let go.
You guys can do it, but I can't, sorry.

Re: Hover popup component

Reply #17
Try this.

Code: [Select]
'use strict';

function on_main_menu(index) {
    switch (index) {
    case 1:
        let tfo1 = fb.TitleFormat("%comment%"); //define the field you want the text to get displayed
        let window_x = 50; //define window x position
        let window_y = 50; //define window y position
        let window_w = 500; //define window width
        let window_h = 600; //define window height
       
        let tfo2 = fb.TitleFormat("%filename_ext%");
               
        let html_data= "";
        html_data += "<html>";
        html_data += "<head>";
        html_data += "<title>" + tfo2.EvalWithMetadb(fb.GetFocusItem()) + "</title>";
        html_data += "<style rel=\"stylesheet\" type=\"text/css\">";
        html_data += "body {font-family: Segoe UI; font-size: 16px;}";
        html_data += "</style>";
        html_data += "</head>";
        html_data += "<body>";
        html_data += tfo1.EvalWithMetadb(fb.GetFocusItem()).replace(/(?:\r\n|\r|\n)/g, '<br>');
        html_data += "</body>";
        html_data += "</html>";
       
        utils.ShowHtmlDialog(window.id, html_data,{x:window_x,y:window_y,width:window_w,height:window_h,resizable:true,scroll:true});
        break;
    }
}

Re: Hover popup component

Reply #18
Wow @zeremy , you save the day again ! :o Thank you very much.
Your code works perfectly.
Sorry for not having better coding skills. To each his own :)

For future readers, the %filename_ext% can be replaced by any titleformat expression, and corresponds to the pop-up title.
I hope more people can benefit from this, because I think it can be a great use of foobar for some people (shortcut + pop-up for various things).

I guess we can say "Topic closed" or "Solved" ! Yay !

 
SimplePortal 1.0.0 RC1 © 2008-2019