Positioning The Slider Thumb (SOLVED)

[Shad12ow]

Hello there!
I am still on the process of making a preference menu. I am using the slider bar and here's the code.

Code: Select all

            bar pos (518, 165) value Preference("text speed") style "pref_slider"
            bar pos (518, 259) value Preference("auto-forward time") style "pref_slider"
            bar pos (518, 355) value Preference("music volume") style "pref_slider"
            bar pos (518, 455) value Preference("sound volume") style "pref_slider"

And here's the init code.

Code: Select all

init -2 python:
    style.pref_slider.left_bar = "GUI/Pref_Slider_Bar.png" 
    style.pref_slider.right_bar = "GUI/Pref_Slider_Bar.png"

    style.pref_slider.xmaximum = 200 
    style.pref_slider.ymaximum =25   

    style.pref_slider.thumb = "GUI/Pref_Slider.png"
    style.pref_slider.thumb_offset = 3.5 
    style.pref_slider.thumb_shadow = None

The code worked pretty well, but the thing is, the slider thumb sit in the bottom of the bar. I want it to b in the middle of the bar.
Like this -> -|-----
Is it possible to do this? Thank you for the help!

[xela]

Hello there!
I am still on the process of making a preference menu. I am using the slider bar and here's the code.

Code: Select all

            bar pos (518, 165) value Preference("text speed") style "pref_slider"
            bar pos (518, 259) value Preference("auto-forward time") style "pref_slider"
            bar pos (518, 355) value Preference("music volume") style "pref_slider"
            bar pos (518, 455) value Preference("sound volume") style "pref_slider"

And here's the init code.

Code: Select all

init -2 python:
    style.pref_slider.left_bar = "GUI/Pref_Slider_Bar.png" 
    style.pref_slider.right_bar = "GUI/Pref_Slider_Bar.png"

    style.pref_slider.xmaximum = 200 
    style.pref_slider.ymaximum =25   

    style.pref_slider.thumb = "GUI/Pref_Slider.png"
    style.pref_slider.thumb_offset = 3.5 
    style.pref_slider.thumb_shadow = None

The code worked pretty well, but the thing is, the slider thumb sit in the bottom of the bar. I want it to b in the middle of the bar.
Like this -> -|-----
Is it possible to do this? Thank you for the help!

Check empty canvas on your .png files. I don't know how to restyle this of the top of my head, but thumb should be in the middle...

[Shad12ow]

Sorry, didn't quite understand that. So do I have to make both the slider and the thumb .png files have empty area around them?

[xela]

Sorry, didn't quite understand that. So do I have to make both the slider and the thumb .png files have empty area around them?

No, I meant quite the opposite, to check that there is no empty space.

RenPy places thumb in the middle of the bar using your own styling, so the problem is either the .png images or this:

style.pref_slider.ymaximum =25

The only way I could replicate your problem is by setting ymaximum to 10. Then thumb turned out to be below the bar as you described...

[Shad12ow]

Nope, there is none. NO empty canvas at all.

[xela]

Nope, there is none. NO empty canvas at all.

Well, it was a longshot... so it is likely the 'second option', you need to either make the bar larger or the thumb smaller... I was only able to duplicate your error by making bar really thin. That created a picture that you described, thumb being below the bar instead of in the middle.

Otherwise I have no idea how to adjust bar's thumb location through properties... maybe somebody else can offer a solution. I will be designing interface for my own game soon so I am hanging around, learning from other people's mistakes and reading the whole Questions section

[Shad12ow]

Thank you for the tips. I'll try that and I'll post the result later.

[xela]

Thank you for the tips. I'll try that and I'll post the result later.

Oh hey! I completely forgot, while I was reading posts in Questions yesterday, issue that seemed similar to yours came up! They could not find a RenPy way of solving it but what a guy did, was actually ADDING empty space to .png pictures! And use that to center the thumb (or whatever the problem was, because pictures showing the problem is gone)

[SundownKid]

Oh hey! I completely forgot, while I was reading posts in Questions yesterday, issue that seemed similar to yours came up! They could not find a RenPy way of solving it but what a guy did, was actually ADDING empty space to .png pictures! And use that to center the thumb (or whatever the problem was, because pictures showing the problem is gone)

Ahem... that is actually completely unnecessary because this is determined by the "thumb offset". If you change the value of that, the thumb will be positioned differently.

Also, your thumb will be at the bottom of the bar if the bar is unscrollable, with not enough data in between to allow the player to scroll.

[xela]

Oh hey! I completely forgot, while I was reading posts in Questions yesterday, issue that seemed similar to yours came up! They could not find a RenPy way of solving it but what a guy did, was actually ADDING empty space to .png pictures! And use that to center the thumb (or whatever the problem was, because pictures showing the problem is gone)

"thumb offset". If you change the value of that, the thumb will be positioned differently.

Along the x-axis... the one that goes up/down is the y-axis. Can you suggest an offset value that would lift up the thumb (that would be a neat trick by the way or at the very least prove my lack of RenPy knowledge once again )?

thumb_offset --- The amount by which the thumb overlaps the bars, in pixels. To have the left and right bars continue unbroken, set this to half the width of the thumb. For compatibility's sake, we take the absolute value of this property.

Also, your thumb will be at the bottom of the bar if the bar is unscrollable, with not enough data in between to allow the player to scroll.

Well, they fixed their problem this way(whatever that was), I can see of no reason for them to lie about it so that solution just might work for Shad12ow as well, if all else fails...


==========================================
Edit:
I tracked down that post, like I've said, image showing an issue is gone but it 'smells' similar At least it is worth of trying if you want to get your menu just the way you want it... takes 1 minute with GIMP or Photoshop.

Link: http://lemmasoft.renai.us/forums/viewto ... =8&t=16443

[Shad12ow]

Okay, here's the report.
Actually, after reading xela's 3rd post here, I already planned to change the image just as xela's stated at the next post. And the next post really made me confident that it is the correct solution for this.
And guess what, it really did! I made some spaces around the bar and it worked like a charm!
Thanks guys for the help! I really appreciated it!

[xela]

Okay, here's the report.
Actually, after reading xela's 3rd post here, I already planned to change the image just as xela's stated at the next post. And the next post really made me confident that it is the correct solution for this.
And guess what, it really did! I made some spaces around the bar and it worked like a charm!
Thanks guys for the help! I really appreciated it!

You're welcome, I am gaining knowledge from this as well you know, so it's not like this is onesided