INTERACT FORUM
More => Old Versions => JRiver Media Center 25 for Windows => Topic started by: 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:
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:
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.
-
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)?
Any string on a newline found with ( )
Does this mean we will be limited to one image per line?
-
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.
Does this mean we will be limited to one image per line?
Yes, one per line and no text on that line.
-
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.
-
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.
-
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.
-
I've been punted!
Been hard at work and hopefully will have an even better solution to show for it.
-
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)
-
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.
-
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)
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. :D
-
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.
-
Looking good
-
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.
-
I just added support for physical filenames as well, so this works:
<img src="C:\Temporary\Art for MC.png" size="32x32">
-
This is sounding amazing!
Am I correct in assuming that this will work within expressions as well, for example:
if(isequal([Awards], Oscar, 8), if(isequal([Awards], Won, 8), <img src="tooltip:Oscar-Won", <img src="tooltip:Oscar-Nominated"),)
-
This is sounding amazing!
Am I correct in assuming that this will work within expressions as well, for example:
if(isequal([Awards], Oscar, 8), if(isequal([Awards], Won, 8), <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.
-
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.
-
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.
-
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
-
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? :D (See the picture)
-
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?
-
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.
-
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
-
A break tag could be very nice, I use a convoluted expression to create a new line
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/
-
I'll try adding support for:
<br>
-
I'll try adding support for:
<br>
Great. If it can honor set font size it would be possible to do line breaks of different heights
-
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.
-
I think that currently I can make
<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.
-
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.
-
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.
-
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).
-
Seems to work as advertised. Thanks Matt and Hendrik (for punts) :)
-
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.
-
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.
-
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.
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">
-
Sounds like a good idea. And center should perhaps be the default if that's what text does
-
Tables would also be cool if one would like to do something like this....
<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>
-
Tables are a bit on the too complex side layout wise right now.
-
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)
-
Shame that tables are too complex, what you did looks great!
I assume if tables are too complex that DIVs would be as well?
-
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.
-
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.
Text <img src="tooltip:DVDLogo" size="64x64"> More Text
-
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?
-
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.
-
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:
(https://i.gyazo.com/f2cee54f95ab9c9e68ec7f20c91ab2e7.png)
-
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.
Text <img src="tooltip:DVDLogo" size="64x64"> More Text
G R E A T ! ! !
Many thanks
-
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.
-
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?
-
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.
-
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?!.
-
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.
A center tag would be a great help. I've noticed that any image that has a portion of the text that would normally be "below the line" (Like the g in Discogs) is going to result in the image being slightly out of alignment with the text. The alternative to a center feature would be to reproduce your images so there is equal "empty space" above the text in order to balance the space below the text and result in a centered image.
See the attached picture for an example. The I in AllMusic skews the text low and the g in Discogs skews the text high.
-
I think that for that view where you want everything to be same height you could use <font size="xx"> to set height for whole row and everything will be centered vertically.
Something like this. Change size for your tastes...
<font size="150"><img src="amg"> 4,5/5 <img src="discogs"> 4,12/5<//font>
Vertical alignation parameter for <img> would still be kind of essential though.
One question for you Absinthe. Is the screen in the picture representing group or one file? I have been trying to show data for a group in small screen but haven't succeed. Not sure if it is even possible?
-
I think that for that view where you want everything to be same height you could use <font size="xx"> to set height for whole row and everything will be centered vertically.
Something like this. Change size for your tastes...
<font size="150"><img src="amg"> 4,5/5 <img src="discogs"> 4,12/5<//font>
Vertical alignation parameter for <img> would still be kind of essential though.
One question for you Absinthe. Is the screen in the picture representing group or one file? I have been trying to show data for a group in small screen but haven't succeed. Not sure if it is even possible?
Its not really a question of the text and image being the same height. The algorithm that embeds the image with the text seems to do a pretty good job of scaling everything the same, its the instance where the centerline of the image does not align with the centerline of the text. This is usually because there are letters or numbers in the image that drop below (or above) the upper or lower lines of the remainder of the word. I played around with the sizing and the height/width of the image and it only made the issue worse (see below). This type of application really needs a center command within the image.
As far as the snipet of the screen I attached, this is the small screen for my Audio panel that is presented after you select an album. Originally I wanted to put the Album review here but the text is just to large in most cases and to give myself any more room Id have to edit the skin :o
Similarly, no matter what kind of list style type, none of the skins I've used allow an area for common information until you drill down to a particular album I believe this is a skin limitation :(
-
I get what you say and agree with you as I requested it already earlier :) but did you just try using font size and not image size. I think that meantime while waiting some adjustments for <img> it centered images better for me.
-
Tables are a bit on the too complex side layout wise right now.
Is there any chance of this changing? Maybe not tables, but someway to position elements. This would really blow the doors open for what we could achieve, especially within Theater View.
-
I get what you say and agree with you as I requested it already earlier :) but did you just try using font size and not image size. I think that meantime while waiting some adjustments for <img> it centered images better for me.
Sorry, my response was not complete, yes I did try font size and image size changes (both size and height and width). Nothing really came together to satisfy me. I usually try to do my due diligence before asking for a change :D
-
Is there any chance of this changing? Maybe not tables, but someway to position elements. This would really blow the doors open for what we could achieve, especially within Theater View.
Waiting anxiously with baited breath to steal Moe's ideas ;D
-
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.
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">
Any plans for vertical position parameter?
If you could at least change default position to center so images can be used between text more easily. Currently images are placed TOP like in attached picture which makes feature kind of half ready.
-
+1
-
Big +1 from me as well.
-
Any plans for vertical position parameter?
If you could at least change default position to center so images can be used between text more easily. Currently images are placed TOP like in attached picture which makes feature kind of half ready.
bump
-
Bumping this again. It looks like we still don't have any way to align images vertically within the text line, and the default is still to align them to top.
This kind of makes the "height" property useless, because if you make your height smaller than the line height, the image raises up above your text. It looks bad.
Even if no direct control is given to users, just changing the default to center vertically would be a huge improvement. This was talked about months ago like it would be no problem, but never implemented. Wouldn't default vertical alignment be easy to do? The line height is known.
-
This is already possible in 26.0.70 and newer, which isn't available yet (for Windows at least, its in Mac 26.0.70 already)
-
That's really good news, thanks Hendrik!