Topic: Track Info: Modern Cards: Dark Edition (Read 10845 times)

franswilco · « **on:** June 17, 2018, 06:25:52 am »

Hi Guys,

I just read this discussion about album art resizing: https://yabb.jriver.com/interact/index.php/topic,116207.0.html. I found that most of the default 'Track Info'-lay-outs look horribly outdated. I guess most of them haven't had an update in over 10 years ?

User Jamil inspired me to create a new Track Info lay-out. I took Noire, the track lay-out built by Johanne Chainé, and updated it based on my favorite skin (Modern Cards: Dark Edition). I hope people like it. It is somewhat responsive: the album art will resize based on the height of the window. Lyrics are displayed in multiple columns if the window is wide enough.

Manual: Unzip the file into your J River\Media Center 24\Visualizations\Track Info\ directory.

Feel free to change the two CSS-declarations directly below line 21 in main.css, according to your own settings made in 'Tools -> Options -> Tree & View -> Advanced -> Select font'

BigCat · « **Reply #1 on:** June 19, 2018, 02:29:45 am »

Hey, this is a really cool Track Info plugin! I love how the album image resizes as you drag the pane up and down, up to the size of the image, but no more. It doesn't over stretch the image. That is slick...!

You are right. Most of the track info plugins haven't changed in a long time. We are overdue for some new ones.

Is there a way to INDIVIDUALLY change (per line) both the color and size of the font in your layout, perhaps like in this included attachment? It is based on "NNTH Track Info" by author Hieu Nguyen (and perhaps some other templates), but it is quite modified. I like the added colors...

Anyway, good job! Thanks for doing this.

franswilco · « **Reply #2 on:** June 19, 2018, 06:25:45 am »

Hi BigCat,

Yes, this is possible. I will create a different version for you somewhere at the end of the week. I will also upload my personal variant to this track info set-up that I use.

BigCat · « **Reply #3 on:** June 19, 2018, 11:43:00 am »

That would be awesome! This seriously has the potential to be the main Track Info template for JRiver.

Its interesting how you chose 'Noire' to start with. I realize now I never understood that layout. But your mod is like the missing link, and Noire now makes sense to me.

I LOVE how you made it easy to edit the font and font size. If that flexibility could also extend to a "per line" basis and add in editable "per line" color (as mentioned above), and also editable background color, and (hopefully) editable and rearrangeable TRACKINFO fields, most people could find this useful!

Thanks so much for this contribution! New Track Info layouts are one of the things I check every new upgrade of JRiver for. Done right, they make a great focal point for the software. I am looking forward to seeing what you come up with...

nataru · « **Reply #4 on:** June 22, 2018, 03:04:28 pm »

This is amazing, thank you.

BigCat · « **Reply #5 on:** July 06, 2018, 02:11:41 am »

OK, here is the actual track Info plug-in "NNTH Track Info.test", which I included as a (not very good) image above. I modified this many years ago and have been using it since. I know absolutely nothing about this stuff. I think I just edited the HTML a little from other Track Info Layouts. I was shocked I got it working at all. I had no HTML skills then, and fewer now.

"NNTH Track Info.test" has many bugs, but I think the look is pretty good. It doesn't display non-English characters correctly like your "Track Info: Modern Cards: Dark Edition" does, nor allow for the resizing artwork (!). However; I like NNTH Track Info.test's black background when used with the "Modern Cards: Dark Edition" or "Blue Steel" skins. I like the subtle added space between the cover image itself and the track info text, and I like the "justification" of the track info text. But most of all I like the colors and sizes of the text.

Maybe I shouldn't be posting it in this thread (or at all). I am hoping you or the community can combine the best of each. I am posting it mostly so you and others can see the actual colors, fonts, etc. and perhaps get inspired. Or even use it occasionally. It would be great to create a track info layout that users can modify for their own colors and style. A lot of the existing Track Info plugins look dated, and I think the currently playing track should be the most important visual aspect of JRiver.

Thanks for your efforts!

franswilco · « **Reply #6 on:** July 08, 2018, 09:35:06 am »

Hi BigCat,

Sorry, I just started a stressful new job and didn't get around doing the work. Here's a new ZIP file. Please look through the CSS file. It contains a comment section (indicated by /* and */). Please read through it and change CSS declarations to your own liking. I have included a link to a tutorial for you as well.

BigCat · « **Reply #7 on:** July 09, 2018, 05:31:51 am »

Yes, I am having time constraints as well. Thanks so much for taking the time to do this! I just started having fun playing with it. Before I dig too deep, I noticed that, at least on my machine, the album cover doesn't resize on this latest layout; its just a fixed size. Perhaps I've done something wrong? It worked on the earlier version.

This is awesome!

franswilco · « **Reply #8 on:** July 10, 2018, 05:57:46 am »

Aah yes. I actually changed some CSS code for myself in that latest file. Please try changing:

.albumart img{
height: auto;
max-width: 300px;
padding: 0.5rem;
}

into

.albumart img{
max-height: 94vh;
width: auto;
padding: 1vh;
}

If it doesn't work, please let me know. I can create a new version for you.

BigCat · « **Reply #9 on:** July 12, 2018, 03:19:05 am »

OK, here is what I have so far. It is similar to franswilco's layout, but I changed the background to black, changed the text around some, and added some color.

People should take a serious look at the versions of this Track Info plug in. It is designed to be editable (with some directions) so you can customize it, though you don't have to. Just unzip and put the folder directly into the Track Info folder. On my computer it is:

C:\Program Files\J River\Media Center 24\Visualizations\Track Info

Two very minor problems so far have me stumped:

1) I couldn't make "Lyrics:" line up/justify with the other names. I'm sure it is something simple, probably something I messed up.

2) For some reason, the scroll bar on the right of the Track Info is visible unless you drag the track Info window larger to make the album art bigger than it needs to be. It would be nice if the scroll bar only showed up if you need it to see more lyrics.

I hope someone that actually knows this stuff can help me out. Still, I am very impressed with what franswilco (and I think Jamil?) and of course Johanne Chainé who originally built Noire (though it looks nothing like Noire) have put together. Thank you!

I look forward to seeing what others post.

Dawgincontrol · « **Reply #10 on:** July 12, 2018, 01:24:45 pm »

Just wanted to say thanks. I like it.

carlismysecondname · « **Reply #11 on:** September 28, 2018, 02:35:08 am »

I just adjusted the colors a bit to look more pastel which goes along well the changes I made with JRiver's 'Customize Display' and 'Thumbnail Text' edit boxes:

PLAY MODE (Alternative)
Title:

Code: [Select]

<font color="AAAAFF">If(IsEqual([Filename], live:////ipc, 8), JRiver Virtual Sound Card, [Name])<//font>  ( <font color="9C9C00">[Artist]<//font> ♪ <font color="D68F83">[Album] <//font>)

Status:

Code: [Select]

[Remaining Time] // [Total Time] - [Sample Rate] kHz - [Channels] ch [PN Position] of [PN Tracks] [Zone]
STOPPED MODE:
Status:

Code: [Select]

<font color="FF8C00"> [Library] - [Zone] [View Filter] formatdate(now(),dddd MMMM dd yyyy) <//font>

----
THUMBNAIL TEXT:

Code: [Select]

<b><font color="D68F83">[Album Artist]<//font>
<font color="AAAAFF">[Name]<//font>
<font color="9C9C00">([Date]) <//font><//b><font color="C7C700">Mid(★★★★★, 0, [Rating Album])<//font>

----

The pastel colors also goes well with my custom 'collage' visualization (originally based on Clean-n-Tidy) using the 'night life' color gradient for the spectrum analyzer. Actually, many of the other preset color gradients available in JRiver's Visualization Studio seem to work really well so I encourage people to change it depending on the mood or style of music you're playing.

I'm hoping someone else here makes a Mac whiter/greyish edition of sorts -- although, not my cup of tea -- would be nice to incorporate something similar in JRiver's in-built default presets. I think very few people who use JRiver actually have time to go to the forums to look for these alternate theme styles and muck about with the program settings. Frankly, who has time these days.

Awesome Donkey · « **Reply #12 on:** September 28, 2018, 03:44:51 am »

Quote from: carlismysecondname on September 28, 2018, 02:35:08 am

I'm hoping someone else here makes a Mac whiter/greyish edition of sorts

Modern Cards: Grey Edition? It's similar to macOS. There's also Modern Cards: White Edition if you want a white skin.

carlismysecondname · « **Reply #13 on:** September 28, 2018, 03:57:25 am »

@Awesome Donkey

Yep. Actually to be more clear, I meant to say MC should also have track info styles and vizualizations that go together really well with the those skins already built in. Kind of like a theme pack... but I'm just lazy and personally find the process of going through all the vizualizations & basic track info styles presets one by one dissappointing -- most are just soo mismatched one way or another.

**Just checked: the lyrics track info & cover/spectrum viz works well in theatre view too! I only wish the scroll bar could be removed/darkened and made more 'transparent' like the other scroll bars in theatre view.

carlismysecondname · « **Reply #14 on:** September 28, 2018, 11:01:37 pm »

This is not going to be related to the lyrics track info. But just FYI/caveat: I'm using a 2560x1440 screen resolution. And I've noticed that for really long titles the cover art overlaps with the album title. As I adjusted the artwork to move downwards, the spectrum analyzer started overlapping with the cover art too -- so I had to move down a notch as well. Depending on your screen resolution (and whether the display is zoomed-in or out), you will have to make some adjustments to the 'MainRectangle' values in Visualization Studio.

carlismysecondname · « **Reply #15 on:** October 22, 2018, 10:23:14 am »

@BigCat

1) I couldn't make "Lyrics:" line up/justify with the other names. I'm sure it is something simple, probably something I messed up.

I was able to patch this with my extremely limited HTML know-how.

Dunno how to fix #2 though.

Personally, what I would like improved is the ability to scroll down the lyrics while having the artwork fixed in place -- instead of scrolling up/down along with the lyrics. I don't want the artwork to disappear when I scroll up the lyrics! Sadly I don't have the requisite skills to figure it out.

Created an additional track info without the artwork using the same template by deleting line 12 of the html file. This is useful when you have your playback view set on a smaller split view column to the side.

I've also further readjusted my "pastel" colors a bit more so that one can easily switch between the three Modern Cards themes and still have equally readable/matching colored text

PLAY MODE (Alternative)
Title:

Code: [Select]

<font color="7393FF">If(IsEqual([Filename], live:////ipc, 8), JRiver Virtual Sound Card, [Name])<//font>  ( <font color="9C9C00">[Artist]<//font> ♪ <font color="D18172">[Album] <//font>)

Status:

Code: [Select]

[Remaining Time] // [Total Time] - [Sample Rate] kHz - [Channels] ch [PN Position] of [PN Tracks] [Zone]

STOPPED MODE:
Status:

Code: [Select]

<font color="AA5500"> [Library] - [Zone] [View Filter] formatdate(now(),dddd MMMM dd yyyy) <//font>

----
THUMBNAIL TEXT:

Code: [Select]

<b><font color="D18172">[Album Artist]<//font>
<font color="7393FF">[Name]<//font>
<font color="9C9C00">([Date]) <//font><//b><font color="C7C700">Mid(★★★★★, 0, [Rating Album])<//font>

I noticed that the font used for the current playing track & album text in my visualization collage thing isn't installed by default in my other Windows build so I've added that as well as an attachment here, besides some minor adjustments/improvements -- oh, and added two additional track info + spectrum visualization that looks great with Modern Cards White and Gray themes as well. Tested these out on 1080p and 1440p screen resolutions and they great. As for a white version of the lyrics track info, I didn't bother as I find the excessive white background just hurting my eyes.

nnth · « **Reply #16 on:** January 10, 2019, 03:08:50 pm »

Hi,

Just to let you guys know that I've update the plugin. The new design is best match for "Modern Cards" skin. Enjoy!

https://yabb.jriver.com/interact/index.php/topic,118901.msg822417.html#msg822417

toniexly · « **Reply #17 on:** March 30, 2019, 05:17:23 am »

would you please tell me how can i get it work with a network DAC? can't find the option of display lyrics. thanks

alb · « **Reply #18 on:** June 28, 2019, 04:56:23 pm »

Could someone give me step by step instructions on how to apply one of these Track Info plugins? I know how to change skins, but applying these Track Info plugins does nothing. Even when I try switching to a JRiver supplied Track Info plugin nothing changes. Also, will these custom views work with JRiver 25? I don't want to cause a problem if/when I want to upgrade. Although, I'm not quite sure I will upgrade from 24. Cheers!

JimH · « **Reply #19 on:** June 28, 2019, 05:19:13 pm »

If you mean the plugin by NNTH, he says this in the thread where he announced it:

If you download the plugins through this forum thread, please extract "NNTH Track Info III.zip" to "J River\Media Center 24\Visualizations\Track Info\

BigCat · « **Reply #20 on:** June 28, 2019, 10:55:53 pm »

Yes, its easy to add Track Info plugins as long as you are comfortable working with computer files. To install Track Info plugins (assuming you are using Windows):

1) Download it (its usually in a .zip format).

2) Extract the files.

3) Find your J River sub-folder (probably under "Program files" if you are using the 64-bit J River or "Program files (x86)" if you are still on the 32-bit version.).

4) Place the files in the "J River\Media Center 24\Visualizations\Track Info\" (modify this for whatever version you are using).

Once you have completed this step there should be a sub-folder structure similar to the following:

C:\Program Files\J River\Media Center 24\Visualizations\Track Info\Modern Cards - Even Blacker Edition

There will be a few files in it (my example is for "Modern Cards - Even Blacker Edition", but should work with any Track Info plugin).

You are done installing! Then, make sure you are in Playing Now. With a song file (not a video) playing (it can be paused), right click on the Display and select Track Info. You should see a few choices including the one you just installed. Just select it and it should work. J River does not even need to be restarted!

When you DO upgrade (I would recommend it as v.25 has several improvements) I think you will have to manually copy all the custom Track Info plugins to the new version's \Visualizations\Track Info\ sub-folder. The upgrade process has not yet automated everything (its much better than it used to be and pretty painless), but this is simple to do. So yes, the Track Info plugins will also work on v.25.

Hopefully this is helpful! Let me know if this is unclear or can be improved upon.

alb · « **Reply #21 on:** July 06, 2019, 06:50:22 pm »

Thanks for both of your responses, @JimH and @BigCat.

I was totally fine with downloading, unpacking and then moving the files into \...\Visualizations\Track Info\ - That was easy peasy, obviously. My problem was I didn't know how to activate the new Track Info plugins I downloaded. @BigCat you totally solved my problem with this:

Then, make sure you are in Playing Now. With a song file (not a video) playing (it can be paused), right click on the Display and select Track Info. You should see a few choices including the one you just installed. Just select it and it should work. J River does not even need to be restarted!

That was my problem. I didn't know I had to be in Playing Now in order to apply a newly downloaded Track Info plug-in. Usually, when I play music I just go to Audio > Artists > then I select Pink Floyd, for example, then I scroll to whichever album/song I want to play. Double-click on the song I want to hear first and that's it.

Again, thanks for such quick replies gentlemen. I learned something today!!

udhay111 · « **Reply #22 on:** January 19, 2020, 12:34:13 am »

I am posting this. This is my own creation of track info plugin if you find this plugin use please share this one. If you want more customisation I have attached the source as I am not a coder I made this by using WYSWYG HTML editor and also attached the same in rar files.

udhay111 · « **Reply #23 on:** June 08, 2022, 07:14:54 am »

This is alternate website styled Track info plugin

INTERACT FORUM

Author Topic: Track Info: Modern Cards: Dark Edition (Read 10845 times)