Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: DarkOne 4.0 - modified skin (Read 1617 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

DarkOne 4.0 - modified skin

Got some questions about my modified DarkOne 4.0 skin in the forum and via personal messages. So hereby some info.

Some 2.5 years ago I finally saw the light and made fooBar my preferred audioplayer. Best skin I found was DarkOne v4.0, which did not run great on my OLED screen with different scaling. DarkOne MOD2 did better, but was not perfect too. So I decided to start working on a unified skin that catered both and supported different windows scaling completely. The first year I spent on unifying ELP. Took a lot of time since most had to be done via reversed engineering. That I had some time to spare helped a bit :-)

During development I also closely looked to skins like Georgia and some ideas from that skin. I also implemented a couple of plugins that are really marvelous.

So here we are, 2.5 years of development, some 20.000 lines of code (doesn't help you cannot use subroutines/functions) and around 500MB of (logo) artwork.

Skin still has (a now optional) Bottom Panel devided in 3x 33.3%.
In the Bottom Panel you can choose between Top Plugins None, QuickSearch (original), Display Panel (original), TrackTime (playing track title with total time and/or lapsed and/or remaining - bit like the original top middle screen), WaveMini bar, AudioControl bar (loosely based on JS panel audiocontrols including Menu with extra PBO, OutputDevice and all kind of rightclick functionality). Top plugins can be relocated in all 3 positions and/or combined/stretched over 2 or 3 of the 33.3% panels.
In the lower part of the Bottom panel; you can choose 0,1 or 2 different plugins per 33.3% part. Plugins are VU Meter (some 10 different skins I like included), Peak Meter Spectrum horizontal and Peak Meter Spectrum vertical (both automatically adjust to 2ch, 6ch and 8ch (which is the max)), Channel Meter Spectrum and Art (choose between Artist, Cover, Artistcountry flag, Namelogo (horizontal logo), Bandlogo (squarelogo) and RecordLabel). If there's enough space you can also choose art above VU Meter and Peakmeter horizontal.
If you really want to go vintage you can select the original VolumeKnob.

Top Panel has different presets. One panel, two panel or 3 panels. Settings 33/33/33, 25/25/50, 25/50/25 (my preferred one  with ELP in the middle), 50/25/25, 25/75, 75/25, 50/50, 33/66, 66/33, 100.
Choose any of 3 different panels (below) and place them at whatever position within those presets.

'Other' Panel (original Left) has Library which is a submenu having AutoDJ (WillB), Smooth Playlist Viewer (Marc2003), Artist (WillB Library Tree - artist representation)), ReFacet, hSplit (original), Tree (other WillB Library Tree representation) and the two original New and Find options, TAGS (Marc2003 - Properties + Other Info adjusted for Pseudo-transparency), Shpleck (no milkdrop new version, does not work in CUI), YouTube + Search), Bio (WillB, Review (WillB), ART (Marc2003 - Thumbs adjusted for Pseudo) and Lyrics (Lyric Show 3).
Split panel (original Middle panel which originally had Artwork 2.0 (yes, I love the timeout display) and WaveSeekbar, now has more options. Upper part has either original Artwork 2.0, Review (WillB), YouTube video display (without Search), Artist (WillB Library Tree), ESP or ELP.
Lower Part has Lyrics, YouTube, Channel Spectrum Analazer, VU Meter or ART (Namelogo, Bandlogo, Flag, RecordLogo, Artistpic or Cover).
Play panel (original Right panel) has ELP, NGP, ESP, Rating, Now, Find, Clear (as the original had).

Top panel is controlled by a preset bar which has the different layout presets but can also show audiocontrols, wavebar/wavemini/seekbar and tracktime. One of the options is to display seekbar (otherwise hidden) in case of audiocd. You can choose to place this preset bar at the top of the largest panel/right, stretch it to full width or place it at the bottom. You can also choose to enable a fullwidth waveminibar or full width waveseekbar. Last option is you can enable a (original) multichannel waveseekbar in the bottom of either the left, middle or right panel.

All panels/bars support bezels/accent/gradients and transparency, which you can disable per panel/bar in setupmode. Default all on since that looks best by far imo. In setupmode you can also control the total height, height spacing, width spacing per panel/bar, spacing within the particular panel), format of TrackTime and which audiocontrols that you want to see displayed.
Almost all functionality except for the things mentioned above are driven by mouseclicks. Everything you see can be disabled/enabled with a mouseclick.

The other half of time I spent was in ELP. It supports splits in multicd's (thanks for the idea Georgia), splits between 2ch/6ch DVDA & SACD, HDCD, video, youtube, radio stations (artists info/art changes realtime), playcounts, ratings, specs, real sizes based on base 1024, displays all kind of art you can choose in the group header, has separate groups for radio stations, YT videos and YT shorts. Here you cannot change things with a moseclick and have to set options in ELP settings.

Skin supports all DTS, TrueHD, EAC, MKV, SACD, DVDA etc. And runs on all different windows scaling which was my main incentive.

There's no known bugs or glitches other than restoring from being minimized showing some white spaces before screen is redrawn (fraction of a second; still don't know if it's fooBar itself, CUI, PSS or what else) and WSH/JS2/JS3 panels redrawing (also fraction of a second) when a button is pressed in the same panel. Just a small flicker.

Caveats are that I still rely on a couple of ancient plugins which really look good but have not been ported to x64 (VU Meter, Channel Spectrum, PeakMeter Spectrum). My skin also heavily relies on (WillB) spidermonkey scripts and they are not going to be ported to x64 anytime soon. Another thing is my skin only looks good imo because of transparency and the possibilities that gives me or the user to control the art I want to see. Some promising new plugins don't support it and JS3 also stopped supporting it the other day.

Skin runs at 4 other locations (oled's/pc's) besides the 3 I run myself (main system, laptop, oled) for more than a year now. No complaints so far ;-)

