Shop Mobile More Submit  Join Login
About Varied / Hobbyist Rangga Katili26/Male/Indonesia Recent Activity
Deviant for 6 Years
Needs Core Membership
Statistics 19 Deviations 446 Comments 26,493 Pageviews
×

Newest Deviations

Random Favourites

Groups

deviantID

FlipOut69
Rangga Katili
Artist | Hobbyist | Varied
Indonesia
Location : Jakarta, Indonesia
Interests : General Art, UI Customization
Design Preferences : Minimalist, Modern-themed, Fantasy
Graphic Editor : Adobe Photoshop CS5
PC OS : Windows 10 x64
Phone : Oneplus One w/ CM12
Favorite Players : foobar2000 (Windows); Poweramp (Android)

Meet Me on :
FB : www.facebook.com/cliffflip
G+ : plus.google.com/u/0/+RanggaKat…
Twitter : twitter.com/RanggaKatili

Activity


JAM 4K v1.5.1 by FlipOut69
JAM 4K v1.5.1
Requirements :
1. foobar2000 v1.3.9
2. Resolution higher than 1920x1080. 4K monitor is recommended
3. Segoe UI font family

Buy from Sellfy ($2, You need paypal account): sellfy.com/p/w6g2
The download button on DA only contains dummy files, download only from link above

Read first :
1. Window frame should look like the preview image, regardless what Windows version and custom VS you're using.
2. Installation and basic setup guide is included in the zip archive.

Additional screenshots


Feedback is always appreciated =D

And if you like it, don't forget to add your :+fav:

If you want to support this skin development, you can donate to my PayPal account www.paypal.com/cgi-bin/webscr?…

____________________________

Changelog :

*Check the user guide for complete logs

V1.5.1 [28 May 2016]
- WSH panel mod for artist pictures and biography has been replaced by Jscript Panel, big thanks to marc2003

v1.5 [21 May 2016]
- 2 new color scheme (Grey-Pink & Grey-White-Orange) for 125% and 150% DPI
- New Library view (Genre, Rating, etc)

v1.3.1 [25 Jan 2016]
- New seekbar design
- Windows 10 min/max/close buttons

v1.3 [31 Aug 2014]
- Option to disable last.fm integration ('charts' view, love button, etc.)
- Change method to grab artist pictures :
-- Fetching up to 5 pictures
-- All pictures now will be saved in foobar2000 profile folder
- Artist pictures & album artwork on the main interface now will insist filling the space regardless of their aspect ratio
- 'Playlists' view functionality now integrated into 'Collection' view. In the form of collapsible bar.
- Add library tree panel in collection interface
- Minor fixes
- v1.2 171213 Hotfix (100% DPI only)

v1.2 [11 Dec 2013]
- Change the default scheme to dark grey w/ blue
- Redesign the collection layout
- Also redesign few other panels
- Full-length & dynamic seekbar
- Optimization for streaming contents (dynamic artist & title, station name)
- Better volume calculation
- Bunch of fixes

v1.1 [11 Nov 2013]
- 2 new color schemes 
- Resizable window (beta)
- Smart playlists
- Alternative 'Now Playing' list style
- Fix missing symbols / characters
____________________________

Credit to :
iosuiscloud for supporting this skin development
marc2k3 for lots of WSH scripts
Markkoenig for volume bar script (from Lux)
ainq for Gauss: Aqua wallpaper
dAKirby309 for foobar2000 icon (from Metro UI Icon Set)
Loading...
JIVE v1.1 by FlipOut69
JIVE v1.1
Now changing primary and secondary colors is easy as ABC. Just go to Prefs -> Tools -> Extended Variables -> Change Primary Color and/or Secondary color in RGB value -> restart foobar2000
Show off your color combination in the comment!

Requirements :
1. foobar2000 v1.3.9 or newer
2. Resolution higher than 1200x755 (default window size)
3. Segoe UI font family

Buy from Sellfy ($1, You need paypal account):  sellfy.com/p/wTzT
The download button on DA only contains dummy files, download only from link above

