Topic: NEW: Tooltip and File Info Customization Improvements (Read 15903 times)

Matt · « **on:** July 30, 2019, 11:39:51 am »

In 25.0.87, we've significantly improved the ability to customize tooltips in Standard View and file info panels in Theater View.

Inline Images in Text

As a first step, we've been working on supporting inline images in the text strings, to replace the hard to use font-based icons, and also lift some of its limits (ie. fonts can only be one color).
There will be a new folder for these images in Media Center 25\Data\Tooltip, and the images need to be PNG format - preferably with transparency so they look nice.

You'll then be able to do this:

Code: [Select]

Text <img src="tooltip:DVDLogo"> More Text
The image will be nicely sized to fit the text size and make a nice looking inline image.
If you want images in a different size, you can specify a size as well:

Code: [Select]

Text <img src="tooltip:DVDLogo" size="64x64"> More Text
Text <img src="tooltip:DVDLogo" width="64" height="64"> More Text
Text <img src="tooltip:DVDLogo" width="64"> More Text
Text <img src="tooltip:DVDLogo" height="64"> More Text

If both width and height are specified (or "size" is used), that'll be the absolute size of the image, if one of the dimensions is missing it'll calculate it based on the aspect ratio of the image.

There is an additional expermimental parameter, scale="0", which suppresses scaling the image to the current MC scale, which might be useful in Theater View, as that has its own scale.

We'll start by adding a DVDLogo.png file to the build. We'll add more images in coming builds!

Enjoy

Edit Note:
Updated to the new syntax, the old one has been replaced.

Moe · « **Reply #1 on:** July 30, 2019, 11:51:51 am »

Awesome!!

What image formats are you going to support? Will we be able to set image dimensions (this would be important if you support SVG images)?

Quote

Any string on a newline found with ( )

Does this mean we will be limited to one image per line?

Matt · « **Reply #2 on:** July 30, 2019, 11:55:52 am »

Quote from: Moe on July 30, 2019, 11:51:51 am

What image formats are you going to support? Will we be able to set image dimensions (this would be important if you support SVG images)?

We'll start by just supporting PNG.

Quote

Does this mean we will be limited to one image per line?

Yes, one per line and no text on that line.

Hendrik · « **Reply #3 on:** July 30, 2019, 12:23:32 pm »

Don't worry, I'll punt Matt until he actually makes it useful, inline images scaled to the text line height, so it behaves much like the font stuff, just less annoying. The syntax in use is also a Work in Progress and might change, so we can add parameters.

Moe · « **Reply #4 on:** July 30, 2019, 12:26:21 pm »

Quote

Don't worry, I'll punt Matt until he actually makes it useful, inline images scaled to the text line height, so it behaves much like the font stuff, just less annoying. The syntax in use is also a Work in Progress and might change, so we can add parameters.

Haha, thanks. My first impression wasn't great after reading Matt's response. Thanks for implementing this.

JimH · « **Reply #5 on:** July 30, 2019, 12:35:12 pm »

Quote from: Moe on July 30, 2019, 12:26:21 pm

Haha, thanks. My first impression wasn't great after reading Matt's response. Thanks for implementing this.

Thank you! It was your work that got us talking about it.

Matt · « **Reply #6 on:** July 30, 2019, 01:31:19 pm »

I've been punted!

Been hard at work and hopefully will have an even better solution to show for it.

thorsten · « **Reply #7 on:** July 30, 2019, 01:53:06 pm »

Thank you for listening so often to the community!

If you find an easy way to implement it in MC, this might be the beginning of several "customize" tools like
- theatre view "customize" (it is a little bit trickier than tooltip)
- audio informations for music (I think, there is very much potential, and with proper use of expression language one can build its own Roon)

RoderickGI · « **Reply #8 on:** July 30, 2019, 06:24:58 pm »

Quote from: Matt on July 30, 2019, 01:31:19 pm

Been hard at work and hopefully will have an even better solution to show for it.

Excellent.

I was wondering why you didn't just use HTML tags, even if the result wasn't actually displayed in a browser. At least HTML would be familiar, so uptake would be better, and the range of required functions is already well defined.

But a good first step.

Hendrik · « **Reply #9 on:** July 31, 2019, 03:13:39 am »

Matt has been working hard on this, and I've just looked it over and it seems good so far.

What we have now is sort-of faux-HTML, but easy enough anyway, so what you can do now is this:
(The original method mentioned originally in the first post has been removed)

Code: [Select]