I attached some examples ...

Re: DarkOne 4.0 - modified skin

Reply #1
Much Appreciated! Thank you!

 

Re: DarkOne 4.0 - modified skin

Reply #2
Much Appreciated! Thank you!

ELP with rating and track dr in per track/per second. In the group header album dr and album replaygain is shown. in the mouseover per track it shows dr and gain for that track.

All are optional.

Re: DarkOne 4.0 - modified skin

Reply #3
Can you describe your development environment?
Editors, IDEs, source control (git?), etc.
How do you revert to "last known good" if something goes bad?

Re: DarkOne 4.0 - modified skin

Reply #4
Can you describe your development environment?
Editors, IDEs, source control (git?), etc.
How do you revert to "last known good" if something goes bad?

I use notepad++ to edit sources.
I use common sense to save sources per minor/major release in separate folders before major changes.
I update a log with minor changes and summarize them before a major release.
I get ideas of what to implement reading this forum.

For instance today I made some minor changes:
1) Finalized and implemented a replaygain button which I added to my audiocontrols code
2) When HDCD is detected I show hdcd peak extend, hdcd_gain, transcient filter if applicable displayed in front of  codec HDCD
3) I made DR available in ELP per track/per second (because you use it that way)

In the summarize log it looks like this
Code: [Select]
1.67 [Summary from 1.66h1]
Fixed annoying TrackTime fluctuations with adjacent 11's with proprtional Segoe UI in displaying tracktime_lapsed and tracktime_remaining
Added foo_dynamic_range plugin. Rightclick in playlist offers scanning and writing Dynamic Range
GROUP.DR.ON Default 1. Show album DR in Group
POPUP.DR.ON Default 1. Show track DR in Popup(Track)
ROW.DR.ON Default 0. Show track DR in Per track/Per second
CODE.DISC_TRACK Contains discno / trackno format code of elp.per track and elp.per second, which has been removed from both modules
CODE.SPECS Fix DTS 96/24 and DTS-HD MA 96/24 correctly. When playing HDCD show Peak extend, Gain, Transcient filter before codec when active
CODE.INIT.TAGS Processes %DISCSUBTILE% and published in 1.0.0.0 as g_discsubtitle
ELP Track list and Per second show g_discsubtitle on right of title if track.txt=1
ELP Track list, Per Second and Popup(Track) all use CODE.DISC_TRACK
ELP Popup(Background) - Display g_albumartist instead of Various and display %el_sum_length% when hovering on track
ELP Popup(Track) - Only show sanitized trackno when hovering on group, show sanitized trackno/totaltracks on track without leading 0's
Setupmode Prebar height is adjustable and separated from Buttonbar height. Size 22-32. Initialized at 24
Setupmode Prebar Controls height/width is adjustable. Size 12-24. Initialized at 14
Setupmode TrackTime format and AudioControls can be changed from setupmode only. Blocked in 1.1.0.0 and 1.2.0.0
1.1.0.0 Added Replaygain button to AudioControls
1.1.0.0 Seekbox 0=OFF 1=WaveMini 2=WaveSeek 3=Seek 4=Seek-AudioCD (only activated in case of AudioCD). 1&2 revert to Seek when AudioCD is playing
1.2.0.0 Added Replaygain button to AudioControls
1.2.0.0 Overhauled all bezel, accent and gradient painting which is selectable for Bottom Panel, Middle Box and per Top Plugin. Outside accent and inside same size bezel now
1.2.0.0 Added Top Plugin WaveMini and Top Plugin TrackTime
1.2.0.0 Top Plugins (QuickSearch, WaveMini, TrackTime, AudioControls) can be cycled between LMR and will be combined if adjacent plugins are the same
1.2.0.0 TrackTime format (off is not available) and AudioControls selection only available in Setupmode

I also have a todo list, but that's rather empty at the moment.

Re: DarkOne 4.0 - modified skin

Reply #5
Message for jacob91 regarding AudioControl imagebuttons

JS3 is required.

If you want to use transparancy (like I do because I use a gradient background where I put the buttons) I suggest you install JS3 up to version 3.4.5. Later versions nuked transparency support.
If you don't need transparency you can control the painted background by setting the background color in the scriptfile after setting variable transparant to 0 to reeable background painting.

Create a JS3 panel/toolbar somewhere and load the script.

AudioControls currently supported are:
Menu, Stop, Play/Pause, Previous, Next, PBO, ReplayGain, OutputDevice - All with rightbutton extras, which are described in the script