Read first :
1. Window frame should look like the preview image, regardless what Windows version and custom VS you're using.
2. Installation and basic setup guide is included in the zip archive.

Feedback is always appreciated =D

And if you like it, don't forget to add your :+fav:

If you want to support this skin development, you can donate to my PayPal account www.paypal.com/cgi-bin/webscr?…
Loading...
JIVE 4K v1.1 by FlipOut69
JIVE 4K v1.1
Now changing primary and secondary colors is easy as ABC. Just go to Prefs -> Tools -> Extended Variables -> Change Primary Color and/or Secondary color in RGB value -> restart foobar2000.
Show off your color combination in the comment!

Requirements :
1. foobar2000 v1.3.9 or newer
2. Resolution higher than 1920x1080. 4K monitor is recommended
3. Segoe UI font family

Buy from Sellfy ($2, You need paypal account):  sellfy.com/p/cxrQ/
The download button on DA only contains dummy files, download only from link above

Read first :
1. Window frame should look like the preview image, regardless what Windows version and custom VS you're using.
2. Installation and basic setup guide is included in the zip archive.

Feedback is always appreciated =D

And if you like it, don't forget to add your :+fav:

If you want to support this skin development, you can donate to my PayPal account www.paypal.com/cgi-bin/webscr?…
Loading...

Read other parts:


Elements Relative Position and Size


A by FlipOut69


If you already using my Jam, you can easily see on Collection interface that album browser (center panel) starts from 3 columns on default size (1200px x 600px)
and goes up to 7 columns on 1920px x 1080px. Also the ELPlaylist (right panel) goes from 373px (1200px x 600x) to 493px (1920px x 1080px).
With this tutorial you can also use codes to distribute additional width and height of your current window size to your liking.

Components Required
Columns UI 
Panels Stack Splitter 
UI Hacks

1. First of all, install foobar on portable mode, select Columns UI when you open foobar2000.

1 by FlipOut69

Then go to preferences -> Display -> Main Window -> set minimum size to 500px x 500px (It's important to set the minimum size of the window) -> apply
Resize your current window size to 500px x 500px . You can also configure frame style from Main Window, I prefer to hide it (No Border).

B by FlipOut69


2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist then add Panel Stack Splitter. Click Apply

C by FlipOut69


Remove all panels on top (Playback buttons, menu, etc) and bottom (status pane) so there's no panels left.

D by FlipOut69


3. Let's start with creating 4 rectangles, Right-click on any area -> Splitter Settings -> Script tab -> copy-paste these codes:
$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,250,250,0-255-0,)
$drawrect(0,250,250,250,0-0-255,)
$drawrect(250,250,250,250,200-200-200,)
E by FlipOut69


With these codes, each rectangle has 250x width and 250px height, but if you stretch the window wider on higher, those rectangles didn't get additional width and height,
that's normal because they are on fixed size.

4. Delete codes in step 3 and replace it with these:
$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,$sub(%_width%,250),250,0-255-0,)
$drawrect(0,250,250,$sub(%_height%,250),0-0-255,)
$drawrect(250,250,$sub(%_width%,250),$sub(%_height%,250),200-200-200,)

*%_width% and %_height% are variables to measure the width and height of foobar2000 window. Right now (on default size) it has value of 500.

F by FlipOut69


With these codes, the green and grey rectangles gets wider if you widening the window, also the blue and grey rectangles gets more height if you drag the window higher,
but the red rectangle size remains the same.

5. The idea of this tutorial is that, when you drag the window wider and/or higher, you can distribute the additional width and height to your elements (at least 2 elements and e.g. rectangles on this tutorial)
Let's create 2 variables to measure the additional width and height of your window size, then divided them by two :

$puts(RelPos_X,$div($sub(%_width%,500),2))
$puts(RelPos_Y,$div($sub(%_height%,500),2))
*RelPos stands for relative position