Text <img src="tooltip:DVDLogo"> More Text
Text <img src="tooltip:DVDLogo" size="64x64"> More Text
Text <img src="tooltip:DVDLogo" width="24" height="16"> More Text
Text <img src="tooltip:DVDLogo" height="16"> More Text
Text <img src="tooltip:DVDLogo" width="24"> More Text

- The image source is currently limited to a new folder in Data, namely Data\Tooltip, and the image still needs to be PNG (ie. this example would look for Data\Tooltip\DVDLogo.png)
We'll talk about including a bunch of standard images soon. A collection of those to start out with would be great. The prefix in the path allows us to add new image locations in the future.

The various size options should behave mostly intuitive, I would hope!
- Not specifying any size will match the image height to the currently active font size (with a fitting width for aspect ratio of the image), so that it fits snuggly in as an inline image.
- Specifying a full size (either by using "size" or both width/height) will use just that size (unless it doesn't fit into the text line its drawing into, then it'll scale down)
- Specifying only one dimension will determine the other one based on the aspect ratio of the image.

The really nice thing is that this can be used literally anywhere in MC where formatted text is supported, and is not limited to tooltips.
For performance reasons I would recommend to not go crazy overboard with images though.

RoderickGI · « **Reply #10 on:** July 31, 2019, 03:36:32 am »

PNG files are better anyway as you can use transparent backgrounds, which works much better with icons and inline images.

A sort of sort-of faux-HTML is what I was thinking. Again, excellent.

lepa · « **Reply #11 on:** July 31, 2019, 04:18:27 am »

Looking good

Matt · « **Reply #12 on:** July 31, 2019, 09:27:26 am »

Now you can call artwork other than the tooltip image folder.

Something like this:
<img src="image:FileInfoIconDVD" size="32x32">

Shows art from the "Default Art" directory of Media Center.

Matt · « **Reply #13 on:** July 31, 2019, 09:36:01 am »

I just added support for physical filenames as well, so this works:
<img src="C:\Temporary\Art for MC.png" size="32x32">

Moe · « **Reply #14 on:** July 31, 2019, 10:07:34 am »

This is sounding amazing!

Am I correct in assuming that this will work within expressions as well, for example:

Code: [Select]

if(isequal([Awards], Oscar, 8), if(isequal([Awards], Won, 8), <img src="tooltip:Oscar-Won", <img src="tooltip:Oscar-Nominated"),)

Matt · « **Reply #15 on:** July 31, 2019, 10:09:37 am »

Quote from: Moe on July 31, 2019, 10:07:34 am

This is sounding amazing!

Am I correct in assuming that this will work within expressions as well, for example:

