XML - Slider Colors

[fetus ink]

I made a post about this a while back in Buzzchurch, and had some help reaching my goal. Since then, I've lost whatever code I used, and would like to try again.

Basically, in short, my eyes are terrible when looking at bright screens. They irritate easily especially when things I'm trying to focus on are too close in color to their background color. Its not impossible for me, its just easier with some boost.

In buzz, this happens when I'm looking at a machine full of the same color, looking at slider locations, etc. To make it easier for me, my idea was this:



If someone could help me insert a piece of code to do this, I would be thankful. I haven't had enough time to learn XML as I intended to do back then.

[strobotone]

that is actually a cool idea.
i will also implement it

i think you handled it via TRACK_PART / RepeatButton
by the way, i opened a thread in the devs department for this purpose : viewtopic.php?f=3&t=186

[magmavander]

Interesting idea. Maybe it would be useful to alternate two different colors ?

[mute]

This is extremely simple. I posted a how-to on it @ buzzchurch awhile back when you asked this question.. maybe you can find it cached on google.

[fetus ink]

Yeah I did actually find the cached page, but I couldn't find the cached 'page 2' of the posts which is where I think you posted it. If I tried to use the link on the cached page, but it of course just said the page didn't exist. Would you be willing to post the code you have the picture you posted? I don't necessarily need the numbers or other extra's you have, just simple background color - preferably gradient as you have done. I will work into learning more about this myself in due time, but with shortage of time, I just really want to get back to composing (and to have something easy on my eyes during that process)

I'll try to figure out any other tweaks from there.

[commadore65]

@fetus (weird intro to a sentence) I think you've mentioned your bad eyesight before, what would work better under the circumstances block colours or would gradients work?

This is purely out of interest. It'd be cool to make a visually accessible buzz theme one day.

[fetus ink]

@fetus (weird intro to a sentence) You've mentioned your bad eyesight before, what would work better under the circumstances block colours or would gradients work?

Gradients actually work perfectly. My eyes aren't terrible, unless I'm not wearing my contacts or glasses, in which case, I have to be 6 inches away from anything to see it clearly. The thing is, with such a strong prescription of lens, my eyes sometimes seem to lose focus when I'm looking at digital a screen, especially when there are buttons, sliders, and everything else that blend in with the surroundings. When I can see a nice bar of color in such a bland box, its easy for my eyes to follow that to the position of the slider rather than 'scanning the box'. In many cases I'll end up not even pulling the right slider because I lose focus on the glance from the parameter to the slider position and end up a line above or below.

I wish I were a robot. They don't have to worry about that shit. It would be great. And I wouldn't be afraid of anything. Except for maybe water. And brownouts ...

[commadore65]

I find this kind of stuff interesting, I have to do checks for websites at work, contrast ratios and stuff like that.

Glad to hear your eyes aren't terrible, however would be interesting to make a theme for someone who had terrible eyesight at some point. Why deny such a person the awesomeness of buzz? .

[commadore65]

I wish I were a robot. They don't have to worry about that shit. It would be great. And I wouldn't be afraid of anything. Except for maybe water. And brownouts ...

Most geeks (sorry if you don't think you fit in this bracket, I just assume most people on this forum are) would like to have some robotic elements.

@mute btw those sliders look lush. Just updated to the newest build of buzz you got some themes up? Had your paint ball one for quite a while

[strobotone]

@mute : looks like you are very familar with that stuff.

[Evelon]

This is extremely simple. I posted a how-to on it @ buzzchurch awhile back when you asked this question.. maybe you can find it cached on google.

That is tasty/brilliant if I may say so. Seeing the value/name in the slider like that, even if they all don't fit, along with the gradient is buzzilicious.

Oh, and do feel free to share the "extremely simple code".

[mute]

Well, what you see there isn't simple.. but just adding a gradient to the sliders on buzz's default paramwindow isn't difficult. If I get some time tomorrow afternoon I'll try to screw around and post something. Having the values there, even when they don't totally fit is nice.. when you're tweakin a param, its nice not to have to move your eyes to see the value. I had to disable all my parameter window stuff not long ago because of some changes to Buzz. I hope to fix em back up soon.

[vaisnava]

very useful for EQ curves

[strobotone]

take a look here : viewtopic.php?f=3&t=186

a slider is made up of parts. so the left part of the slider´s track has a gradient assigned to it instead of a solid color.

to override a standard slider you require a setup like this:

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border
Margin="0"
CornerRadius="3"
Height="12"
Grid.Row="1"
Background="#181818"
BorderBrush="#999999"
BorderThickness="1" />
<Track Grid.Row="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>

[mute]

very good sir.

[fetus ink]

Thanks for that bit of info Strobotone, thing is, I messed with that a bit, and ... well frankly I don't know what I'm doing. I haven't had a chance to learn even the basics of the WPF/XAML language, since right now I'm focusing more on C#. So what would I insert to make the left hand side of the slider track become a gradient color? Also, does that entire string of code (via your link) have to be added to ParameterWindow.xaml? And where, exactly? Or do I replace something else entirely?

I did notice if I pasted your code directly underneath an existing </Style> block, I would get this:



But after messing around with some of the values, I couldn't actually get any of the regular parameter window slider tracks to change color. I'll admit that I didn't spend a lot of time on it since it was 5am, I'll play a little tonight, but more detailed help would be great.


(Also, would it be possible to move this post to the Dev section? I hadn't even realized I posted it here until I was searching for it there and couldn't find it) -insert shame here-

[strobotone]

Just pasting the snippet does not do any good.
As you can see there are several Styles involved (Style="{StaticResource SliderDecreaseButtonStyle} ...)

XAML is made up of sections (Ressources (Styles,ControlTemplates... ,the actual elements that make up the screen and so on).

Check this thread: viewtopic.php?f=3&t=186&p=1620#p1620
Download the theme there and take a look into the ParameterWindow.xaml.
The XAMLs are still messy and have to be cleaned up because of unused code and redundancy.

As mentioned before the randomize slider is a standard Slider but the actual parameter slider is adressed as bgc:ParameterSlider.
I handled their Styles independently but could use the same style (using BasedOn=...)
They are wrapped in a Border. You can change the background of the border (the slider track in this case) as once or you can change the left and right part separately (depending on your style setup)

with this you control the separate part of the slider:

<Track Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderDecreaseButtonStyle}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderIncreaseButtonStyle}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>

This example uses different styles for each slider track part.

Keep messing around. you will figure things out eventually

[fetus ink]

Did anyone ever by chance get the "simple" clip of code that could work for this idea? I'm going to be dead honest, I have no clue about any of this xaml stuff. At one point a few years ago when I had more time on my hands, I remember playing around with it and never getting it to work (evidently failing to ever mention that), and here I am years later in the same boat. I tried a few things and just about ruined everything so I went back to the default and decided I'm probably better off not touching it. haha