Delete codes in step 4 and replace it with these:
$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)
$drawrect(0,$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-0-255,)
$drawrect($add($get(RelPos_X),250),$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),200-200-200,)
G by FlipOut69


With these codes, ALL rectangles gets more width and height if you resize the window to a wider or higher size. RelPos (X & Y) measures additional width and height and distribute it to our rectangles.
On default size (500px x 500px), '$add($get(RelPos_X),250)'and '$add($get(RelPos_Y),250)' equals 250px, but when you resize your window, say 1000px x 1000px, those 2 variables has value of 500px (250 + width/height - 250 then divided by 2)

6. Now that you already distributed addditional width & height by two, you can for example, distribute it by six (1 element gets 5/6 of additional width or height and the other element gets 1/6).
Just add another two RelPos:
$puts(RelPos_X2,$div($sub(%_width%,500),6))
$puts(RelPos_X3,$mul($get(RelPos_X2),5))

Then replace these codes:
$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)

To:
$drawrect(0,0,$add($get(RelPos_X3),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X3),250),0,$add($get(RelPos_X2),250),$add($get(RelPos_Y),250),0-255-0,)

*The red rectangle gets 5/6 of additional width, and the green rectangle gets 1/6 of additional width)
H by FlipOut69


You can change rectangles on this tutorial to any elements (i.e. panels) of your skin, the theory is same.
Hope this helps!

Read other parts:

Avoiding Truncated Panels


This is another trick I learned when creating JAM. The idea is, if you drag the foobar2000 window higher or wider, panels' row and/or column doesn't get truncated because lacks of space. For example if you use ELPlaylist and it has 560px of height, and you set each row to 50px, the panel will display 11 rows instead of 12 rows but the lowest row gets truncated.  This trick is taking advantage of foobar2000 incapabilities of counting math down to decimals.

Components required :
Columns UI 
Panels Stack Splitter 
ELPlaylist 
UI Hacks 
*copy the dll files to components folder

1. Install foobar on portable mode, select Columns UI when you open foobar2000.


1 by FlipOut69


2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist, add Panel Stack Splitter then insert ELPlaylist under Panels Stack Splitter. Click apply.


2 by FlipOut69
3. Still on Columns UI page, go to status bar tab and uncheck 'show status pane'.

3 by FlipOut69
4. Remove all toolbar panels (menu, buttons, etc). Set the minimum window size to 500px x 500px from Prefs -> Display -> Main Window -> minimum size. Click OK. resize window to 500px x 500px.

4 by FlipOut69

5. Download ELPlaylist configuration file from : 1drv.ms/u/s!Av2zK_6HFiBKuECaqS…
Import it by right-clicking on ELP panel -> Settings -> Import -> ELP.elp. Drag and drop at least 1 album of your songs to foobar2000 window.

5 by FlipOut69

7. Right-click on empty area -> Splitter settings -> PanelList tab -> Rename ELPlaylist caption to 'ELP', check 'forced layout' and click apply.

6 by FlipOut69

From this screenshot you can easily see that the songs at the bottom ('Space Bound') gets truncated because lack of space.

8. Still on Splitter settings, go to Script tab -> Copy-paste these code :
$puts(AddHeight1,$div($sub(%_height%,20),50))
$puts(PHeight1,$mul($get(AddHeight1),50))
$movepanel_c(ELP,0,20,%_width%,$get(PHeight1))

7 by FlipOut69

