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: CUI & PSS 101 (Read 5398 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

CUI & PSS 101

It occurred to me recently that HA is devoid of dedicated step by step examples on how to configure CUI & PSS. If you're just digging into this foobar2000 UI alternative it can be extremely frustrating to do anything with it. This topic aims to shed some light on the basics and beyond. First the obvious - this is for the absolute first steps in creating your own personalized foobar2000 and by no means the definitive say so on the matter. There are plenty of ways to configure this and none are right nor wrong. Many configurations are out there that were made by someone to fulfill their needs and I guarantee you, yours are not the same. Sooner or later you're going to want something just little different whether it be a color, component, or size of some element.

Here's a starting point to get you on your way to rectify that. It's meant as an example of one particular method to add elements, colors, and sizing options to the UI. If there is something unclear I'll do my best to explain the methodology behind the madness. Perhaps others will be inclined to contribute as well. I only ask to make it clear and concise.

CUI & PSS Tutorial Part 1

The album above is a picture heavy step by step using a percentages (size) of the UI method to get started. Generally easy to accomplish results can be obtained this way. It uses only the basic components included with CUI for now. Additional installments in the future will expand on more varied options.

CUI & PSS 101

Reply #1 –
"It occurred to me recently that HA is devoid of dedicated step by step examples"

HA's foobar section is missing foobar and third party components FAQ with examples and samples:
- "How to remove splitter borders?"
- "How to create dynamic buttons?"
- "How to change default seekbar?"
- "How to achieve this or that kind of look?"
or whatever questions appear frequently here.

CUI & PSS 101

Reply #4 –
Part 4 now up. Some things might not be clear in a short caption so post any related questions here.

CUI & PSS Tutorial Part 4

CUI & PSS 101

Reply #5 –
Part 5 - switchable panels.

CUI & PSS Tutorial Part 5


This tutorial would take too many screenshots so I decided it would be simpler to speed things up here. When you get to the step in image #6 use this code. Once you finish with the following steps (image examples) return here to see how to change the numbers.

Code: [Select]
// Light backbround so we can see the menu text
$drawrect(0,0,%_width%,21,175-175-175,,)


// Panel names
$set_ps_global(P0,Green)
$set_ps_global(P1,Red)


// Variables for size and colors here
$set_ps_global(BTW,$sub(%LM%,10))
$set_ps_global(BTH,40)
$set_ps_global(PY,130)
$set_ps_global(PH,$sub(%_height%,%PY%,%BM%))
$set_ps_global(PW1,$sub(%_width%,%LM%))
$set_ps_global(PW2,$sub(%PW1%,%RM%))
$set_ps_global(BM,500)
$set_ps_global(LM,155)
$set_ps_global(RM,455)
$set_ps_global(TXTC,250-250-250)
$set_ps_global(TXTC_h,0-0-0)
$set_ps_global(TXTC_s,255-200-50)
$set_ps_global(BC,30-30-30-175)
$set_ps_global(BC_h,125-125-125-200)
$set_ps_global(BC_s,0-130-250-150)



// Button configuration here
$textbutton(5,%PY%,%BTW%,%BTH%,%P0%,%P0%,
SETGLOBAL:PANEL:0;REFRESH,fontcolor:$ifequal(%PANEL%,0,%TXTC_s%,%TXTC%) brushcolor:$ifequal(%PANEL%,0,%BC_s%,%BC%),fontcolor:%TXTC_h% brushcolor:%BC_h%),
$textbutton(5,$add(%BTH%,%PY%,2),%BTW%,%BTH%,%P1%,%P1%,
SETGLOBAL:PANEL:1;REFRESH,fontcolor:$ifequal(%PANEL%,1,%TXTC_s%,%TXTC%) brushcolor:$ifequal(%PANEL%,1,%BC_s%,%BC%),fontcolor:%TXTC_h% brushcolor:%BC_h%)



// PSS switching
$showpanel(0,$ifequal(%PANEL%,0,1,0))
$showpanel(1,$ifequal(%PANEL%,1,1,0))
$movepanel(%panel%,$sub(%_width%,%PW1%),%PY%,%PW2%,%PH%)



Thanks goes to marc2003 for explaining these steps in the PSS thread.

CUI & PSS 101

Reply #6 –
Now that you're finished with that here's a few quick items for you to look over.

First the variables and what we are dealing with in this example.



What we currently have in our Script tab defining our two child splitters. These four numbers can impact major changes on the UI.



Change all the numbers to those shown here. Then press OK.




Instead of detailing every single option here I think it would be best to just ask if you have a question on any section in the script. You can now add elements to the two splitters as outlined in the earlier parts of the tutorial. They can be percentage based or explicit. It's up to you what works best.

CUI & PSS 101

Reply #7 –
Here's a little extra. Paletton Color Schemes.

If you're like me and have trouble deciding on colors this site is very handy to reference. Most of the time I just use the Randomize... until something appeals to me. If there's a color that catches my eye I then use the Tables/Export... to see what the RGB values are. It's an easy way to make the UI consistent and complimentary.
 

CUI & PSS 101

Reply #9 –
CUI & PSS Tutorial Part 6

This part shows how to hide the filter column headers and scrollbars.

Use the code snippet here.

Code: [Select]
$movepanel(0,0,0,$add(%_width%,20),%_height%)
$puts(move,0),
$puts(move, -20)
$movepanel_c(Filter,-1,-22,$sub(%_width%,$get(move)),$sub(%_height%,-25))