if(isequal([Awards], Oscar, , if(isequal([Awards], Won, , <img src="tooltip:Oscar-Won", <img src="tooltip:Oscar-Nominated"),)

It will work anywhere we draw text. Tooltips, Theater View, lists, etc.

The final solution ended up pretty elegant. Thanks to everyone for your help.

Hendrik · « **Reply #16 on:** July 31, 2019, 10:29:15 am »

The images are drawn on the final formatting pass of the text. So any expressions are resolved long before that, which means all that matters is that the final text has well-formed image tags, how it got to that is irrelevant. So you can have expression in any part of the text to generate any part of it in any fashion you like, as long as the end result is proper, when it gets to the text layout engine.

Hendrik · « **Reply #17 on:** July 31, 2019, 10:43:11 am »

Now that we've got the images worked out, or at least close to finished, what would the second most helpful thing be to make these kind of Tooltip or Theater View Info Panel customizations simpler, or more powerful?
I'm specifically wondering about expression enhancements, or other layout improvements. We can also discuss improvements to the expression editor itself, but thats another topic for now.

Moe · « **Reply #18 on:** July 31, 2019, 11:29:14 am »

Quote from: Hendrik on July 31, 2019, 10:43:11 am

Now that we've got the images worked out, or at least close to finished, what would the second most helpful thing be to make these kind of Tooltip or Theater View Info Panel customizations simpler, or more powerful?
I'm specifically wondering about expression enhancements, or other layout improvements. We can also discuss improvements to the expression editor itself, but thats another topic for now.

I think more ideas will come to me once I start implementing images, but there were a couple things that I wished I had while designing the tooltips.

1. The ability to center items <center>.
2. A way to replicate the < hr > tag that would be a nice simple way to get a horizontal break, I resorted to stringing together a bunch of dashes.
3. Comment tags would be nice as well

lepa · « **Reply #19 on:** July 31, 2019, 11:31:49 am »

Quote from: Hendrik on July 31, 2019, 10:43:11 am

Now that we've got the images worked out, or at least close to finished, what would the second most helpful thing be to make these kind of Tooltip or Theater View Info Panel customizations simpler, or more powerful?
I'm specifically wondering about expression enhancements, or other layout improvements. We can also discuss improvements to the expression editor itself, but thats another topic for now.

For Theater View there is option to show field only when viewing group. (Although I don't know if it can be activated ever??) For Tooltip it would be cool if one could also choose what to show when group is selected. It would be useful to show for example album specific data for music or series or season specific for TV series.

At least could someone show example how to utilize this for Theater View?

(See the picture)

Hendrik · « **Reply #20 on:** July 31, 2019, 11:53:03 am »

Quote from: Moe on July 31, 2019, 11:29:14 am

1. The ability to center items <center>.
2. A way to replicate the < hr > tag that would be a nice simple way to get a horizontal break, I resorted to stringing together a bunch of dashes.

Both of those share a similar concern, namely that we don't necessarily know how wide a text field is going to be. What we do know is the maximum width its allowed to be, before text is broken down to a second line.
So if either of these two are used, it would have to force the text rendering to full width, possibly expanding the tooltip. Would that be a problem?

Moe · « **Reply #21 on:** July 31, 2019, 12:07:39 pm »

Quote from: Hendrik on July 31, 2019, 11:53:03 am

Both of those share a similar concern, namely that we don't necessarily know how wide a text field is going to be. What we do know is the maximum width its allowed to be, before text is broken down to a second line.
So if either of these two are used, it would have to force the text rendering to full width, possibly expanding the tooltip. Would that be a problem?

I don't foresee that being an issue at all, at least not for me.

lepa · « **Reply #22 on:** July 31, 2019, 12:10:19 pm »

Also maybe < br > would be cleaner than use enter to make line break. < tr >< td > would help to format multi lines when doing own "title: value" pairs but maybe they are too difficult to implement with sort of kind of HTML

Moe · « **Reply #23 on:** July 31, 2019, 02:16:24 pm »

A break tag could be very nice, I use a convoluted expression to create a new line

Code: [Select]

removeright(removeleft(a
b,1),1)

I quickly put together a few icons to play around with, it was a rush job and pretty quick and dirty, but it's a start https://moesrealm.com/MC/ToolTip/

Matt · « **Reply #24 on:** July 31, 2019, 02:38:44 pm »

I'll try adding support for:

Code: [Select]

<br>

lepa · « **Reply #25 on:** July 31, 2019, 03:42:21 pm »

Quote from: Matt on July 31, 2019, 02:38:44 pm

I'll try adding support for:
Code: [Select]
<br>

Great. If it can honor set font size it would be possible to do line breaks of different heights

Hendrik · « **Reply #26 on:** July 31, 2019, 03:51:25 pm »

I'm not sure if it manages to do that, since an entirely empty line wouldn't have any contents to derive a height from, so it might use the default line height. Definitely give it a try once the build is out.

lepa · « **Reply #27 on:** July 31, 2019, 04:06:33 pm »

I think that currently I can make

Code: [Select]

<font size="50">_
 
<//font>

and line break is tad smaller than when using default font size. I just need to set font before 'enter'. At least if my eyes don't lie... but anything below that doesn't make difference anymore.

I just thought to note before implementation that if it is possible it would be nice to achieve this (smaller line breaks) also with br.

RoderickGI · « **Reply #28 on:** July 31, 2019, 07:28:46 pm »

Quote from: Hendrik on July 31, 2019, 10:43:11 am

Now that we've got the images worked out, or at least close to finished, what would the second most helpful thing be to make these kind of Tooltip or Theater View Info Panel customizations simpler, or more powerful?
I'm specifically wondering about expression enhancements, or other layout improvements. We can also discuss improvements to the expression editor itself, but thats another topic for now.

I think the single most powerful feature that would assist users at all skill levels to use the functionality would be a preview pane. That is, tick the Preview checkbox, make changes to the expressions etc., then click Apply and see what it looks like. Or maybe even just have a Preview button, so that changes don't even have to be committed before reviewing the result. So even is users don't understand exactly what their changes may look like or do, they can quickly see the effect, and either reverse, change, or keep it.

I'm thinking mostly of the Theatre View layout here. Doing it for Tooltips would probably be harder, given the way they are created. Maybe a separate detached window, although you would need a way to specify context. i.e. Which tooltip does a user want to be displayed.

But I guess that may fall under enhancements to the editor itself.

Moe · « **Reply #29 on:** August 01, 2019, 10:15:11 am »

Quote from: RoderickGI on July 31, 2019, 07:28:46 pm

I think the single most powerful feature that would assist users at all skill levels to use the functionality would be a preview pane.

I agree that this would be a huge benefit. Having to hop back and forth was definitely the biggest pain point of the process for me when I was designing my tooltips.

Hendrik · « **Reply #30 on:** August 01, 2019, 11:05:55 am »

A field editor with preview would be nice for tooltips, but of course we don't have a specific tooltip editor at all right now, since all it currently is, is a default library field.
But maybe that would be a good way to start with a tooltip editor? Instead of driving it entirely off of the library field, we could give it a similar template sort of thing like Theater View uses for the File Info panel. Several user-definable templates with expression-driven selection rules?

That way the selection logic gets out of your fields, you don't need several fields for different tooltips anymore, and which tooltip gets used is nicely defined through Search expressions. And as a bonus we can show a randomly matched file to that expression to show a preview (or let you pick specific file as well).

lepa · « **Reply #31 on:** August 01, 2019, 01:17:46 pm »

Seems to work as advertised. Thanks Matt and Hendrik (for punts)

Moe · « **Reply #32 on:** August 01, 2019, 01:26:00 pm »

Can't wait to get my hands dirty this weekend! Thank you all for making this a reality, I see exciting things coming from this.

RoderickGI · « **Reply #33 on:** August 01, 2019, 03:51:14 pm »

Quote from: Hendrik on August 01, 2019, 11:05:55 am

But maybe that would be a good way to start with a tooltip editor? Instead of driving it entirely off of the library field, we could give it a similar template sort of thing like Theater View uses for the File Info panel. Several user-definable templates with expression-driven selection rules?

That would be a very good start. I would have done this stuff years ago if such a thing existed.

lepa · « **Reply #34 on:** August 06, 2019, 04:59:47 pm »

Some kind of vertical positioning of the image would be nice. Maybe "top", "bottom", "center" or perhaps some numeric value. In this example I would like to show rating labels (tmdb & jriver) in the center of the row not up. With position parameter I wouldn't have to make new png's for every different situation.

Code: [Select]

f(IsEqual([Access Rating],TV-14),<img src="tooltip:rating-tv-14" height="60">,If(IsEqual([Access Rating],TV-G),<img src="tooltip:rating-tv-g">,If(IsEqual([Access Rating],TV-MA),<img src="tooltip:rating-tv-ma">,If(IsEqual([Access Rating],TV-PG),<img src="tooltip:rating-tv-pg">,If(IsEqual([Access Rating],TV-Y),<img src="tooltip:rating-tv-y">,[Access Rating]))))) <font size="90" color="#696b75"><b>AIRED: <//b><//font><font size="90">[Date]<//font><b>  |  <//b><font size="90" color="#696b75"><b>DURATION: <//b><//font><font size="90">[Duration]<//font><b>  |  <//b><font size"180">If(!IsEmpty([Critic Rating]),<img src="tooltip:web-tmdb-wide" height="30"><//font><font color="#9b7600"> ★FormatNumber([Critic Rating,0], 1)<//font>,)  <img src="tooltip:web-jriver-1" height="30"> <font color="#9b7600">★If(IsEqual([Rating],0,5),[rating],<b>-<//b>)<//font>

Perhaps something like this:
<img src="tooltip:web-jriver-1" position="center" height="30">

Hendrik · « **Reply #35 on:** August 06, 2019, 05:28:28 pm »

Sounds like a good idea. And center should perhaps be the default if that's what text does

lepa · « **Reply #36 on:** August 07, 2019, 07:15:24 pm »

Tables would also be cool if one would like to do something like this....

Code: [Select]

<font color="#696b75"> Creator        Director<//font>
If(!IsEmpty([Creator]),<img src="tooltip:[Creator]" height="100">,)     If(!IsEmpty([Director]),<img src="tooltip:[Director]" height="100">,)
<font size="80">[Creator]<//font>   <font size="80">[Director]<//font>

Hendrik · « **Reply #37 on:** August 08, 2019, 03:46:23 am »

Tables are a bit on the too complex side layout wise right now.

lepa · « **Reply #38 on:** August 08, 2019, 11:43:44 am »

Ok, I thought it might. So fixed width font could be one option to align images and text as images have width value one can predict the image positions I guess (at least if images are fixed sized)

Moe · « **Reply #39 on:** August 08, 2019, 03:53:01 pm »

Shame that tables are too complex, what you did looks great!

I assume if tables are too complex that DIVs would be as well?

F Ribeiro · « **Reply #40 on:** August 09, 2019, 08:36:41 am »

I wish I could follow what you are talking about here.
For me and for my friends who don’t speak english but run JRiver because of me.
Can you explain, in simple words, what it is and how to implementing (like: you do this... and it happens this... [with an image, if possible]).
You must understand that JRiver is a company with worldwide users, some not speaking English - or hardly speaking, like me).
I don’t even know exactly what it is a tooltip (but thanks to google translator, I think I know now).
Many thanks for your understanding.

Moe · « **Reply #41 on:** August 09, 2019, 10:17:20 am »

Quote from: F Ribeiro on August 09, 2019, 08:36:41 am

Can you explain, in simple words, what it is and how to implementing (like: you do this... and it happens this... [with an image, if possible]).

If you're running the most recent version of JRiver, try adding this to the comment field (or a field of your choice) and see what happens.

Code: [Select]

Text <img src="tooltip:DVDLogo" size="64x64"> More Text

lello · « **Reply #42 on:** August 10, 2019, 01:31:20 pm »

A curiosity. In theater view> recent the logo of the file (BD disc, 4k etc.) appears at the bottom right: where is this information managed?

RoderickGI · « **Reply #43 on:** August 10, 2019, 08:24:58 pm »

Quote from: lello on August 10, 2019, 01:31:20 pm

A curiosity. In theater view> recent the logo of the file (BD disc, 4k etc.) appears at the bottom right: where is this information managed?

It's all programmatic. I'm not sure when a BD logo was first added, but it was enhanced in June 2018 to include more disk types; BD, 3D BD, UHD BD, 4K and DVD. Those improvements don't seem to have gotten into the Release Notes.

Anyway, no user manageable content. There may be image files buried somewhere in the MC folders though.

SkGe · « **Reply #44 on:** August 11, 2019, 08:57:27 am »

Hello.
Being related to the tooltips this thread i'm trying to find how to change this tooltip. So far no chance to find it, maybe some of you know if it is possible to change or not.
Here an example:

F Ribeiro · « **Reply #45 on:** August 12, 2019, 06:57:26 am »

Quote from: Moe on August 09, 2019, 10:17:20 am

If you're running the most recent version of JRiver, try adding this to the comment field (or a field of your choice) and see what happens.

Code: [Select]
Text <img src="tooltip:DVDLogo" size="64x64"> More Text

G R E A T ! ! !

Many thanks

lello · « **Reply #46 on:** August 15, 2019, 08:57:35 am »

Quote from: RoderickGI on August 10, 2019, 08:24:58 pm

It's all programmatic. I'm not sure when a BD logo was first added, but it was enhanced in June 2018 to include more disk types; BD, 3D BD, UHD BD, 4K and DVD. Those improvements don't seem to have gotten into the Release Notes.

Anyway, no user manageable content. There may be image files buried somewhere in the MC folders though.

Actually I didn't want to know in which folder the logos were found but rather what is the "function / expression" that makes them appear. This is because with some files you can see while with others you don't. I also tried to compare the specifications of the various files, but found no differences between them.

Moe · « **Reply #47 on:** August 15, 2019, 01:57:28 pm »

Hendrick, are you all planning on adding a center or hr tag? I know you said that there was a concern about not knowing the width of the tooltip. But that wouldn't be an issue with a fixed width.

I am just doing some work on my tooltips where this stuff would come in handy and if it's coming I will hold off, if it's something you all don't plan to implement I'll move forward.

Also, a question. Is the maximum width of a tooltip a fixed pixel size or is it percentage of the screen resolution?

RoderickGI · « **Reply #48 on:** August 15, 2019, 05:51:38 pm »

Quote from: lello on August 15, 2019, 08:57:35 am

Actually I didn't want to know in which folder the logos were found but rather what is the "function / expression" that makes them appear.

It is written in code. No user function or expression will show it. I believe it is based on resolution, file type, compression type, or similar. Search the forum for the original discussion, or the update discussion in June 2018.

SkGe · « **Reply #49 on:** August 20, 2019, 11:00:10 am »

So, after a short period of testing this new addition to the Media Player, i saw an increase time when using this tooltip image in the audio views as, pane; album thumbnail or file thumbnail. When scrolling down/up the player move slow. Did someone else check this in the respective views?!.

INTERACT FORUM

Author Topic: NEW: Tooltip and File Info Customization Improvements (Read 15903 times)