The first variable will measure the current height of the window and divide it by 50 (row's height in pixel).
The second variable will multiplying it back to 50px.

9. You can also use the math (dividing and multiplying) for panel's width, the theory is same.

Good Luck!

Read other parts:


Elements Relative Position and Size


A by FlipOut69


If you already using my Jam, you can easily see on Collection interface that album browser (center panel) starts from 3 columns on default size (1200px x 600px)
and goes up to 7 columns on 1920px x 1080px. Also the ELPlaylist (right panel) goes from 373px (1200px x 600x) to 493px (1920px x 1080px).
With this tutorial you can also use codes to distribute additional width and height of your current window size to your liking.

Components Required
Columns UI 
Panels Stack Splitter 
UI Hacks

1. First of all, install foobar on portable mode, select Columns UI when you open foobar2000.

1 by FlipOut69

Then go to preferences -> Display -> Main Window -> set minimum size to 500px x 500px (It's important to set the minimum size of the window) -> apply
Resize your current window size to 500px x 500px . You can also configure frame style from Main Window, I prefer to hide it (No Border).

B by FlipOut69


2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist then add Panel Stack Splitter. Click Apply

C by FlipOut69


Remove all panels on top (Playback buttons, menu, etc) and bottom (status pane) so there's no panels left.

D by FlipOut69


3. Let's start with creating 4 rectangles, Right-click on any area -> Splitter Settings -> Script tab -> copy-paste these codes:
$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,250,250,0-255-0,)
$drawrect(0,250,250,250,0-0-255,)
$drawrect(250,250,250,250,200-200-200,)
E by FlipOut69


With these codes, each rectangle has 250x width and 250px height, but if you stretch the window wider on higher, those rectangles didn't get additional width and height,
that's normal because they are on fixed size.

4. Delete codes in step 3 and replace it with these:
$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,$sub(%_width%,250),250,0-255-0,)
$drawrect(0,250,250,$sub(%_height%,250),0-0-255,)
$drawrect(250,250,$sub(%_width%,250),$sub(%_height%,250),200-200-200,)

*%_width% and %_height% are variables to measure the width and height of foobar2000 window. Right now (on default size) it has value of 500.

F by FlipOut69


With these codes, the green and grey rectangles gets wider if you widening the window, also the blue and grey rectangles gets more height if you drag the window higher,
but the red rectangle size remains the same.

5. The idea of this tutorial is that, when you drag the window wider and/or higher, you can distribute the additional width and height to your elements (at least 2 elements and e.g. rectangles on this tutorial)
Let's create 2 variables to measure the additional width and height of your window size, then divided them by two :

$puts(RelPos_X,$div($sub(%_width%,500),2))
$puts(RelPos_Y,$div($sub(%_height%,500),2))
*RelPos stands for relative position

Delete codes in step 4 and replace it with these:
$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)
$drawrect(0,$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-0-255,)
$drawrect($add($get(RelPos_X),250),$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),200-200-200,)
G by FlipOut69


With these codes, ALL rectangles gets more width and height if you resize the window to a wider or higher size. RelPos (X & Y) measures additional width and height and distribute it to our rectangles.
On default size (500px x 500px), '$add($get(RelPos_X),250)'and '$add($get(RelPos_Y),250)' equals 250px, but when you resize your window, say 1000px x 1000px, those 2 variables has value of 500px (250 + width/height - 250 then divided by 2)

6. Now that you already distributed addditional width & height by two, you can for example, distribute it by six (1 element gets 5/6 of additional width or height and the other element gets 1/6).
Just add another two RelPos:
$puts(RelPos_X2,$div($sub(%_width%,500),6))
$puts(RelPos_X3,$mul($get(RelPos_X2),5))

Then replace these codes:
$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)

To:
$drawrect(0,0,$add($get(RelPos_X3),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X3),250),0,$add($get(RelPos_X2),250),$add($get(RelPos_Y),250),0-255-0,)

*The red rectangle gets 5/6 of additional width, and the green rectangle gets 1/6 of additional width)
H by FlipOut69


You can change rectangles on this tutorial to any elements (i.e. panels) of your skin, the theory is same.
Hope this helps!

Read other parts:

Avoiding Truncated Panels


This is another trick I learned when creating JAM. The idea is, if you drag the foobar2000 window higher or wider, panels' row and/or column doesn't get truncated because lacks of space. For example if you use ELPlaylist and it has 560px of height, and you set each row to 50px, the panel will display 11 rows instead of 12 rows but the lowest row gets truncated.  This trick is taking advantage of foobar2000 incapabilities of counting math down to decimals.

