Skip to main content

Topic: Columns UI appearance (Read 1490380 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1975
I'm curious to see how that Waveform Seekbar code looks in my foobar2000.
Sorry for the noob question, but how do I use it? Does it need to be saved with a particular "file name/file extension"? Where do I place the file?
Thanks.

  • marc2003
  • [*][*][*][*][*]
Columns UI appearance
Reply #1976
right click seekbar>configure>front end settings. (direct 3D 9.0c must be selected from the drop down list)

simply paste the text into the dialog.

  • Zao
  • [*][*][*][*][*]
  • Members (Donating)
Columns UI appearance
Reply #1977
The foo_wave_seekbar settings are probably properly exportable if CUI supports some sort of partial or whole settings export. At least, it uses the CUI settings infrastructure so anything that CUI claims to do w.r.t settings, it should do.

That RMS visualisation creeps up everywhere, heh.
Zao shang yong zao nong zao rang zao ren zao.
To, early in the morning, use a chisel to build a bathtub makes impatient people hot-tempered.

  • marc2003
  • [*][*][*][*][*]
Columns UI appearance
Reply #1978
importing/exporting columns UI theme (.fcl) files work for the most part. they keep all 3rd party component settings intact but for some odd reason, some of it's own settings get lost. i presume that's because they are set in the display preferences as opposed to being stored in each instance of a panel in the layout. of course sharing the whole columns ui.dll.cfg file keeps all settings without issue.

it's all or nothing though. it's not like default UI where you can enable layout editing mode and copy/paste a panel straight into windows explorer and have it turned it into an .fth file automagically.

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1979
Thanks for the help marc2003.

I compared the look of this custom coded config versus my previous config . . . I prefer my previous config more!
I don't find the waveform of this custom code to be a better visualization of the audio; it just has a sharper look, that's it.
Here is a screenshot:

  • Propheticus
  • [*][*][*]
Columns UI appearance
Reply #1980
I changed it because I thought the flat colours fit better within the DarkOne skin than the gradient look, not because I thought it would visualize the sound better.

  • tedgo
  • [*][*][*][*][*]
Columns UI appearance
Reply #1981
You're right. It fits better to DarkOne4 and looks really good.
Maybe i change the appearance by default in the future (the current look is the same as in the old DarkOne 3.0.1).

  • Bratman
  • [*][*][*]
Columns UI appearance
Reply #1982
QwErTyKb I like it, would be something I would definately go for, Propheticus I have stolen that waveform code, it looks amazing! I was using Direct2D as I don't like the fuzzy fadey waveform at all, yours fits my layout perfect spesh the retro themed.




  • Propheticus
  • [*][*][*]
Columns UI appearance
Reply #1983
btw if you find the look to be too sharp change line 104 to something like this:

Code: [Select]
factor = insideWave ? (factor * saturate(factorWave / border / 1.5)) : 0.0; //1 = max sharp



If you increase the 1.5 value, it will become softer.

  • Bratman
  • [*][*][*]
Columns UI appearance
Reply #1984
Nice that's allowed me to make it even sharper, appreciate that. I've got it set to 0.5 now, I prefer it sharp as it looks cleaner and high res, a value of even 2 looks too blurry for me.

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1985
Propheticus (at Post #1984):    Thanks for showing us how to edit the custom code for Waveform Seekbar +++++

I now like the edited Custom code+Direct 3D more than GDI+Colour choices (my previous).
Here is a screenshot:

  • Bratman
  • [*][*][*]
Columns UI appearance
Reply #1986
Nah I'm not keen, looks messy. Custom code is way better.
  • Last Edit: 29 March, 2013, 10:58:03 PM by Bratman

  • macarych
  • [*]
Columns UI appearance
Reply #1987
Black. Long Live Rock'n'Roll


  • Propheticus
  • [*][*][*]
Columns UI appearance
Reply #1988
Sorry, but that looks really ugly to me Derty... Ah well, each to his/her own. Taste is quite personal. To disable the inside rms wave, change use 'bool insideRms = 0' (line 104 in your screenshot)

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1989
Thanks for that tip on removing the inside rms wave Propheticus ++++
I think I agree with you . . . my first attempt at tweaking your Waveform Seekbar code is definitely not the greatest thing since sliced cheese :-)

Anyhow, I played with it some more . . .

On my computer, my 1st choice audio editor is Goldwave; therefore I ran Goldwave and had a look how it displays waveforms,
thus I decided to tweak the custom code to resemble the Goldwave Waveform.

Here is my latest Waveform Seekbar config:

  • Bratman
  • [*][*][*]
Columns UI appearance
Reply #1990
It's a little better but still ugly as hell compared to the custom code from Propheticus.

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1991
Propheticus' waveform is the exact same as mine  . . . except:
- I tweaked mine so that the wave fits the full panel dimensions.
- I sharpened the edges of the outside wave as much as possible, and did not allow the light blue body color to reach the edges; the extreme outside tips of the wave are actually white.
- I gave the wave some shading and 3-dimensional quality by strongly blurring the inner wave and also making it translucent.

Putting my critics cap on for a second and comparing "Propheticus VS Mine" . . . .
There is no way in hell the blurry cartoonish looking thing which hasn't been optimized to fill the available space is in the same ballpark as the one I optimized. . . . . Having actually played and viewed the waveforms of many many tracks using this latest edit, I can say that I have created nothing less than a beautiful audio-visual experience.

  • Bratman
  • [*][*][*]
Columns UI appearance
Reply #1992
I still think the original is better it looks more elegant and functional, plus I'm not a fan of 3D shading like glass effects etc, I like things flat and 2D like Windows 8. You know it's not meant to actually fill the available space all the time? His code does on loud tracks but tracks that haven't been juiced up by the loudness war are smaller which is correct.

  • Propheticus
  • [*][*][*]
Columns UI appearance
Reply #1993
The funny thing is,... it isn't even my code. I just put something together from other posts.

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1994
--Replying to Bratman at Post #1993--

Not correct . . . .

this is the empirical truth of that code:
if you change the original line   "minmaxrms.rgb *=0.8 + minmaxrms.a;"   to   "minmaxrms.rgb *=1.0 + minmaxrms.a;"
then the waveform will perfectly fill the available space; if a "bricked" waveform is played it will reach to just before the panel edges and not beyond; gentler waveforms reduce in size appropriately.
  • Last Edit: 01 April, 2013, 06:10:30 PM by derty2

  • Bratman
  • [*][*][*]
Columns UI appearance
Reply #1995
Propheticus it's still your code even if you put it together through other posts, it's not built by you from scratch but you still made it your own.

derty2 props on that but 1.0 cuts off the waveform of some songs leaving a straight line so I've changed it from 0.8 to 0.9.

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1996
I thought I would share one final variation of the Waveform Seebar with you guys . . .

What is very interesting about this is it gives you a visual indication of the track dynamics; it is no longer just a view of a waveform.
In the screenshot, the fine shading inside the wave is giving you visual feedback of the changes in the sound dynamics!
I played with quite a few tracks before posting and this waveform seekbar style is highly accurate AND INFORMATIVE TOO!
I find this particularly good for tracing the location of the vocals in the mix; try it and you will see what I mean.
  • Last Edit: 02 April, 2013, 05:31:44 PM by derty2

Columns UI appearance
Reply #1997
I thought I would share one final variation of the Waveform Seebar with you guys . . .


Could you copy-paste your code to pastebin (or something equivalent) it would be easier  for us to try one of your variations... the last one looks promising

thanks in advance.
  • Last Edit: 02 April, 2013, 06:14:32 PM by Decalicatan_Decalicatan
Decalicatan Decalicatan

  • derty2
  • [*][*][*][*][*]
Columns UI appearance
Reply #1998
Waveform Seekbar code for Post #1997 :
Code: [Select]
texture tex : WAVEFORMDATA;
 
sampler sTex = sampler_state
{
  Texture = (tex);
  MipFilter = LINEAR;
  MinFilter = LINEAR;
  MagFilter = LINEAR;
  
   AddressU = Clamp;
};
 
struct VS_IN
{
  float2 pos : POSITION;
  float2 tc : TEXCOORD0;
};
 
struct PS_IN
{
  float4 pos : SV_POSITION;
  float2 tc : TEXCOORD0;
};
 
 
float4 backgroundColor : BACKGROUNDCOLOR;
float4 highlightColor  : HIGHLIGHTCOLOR;
float4 selectionColor  : SELECTIONCOLOR;
float4 textColor      : TEXTCOLOR;
float cursorPos        : CURSORPOSITION;
bool cursorVisible    : CURSORVISIBLE;
float seekPos          : SEEKPOSITION;
bool seeking          : SEEKING;
float4 replayGain      : REPLAYGAIN; // album gain, track gain, album peak, track peak
float2 viewportSize    : VIEWPORTSIZE;
bool horizontal        : ORIENTATION;
bool flipped          : FLIPPED;
bool shade_played      : SHADEPLAYED;
 
PS_IN VS( VS_IN input )
{
  PS_IN output = (PS_IN)0;
 
  float2 half_pixel = float2(1,-1) / viewportSize;
  output.pos = float4(input.pos - half_pixel, 0, 1);
 
  if (horizontal)
  {
     output.tc = float2((input.tc.x + 1.0) / 2.0, input.tc.y);
  }
  else
  {
     output.tc = float2((-input.tc.y + 1.0) / 2.0, input.tc.x);
  }
 
  if (flipped)
     output.tc.x = 1.0 - output.tc.x;
 
  return output;
}
 
float4 bar( float pos, float2 tc, float4 fg, float4 bg, float width, bool show )
{
  float dist = abs(pos - tc.x);
  float4 c = (show && dist < width)
     ? lerp(fg, bg, smoothstep(0, width, dist))
     : bg;
  return c;
}
 
 
float4 evaluate(float4 bg, float4 fg, float factor)
{
     return saturate(lerp(bg, fg, factor));
}
 
float4 played( float pos, float2 tc, float4 bg, float factor)
{
     float4 c = bg;
     if (pos > tc.x)
     {
             c = evaluate(backgroundColor, highlightColor, factor);
     }
     return c;
}
 
float RMSfactor( float2 tc, float border )
{
     float4 minmaxrms = tex1D(sTex, tc.x);
 
     minmaxrms.rgb -= .1 * minmaxrms.a;

     //- - - - - CHANGES THE OVERALL WAVE SIZE IN THE PANEL - - - - - - - -
     //minmaxrms.rgb *= 0.8 + minmaxrms.a;  <<<<<backup original
       minmaxrms.rgb *= 0.95 + minmaxrms.a;

     float belowWave = tc.y + border - minmaxrms.r;
     float aboveWave = tc.y - border - minmaxrms.g;
     float factorWave = min(abs(belowWave), abs(aboveWave));
     bool insideWave = (belowWave > 0 && aboveWave < 0);
    
     float diffRms = abs(tc.y) - border - minmaxrms.b;
     float factorRms = abs(diffRms);

     //- - - - - ENABLE/DISABLE THE INSIDE WAVE - - - - - - - -
     //  [TO DISABLE:  bool insideRms = 0;]  [TO ENABLE:  bool insideRms = diffRms < 0;  <<<<<backup original]     
       //bool insideRms = diffRms < 0;
       //bool insideRms = (belowWave > 0 && aboveWave < 0);
         bool insideRms = (diffRms > 0 && diffRms < 0);
    
     //- - - - - CHANGES LOOK OF INSIDE WAVE - - - - - - - -
     //float factor = insideRms ? ( 1 + 0.2 * saturate(factorRms / border / 2)): 1.0;  <<<<<backup original
       float factor = insideRms ? ( 6 * saturate(factorRms / border / 20)): 10.0;
 
     //- - - - - CHANGES LOOK OF OUTSIDE WAVE & PANEL BACKGROUND - - - - - - - -
     //factor = insideWave ? (factor * saturate(factorWave / border / 1)) : 0.0;  <<<<<backup original
       factor = insideWave ? (factorRms * 6.0 + 0.8 * saturate(factorWave / border / 0.5)) : 0.0;
 
     //return factor;    <<<<<<backup original
       return insideWave - saturate(factorWave);
}
 
float4 PS( PS_IN input ) : SV_Target
{
     float dx, dy;
     if (horizontal)
     {
             dx = 1/viewportSize.x;
             dy = 1/viewportSize.y;
     }
     else
     {
             dx = 1/viewportSize.y;
             dy = 1/viewportSize.x;
     }
     float seekWidth = 1 * dx;
     float positionWidth = 1 * dx;
 
     float factor = RMSfactor(input.tc, 2.5 * dy);
 
     float4 c0 = evaluate(backgroundColor, textColor, factor);
     if (shade_played)
             c0 = played(cursorPos, input.tc, c0, factor);
     c0 = bar(cursorPos, input.tc, selectionColor, c0, positionWidth, cursorVisible);
     c0 = bar(seekPos,  input.tc, selectionColor, c0, seekWidth,    seeking      );
     return c0;
}
 
technique10 Render10
{
  pass P0
  {
     SetGeometryShader( 0 );
     SetVertexShader( CompileShader( vs_4_0, VS() ) );
     SetPixelShader( CompileShader( ps_4_0, PS() ) );
  }
}
 
technique Render9
{
  pass
  {
     VertexShader = compile vs_2_0 VS();
     PixelShader = compile ps_2_0 PS();
  }
}

Columns UI appearance
Reply #1999
Waveform Seekbar code for Post #1997 :


Ty !
Decalicatan Decalicatan