Script can be used in single button mode or multiple buttons.
I use it in single button mode and have defined 8 different panels for it, because I want to be able to disable/enable buttons per button in my skin.

If you want just a single button choose it by setting variable b_single.
If you want more buttons leave b_single at 0 and select the buttons you want in the code below by enabling/disabling them. In the description of the buttons you see what the rightclick action is.
If you want buttons in a different sequence just change the order in which they are actually created under CREATE BUTTONS.

I experimented a lot and in the end decided I want all buttons same size. So if you create a panel with a height of 50 pixels the width per button will also be 50 pixels.
If you select only one button it will be centered if you give the panel more width than height. With two buttons one will be on the far left side and the other one on the far right with no padding at the left and right side of the panel.
When you select more than two buttons they will be spaced equally between the leftmost and rightmost button.
What looks good is to allocate a width that is the number of buttons times 1.5x times the height.

Included images are easy to change/modify. Just make sure they are more or less square and don't have empty canvas on top or on the sides.
I edit my images via https://www.lunapic.com which is very easy to use. Also let's you change colors which is handy for making the hover ones and for the ones I created for ReplayGain.

Good luck



Re: DarkOne 4.0 - modified skin

Reply #6
Message for jacob91 regarding AudioControl imagebuttons

JS3 is required.

If you want to use transparancy (like I do because I use a gradient background where I put the buttons) I suggest you install JS3 up to version 3.4.5. Later versions nuked transparency support.
If you don't need transparency you can control the painted background by setting the background color in the scriptfile after setting variable transparant to 0 to reeable background painting.

Create a JS3 panel/toolbar somewhere and load the script.

AudioControls currently supported are:
Menu, Stop, Play/Pause, Previous, Next, PBO, ReplayGain, OutputDevice - All with rightbutton extras, which are described in the script

Script can be used in single button mode or multiple buttons.
I use it in single button mode and have defined 8 different panels for it, because I want to be able to disable/enable buttons per button in my skin.

If you want just a single button choose it by setting variable b_single.
If you want more buttons leave b_single at 0 and select the buttons you want in the code below by enabling/disabling them. In the description of the buttons you see what the rightclick action is.
If you want buttons in a different sequence just change the order in which they are actually created under CREATE BUTTONS.

I experimented a lot and in the end decided I want all buttons same size. So if you create a panel with a height of 50 pixels the width per button will also be 50 pixels.
If you select only one button it will be centered if you give the panel more width than height. With two buttons one will be on the far left side and the other one on the far right with no padding at the left and right side of the panel.
When you select more than two buttons they will be spaced equally between the leftmost and rightmost button.
What looks good is to allocate a width that is the number of buttons times 1.5x times the height.

Included images are easy to change/modify. Just make sure they are more or less square and don't have empty canvas on top or on the sides.
I edit my images via https://www.lunapic.com which is very easy to use. Also let's you change colors which is handy for making the hover ones and for the ones I created for ReplayGain.

Good luck
hi
i know how to create a button but i don't know how to assign a function to the button, like i would like to create a button with replagay gain function and another with dsp presets
i have downloaded the file and i 'm reading but Is there a video to learn how to assign JS3  script to a button?
but could be relesed a theme based on tedgo 's  DarkOne ?
thanks

Re: DarkOne 4.0 - modified skin

Reply #7
Message for jacob91 regarding AudioControl imagebuttons

JS3 is required.

If you want to use transparancy (like I do because I use a gradient background where I put the buttons) I suggest you install JS3 up to version 3.4.5. Later versions nuked transparency support.
If you don't need transparency you can control the painted background by setting the background color in the scriptfile after setting variable transparant to 0 to reeable background painting.

Create a JS3 panel/toolbar somewhere and load the script.

AudioControls currently supported are:
Menu, Stop, Play/Pause, Previous, Next, PBO, ReplayGain, OutputDevice - All with rightbutton extras, which are described in the script

Script can be used in single button mode or multiple buttons.
I use it in single button mode and have defined 8 different panels for it, because I want to be able to disable/enable buttons per button in my skin.

If you want just a single button choose it by setting variable b_single.
If you want more buttons leave b_single at 0 and select the buttons you want in the code below by enabling/disabling them. In the description of the buttons you see what the rightclick action is.
If you want buttons in a different sequence just change the order in which they are actually created under CREATE BUTTONS.

I experimented a lot and in the end decided I want all buttons same size. So if you create a panel with a height of 50 pixels the width per button will also be 50 pixels.
If you select only one button it will be centered if you give the panel more width than height. With two buttons one will be on the far left side and the other one on the far right with no padding at the left and right side of the panel.
When you select more than two buttons they will be spaced equally between the leftmost and rightmost button.
What looks good is to allocate a width that is the number of buttons times 1.5x times the height.

Included images are easy to change/modify. Just make sure they are more or less square and don't have empty canvas on top or on the sides.
I edit my images via https://www.lunapic.com which is very easy to use. Also let's you change colors which is handy for making the hover ones and for the ones I created for ReplayGain.

Good luck

Thanks a lot, but I have an error when I try to run the script :
-----------
JavaScript runtime error “fluent_chars” is undefined
File: <main>
Line: 119, Col: 1
-----------
Line 119 : "var char_set = [chars, fluent_chars]".
-------------------------

I replaced "var char_set = [chars, fluent_chars]" by "var char_set = [chars, fluent_font]". Is that OK ?

It seems to work. The "b_rg button" is for ReplayGain. Thanks a lot.

Re: DarkOne 4.0 - modified skin

Reply #8
Message for jacob91 regarding AudioControl imagebuttons

JS3 is required.

If you want to use transparancy (like I do because I use a gradient background where I put the buttons) I suggest you install JS3 up to version 3.4.5. Later versions nuked transparency support.
If you don't need transparency you can control the painted background by setting the background color in the scriptfile after setting variable transparant to 0 to reeable background painting.

Create a JS3 panel/toolbar somewhere and load the script.

AudioControls currently supported are:
Menu, Stop, Play/Pause, Previous, Next, PBO, ReplayGain, OutputDevice - All with rightbutton extras, which are described in the script

Script can be used in single button mode or multiple buttons.
I use it in single button mode and have defined 8 different panels for it, because I want to be able to disable/enable buttons per button in my skin.

If you want just a single button choose it by setting variable b_single.
If you want more buttons leave b_single at 0 and select the buttons you want in the code below by enabling/disabling them. In the description of the buttons you see what the rightclick action is.
If you want buttons in a different sequence just change the order in which they are actually created under CREATE BUTTONS.

I experimented a lot and in the end decided I want all buttons same size. So if you create a panel with a height of 50 pixels the width per button will also be 50 pixels.
If you select only one button it will be centered if you give the panel more width than height. With two buttons one will be on the far left side and the other one on the far right with no padding at the left and right side of the panel.
When you select more than two buttons they will be spaced equally between the leftmost and rightmost button.
What looks good is to allocate a width that is the number of buttons times 1.5x times the height.

Included images are easy to change/modify. Just make sure they are more or less square and don't have empty canvas on top or on the sides.
I edit my images via https://www.lunapic.com which is very easy to use. Also let's you change colors which is handy for making the hover ones and for the ones I created for ReplayGain.

Good luck

Thanks a lot, but I have an error when I try to run the script :
-----------
JavaScript runtime error “fluent_chars” is undefined
File: <main>
Line: 119, Col: 1
-----------
Line 119 : "var char_set = [chars, fluent_chars]".
-------------------------

I replaced "var char_set = [chars, fluent_chars]" by "var char_set = [chars, fluent_font]". Is that OK ?

It seems to work. The "b_rg button" is for ReplayGain. Thanks a lot.

Good! The font was probably since you did not have that particular font installed. It is obsolete anyway since I only use imagebuttons instead of the original character based buttons which did not space out nicely.

Edit: I commented out all references to font and made some adjustments to the readme.

Re: DarkOne 4.0 - modified skin

Reply #9
hi
i know how to create a button but i don't know how to assign a function to the button, like i would like to create a button with replagay gain function and another with dsp presets
i have downloaded the file and i 'm reading but Is there a video to learn how to assign JS3  script to a button?
but could be relesed a theme based on tedgo 's  DarkOne ?
thanks

About DSP settings. I'm not using any other DSP preset than "rear channels to side channels" in case of 5.1 audio.
I can assign rightmouseclick on one of the buttons that opens up the DSP preferences page where you can choose the DSP chain you want to use manually.

See the attached video

Re: DarkOne 4.0 - modified skin

Reply #10
Message for jacob91 regarding AudioControl imagebuttons

JS3 is required.

If you want to use transparancy (like I do because I use a gradient background where I put the buttons) I suggest you install JS3 up to version 3.4.5. Later versions nuked transparency support.
If you don't need transparency you can control the painted background by setting the background color in the scriptfile after setting variable transparant to 0 to reeable background painting.

Create a JS3 panel/toolbar somewhere and load the script.

AudioControls currently supported are:
Menu, Stop, Play/Pause, Previous, Next, PBO, ReplayGain, OutputDevice - All with rightbutton extras, which are described in the script

Script can be used in single button mode or multiple buttons.
I use it in single button mode and have defined 8 different panels for it, because I want to be able to disable/enable buttons per button in my skin.

If you want just a single button choose it by setting variable b_single.
If you want more buttons leave b_single at 0 and select the buttons you want in the code below by enabling/disabling them. In the description of the buttons you see what the rightclick action is.
If you want buttons in a different sequence just change the order in which they are actually created under CREATE BUTTONS.

I experimented a lot and in the end decided I want all buttons same size. So if you create a panel with a height of 50 pixels the width per button will also be 50 pixels.
If you select only one button it will be centered if you give the panel more width than height. With two buttons one will be on the far left side and the other one on the far right with no padding at the left and right side of the panel.
When you select more than two buttons they will be spaced equally between the leftmost and rightmost button.
What looks good is to allocate a width that is the number of buttons times 1.5x times the height.

Included images are easy to change/modify. Just make sure they are more or less square and don't have empty canvas on top or on the sides.
I edit my images via https://www.lunapic.com which is very easy to use. Also let's you change colors which is handy for making the hover ones and for the ones I created for ReplayGain.

Good luck

Thanks a lot, but I have an error when I try to run the script :
-----------
JavaScript runtime error “fluent_chars” is undefined
File: <main>
Line: 119, Col: 1
-----------
Line 119 : "var char_set = [chars, fluent_chars]".
-------------------------

I replaced "var char_set = [chars, fluent_chars]" by "var char_set = [chars, fluent_font]". Is that OK ?

It seems to work. The "b_rg button" is for ReplayGain. Thanks a lot.

Good! The font was probably since you did not have that particular font installed. It is obsolete anyway since I only use imagebuttons instead of the original character based buttons which did not space out nicely.

Edit: I commented out all references to font and made some adjustments to the readme.
Hi,
With a right clic on the panel ;
JavaScript runtime error “has_font” is undefined
File: <main>Line: 371, Col: 2
Line: 371 : "sub.AppendMenuItem(EnableMenuIf(has_font), 2, 'Fluent');"

Re: DarkOne 4.0 - modified skin

Reply #11
Hi,
With a right clic on the panel ;
JavaScript runtime error “has_font” is undefined
File: <main>Line: 371, Col: 2
Line: 371 : "sub.AppendMenuItem(EnableMenuIf(has_font), 2, 'Fluent');"

Yes I noticed. This night a new version of JSP3 has been released that supports transparency again, so I updated to it and integrated the imagebutton code again with the samples provided in this new version. These samples do not contain any font code.
I tested all buttons left/rightclick and everything is fine over here.

Attached is a new archive with modified readme, script and the same button artwork.
Just update to the newest JSP3 version and load the updated script with what you want in your existing JSP3 panel/toolbar.

Re: DarkOne 4.0 - modified skin

Reply #12
Maybe I'm doing something wrong, but when I try to set just one button (var b_single=6), the panel stops working - no hover on images, no left-click menu, etc. (?) It works correctly with two or more buttons.

Thanks so much for the script though, looks extremely useful! 8)

(I'm only testing in a default install by the way, not a theme/skin. JSP 3.4.10)

Re: DarkOne 4.0 - modified skin

Reply #13
Maybe I'm doing something wrong, but when I try to set just one button (var b_single=6), the panel stops working - no hover on images, no left-click menu, etc. (?) It works correctly with two or more buttons.

Thanks so much for the script though, looks extremely useful! 8)

(I'm only testing in a default install by the way, not a theme/skin. JSP 3.4.10)

I'm using all buttons is single button mode. I just reloaded the code in the relevant button and I don't have issues with it.

It is the Playbackorder button. It is the only button that relies on a non standard foobar variable (plman.PlaybackOrder) which is as I remember correctly native for Marc's playlistmanager. BTW. He just released a 3.4.11.

My best guess that variable is not defined in your environment.

This is the code (which I cleanup up after 3.4.10 was released) I just loaded in button 6 and works fine in my CUI/PSS skin. Maybe try again?
Code: [Select]
// ==PREPROCESSOR==
// @name "Playback Buttons - Menu, Stop, Play/Pause, Previous, Next, PBO, ReplayGain, OutputDevice - All with rightbutton extras"
// @author "marc2003, modified by Defender"
// @import "%fb2k_component_path%helpers.txt"
// @import "%fb2k_component_path%samples\js\lodash.min.js"
// @import "%fb2k_component_path%samples\js\common.js"
// @import "%fb2k_component_path%samples\js\panel.js"
// ==/PREPROCESSOR==

// JSP3 3.4.10 2024-02-28. Supports transparency. Integrated Imagebutton code with the samples provided with this version

var b_single = 6; // 0= Select multiple buttons 1= Menu 2= Stop 3= Play/Pause 4= Previous 5= Next 6= PBO 7=ReplayGain 8= OutputDevice

var transparant = 1; // 0=OFF paint background - set desired colour in var colours below 1=ON do not paint background

if (b_single==0) {
// Select multiple buttons 0=OFF 1=ON. Make sure panel has enough width otherwise hover can stay activated with mouseovers
// Left click   Right click
b_menu = 1; // Main Menu - Help Menu
b_stop = 1; // Stop - Stop After Current
b_play = 1; // Play/Pause - Random
b_prev = 1; // Previous - Seek Back  10 sec
b_next = 1; // Next - Seek Ahead 10 sec
b_pbo = 1; // PBO Dropdown - Reset to Default
b_rg = 1; // ReplayGain Dropdown - Reset to Track
b_out = 1; // OutputDevice Dropdown - Preferences
}

//////////////////////////////////////////////////////////////

if (b_single>0) {
// Set all buttons OFF
b_menu = 0;
b_stop = 0;
b_play = 0;
b_prev = 0;
b_next = 0;
b_pbo = 0;
b_rg = 0;
b_out = 0;

switch (b_single) {
case 1: b_menu = 1; break;
case 2: b_stop = 1; break;
case 3: b_play = 1; break;
case 4: b_prev = 1; break;
case 5: b_next = 1; break;
case 6: b_pbo = 1; break;
case 7: b_rg = 1; break;
case 8: b_out = 1; break;
}
}

var bc = b_menu + b_stop + b_play + b_prev + b_next + b_pbo + b_out + b_rg; // Number of active buttons
if (bc==0) {b_menu=1; bc=1} // Activate at least one button

var r_pbo_help = 0; // 0=OFF rightclick resets to PBO Default 1=ON rightclick shows help menu
var r_rg_help = 0; // 0=OFF rightclick resets to ReplayGain Track 1=ON rightclick shows help menu

var mx = 0; // Placeholder for x of dropdown - Menu
var my = 0; // Placeholder for y of dropdown - Menu
var px = 0; // Placeholder for x of dropdown - PBO
var py = 0; // Placeholder for y of dropdown - PBO
var rx = 0; // Placeholder for x of dropdown - ReplayGain
var ry = 0; // Placeholder for y of dropdown - ReplayGain
var ox = 0; // Placeholder for x of dropdown - OutputDevice
var oy = 0; // Placeholder for y of dropdown - OutputDevice

var colours = {
background : RGB(192, 192, 192),
// normal : RGB( 63, 100, 126),
// hover : RGB(192, 224, 255),
// paused : RGB(144, 177, 201),
// sac_normal : RGB(125,  64,  65),
// sac_hover : RGB(196,  30,  35),
};

var configPath = fb.ProfilePath + 'cui-configs\\Defender\\';
var imgPath = configPath + 'Images\\PlayBack\\';

var img_menu_normal = utils.LoadImage(imgPath + 'Menu-normal.png');
var img_menu_hover = utils.LoadImage(imgPath + 'Menu-hover.png');
var img_play_normal = utils.LoadImage(imgPath + 'Play-normal.png');
var img_play_hover = utils.LoadImage(imgPath + 'Play-hover.png');
var img_pause_normal = utils.LoadImage(imgPath + 'Pause-normal.png');
var img_pause_hover = utils.LoadImage(imgPath + 'Pause-hover.png');
var img_pause_paused = utils.LoadImage(imgPath + 'Pause-paused.png');
var img_stop_normal = utils.LoadImage(imgPath + 'Stop-normal.png');
var img_stop_hover = utils.LoadImage(imgPath + 'Stop-hover.png');
var img_stopac_normal = utils.LoadImage(imgPath + 'StopAC-normal.png');
var img_stopac_hover = utils.LoadImage(imgPath + 'StopAC-hover.png');
var img_prev_normal = utils.LoadImage(imgPath + 'Prev-normal.png');
var img_prev_hover = utils.LoadImage(imgPath + 'Prev-hover.png');
var img_next_normal = utils.LoadImage(imgPath + 'Next-normal.png');
var img_next_hover = utils.LoadImage(imgPath + 'Next-hover.png');
var img_out_normal = utils.LoadImage(imgPath + 'OutputDevice-normal.png');
var img_out_hover = utils.LoadImage(imgPath + 'OutputDevice-hover.png');

var pbo_imgname = ['Default', 'RepeatPlaylist', 'RepeatTrack', 'Random', 'ShuffleTracks', 'ShuffleAlbums', 'ShuffleFolders' ];
var rg_imgname = ['Disable', 'Track', 'Album', 'PBO' ];

//////////////////////////////////////////////////////////////

var panel = new _panel();
var buttons = new _buttons();
var bs = _scale(24);

buttons.update = function () {
/* ORIGINAL
var x = ((panel.w - bs * 4) / 2);
var y = Math.round((panel.h - bs) / 2);

this.buttons.stop = new _button(x, y, bs, bs, { char : chars.stop, colour:fb.StopAfterCurrent ? colours.sac : colours.buttons}, null, function () { fb.Stop(); }, 'Stop');
this.buttons.previous = new _button(x + bs, y, bs, bs, { char : chars.prev, colour:colours.buttons }, null, function () { fb.Prev(); }, 'Previous');
this.buttons.play = new _button(x + (bs * 2), y, bs, bs, { char : !fb.IsPlaying || fb.IsPaused ? chars.play : chars.pause, colour:colours.buttons}, null, function () { fb.PlayOrPause(); }, !fb.IsPlaying || fb.IsPaused ? 'Play' : 'Pause');
this.buttons.next = new _button(x + (bs * 3), y, bs, bs, { char : chars.next, colour:colours.buttons }, null, function () { fb.Next(); }, 'Next');
*/
var h = Math.round( panel.h * 100 / 100);
var y = Math.round((panel.h - h) / 2);

var w_menu = b_menu * Math.round(h); // Button width needed - Menu
var w_stop = b_stop * Math.round(h); // Button width needed - Stop
var w_play = b_play * Math.round(h); // Button width needed - Play/Pause
var w_prev = b_prev * Math.round(h); // Button width needed - Previous
var w_next = b_next * Math.round(h); // Button width needed - Next
var w_pbo = b_pbo  * Math.round(h); // Button width needed - PBO
var w_rg = b_rg   * Math.round(h); // Button width needed - ReplayGain
var w_out = b_out  * Math.round(h); // Button width needed - OutputDevice

if (bc>0) {
var w_bp = Math.round((panel.w - w_menu - w_stop - w_play - w_prev - w_next - w_pbo - w_rg - w_out) / (bc-1)); // Padding between buttons
var x = (panel.w - w_menu - w_stop - w_play - w_prev - w_next - w_pbo - w_rg - w_out - w_bp*(bc-1)) / 2; // Half of remainder of panel.w minus used width for buttons and padding in between buttons. No padding left of first and right of last
}

var img_pbo_normal = utils.LoadImage(imgPath + 'PBO-' + pbo_imgname[plman.PlaybackOrder] + '-normal.png');
var img_pbo_hover = utils.LoadImage(imgPath + 'PBO-' + pbo_imgname[plman.PlaybackOrder] + '-hover.png');

var img_rg_normal = utils.LoadImage(imgPath + 'RG-' + rg_imgname[fb.ReplaygainMode] + '-normal.png');
var img_rg_hover = utils.LoadImage(imgPath + 'RG-' + rg_imgname[fb.ReplaygainMode] + '-hover.png');

if (  fb.IsPlaying ) { img_pp_normal = img_pause_normal; img_pp_hover = img_pause_hover }
if (  fb.IsPaused  ) { img_pp_normal = img_pause_paused; img_pp_hover = img_play_hover }
if ( !fb.IsPlaying ) { img_pp_normal = img_play_normal; img_pp_hover = img_play_hover }

// CREATE BUTTONS
w = x-w_bp; // Initialize to avoid left padding on first button in case of more than one button defined

x = x+w+(b_menu*w_bp); w=w_menu; if (bc==1) {x=(panel.w-w)/2;}
mx = x - _scale(28); my = panel.h + _scale(3);
this.buttons.menu = new _button_img(x, y, w, h, img_menu_normal, img_menu_hover, function () { _menu(mx, my); }, '');

x = x+w+(b_stop*w_bp); w=w_stop; if (bc==1) {x=(panel.w-w)/2;}
this.buttons.stop = new _button_img(x, y, w, h, fb.StopAfterCurrent ? img_stopac_normal : img_stop_normal, fb.StopAfterCurrent ? img_stopac_hover : img_stop_hover, function () { fb.Stop(); }, '');

x = x+w+(b_play*w_bp); w=w_play; if (bc==1) {x=(panel.w-w)/2;}
this.buttons.play = new _button_img(x, y, w, h, img_pp_normal, img_pp_hover, function () { fb.PlayOrPause(); }, !fb.IsPlaying || fb.IsPaused ? '' : '');

x = x+w+(b_prev*w_bp); w=w_prev; if (bc==1) {x=(panel.w-w)/2;}
this.buttons.prev = new _button_img(x, y, w, h, img_prev_normal, img_prev_hover, function () { fb.Prev(); }, '');

x = x+w+(b_next*w_bp); w=w_next; if (bc==1) {x=(panel.w-w)/2;}
this.buttons.next = new _button_img(x, y, w, h, img_next_normal, img_next_hover, function () { fb.Next(); }, '');

x = x+w+(b_pbo*w_bp); w=w_pbo; if (bc==1) {x=(panel.w-w)/2;}
px = x - _scale(28); py = panel.h + _scale(3);
this.buttons.pbo = new _button_img(x, y, w, h, img_pbo_normal, img_pbo_hover, function (x, y, mask) { _pbo(px, py);}, '');

x = x+w+(b_rg*w_bp); w=w_rg;  if (bc==1) {x=(panel.w-w)/2;}
rx = x - _scale(28); ry = panel.h + _scale(3);
this.buttons.rg = new _button_img(x, y, w, h, img_rg_normal, img_rg_hover, function (x, y, mask) { _rg(rx, ry);}, '');

x = x+w+(b_out*w_bp); w=w_out; if (bc==1) {x=(panel.w-w)/2;}
ox = x - _scale(28); oy = panel.h + _scale(3);
this.buttons.out = new _button_img(x, y, w, h, img_out_normal, img_out_hover, function () { _out(ox, oy);}, '');
}

function _button_img(x, y, w, h, normal, hover, fn, tiptext) {
this.paint = function (gr) {
if (this.current) {
gr.DrawImage(this.current, this.x, this.y, this.w, this.h, 0, 0, this.current.Width, this.current.Height)
// _drawImage(gr, this.current, this.x, this.y, this.w, this.h)
}

}

this.containsXY = function (x, y) {
return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.h;
}

this.lbtn_up = function (x, y, mask) {
if (this.fn) {
this.fn(x, y, mask);
}
}

this.cs = function (s) {
if (s == 'hover') {
this.current = this.hover;
_tt(this.tiptext);
} else {
this.current = this.normal;
}
window.RepaintRect(this.x, this.y, this.w, this.h);
}

this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.fn = fn;
this.tiptext = tiptext;
this.normal = normal;
this.hover = hover || normal;
this.current = normal;
}

function _pbo(x, y, flags) {
var menu = window.CreatePopupMenu();
var arr = new Array("Default", "Repeat (Playlist)", "Repeat (Track)", "Random", "Shuffle (tracks)", "Shuffle (albums)", "Shuffle (folders)");
var active = -1;
for (var i = 0; i < arr.length; i++) {
menu.AppendMenuItem(MF_STRING, i + 1, arr[i]);
if (arr[i].active) active = i;
}

menu.CheckMenuRadioItem(1, arr.length + 1, plman.PlaybackOrder + 1);

var idx = menu.TrackPopupMenu(x, y);
menu.Dispose();

if (idx > 0) {fb.RunMainMenuCommand("Playback/Order/" + arr[idx - 1]); };
}

function _rg(x, y, flags) {
var menu = window.CreatePopupMenu();
var arr = new Array("Disable", "Set to Track", "Set to Album", "Set to Track/Album by playback order");
var active = -1;
for (var i = 0; i < arr.length; i++) {
menu.AppendMenuItem(MF_STRING, i + 1, arr[i]);
if (arr[i].active) active = i;
}

menu.CheckMenuRadioItem(1, arr.length + 1, fb.ReplaygainMode + 1);

var idx = menu.TrackPopupMenu(x, y);
menu.Dispose();

if (idx > 0) {fb.ReplaygainMode = idx - 1; };
}

function _out(x, y) {
var menu = window.CreatePopupMenu();
var str = fb.GetOutputDevices();
var arr = JSON.parse(str);
var active = -1;
for (var i = 0; i < arr.length; i++) {
menu.AppendMenuItem(MF_STRING, i + 1, arr[i].name);
if (arr[i].active) active = i;
}

if (active > -1) menu.CheckMenuRadioItem(1, arr.length + 1, active + 1);

var idx = menu.TrackPopupMenu(x, y);
menu.Dispose();

if (idx > 0) fb.RunMainMenuCommand('Playback/Device/' + arr[idx - 1].name);
}

function on_playback_order_changed(new_index) {
buttons.update();
window.Repaint();
}

function on_replaygain_mode_changed(new_mode) {
buttons.update();
window.Repaint();
}

function on_mouse_lbtn_up(x, y) {
buttons.lbtn_up(x, y);
}

function on_mouse_leave() {
buttons.leave();
}

function on_mouse_move(x, y) {
buttons.move(x, y);
}

function on_mouse_rbtn_up(x, y) {
if (buttons.buttons.menu.containsXY(x, y)) {
_help(mx, my);
return true;
}

if (buttons.buttons.stop.containsXY(x, y)) {
fb.StopAfterCurrent = !fb.StopAfterCurrent;
return true;
}

if (buttons.buttons.play.containsXY(x, y)) {
fb.Random(); // Select and play Random track immediately
return true;
}

if (buttons.buttons.prev.containsXY(x, y)) {
fb.RunMainMenuCommand('Playback/Seek/Back by 10 seconds');
return true;
}

if (buttons.buttons.next.containsXY(x, y)) {
fb.RunMainMenuCommand('Playback/Seek/Ahead by 10 seconds');
return true;
}

if (buttons.buttons.pbo.containsXY(x, y)) {
if (r_pbo_help == 1) {
_help(px, py);
return true;
}
// Cycle through options
// if ( plman.PlaybackOrder == 6 ) plman.PlaybackOrder = 0;
// else plman.PlaybackOrder = plman.PlayBackOrder + 1;

// Reset to Default
plman.PlaybackOrder = 0;
return true;
}

if (buttons.buttons.rg.containsXY(x, y)) {
if (r_rg_help == 1) {
_help(rx, ry);
return true;
}
// Reset to Track
fb.ReplaygainMode = 1;
return true;
}

if (buttons.buttons.out.containsXY(x, y)) {
fb.RunMainMenuCommand('File/Preferences');
return true;
}

return panel.rbtn_up(x, y);
}

function on_paint(gr) {
if (transparant == 0){
gr.Clear(colours.background);
}
buttons.paint(gr);
}

function on_playback_pause() {
buttons.update();
window.Repaint();
}

function on_playback_starting() {
buttons.update();
window.Repaint();
}

function on_playback_stop() {
buttons.update();
window.Repaint();
}

function on_playlist_stop_after_current_changed() {
buttons.update();
window.Repaint();
}

function on_size() {
panel.size();
buttons.update();
}

Re: DarkOne 4.0 - modified skin

Reply #14
Ah... It works with one button in CUI, but not in DUI that I was testing. Which is fine for me since I use CUI currently, but you may want to try a fresh portable install of DUI to check that out.

It was not just b_single=6 (playback order) but anything besides 0 that freezes it ... (or b_single=0 with only one button enabled below such as b_menu=1 and the rest off, however two buttons or more enabled work fine)

Cheers :)

Re: DarkOne 4.0 - modified skin

Reply #15
Here's a mod of the original Playback Buttons bundled with JSP3. It has a PBO button but excludes shuffle (albums) and shuffle (folders)

https://hydrogenaud.io/index.php/topic,110516.msg1040341.html#msg1040341

Re: DarkOne 4.0 - modified skin

Reply #16
Hi,
With a right clic on the panel ;
JavaScript runtime error “has_font” is undefined
File: <main>Line: 371, Col: 2
Line: 371 : "sub.AppendMenuItem(EnableMenuIf(has_font), 2, 'Fluent');"

Yes I noticed. This night a new version of JSP3 has been released that supports transparency again, so I updated to it and integrated the imagebutton code again with the samples provided in this new version. These samples do not contain any font code.
I tested all buttons left/rightclick and everything is fine over here.

Attached is a new archive with modified readme, script and the same button artwork.
Just update to the newest JSP3 version and load the updated script with what you want in your existing JSP3 panel/toolbar.

Thanks for your help. 👍👍