Components required :
Columns UI 
Panels Stack Splitter 
ELPlaylist 
UI Hacks 
*copy the dll files to components folder

1. Install foobar on portable mode, select Columns UI when you open foobar2000.


1 by FlipOut69


2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist, add Panel Stack Splitter then insert ELPlaylist under Panels Stack Splitter. Click apply.


2 by FlipOut69
3. Still on Columns UI page, go to status bar tab and uncheck 'show status pane'.

3 by FlipOut69
4. Remove all toolbar panels (menu, buttons, etc). Set the minimum window size to 500px x 500px from Prefs -> Display -> Main Window -> minimum size. Click OK. resize window to 500px x 500px.

4 by FlipOut69

5. Download ELPlaylist configuration file from : 1drv.ms/u/s!Av2zK_6HFiBKuECaqS…
Import it by right-clicking on ELP panel -> Settings -> Import -> ELP.elp. Drag and drop at least 1 album of your songs to foobar2000 window.

5 by FlipOut69

7. Right-click on empty area -> Splitter settings -> PanelList tab -> Rename ELPlaylist caption to 'ELP', check 'forced layout' and click apply.

6 by FlipOut69

From this screenshot you can easily see that the songs at the bottom ('Space Bound') gets truncated because lack of space.

8. Still on Splitter settings, go to Script tab -> Copy-paste these code :
$puts(AddHeight1,$div($sub(%_height%,20),50))
$puts(PHeight1,$mul($get(AddHeight1),50))
$movepanel_c(ELP,0,20,%_width%,$get(PHeight1))

7 by FlipOut69

The first variable will measure the current height of the window and divide it by 50 (row's height in pixel).
The second variable will multiplying it back to 50px.

9. You can also use the math (dividing and multiplying) for panel's width, the theory is same.

Good Luck!
I created a blog about my skins development, you can access it via jamfb2k.blogspot.com.
It contains all skins, tutorials and other things about foobar2000 I've submitted in DeviantArt, and you can also view other things, especially tutorials about skinning foobar2000.


See you there!

AdCast - Ads from the Community

×

Comments


Add a Comment:
 
:iconslowboyfast:
slowboyfast Featured By Owner May 6, 2014  Professional Interface Designer
Hola Seņor Flip! Thanks for the :+fav: on rumianekk for f2k!
Reply
:iconflipout69:
FlipOut69 Featured By Owner May 11, 2014  Hobbyist General Artist
You deserved it bro :)
Reply
:iconmarkkoenig:
Markkoenig Featured By Owner Nov 29, 2013
Thanks for the :+fav: on Nightshift, mate! :)
Reply
:iconflipout69:
FlipOut69 Featured By Owner Nov 29, 2013  Hobbyist General Artist
Well deserved, bro :)

Hey check for my note in the next few minutes, there's something I want to talk about regarding this skin ;)
Reply
:iconmarkkoenig:
Markkoenig Featured By Owner Nov 29, 2013
Thanks ;) Waiting for the note.
Reply
:iconorphydian:
Orphydian Featured By Owner Nov 25, 2013  Hobbyist General Artist
flipout69.deviantart.com/art/J…


sent request for them in my metro group metrofoundry.deviantart.com/

you are also warmly invited to join !

keep our group in touch with other WIP

Reply
:iconeikichionizuka69:
eikichionizuka69 Featured By Owner Nov 24, 2013
om :3
Reply
:icontessieart333:
tessieart333 Featured By Owner Nov 20, 2013  Professional Digital Artist
Thank you for stopping by my page!  Really appreciate it:-)

_Tessie
<3
Reply
:iconslowboyfast:
slowboyfast Featured By Owner Oct 23, 2013  Professional Interface Designer
Thanks for the :+fav: bro ;)
Reply
:iconmarkkoenig:
Markkoenig Featured By Owner Oct 22, 2013
Thanks for the :+fav: on How to skin foobar2000 dude :D
Reply
Add a Comment: