JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Topic: JS3 Text Display + Album Art + Seekbar + Buttons - Defender (Read 10963 times) previous topic - next topic

0 Members and 8 Guests are viewing this topic.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #50 – 2025-01-09 20:05:20

Sorry, I don't have the SACD.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #51 – 2025-01-10 02:56:20

Quote from: Defender on 2025-01-03 19:43:28

@Air KEN

Took a bit more time than I thought. No help whatsoever, so a lot of reverse engineering.

I had everything working in windows scaling 100 for button heights between 12/140 and then found out that windows scaling for resolutions 125/150/175/225 was not working at all. Luckily I experienced this before within Panel Stack Splitter and ELplaylist. So back to the drawing board and I implemented a similar solution as I have done in PSS/ELP.

So in the end I had to write my own scaling routine and now everything works as a charm. Tested said button heights between 12/140 and windows scalings 100/125/150/175/200/225/250. I could not test 300 and 350 yet, but that will be done soon (I need it anyway for some people that use my skin) and is easy to implement now.

Changes:
1.15 2025-01-03

Full support for button height adjustments for all windows scaling implemented. Original code was fubared especially for certain windows scalings.
All buttons normalized at button height 96. Tested settings between button height 12/140 with windows scaling 100/125/150/175/200/225/250.

Dropdown text fields are aligned under leftmost pixel of character button for all buttons, button heights and windows scalings.
Buttons use horizontal padding for more separation.
Debug mode added to visualize alignment. Activate by setting var debug to 1

PlaylistManager button has different char. Same as Smooth Playlist Manager uses. All current buttons use Segoe Fluent Icons font.

ReplayGain button now uses color codes instead of different chars for modes. This is in line with my image AudioButtons script.

Out of the box all buttons are enabled and shown when the panel has enough width.

TODO: Test windows scaling 300/350.

If you find any bugs / have suggestions feel free ...

Enjoy!

How can I write in '$font(Twemoji Mozilla,...) 'In showing the flag, what do I need to do?

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #52 – 2025-01-10 04:57:00

@sq68

Required font
https://mega.nz/file/hKUBSAjD#p4E26mpNyPsC9MeeLAnJOsSc89bO9vD37XAvn_qVys8

%country% tag
Properties > Metadata > Click + add new > country.
e.g. <COUNTRY> : ca

$font(Twemoji Mozilla,16)$country_flag(%country%)

%artist%$font()[ $font(Twemoji Mozilla,16)$country_flag(%country%)$crlf()]

Emoji flag symbols
https://apps.timwhitlock.info/emoji/tables/iso3166

e.g.
Text Display (Custom Text)

$font(Yu Gothic UI,16,400,0,0,0)
[%title%$crlf()]
$font(Yu Gothic UI,14,600,2,1,0)$rgb(220,40,0)
%artist%$font()[ $font(Twemoji Mozilla,16)$country_flag(%country%)$crlf()]
$rgb()
$font(Yu Gothic UI,14,400,0,0,0)
[%album% '('%date%')']$crlf()
$font(Yu Gothic UI,12,400,0,0,0)
[%codec%][ %__bitrate%kbps][ %codec_profile%][ %__tool%][ %__tagtype%]$crlf()

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #53 – 2025-01-10 06:29:23

Quote from: Air KEN on 2025-01-10 04:57:00

@sq68

Required font
https://mega.nz/file/hKUBSAjD#p4E26mpNyPsC9MeeLAnJOsSc89bO9vD37XAvn_qVys8

%country% tag
Properties > Metadata > Click + add new > country.
e.g. <COUNTRY> : ca

$font(Twemoji Mozilla,16)$country_flag(%country%)

%artist%$font()[ $font(Twemoji Mozilla,16)$country_flag(%country%)$crlf()]

Emoji flag symbols
https://apps.timwhitlock.info/emoji/tables/iso3166

e.g.
Text Display (Custom Text)

$font(Yu Gothic UI,16,400,0,0,0)
[%title%$crlf()]
$font(Yu Gothic UI,14,600,2,1,0)$rgb(220,40,0)
%artist%$font()[ $font(Twemoji Mozilla,16)$country_flag(%country%)$crlf()]
$rgb()
$font(Yu Gothic UI,14,400,0,0,0)
[%album% '('%date%')']$crlf()
$font(Yu Gothic UI,12,400,0,0,0)
[%codec%][ %__bitrate%kbps][ %codec_profile%][ %__tool%][ %__tagtype%]$crlf()

Thank you for your help

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #54 – 2025-01-10 07:01:53

I tried displaying it on the main unit with Default UI.

foobar2000 v2.24.1 64-bit
Default UI
JScript Panel 3 3.8.5
JSplitter 3.6.1.10
uDSD Decoder 0.0.18 (foo_input_udsd)

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #55 – 2025-01-10 07:42:53

Quote from: Air KEN on 2025-01-10 07:01:53

I tried displaying it on the main unit with Default UI.

foobar2000 v2.24.1 64-bit
Default UI
JScript Panel 3 3.8.5
JSplitter 3.6.1.10
uDSD Decoder 0.0.18 (foo_input_udsd)

Very nice! I guess uDSD Decoder is back in business too.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #56 – 2025-01-10 07:43:10

Quote from: Air KEN on 2025-01-10 07:01:53

I tried displaying it on the main unit with Default UI.

foobar2000 v2.24.1 64-bit
Default UI
JScript Panel 3 3.8.5
JSplitter 3.6.1.10
uDSD Decoder 0.0.18 (foo_input_udsd)

Looks good.

I suggest you disable the Text Display audio chain part for the Madonna TD since that is not playing.
Also bear in mind that the seekbar is related to the playing file (Halestorm) and not to the selected file (Madonna),
so I would put the Madonna TD on top.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #57 – 2025-01-10 07:55:57

New version:
1.22   2025-01-10

CUSTOM TXT:
I created a separate file for Custom txt sample and removed the included Custom text from the main script.

Custom txt... has been overhauled.
Includes list of requirements and optional plugins
Configuration where you can enable/disable different text sections
   Section Track (with subsections for optionsl Playcount and optional Coverinfo)
   Section AudioChain
   Section Debug
Used a more generic approach for the to be printed lines, which makes it a bit more readable.
All newlines are conditional - so no more empty lines when a section is set to OFF.

MAIN SCRIPT:
Tiny bugfix (1 pixel in fact) when albumart was disabled.

When albumart is disabled, text will be vertically aligned between top and seekbar/audiobuttons/bottom.

In the configuration settings the amount of blur for background albumart can be set (default opaque 1.0).
This allows you to paint your own art underneath the panel. Blur value 0.6 works well for me.

I introduced 3 (personal) presets:
0=   No Presets enabled, use configuration section
1=   AlbumArt       Text   No Seekbar       NowPlaying button only
2=   No AlbumArt    Text    Seekbar          No Buttons
3=   No AlbumArt      Text    No Seekbar       No Buttons

I also included requirements in the SCRIPT and CUSTOM files with download locations.
Note: The stuff AirKEN included is way too much and not necessary for the included script/custom.

Attached a screenshot for how I ended up using it. Consists of two separate versions of UTD.

The upper UTD follows selected track (unless you leftclick/rightclick the remaining NowPlaying button.

The lower UTD follows NowPlaying and thus has dsd_*, hdcd_*, decoded_*, output_* tags available., the lower also has the optional seekbar, since seekbar has nothing to do with the selected track in the upper UTD.
The background itself is based on the playing artist albumcover (blur 0.6) and I also display a logo for the currently playing artist underneath,

If you can't beat them, join them :-|

EDIT: Included archive did not contain the script/custom, Now it does ;-)
EDIT2: Sorry, forgot to show the normal samplerate, bitspersample, channels tags in the audio chain when playing non-hdcd, non-sacd. Updated the archive with the fixed version and also attached the included updated custom separately.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #58 – 2025-01-10 08:54:42

@Defender
Thanks.
It's evolving at a rapid pace.

CUSTOM TEXT SAMPLE 2025-01-10:
Changed the font size

Configuration:
Line 63: var on_seekbar = 0; (Seekbar hidden)
Line 84: var bs = 28; (Changed the button size)

For Text Display, select "Prefer now playing" (Selection mode > Prefer now playing).
Albumart on Playlist view is in Select mode

I added "Cover Panel" for fun.

---------
Reply #54: https://hydrogenaud.io/index.php/topic,127191.msg1057433.html#msg1057433

I'm not using it, I just tried it. hahaha...

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #59 – 2025-01-10 09:40:02

Quote from: Air KEN on 2025-01-10 08:54:42

I added "Cover Panel" for fun.

Looks nice.

I made some changes to the custom script.

I changed the sequence of source, coverinfo and playcount. Moved the codec and bitrate part to the source line.
I disabled extended codec info.
And made the whole thing more lossy friendly.

I guess this is exactly what I want except for missing active regain info.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #60 – 2025-01-10 15:33:47

Flowin 0.2.2 (foo_flowin) 2024-11-24
https://github.com/ttsping/foo_flowin/releases
JSplitter 3.6.1.10 (foo_uie_jsplitter) 2024-10-04 English version
https://drive.google.com/file/d/1TePKlgERH8bzFXPAZ4dQyhIjUg1sDLkf/view?pli=1
JScript Panel 3 3.8.5 (foo_jscript_panel3) 2024-11-18
https://hydrogenaud.io/index.php/topic,110499.msg1054844.html#msg1054844
Playcount 2003 0.3.0 (foo_playcount_2003) 2024-11-27
https://github.com/marc2k3/marc2k3/releases
Flex DSP v1.0 (foo_flex_dsp) Sep 16, 2023
https://github.com/ghDaYuYu/foo_flex_dsp/releases

Output Info 1.2.4 (foo_outinfo) 2025-01-10
https://foobar.hyv.fi/?view=foo_outinfo

Code: [Select]

[ReplayGain source mode: %output_rg_source%]
[ReplayGain processing mode: %output_rg_mode%]
[ReplayGain gain value: %output_rg_gain%]
[ReplayGain peak: %output_rg_peak%]
[ReplayGain peak value: %output_rg_peak_db%d]

Text Display: Pre-second update Check

Code: [Select]

$font(Yu Gothic UI,16,400,0,0,0)
[%title%$crlf()]
$font(Yu Gothic UI,14,600,2,1,0)$rgb(220,40,0)
%artist%$font()[   $font(Twemoji Mozilla,16)$country_flag(%country%)$crlf()]
$rgb()
$font(Yu Gothic UI,14,400,0,0,0)
[%album% '('%date%')']$crlf()
$font(Yu Gothic UI,8,400,0,0,0)$crlf()
$font(Yu Gothic UI,12,400,0,0,0)

[%codec%][ %__bitrate%kbps][ %codec_profile%][ %__tool%][ %__tagtype%]$crlf()
[%output_device%$crlf()]
[DSP preset: %output_dsp_preset%$crlf()]
$font(Yu Gothic UI,8,400,0,0,0)$crlf()

$font(Yu Gothic UI,12,400,0,0,0)
[ReplayGain source mode: %output_rg_source%$crlf()]
[ReplayGain processing mode: %output_rg_mode%$crlf()]
[ReplayGain gain value: %output_rg_gain%$crlf()]
[ReplayGain peak: %output_rg_peak%$crlf()]
[ReplayGain peak value: %output_rg_peak_db%$crlf()]
$font(Yu Gothic UI,8,400,0,0,0)$crlf()

$font(Yu Gothic UI,12,400,0,0,0)
[First Played: %2003_first_played_ago2%]$crlf()
[Since Last Played: $jsp3_since(%last_played%)]

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #61 – 2025-01-10 16:00:55

@Airken
That's a cool way usage of JSplitter for sure. What are you using Flowin there for?

(it would be great to have panel windows managed by buttons, but then the main script should be at a JSplitter panel, not JSP3 though, or you may overlay JSplitter buttons too)

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #62 – 2025-01-10 16:21:52

> but then the main script should be at a JSplitter panel

Yes I do, that's the basic idea. That's how to use JSplitter.

Reply #39: https://hydrogenaud.io/index.php/topic,127191.msg1057392.html#msg1057392

Flowin has its own Edit Mode and is easy to use in both Default UI and Columns UI. It is suitable for testing.
I've been using it since foobar2000 v1.6.x.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #63 – 2025-01-10 17:14:21

New version updated for foo_outinfo 1.2.4

1.23 2025-01-10

CUSTOM TEXT:
Support for foo_outinfo 1.24
Active ReplayGain settings and values are now displayed.

Small updates regarding Source line which shows codec and bitrate
Therefore I disabled the line with extra codec information

Added screenshots for playing SACD and playing HDCD

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #64 – 2025-01-10 17:30:07

Quote from: Air KEN on 2025-01-10 15:33:47

Flowin 0.2.2 (foo_flowin) 2024-11-24
https://github.com/ttsping/foo_flowin/releases
JSplitter 3.6.1.10 (foo_uie_jsplitter) 2024-10-04 English version
https://drive.google.com/file/d/1TePKlgERH8bzFXPAZ4dQyhIjUg1sDLkf/view?pli=1
JScript Panel 3 3.8.5 (foo_jscript_panel3) 2024-11-18
https://hydrogenaud.io/index.php/topic,110499.msg1054844.html#msg1054844
Playcount 2003 0.3.0 (foo_playcount_2003) 2024-11-27
https://github.com/marc2k3/marc2k3/releases
Flex DSP v1.0 (foo_flex_dsp) Sep 16, 2023
https://github.com/ghDaYuYu/foo_flex_dsp/releases

Output Info 1.2.4 (foo_outinfo) 2025-01-10
https://foobar.hyv.fi/?view=foo_outinfo

Great. I will look into it. With CUI/PSS I cannot overlay JS3 panels unfortunately.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #65 – 2025-01-10 21:01:49

I'll just paste it here.

foobar2000 v2.24.1 64-bit
Columns UI
Left side:
"Thumbs" are layered on top of Text Display.

Right side:
Artwork view panel is overlaid on JS Playlist-mod (Spider Monkey Panel).
Playlist Select Mode. Can be moved freely.

The trick with the Columns UI is to make good use of the overlapping Panel right click > Show caption and Locked in menu > View > Layout > Live editing.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #66 – 2025-01-12 09:06:50

I layered "Thumbs" on a "Text Display" and then layered a small "Albumart" on top of that.
As a bonus, I created a new JSPlaylist-mod (Spider Monkey Panel) that allows you to see "Text Display + Thumbs" even on top of "Text Display + Thumbs" through transparency.
foobar2000 v2.24.1 (64-bit)

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #67 – 2025-01-12 09:12:04

Quote from: Air KEN on 2025-01-12 09:06:50

I layered "Thumbs" on a "Text Display" and then layered a small "Albumart" on top of that.
As a bonus, I created a new JSPlaylist-mod (Spider Monkey Panel) that allows you to see "Text Display + Thumbs" even on top of "Text Display + Thumbs" through transparency.

The only thing missing is a spinning disc :-)

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #68 – 2025-01-14 18:40:50

So nice to be able to make radio stream screenshots of the band playing one of my favorite tracks where my nick comes from :-)

New version and this was so much fun to create:

1.24   2025-01-14

MAIN SCRIPT:

This has been so long on my todo list, and finally I got it working :-)
When no embedded icon   is found:
   first check artistlogo folder 'var logoPath'.
   if logo      art is found display,   otherwise fallback to stub image for Icon.
When no embedded artist   is found:
   first check artistpics folder 'var artistPath'.
   if artist   art is found display,   otherwise check yttm folder 'var yttmPath'.
      if artist art is found display,   otherwise fallback to stub image for Artist.

NOTE:   This works for streams/radio.
      Stream will display found icon                        or stub image for Icon.
      Stream will display found artist pic                  or stub image for Artist.
      Stream will display found artist pic for cover, back, cd   or stub image for Radio.
      Mousewheel on albumart in case of stream will alternate between artist & icon.

CUSTOM.TXT:
When info.debug is enabled always show hdcd_* tags

Enjoy, I know I do.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #69 – 2025-01-16 19:01:42

I don't know if somebody is actually using this, but as a first I added a button on request.
Thx, for the idea StyxCrosser.

1.25 2025-01-16

Volume Button/Bar created. I wanted this to be character based like all buttons.
Button changes with (unmuted) position and has 5 different chars based on (unmuted) volume. Color normal for unmuted or red for muted.
Leftclick sets volume based on position. Rightclick mutes or restores previous Volume.
Mousewheel Up/Down work in unmuted mode.

Made some adjustments for Artist/Logo picture retrieval. Featuring (feat. feat ft. ft etc) is stripped from %artist% before searching.
New option to save current blurred image. Blurred image is saved in imgPath\stub_blur.jpg.

NowPlaying character is set to 'open circle with greater than sign inside' instead of 'open circle' in case of selection mode Follow now Playing.

I'm not going to be using the new volume button/bar myself :-)

EDIT: The thread name is not correct anymore now Volume has been added. I call the script JS3_UTD in short.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #70 – 2025-01-17 01:49:38

1.25a 2025-01-17

Single char Volume Button/Bar was way too small with small buttonsize.
Button/Bar is now doublewidth and has bezel around it. Volume is a shaded fill on top of the character.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #71 – 2025-01-17 02:57:28

"One panel to rule them all"

Much appreciated what you did and so fast.
I'm taking both revisions

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #72 – 2025-01-18 17:36:40

1.25b 2025-01-18

Don't use first Artist picture from yttm to avoid duplication with other $findfile based artist displays in the skin.

Volume bar related small bugfix that prevented some buttons to show hover state.

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #73 – 2025-01-18 20:48:46

1.25c 2025-01-18

SCRIPT
Volume bar related small bugfix that prevented using mousewheel on text.

CUSTOM TXT
Workaround for the current foo_sacd 1.5.15/1.5.16 that show incorrent %samplerate% and $info(bitspersample).

Re: JS3 Text Display + Album Art + Seekbar + Buttons - Defender

Reply #74 – 2025-01-19 01:01:57

Apparently people like the small volume button/bar.

Extra button added. Small volume button/bar. It can be configured to have two different appearances.

1.26 2025-01-19

Added two versions of small Volume Bar/Button.
0) normal sized Button/Bar with no bezel.
1) half the width of the existing larger Volume Bar/Button with the same kind of bezel.
Can be chosen by setting vols_bezel_on to 0 or 1.

Notice